개발 일지✨

리액트 1주차 과제

기능 인풋에 입력받은 값을 추가하기 버튼을 누르면 왼쪽 TIL 리스트에 추가된다! 구현 제출용으로 App.js 하나에 보이도록 인라인으로 작성하였다. useRef 를 이용해서 선택하고 싶은 DOM에 ref 값을 설정 해서 해당 DOM 이 가리키는 .current 값을 받아와서 추가해줄 수 있도록 했다. 입력받은 값을 useState를 이용해서 배열에 넣어주어 상태관리를 해주었고, 이 배열 속에 있는 값을 map을 돌면서 화면에 붙여주도록 했다. 이 때 map을 사용할 경우 고유한 key 값을 주도록 메시지가 뜬다. 리액트 엘리먼트들은 누가 누구인지 알게 해주는 암묵적인 키 값을 가지고 있다. (기본적으로 랜덤으로 생성) 가상돔에서는 무언가가 변경되면 변경된 애들만 변경하려고 한다. 이 때 기본적으로 랜덤..

리액트 심화 1주차

렌더링 엔진 동작 브라우저가 화면을 그리는 렌더링 엔진 동작 과정 파싱 단계: DOM 트리와 CSSOM 트리를 만든다. 렌더 트리 단계: DOM과 CSSOM을 묶어서 렌더 트리를 만든다. 레이아웃 단계: 렌더 트리에서 각 노드가 어디에 어떻게 그려져야 하는지 모양을 계산한다. 페인트 단계: 계산한대로 화면에 엘리먼트들을 배치한다. 성능 최적화 성능 최적화는 기본적으로 적은 비용과 빠른 작업 속도가 중요하다. DOM을 조작할 때 비용이 드므로 성능을 올리고 싶다면 렌더링 엔진 동작 과정에서 레이아웃과 페인트 단계에서 드는 연산을 줄이는 것이 중요하다. 연산비용을 줄이기 위해서는 변경된 내용이 생길 때 마다 렌더 트리 전체를 뒤지기 보다는 변경된 내용만 연산을 하도록 작업한다. (더티 비트 시스템) *더티 ..

내일배움단 프로젝트 챌린지 15일차 개발일지

코딩개발일지 시작의 한마디 1/20 (목) 오늘이 마지막이다! 개발 업무 내용 1. 프로젝트 최종 점검 최근 검색어 저장은 담당하시던 분이 못하겠다고 하셔서 기능을 빼게 되었다. 크롤링 연결 확인 및 워드클라우드 이미지 가져오기 확인완료 결과페이지/기록페이지 디자인 완료 서버 배포는 안하기로 했다. 2. 발표회 리허설 3. 마지막 튜터님 / 팀들과 단체 사진! 업무 중 이슈/고민/해결내용 오늘이 발표회 전날이어서 프로젝트를 잘 마무리 할 수 있을 까 걱정했는데 다행히도 잘 마무리해서 완성했다. 기능 문제점 동시접속 시 인스타 하나의 계정으로 사용하기 때문에 크롤링이 안된다. 크롤링 시 인스타에 로그인 하게 되기 때문에 자주 접속 시 인스타에서 차단되어 계정 해제까지 시간이 걸린다. 저장소에서 pull 받..

내일배움단 프로젝트 챌린지 14일차 개발일지

코딩개발일지 시작의 한마디 1/19 (수) 이제 거의 마무리 단계이다...! 개발 업무 내용 남은 구현 기능들 확인하고 정리하기 메인 페이지 검색어 저장 시 [유저ID - 검색단어 - 입력받은 시간] 저장하기 검색 시 결과 보러가기 alert 내리기 로그인 시 화면 - 로그아웃 버튼 추가 결과페이지 로그인/로그아웃 여부에 따라 페이지 다르게 렌더링하기 로그인 시 - 로그아웃버튼, 나의 키워드 페이지 이동버튼 로그아웃 상태 - 로그인 버튼 보여주기 디자인 로그인/회원가입 회원가입 후 로그인이 바로 안되는 문제 (Flask를 다시 구동해야 작동함) (해결) 회원가입 시 로그인 DB에 유저정보를 추가하는 코드를 넣어 해결 나의 키워드 페이지 해당 페이지에서 홈버튼을 눌렀을 때 로그인 상태의 홈으로 돌아가기 최..

