🥞 오늘 한 일

• 리액트 심화 강의
  • 1-19, 1-20 수강 완료
• 리액트 심화 개인과제
  • 로그인, 회원가입 화면 API 연결
  • Header Navigation Bar 컴포넌트 작성
  • 마이페이지 닉네임, 프로필 사진 변경 기능 구현
  • json-server 셋업
• 알고리즘 코드카타
  • week4 practice1,2 풀이 완료

리액트 심화 개인과제

오늘은 JWT 인증서버를 이용하여 로그인, 회원가입 기능을 제작하고 헤더를 제작한 다음 마이 페이지에서 닉네임 및 프로필 사진을 변경할 수 있는 기능을 제작했다. 또한 익일에 진행할 json-server를 미리 세팅했다.
강의 및 강의 자료가 잘 되어 있어 생각보다는 수월하게 진행할 수 있었다. 하지만 기능 자체보다 디테일적인 부분에서 고전했고, 성급하여 문제를 해결하기에 몰두하느라 하나하나 제대로 짚으며 문제를 해결하지 않았고, 문제를 기록하지 않았다. 반성해야할 부분이고, 내일은 결과보다 과정, 기록에 좀 더 신경을 써야겠다.

🍽️ 문제 해결

알고리즘 코드카타

이번 주에 주어진 3개의 문제는 전부 재귀 함수를 사용해야하는 조건이 있었다.

practice1

주어진 숫자 n에 대해 n번째 피보나치 수를 계산하시오.

function fibonacci(n) {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

피보나치 수열의 0과 1은 그대로 0과 1이기에, 해당 숫자를 return한다.
피보나치 수열은 현재 숫자에서 1을 뺀 숫자, 2를 뺀 숫자의 피보나치 수열을 더한 값이기 때문에, 재귀함수로 해당 숫자들의 피보나치 수를 계산한다.
두 숫자를 더해서 정답을 구해준다.

practice2

주어진 숫자 n에 대해 n의 팩토리얼을 계산하시오.

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

0!은 1이기 때문에 n이 0일 경우 1을 return해준다.
0이 아닐 경우 현재 함수를 재귀적으로 반복하여 n부터 1까지 곱해주고 해당 값을 return한다.

practice3

주어진 문자열을 뒤집으시오.

function reverseString(str) {
  if (str.length === 0) return "";
  if (str.length === 1) return str;
  const arr = [...str];
  const el = arr.splice(0, 1);
  return reverseString(arr) + el;
}

만약 str이 비어있다면 빈 값을 바로 return한다.
str에 문자가 1개가 남았을 경우 굳이 재귀함수를 실행할 필요가 없으므로 현재 str을 바로 return한다.
str은 처음에 문자열이기에 배열로 만들어준다. 이후의 str은 배열이지만 똑같이 새로운 배열로 넣어준다.
arr에서 첫번째 값을 가져오고, 기존 arr을 변경한다.
첫번째 값이 삭제된 arr을 매개변수로 재귀함수를 실행한다. 그 뒤에 아까 잘라낸 arr의 첫번째 값을 붙인다.
이 경우 계속해서 첫번째 값이 뒤로 붙어 length가 0이 될 때까지 실행된다. 그러면 기존 str 문자가 뒤집어진 문자를 return한다.

🍪 배운 것

리액트 심화 강의

• 인증인가
  • 개념
  • 쿠키
  • 세션
  • 토큰
  • 코드예시를 통한 실습

🍴 돌아보기

• 강의 듣고 과제 하느라 정신 없었던 날... 정신이 없어도 차근차근 나아가고, 기록하자!

🍳 내일 할 일

• 리액트 심화 개인과제
  • 지출 데이터에 createdBy 추가, json-server 셋업, 지출 CRUD 리팩토링
• 리액트 심화 강의 수강