07.31

• 기존 날씨 프로젝트 with React API 만료로 인한 문제 발생
  • NextJS + TypeScript 공부할 겸 마이그레이션 진행
  • 레이아웃, 기능 전부 수정

07.30

• 포트폴리오 사이트 css 수정
  • 모바일 반응형 추가 진행중

07.28

• JS 코테 준비
  • 프로그래머스 Lv.2 풀이 시작
• HTML5 Canvas 선, 곡선 그리기
  • window.onload 함수 안에 코드 선언하기 -> 렌더링 딜레이 시 발생하는 오류 막기 위함
  • getContext()를 통해 원하는 차원(ex. 2d) 선택하기
  • beginPath()로 먼저 상태를 초기화해주고, 마지막은 항상 stroke()로 끝나야 한다.(stroke(): 실제로 선을 그려주는 함수)

07.27

• chatGPT-L 최적화 고민
• 포트폴리오 사이트 만들기 with Framer Motion, Tailwind CSS, React, Next.js 완강

07.26

• 백준 투 포인터 추천 문제
  • 회전 초밥, 같이 눈사람 만들래?, 합이 0인 네 정수

07.25

• 포트폴리오 사이트 만들면서 Framer Motion, Tailwind CSS, React, Next.js 공부
• 백준 투 포인터 추천 문제
  • 두 용액, 겹치는 건 싫어

    맥북 ram이 8gb라 그런지 꽤나 버벅인다..😭

07.24

• 프로그래머스 Lv.3 - 이중우선순위큐
  • heap은 근본이 리스트이기 때문에, 리스트에서 사용가능한 함수는 모두 사용할 수 있다.
    ex. max(), min() ...

07.23

• chatGPT-L 구현 진행
  • Firebase realtime database 연동 확인
    • gpt와의 대화 기록을 post 요청을 통해 유저와 gpt 별로 나눠서 저장되는지 확인했다.
    • 자잘한 버그들을 수정했다.
      • 카카오 로그인 성공 시 리다이렉트 페이지에서 '/'로 넘어가지 않는 현상
      • 스피너 화면에서 넘어가지 않는 현상(무한 루프)
• 프로그래머스 Lv. 3 - 디스크 컨트롤러 풀이 (ref)

생각을 코드로 옮기는 능력을 기르자.

07.22

• 2019 KAKAO BLIND RECRUITMENT 아이디어 및 풀이 업로드
• chatGPT-L 구현 진행
  • 로그아웃 기능 추가
    • 로그아웃 클릭 시 모달 팝업
  • @reduxjs/toolkit 적용
    • 기존에 redux로 적용하려고 했다가, 더 간편하고 직관적인 reduxjs/toolkit을 적용했다.
    • 유저 페이지의 유저 이름과 로그인 Provider, 이메일주소, 프로필 사진 표현을 위해 적용했다.

07.21

• 코테 스터디 정기 카카오 문제 모의 테스트 10:40am ~ 15:40pm
  • 2019 KAKAO BLIND RECRUITMENT

07.19

• NextJS 시작하기 feat.nomadcoders 완강
• chatGPT-L 프로젝트 구현 중 문제 발생
  • 프로젝트의 구조가 커지고 복잡해지면서, 컴포넌트 렌더링, 리렌더링 시 약간의 버벅임이 발생했다.
  • 최적화의 필요성을 느꼈다. → 불필요한 리렌더링은 막아야 한다. 이를 만족하기 위해 useMemo와 useCallback에 대해서 다시 찾아보았다.