내일배움단 프로젝트 챌린지 13일차 개발일지

코딩개발일지 시작의 한마디 1/18(화) 이제 마지막 발표까지 얼마 남지 않았다..! 개발 업무 내용 1. 로그인 JWT 토큰 SECRET KEY 설정 및 저장 2. 데코레이터 구현 3. 클라이언트 쿠키 저장 업무 중 이슈/고민/해결내용 To-do List 업무 기한 ■ 클라이언트 쿠키 저장 코드 리뷰 ~

내일배움단 프로젝트 챌린지 12일차 개발일지

코딩개발일지 시작의 한마디 1/17(월) 개발 업무 내용 1. URL명 변경 REST API URL 규칙에 의해서 페이지에 대한 URL은 /login-page 이런식으로 페이지라고 명시해주고, 기능에 대한 URL은 /login 이런식으로 기능에 대한 루트로 명시해준다. https://velog.io/@pjh612/REST-API-URI-%EA%B7%9C%EC%B9%99 2. 페이지 이동 추가 3. 최근 검색어 테스트 업무 중 이슈/고민/해결내용 To-do List 업무 기한 □ ~

내일배움단 프로젝트 챌린지 11일차 개발일지

코딩개발일지 시작의 한마디 1/16 (일) 토큰의 세계는 어렵다.. 전체 코드가 나와있는게 아니다보니 이해하기가 어렵다..ㅜㅜ 개발 업무 내용 1. 로그인 토큰 - 백엔드에서는 프론트로 토큰을 보내주는 것까지는 가능하다고 했다. - 로그인 토큰을 쿠키에 저장하는 방식과 요청하면서 서버에 같이 보내는 방법을 아직 더 알아봐야 한다. 2. 검색어 저장 입력받은 검색어를 DB에 저장하는데 구현됐다. 3. 기능 줄이기 여부 화요일까지 해보고 시간이 안된다면 기능들을 빼기로 했다. → 관심단어 등록 페이지 업무 중 이슈/고민/해결내용 아직 페이지 디자인이 완성 안된것도 있고, 검색어 저장은 이제야 하나 구현됐다.. 구상했던 기능까지 다 구현할 수 있을까 걱정이다. To-do List 업무 기한 ■ 토큰 저장 ~ ..

내일배움단 프로젝트 챌린지 10일차 개발일지

코딩개발일지 시작의 한마디 1/15 (토) 토큰원리와 방식에 대해서는 공부했는데... 이걸 코드로 짜려면 어떤 언어로 어떻게 짜야하는지 아직도 모르겠다.....ㅜㅜ 개발 업무 내용 1. 스크랩 페이지 기능 제거 - 스크랩페이지를 담당하는 팀원이 검색어 저장하는 기능을 함께 담당하고 있는데, 검색어 저장도 안되고 있다보니 시간상 스크랩 기능은 빼기로 결정했다. 2. 서버로 데이터 전송 연결 저번시간까지는 서버와 연결까지만 확인해서 어떤 아이디 비밀번호 값을 입력하던 로그인이 됐었다. 이번에는 입력받은 데이터값을 서버에서 유저정보 유무나 회원가입 확인을 해주는 기능과 같이 연결될 수 있도록 구현했다. 마지막으로 DB에 저장되어서 회원가입한 아이디/비밀번호로 로그인이 진행되는지 확인해봐야 할 것 같다. 3. ..

내일배움단 프로젝트 챌린지 9일차 개발일지

