[TIL] 2023.08

ZenTechie·2023년 8월 1일
TIL
0

TIL

목록 보기
5/6
post-thumbnail

08.31

  • 백준 추천문제
    • 알바생 강호, 안녕, 과제 안 내신 분, 효율적인 해킹, 친구
  • 경제 신문 스크랩 1일차

08.27

  • Flutter 강의 듣기
    • how to fetch data?
    • what is Future<...>
    • what is builder? e.g.) ListView.builder(), ...

08.26

  • Buddies-NextJS
    • 개발기 작성..
    • Feat
      • 스플래쉬 화면 추가 ➡️ session 로직 사용
      • Loading UI 추가
  • 코테 스터디 문제 1개 다시 풀기
    • 이모티콘 할인행사 ✅
    • 1,2,3 떨어트리기 ❌ ......

08.25

  • 백준 추천문제 3문제 풀이
    • 그리디, 구현, 그래프 탐색
  • Buddies-NextJS
    • Feat
      • Cloud Firestore 구조 생성
      • 대화기록 Cloud Firestore에 저장
    • Fix
      - 기존 OpenAI API 코드 수정
      ➡️ 사용자 메시지 전달하고 그에 따른 GPT의 답변을 setState로 저장 & 렌더링 하는게 아닌, Vercel AI SDK를 사용
      ➡️ 메시지 송/수신이 훨씬 간편해졌고, 자잘한 프롬프트 버그가 고쳐짐
      - 프롬프트 적용 오류 수정 ➡️ Vercel AI SDK로 해결
      - 같은 대답을 2번 이상 반복하거나, 질문에 맞지 않는 이상한 대답을 하는 버그 수정

      기존에 state로 송/수신 하던 코드를 없애고 Vercel AI SDK로 리팩토링을 했더니, 기존의 자잘했던 버그들이 모두 수정됐다. 4가지 서로 다른 성격을 가진 챗봇과 테스트를 진행했는데 답변의 퀄리티를 제외한 대화의 연결은 매우 자연스러워졌다.

      답변의 퀄리티는 프롬프트의 수정을 거치면 더 좋아질 것 같다.

08.24

  • 데브코스 프론트엔드 면접
    • 자기소개 기반 & 정말 조금의 기술 면접이 있었다.
      • 일단, 당일날도 면접 참여를 고민하다가 결국 했다. 뿌듯하다
      • 기술적으로 많이 부족하다는 것을 다시 상기했다.

