Jieunny의 블로그

𝟭. 재귀 Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. A. 주어진 문제를 비슷한 구조의 작은 문제로 나눌 수 있는 경우와 중첩된 반복문이 많거나 반복문의 반복 횟수를 예측하기 어려운 경우 입니다. 대표적인 예시로는 피보나치 수열, 팩토리얼 구하기 등이 있습니다. 피보나치 수열로 예를 들어보자면, 피보나치 수열의 n번째 수는 n-2번째 수와 n-1번째 수를 합한 값이므로 몇 번째 값을 구하든지 동일한 구조로 구할 수 있으므로 작은 문제로 나누어 구현할 수 있습니다. 𝟮. UI/UX Q. UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요. A. UI는 사람들이 컴퓨터와 상호작용하는 시스템을 의미하며, 키보드, 마우스 등 물리적인 요소도 UI로 볼 수 있으나, 프론트엔드 개..

➰ 85일차 투두리스트 배포하려고 이것저것 만지다가 망친 사람 나... npm run start 돌리면 어제까지만해도 잘 되던게 hooks invalid 에러 뜨면서 안돌아가기 시작했다ㅠㅠ 고치려고 이것저것 만져봤는데도 안되서 새 리액트 프로젝트 하나 만들어서 하나씩 복붙 하면서 어디가 에러인지 찾기 시작.. 보니까 redux 라이브러리의 Provider가 에러를 발생시키는 것 같은데..새 프로젝트에서 하니까 잘만 돌아갔다.. 깃허브 브랜치를 잘못 만져서 그런가ㅠㅠ 새 플젝에 다시 해보는데, 라우터 쓰는 부분에서도 에러가 많이 나서 그거 고치는데도 시간이 좀 걸렸다.. 아니 처음 만들때는 다 되던게 왜 안되는건지 ㅎㅎㅎㅎㅎ짜증난다 암튼..복구 완.. 다음에 프로젝트를 깃허브에 올리거나 배포할때는 복사본을..

📣 스타일 컴포넌트 & 리덕스 & 리액트 라우터를 활용한 투두 리스트 구현하기 𝟭. 파일 구조 src ㄴ components (컴포넌트 파일) ㄴ TodoList.js : TodoItem을 모아 논 TotoList ㄴ TodoItem.js : 하나의 TodoItem ㄴ TodoInsert.js : Todo 입력하는 칸 ㄴ MemoList.js : MemoItem을 모아 논 MemoList ㄴ MemoItem.js : 하나의 MemoItem ㄴ MemoInsert.js : Memo 입력하는 칸 ㄴ pages ( 라우터를 통해 이동할 페이지) ㄴ TodoTemplate.js : 처음 페이지 열었을 때 뜨는 화면(Menu 토글, 햄스터 보기 창도 여기서 띄운다) ㄴ MemoTemplate.js : Header..

➰ 84일차 오전시간에 과제 빨리 끝내고 코테문제도 풀고, 다음주 면접 준비도 미리 했다! 오랜만에 코테 문제 푸니까 머리도 안돌아가고..문제는 너엉어무 어렵고🥹 확실히 레벨2로 올라오니까 알고있는 개념인데 구현하기 어려운 문제들이 많다 슬퍼.. 면접 질문 미리 준비하면서 이론을 한번씩 더 짚고 가는 시간이 되는 것 같아서 되게 좋은 시간인 것 같다. 뭐 나중에 진짜 취준할때는 그냥 달달 외워야겠지만..ㅎ 내일은 투두리스트 만드는 해커톤 하는 날인데 조금씩 하다보니 미리 다 해버려서..뭘 할지 고민중이다. 아마 다음주 타입스크립트 스터디 강의 들었던거 복습해야하지않을까 싶은데 제네릭, 데코레이터 들어가니까 강의를 들어도 뭔지 모르겠고 하나하나 구글링해서 이것저것 찾아봐야 조금 이해가 되는 것 같다. 혹시..

📣 깃허브 로그인 인증 사용해서 로그인 기능 구현하기 - client만 구현 𝟭. client 파일 구조 src ㄴ pages ㄴ components ㄴ Loading.js : 로딩 화면 컴포넌트 ㄴ UserInfo.js : 로그인 성공 하면 나타나는 유저 정보 컴포넌트 ㄴ Login.js : Authorization code 받아오기 - Github에 요청을 보내서 Authorization code를 받아온다. ㄴ MyPage.js : 로컬 서버를 통해 Github 리소스 서버에 유저 정보 요청, 로그아웃 - Authorization code를 받아왔다면 App.js의 getAccessToken 함수가 실행된다. - 이 함수를 통해 서버의 /callback 엔드포인트로 요청을 보내고, 응답으로 받아온 ..

📣 Cookie와 Token을 사용해서 로그인 기능 구현하기 - Client 부분은 Cookie 게시물과 같으므로 Server 부분만 설명. 𝟭. 서버 파일 구조 controllers ㄴ helper ㄴ tokenFunctions.js : 토큰 생성, 토큰 검증 함수 구현 ㄴ users ㄴ login.js : server의 login controller 구현 1. request로 받은 id, password와 일치하는 정보가 DB에 있는지 확인 2. 없으면 요청을 거절, 있으면 필요한 데이터를 담은 두 종류의 토큰 생성(access, refresh) 3. request로 받은 checkedLoginKeep 여부 확인 4. true인 경우 accessToken, refreshToken 둘 다 쿠키로 설정..