• useMemo와 useCallback의 차이점
  • useMemo : 메모이제이션된 값을 반환하는 리액트 훅
  • useCallback: 메모이제이션된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리액트 훅

    이 둘을 잘 사용하면 어플리케이션을 최적화할 수 있다. 그렇다고 모든 상황에서 사용하게 된다면, 역효과가 발생할 수 있다(최적화는 그에 상응하는 대가를 필요로 한다.)
    따라서, 적절한 상황에서만 사용해야 한다.

  • useMemo와 useCallback을 사용하지 말아야 할 경우는?
    • 연산이 복잡하지 않은 함수에 useCallback을 사용하는 것은 메모리 낭비이므로, 간단한 일반 함수들에는 useCallback을 사용하지 않는게 좋다.
    • 단순히 함수 내부에서 setState나 dispatch 함수등을 호출하는 경우에는 useCallback을 사용하지 않는게 좋다. 이미 리액트 자체에서 useState 와 useDispatch에 대한 성능 최적화가 보장되기 때문에, 렌더링이 새로 되어도 해당 함수는 재생성되지 않는다.
    • useCallback, useMemo의 의존성 배열에 완전히 새로운 객체나 배열을 전달해서는 안된다. 만약 useCallback 내부 함수나 useMemo 내부 값에서 사용하지 않는 props를 전달한다면 메모이제이션을 하는데 소용이 없다.
    • 의도적으로 매번 새로운 함수나 값을 계산해야 한다면 굳이 useCallback이나 useMemo를 사용할 필요가 없다.
    • DOM에서 다른 컴포넌트를 렌더링하지 않는 컴포넌트 (html 태그만 렌더링하는 컴포넌트)에서는 useMemo를 사용할 필요가 없다.
    • div, span, a, img와 같이 호스트 환경 (브라우저 / 모바일)에 속하는 플랫폰 컴포넌트에 전달하는 항목에는 useMemo와 useCallback을 사용할 필요가 없다. 리액트는 해당 컴포넌트들에 함수 참조가 변경되었는지 신경쓰지 않기 때문이다. (ref는 제외)
  • useMemo와 useCallback을 사용해야 하는 경우는?
    • 연산 혹은 처리량이 매우 많아서 렌더링의 문제가 되는 경우, 리렌더시 비용 절감을 위해서 useMemo를 사용하자
    • 자식 컴포넌트에서 useEffect가 반복적으로 트리거 되거나, 무한 루프에 빠질 위험이 있을 때 useMemo, useCallback을 사용하자
    • 자식 컴포넌트에 함수를 props로 넘길 때, 불필요한 렌더링이 일어난다고 판단된다면 useCallback으로 함수 동등성을 유지해주자.
    • 함수 자체가 매우 복잡하거나, 다시 계산하는데 비용이 많이 드는 경우에 useCallback을 사용하자.
    • 사용자의 입력값이 map 혹은 filter 등을 사용하여 이후 렌더링에서도 동일한 참조를 사용할 가능성이 높을 경우 useMemo를 사용해서 메모이제이션을 적용하자
    • 리액트 상위 트리에서, 부모가 리렌더링 될 때 자식 컴포넌트까지의 렌더링 전파를 막고 싶을 때 useMemo를 사용하자. 자식 컴포넌트가 useMemo로 메모이제이션 컴포넌트일 경우, 메모이제이션된 props를 사용해 필요한 부분만 리렌더링 할 수 있다.
    • ref 함수를 부수작용(side effect)와 함께 전달하거나, ref로 wrapper 함수를 만들 때 useMemo를 사용하자. 리액트는 ref 함수가 변경될 때 마다 과거 값을 null로 호출하고 새로운 함수를 호출하기 때문인데, 이 경우 ref 함수의 이벤트 리스터가 변경되는 등의 불필요한 작업이 일어날 수 있다.

07.18

• NextJS 시작하기 feat.nomadcoders
• 백준 추천 문제집 [투 포인터]
• 파이썬 코테 스터디

07.17

이른 기상

• CSS Typograhpy 강의 & 실습
• chatGPT-L 프로젝트 구현 진행
  • 유저 페이지 디자인 & 캘린더 모듈 추가

07.16

정기적 기상 실패 🥺