08.23

  • Flutter 강의
    • Reusable Widgets까지 들었음.
    • 배운 것
      • Use 'const' with the constructor to improve performance.
        • const를 사용하는 이유는, 약간의 성능 향상(최적화) 때문이다. 컴파일러는 const에 대해  동일한 메모리 부분을 할당하여 객체를 불변으로 만든다. 즉, 앱을 실행할 때 단 한 번만 생성한다는 것이다. 그렇기 때문에, 리소스 낭비를 막을 수 있다.
          +) const는 컴파일 타임에서 정의된다.(!= final: 런타임에서 결정된다.)
      • 모든 화면과 버튼 등 모든 것들이 App에서 온다.
      • StatelessWidget은 아주 기초적인 Widget이다. 화면에 무언가를 띄워주는 것 말고는 하는 일이 없다.
        • 반드시 `build() 메소드를 구현해야 한다.
      • Root Widget의 build함수는 두 개의 옵션 중 하나를 return 해야 한다. ➡️ 1. MaterialApp 2. CupertinoApp
  • Buddies-NextJS
    • Feat
      • 사용자 정보 동기화 & Slide-Over 추가 & 수정
    • TroubleShooting
      • hostname "~" is not configured under images in your next.config.js ➡️ 외부에서 이미지 파일을 불러왔을 때 발생하는 에러
        ➡️ next.config.js에 아래와 같이 코드를 추가해야 한다.
      			module.exports = {
				images: {
					domains: [hostname 추가]
				}
			}

08.22

  • 파이썬 코테 스터디 - 2023 현대모비스 알고리즘 경진대회 예선 문제 풀이
    • 1문제 풀었음..

08.21

  • Buddies-NextJS
    • Feat
      • 로그인한 유저 정보 데이터베이스에 저장 ➡️ Firebase Cloud Store 사용
        • 백엔드에서 처리하도록 구현
      • 로그아웃 시 쿠키 삭제 & 분기점 변경
    • Refactor
      • typing.d.ts에 자주 사용하는 type들 설정
    • Fix
      • 로그아웃 시 쿠키의 Key 삭제 안되는 버그 수정
        • expires를 '-10000'이 아닌 실제 날짜로 적어줌으로써 해결

08.20

  • 프로그래머스 Lv.3 문제 풀이
    • 선입 선출 스케줄링
    • 거스름돈
    • 가장 긴 팰린드롬
  • 백준 추천문제 카테고리 별 1문제
    • 그리디 - 폴리오미노
    • DP - X
    • 구현 - X
    • 그래프 탐색 - DFS와 BFS
    • 최단거리 - 경로 찾기
  • Buddies-NextJS
    • Feat
      • 로그인 여부에 따라 middleware 제어 ➡️ SSR에서 next-firebase-auth, next-firebase-auth-edge를 적용해 봤지만, 생각처럼 되지 않았음 ➡️ Cookie 여부로 middleware 제어

08.19

  • Buddies-NextJS
    • Fix
      • 카카오 로그인 구현 완벽하게 끝.
        • 백엔드의 토큰 처리
        • POST 500 Error 처리
  • 가족과 영화 보고옴.

08.18

  • Buddies-NextJS
    • Feat
      • 카카오 로그인 구현 : 이전에 구현했었는데, undefined 에러 발생
      • 백엔드의 토큰 처리는 아직..

08.17

  • Dart 시작하기 강의
    • Variables, Data Types, Functions, Classes(Named Constructors까지)

08.16

  • weather-NextJS 마이그레이션 진행
    • Feat
      • 선택한 나라의 세부 정보(현재, 최저, 최고 온도) 추가
    • Refactor
      • Modal 컴포넌트 선언 위치 변경
      • Modal 컴포넌트 CSS 수정
  • 프로그래머스 Lv.3 - 야근 지수, 최고의 집합 풀이

08.15

🇰🇷

  • Buddies-NextJS 마이그레이션 진행(디자인 변경 가능성 때문에, 기능만 구현)
    • Feat
      • 설정 페이지 구현
      • 유저 페이지 구현
  • TypeScript로 블록체인 만들기 완강
  • TypeScript Interface 개념 공부
    |설정 페이지|유저 페이지|
    |--|--|
    |||

08.14

  • 백준 카테고리 별 1문제
    • 그리디 - 거스름돈
    • DP - 1학년
    • 구현 - 상어 초등학교
    • 그래프 탐색 - 바이러스
    • 최단거리 - 특정 거리의 도시 찾기

08.13

  • Buddies-NextJS 마이그레이션 진행
    • Feat
      • GPT-API 연결
      • 채팅 동작 확인
      • 채팅 페이지 구현

08.12

  • [프론트엔드 데브코스] -JS 코테
    • 문제는 어렵지 않았는데, JS로는 코테가 처음이라 어려웠다..JS를 많이 공부해야겠다.

08.11

  • Buddies-NextJS 마이그레이션 진행

    • Refactoring
      • 로그인 화면을 컴포넌트로 만들어 분리하고 로그인 박스도 분리시켰다.
      • 서비스의 로고가 위치한 헤더가 중복되어 사용되는 것을 확인하고, 분리시켰다.
      • Carousel도 코드가 길어져서, 가독성을 위해 컴포넌트로 만들어 분리시켰다.
      • 메인 화면도 마찬가지로 컴포넌트로 만들어 분리시켰다.
    • Feat
      • 캐릭터 소개에 필요한 Carousel을 추가했다.(react-responsive-carousel 사용)
      • 비회원 이용 클릭 시 나타나는 모달을 추가했다.(headless-ui 사용)
      • 스플래쉬 화면을 구현했다.(비로그인 시, 나타나도록 로직 분리를 향후 추가해야 한다.)
    • ETC
      • Carousel의 기본 스타일은 overflow:hidden 이다. 기본 제공되는 css를 수정해도 변화는 없기에, css를 새로 만들어 overwrite했다.
      • 반응형 서비스를 만족시키기 위해, TailwindCSS의 breakpoints를 수정했다. (TailwindCSS의 sm, md, lg는 기준에 맞지 않아서, 새로 값을 설정했다.)
      • png 파일 사용시 해상도가 깨지기 때문에, svg를 사용하는게 좋다.

  • [트러블 슈팅]

    • Cross-Origin-Opener-Policy policy would block the window.closed call.
      • Firebase의 Google Login을 사용할 때 발생한다. reddit과 stackoverflow를 찾아봤지만 나처럼 뚜렷한 해결책을 찾은 사람이 없어서, 해결하지 못했다. 그러나, 이 에러가 발생해도 로그인은 정상적으로 완료된다.
    • NextRouter was not mounted
      • next 13에서 app directory를 이용한다면, client에서 렌더링 하도록 하려면 "use client" 키워드를 사용해야 한다. 그러나, next/router의 useRouter는 client에서 사용할 수가 없다. 그렇기 때문에, 'next/navigation' 모듈의 useRouter를 사용해야 한다.

보다 자세한 내용은 개발기에 따로 포스팅..

08.10

  • 프로그래머스 Lv.2 자바스크립트 연습
  • weather-NextJS 마이그레이션 진행
    • 나라 선택 시, localStorage에 저장하는 기능 구현 😃
      • 이미 선택한 나라일 시, 예외 처리 추가 😄
        • 해당 예외는 some 함수를 사용해서 처리했다. some이란, 배열 또는 객체에서 조건에 맞는 값을 찾는 함수이다. 값이 있다면 true, 아니면 false를 반환한다.
          [배열 or 객체].some(value => value === 찾는값);
    • 자잘한 css 수정
      • 모바일 버전일 때, overflow-x-scroll되는 현상 수정(= content를 브라우저 정가운데에 위치하도록)
    • resizable의 min size 수정
      • 기존 min:300일 때, 글자 줄 변경으로 인해 레이아웃이 깨지는 현상이 발생 ➡️ min:320으로 수정
  • Buddies-react 에러 수정 시도
    • 카카오 로그인 시, authorization code not found for code='~' 에러 발생
      • '동일한 인증코드를 이용해서 엑세스 토큰 요청을 여러번 보내셨기 때문에 발생하는 문제'라고 한다. 코드 수정한 적이 없는데 잘 되다가 갑자기 발생.. ➡️ 아직 에러 해결못함.
  • Buddies-NextJS 마이그레이션 진행
    • Firebase OpenID Connect 로그인 구현
    • Context를 적용한 로그인 상태 유지 기능 구현 with Firebase

08.09

  • 파이썬 코테 스터디 진행
  • weather-NextJS 마이그레이션 진행
    • 나라 검색 기능 추가
    • 모달과 섹션 사이에 resizable-layout 적용
    • 브라우저 너비에 따른 모달의 렌더링 위치 수정
      • 1024px 미만: createPortal을 사용하여 modal-root와 형제로
      • 1024px 이상: modal-root의 자식으로
    • 나라 선택 시, localstorage에 저장하는 기능 (시도했으나 실패)

08.08

  • 데브코스 지원서 제출

08.06 ~ 08.07

호캉스

08.05

  • Buddies-NextJS로 마이그레이션
    • kakao login 작동 여부 확인
      • api route에서 문제가 생겨서 시간을 거의 다 허비했다.
        • POST 500 에러 발생..

08.04

  • 백준 추천문제 [다이나믹 프로그래밍 2] 풀이
    • 동전
    • 주지수
    • 평범한 배낭

08.03

  • [portfolio-nextJS]에 Sanity 적용 후 Vercel 배포
    • Sanity란, 하나의 Admin 페이지를 제공하는 시스템이라고 이해했다. 예를 들면, 나만의 포트폴리오 사이트에서 페이지를 수정할 필요가 있을 때, 직접 코드를 수정하는 것은 번거롭고 뭔가 약간 이상하다. ('이걸 이렇게 해야하나?' 싶은...) 그래서, 이를 편리하게 해주는게 바로 Sanity이다.
    • 초기 세팅이 너무 낯설어서 어렵게 느껴졌다. 그래서 사실, 이전에 한번 시도하다가 포기했는데 이번에 세팅 후 직접 사용해보니 정말 하길 잘한것 같다.
    • 배포하는 과정에서 너무 많은 오류가 발생해서 2-3시간을 오류 수정에 힘썼다..
      • Type error: Page "app/page.tsx" does not match the required types of a Next.js Page.
      • TypeError: fetch failed ...
        code: 'ECONNREFUSED',
        syscall: 'connect',
        address: '127.0.0.1',
        port: 3000
    • 에러 수정과 Sanity 적용과 Vercel 배포 과정은 나중에 포스팅하려고 한다.
  • Vercel 홈페이지에서 Build후 Deploy하는 것과 Vercel CLI를 사용해서 Build후 Deploy할 때 결과가 달랐다.(전자는 에러가 발생하지만, 후자는 정상적으로 작동했다.)
    • 원인은 나중에 찾아봐야겠다.
  • [프로그래머스 Lv.3 - 숫자 게임] 풀이

08.02

  • weather-NextJS 마이그레이션 진행
    • 모달 추가 & 반응형에 따른 레이아웃 변경
    • CSS 수정 & 추가

08.01

  • weather-NextJS 마이그레이션 진행
    • 메인 레이아웃 구현 60% 완료
  • 파이썬 코테 스터디 진행

새로운 달이 시작된 만큼 열심히 살자

profile
ZenTechie
데브코스 진행 중.. ~ 2024.03
이전 포스트

[TIL] 2023.07

다음 포스트

[TIL] 2023.09

0개의 댓글