코딩개발일지 시작의 한마디 1/14 (금) 오늘 0% 에서 돌아오지 않던 배터리가 갑자기 완충되면서 고쳐졌다...!!!! 컴퓨터 사야하나 걱정했는데 정말 다행이다ㅜㅜ 개발 업무 내용 1. 로그인 토큰 점차적으로 구현해나갈 순서 원래 하던 DB에 데이터를 넘겨주고 확인하는 방식 구현하기 JWT 토큰을 활용한 로그인 기능 만들기 (인증) Cookie에 토큰 저장하기 원래는 쿠키에 저장하면 보안성에 취약하지만 처음 구현해보는 것이므로 쿠키부터 해보자! [프론트] Cookie를 'header'에 실어서 서버에 전송하기 토큰 payload에 정보를 담아서 보냄 만료시간은 주로 30분~1시간 / 2시간 Decorator (인가) 비밀번호 암호화 - bcrypt 2. 검색어 저장 로컬 DB와 연동이 안돼서 구현을 못..

내일배움단 프로젝트 챌린지 8일차 개발일지

코딩개발일지 시작의 한마디 1/13 (목) 노트북 방전된지 1일째,,,, 언제 나갈지 몰라서 켜기 무섭다...컴퓨터나 노트북 하나 장만해야할것 같다... 개발 업무 내용 전체 프로젝트 진행내용 확인 프론트 로그인/회원가입 페이지 디자인 데이터 - 서버와 연결작업 (진행중) 메인 로그인/로그아웃 페이지 디자인 수정 (진행중) 메인 로그아웃 페이지 기능 (예정) 검색어 DB에서 순위값 불러오기 검색어 창에 입력한 값으로 페이지 이동 검색어 DB에서 최근값 3개 불러오기 메인 로그인 페이지 (예정) 메인 로그아웃 페이지 기능들 아이디 불러오기 검색결과 페이지 구조 디자인 (진행중) 로그인 여부에 따라 저장기록 버튼 보이기/숨기기 (예정) [전체] 입력받은 데이터 서버로 넘겨주는 작업 (진행중) 백엔드 메인 해..

내일배움단 프로젝트 챌린지 7일차 개발일지

코딩개발일지 시작의 한마디 1/12(수) 오늘 밖에서 공부하다가 들어왔는데 날씨가 너무 추운 탓인지 집에 오니까 노트북이 방전되어 있었다... 전원연결하고 긴급소생 해봤는데 전원연결하면 켜지긴하는데 0%에서 그 이상 충전이 되지않는다 드디어 노트북이 다했나보다..ㅜㅜ 개발 업무 내용 1. 로그인/회원가입 시 토큰 발급기능 (서버) 로그인/회원가입 구현 할 때 그냥 아이디/비밀번호만 저장하는 식으로 구현하고 있었는데, 알고보니 토큰을 발급해야 했다.....그래서 튜터님께서 토큰발급과 비밀번호 암호화에 대한 키워드들을 던져주셨다! [KEYWORDS] jwt 토큰(=허가증/출입증) 발급 bcrypt 암호화 인증/인가 python decorator @login.required 이런 형태로, 해당 경로를 거친 코..

내일배움단 프로젝트 챌린지 6일차 개발일지

코딩개발일지 시작의 한마디 1/11 (수) 디자인 짜고 내일은 서버로 데이터 넘겨주기까지 구현해보자 개발 업무 내용 오늘은 튜터님과의 시간이 있었는데 다들 진행중이라서 질문이 없다고 해서 넘어가려고 했으나 협업을 잘 하고 있나 물어보자,, 아직도 git 사용에 익숙하지 않은 팀원이 있어서 튜터님께서 설명해주셨다. 다른 분이 또 git 연동이 안되어있으셔서 설명해주느라 오늘은 git 연동하는데까지 시간을 너무 많이 잡아먹었다😂 그래도 이제 깃 연동후에 올리신 파일들을 보니 다른 페이지의 디자인과 레이아웃까지 거의 잡혔고, 서버로 넘겨주는 것까지 완벽하게 구현해내면 될 것 같다! 그리고 추가적으로 시간이 된다면 추가 기능까지 추가하면 좋을 것 같다. 업무 중 이슈/고민/해결내용 매번 협업방식이나 프로젝트의 ..