• 프로그래머스 Lv.3 여행 경로, 단어 변환, 네트워크 풀이
• chatGPT-L 프로젝트 구현 진행
  • 캐릭터 소개 Carousel 구현 완료 (연관 기능은 추가 예정)
    • 애니메이션 추가 완료(framer-motion)
    • bug: Fixed (by adding position:relative)
    • 자세한 버그 내용과 수정 기록은 Notion에 정리함
  • 비회원 로그인 기능 구현 완료
    • 처음 기획에서는 비회원을 표시하는 어떤 인덱스를 하나 부여해서 localStorage에 쿠키로 저장하려고 했다. 그러나 생각해보니 쿠키를 만약 삭제하면 그 동안의 유저의 대화기록이 모두 날아간다.
    • 또한, localStorage에 저장하는게 맞나? 하는 생각을 계속했었다.
    • 찾아보니, Firebase의 로그인 옵션에 '익명 로그인'이 존재했다. 이를 이용해서, 따로 localStorage에 쿠키를 사용하지 않고도 비회원으로 로그인할 수 있게 구현했다.
• Chakra UI에서 <Flex>와 <Box display='flex'/>의 차이점
  • justify-content와 align-items 선언 방식의 차이가 존재한다.
    <Flex>에서는 align, justify로 속성을 넘기지만, <Box>에서는 일반적인 css와 같이, justifyContent, alignItems로 속성을 넘겨줘야 한다.
    (아니면 제대로 동작하지 않음)

    하나하나 기능을 완성해가는게 🍯잼. framer-motion을 알고는 있었는데 써본 적은 오늘이 처음이다. animation은 왜 framer-motion인지 알게됐다.

07.15

🍳 정기적 기상 D-1 am 8:00(변경)

• 영어 공부
  • 기초 영어 어휘 carry, leave
• 독서 (feat. 왜 일하는가)
  • 스스로를 태우는 사람이 되라. 즉, 자신이 하고 있는 일을 좋아하는 동시에, 자신이 왜 그 일을 하는지 명백한 목표를 가진 자연성 인간이 되어라.
  • 마음으로 간절히 바라면, 그 일은 반드시 이루어진다. 간절한 생각이 행동으로 나타나고 행동이 다시 생각을 간절하게 만든다.
    • 막연히 '이렇게 되고 싶다'라는 생각을 하라는게 아니다.
    • '반드시 이렇게 하고 싶다', '이렇게 되지 않으면 내일은 없다', '그 소망을 이루기 위해 당장 이렇게 하겠다'라는 구체적인 목표와 행동이 수반되어야 한다.
• chatGPT-L 프로젝트 구현 진행
  • 푸시 알림 POST 요청 시도
    • FCM API의 기존 버전이 Deprecated되어, 업데이트된 버전으로 시도를 해봤다.
    • FCM 토큰이 필요한데 Firebase Admin SDK를 사용하지 않으면 FCM 토큰을 얻을 수가 없다. 또한, Admin SDK는 Server Side에서 코드를 작성해야 하는데, 현재 프로젝트 구조상 적용하기가 어렵다.
    • 구현해야 할 기능들이 많아 추후에 다시 살펴볼 예정.
  • 캐릭터 소개 Carousel 구현 시도
    • react-responsive-carousel이라는 라이브러리를 발견해서 이를 적용해서 구현을 시도했다.
    • attribute가 너무 많아서, 전체적인 틀만 잡았다. Document를 잘 읽어보고 구현을 마무리 지어야겠다.

07.14

🍳 정기적 기상 시작 D-0 am 7:30

• 영어 공부
  • 완료시제
• 독서 (feat. 왜 일하는가)
  • 내가 정녕 하고 싶은 것이 무엇이고, 되고 싶은 것이 무엇인지 끊임없이 스스로에게 물어보자.
  • 마음가짐을 바꿔야 한다. 번뇌는 마음으로 부터 발생한다.
  • 일을 사랑해라.
• chatGPT-L 프로젝트 구현 진행
  • 웹 푸시 알림 기능
    • web-push 라이브러리와 FCM으로 구현가능하다.
      • FCM은 Firebase Cloud Messaging의 약자로 몇 줄의 코드만으로 구현이 가능해서 이걸로 구현했다. 그러나 피그마 레이아웃에는 맞추지 못한다는 단점이 있다. 웹 접속 시 바로 권한 요청이 뜨기 때문..
      • web-push는 웹 접속 시 바로 권한 요청이 뜨지 않게도 할 수 있다. 특정 버튼을 눌렀을 때 권한 요청을 할 수 있는데, 이렇게 되면 이중으로 유저가 버튼을 클릭해야 하는데, 사용성 측면에서 좋을까? 고민이 된다. 또한, 테마가 따로 커스텀이 안된다고 한다. 그리고 이미 로그인 기능도 Firebase의 Authentication을 사용하고 있어서, 이왕이면 FCM을 사용하는게 좋지 않을까 생각한다.

07.13

• chatGPT-L 프로젝트 구현 진행
  • 컴포넌트
    • 대화 상대 변경 모달 추가
    • 버튼 연동
• chatGPT-L 회의 진행 pm 10:30

07.12

• chatGPT-L 프로젝트 구현 진행
  • 컴포넌트
    • 대화 상대 변경 모달
    • 웹 푸시 알림 모달
  • 오류 발생
    • (해결) GoogleAuthProvider - .env에 프로젝트 config 설정 잘못함 ㅎ..

07.11

• 삼성 dx/ds 코테
• 파이썬 코테 스터디

나름 그래도 실력이 많이 늘었다고 생각했는데 왜 이렇게 오래 걸릴까 .. 자괴감이 ..

07.10

• 프로그래머스 Lv.3 - 자물쇠와 열쇠 풀이
  • ✅ 2차원 리스트에서 회전하는 방법.. 잘 알아두자.
• CSS Media Query 강의 & 실습
  • 그동안 헷갈렸던 min-width, max-width 개념 잡았다.
    • min-width는 특정 크기 이상일 때 적용.
      • ex. min-width: 568px : 568px이상 부터는 ~ 적용
    • max-width는 특정 크기 이하 전 까지 적용
      • ex. min-width: 768px : 768px이하 까지는 ~ 적용
• 파이썬 과외 -> 당일 취소..

07.09

• [FE 채용 과제로 배우는 자바스크립트] 사전 과제 테스트 & 해설 강의
• 프로그래머스 Lv.3 - 입국심사 풀이
• chatGPT-L 프로젝트 NextJS 마이그레이션 중단
  • 기간 내 NextJS 공부와 적용 병행의 어려움
  • NextJS의 적용 필요성 고민(SEO 최적화가 필요한가?)
  • 일단, 기존 React부터 제대로 작업하자.

07.08

• 프로그래머스 Lv.3 - 가장 먼 노드 풀이

~강릉 여행 Day 6 끝.

07.07

• Udemy-Next.js 강의 [NextJS 요약]
• chatGPT-L 프로젝트 NextJS 마이그레이션 진행
  • 로그인, 대화 시작 페이지까지 구현 (완)
• 프로그래머스 Lv.3 - 순위 풀이

07.06

• N과 M 시리즈 - 1 ~ 12 (완)
• [Udemy] React 완벽가이드 - 리액트 앱 배포하기

07.05

• chatGPT-L 프로젝트 진행
  • 로그인 검증 기능 구현 (완)
  • 로그인 상태 유지 구현 (완)
    • 새로고침, 웹 페이지 이동, 웹 페이지 종료 시 유지하도록

07.04

• 파이썬 코테 스터디
• 프로그래머스 Lv.3 - 징검다리 건너기

07.03

• [Udemy] React 완벽가이드 - Redux
  • Redux는 React Context의 대안이며, 상태 관리 라이브러리이다.
  • React Context는 소형, 중형 어플리케이션에 적합하며, 대형 어플리케이션의 경우 몇가지 단점이 발생할 수 있다.
  • React에서 기본 redux를 사용할 수 있지만, redux toolkit을 사용하면 더 간결한 코드를 작성할 수 있다.(react-redux, @reduxjs/toolkit을 설치해야 한다.)
  • 현재 진행중인 프로젝트에서 Redux가 꼭 필요한지, 필요하다면 어떻게 활용할 수 있을지 고민해봐야 한다.
• 프로그래머스 Lv.3 - 블록 이동하기
• 파이썬 과외

07.02

여름 감기 Day 3

07.01

여름 감기 Day 2