전체 글61 [12월 & 2024년] 벌써 일년이 끝났다는 것이 믿기지 않는.. 12월 주차별 회고12월 1주차12월 시작이 아주 상큼했다. 정해인 팬미팅을 다녀왔기 때문이다. 기분 관리도 능력이라 했으니까 라는 합리화로 행복한 12월 1일을 보냈다. 그리고 나서 완성하지 못한 포트폴리오를 붙잡고 씨름하고 계속 수정하고 피드백 반영하는 시간이었다. 그 와중에 커밋을 위해 습관처럼 매일 코테를 풀었다. 그렇게 습관처럼 풀다보니 어떤식으로 알고리즘에 접근해야 하는지 사고가 익숙해지는 경험을 했던것 같다. 오랫동안 매달리면 프로그래머스 1레벨도 풀지만 수월한 느낌은 아니라서 단순히 푸는걸 반복만 하는건 의미가 없다는 생각이 조금 들었다. 그래서 내가 문제에 어떻게 접근했는지 이 방식이 좋았는지 고민하면서 0레벨을 풀기 시작했다. 코테가 메서드만 쓰면 쉽게 풀수 있긴 하지만 그래서는 남는게.. 2024. 12. 31. [Bolg-App] Github Action으로 firebase 자동배포 설정하기 Firebase 호스팅을 GitHub Actions를 통해 CI/CD 파이프라인에 연결하여, main 브랜치에 커밋이 발생할 때 자동으로 배포되도록 설정하려고 한다. 1. GitHub Secrets 설정Firebase 배포를 위해서는 Firebase CLI 토큰이 필요한데 GitHub Secrets를 사용해 저장하면 된다. 1. 토큰 발급로컬 환경에서 Firebase CLI를 통해 디플로이용 토큰을 발급받는다.firebase login:ci 이 명령어를 실행하면 브라우저 창이 열리고 로그인 후, 콘솔에 토큰이 출력된다. 2. GitHub 프로젝트 설정 > Secrets 추가GitHub 레포지토리로 이동 후, Settings > Security > Secrets and variables > Actions.. 2024. 12. 10. [Food-App] Next.js recoil runtime error 빌드하면서 runtime error가 발생했다. 상태관리를 위해 recoil을 사용했는데 'ReactCurrentDispatcher'에서 문제가 발생했다고 했다. 그래서 다음과 같이 몇가지 조치들을 시도했다.React 버전 충돌: react와 react-dom 버전 때문인지 확인패키지 설치 문제: node_modules 삭제 후 재설치Webpack 설정 문제: Webpack 확인캐시 삭제: 캐시 삭제 후 재빌드1. React 및 React-DOM 버전 확인npm list react react-dom2. 의존성 재설치rm -rf node_modules package-lock.jsonnpm install3. Webpack 설정 확인(next.config.js가 정상인지 확인)npm install next@l.. 2024. 12. 3. [React] React 19 내용 정리 React 컴파일러- React 코드를 최적화된 JavaScript로 변환하여 성능을 크게 향상- 컴포넌트 렌더링을 자동으로 관리하여 수동 상태 및 UI 업데이트가 필요 없어짐- useMemo, useCallback, memo 등의 수동 최적화 필요성을 줄임 서버 컴포넌트- 컴포넌트를 서버에서 미리 렌더링하여 초기 페이지 로드 시간을 개선하고 SEO를 향상시킴- 클라이언트로 전송되는 JavaScript 양을 줄여 성능을 개선 액션(Actions)- 폼 제출 등의 데이터 변경 작업을 더 쉽게 처리할 수 있게 해줌- 비동기 작업의 상태 관리를 자동화하여 개발자 경험을 개선 새로운 Hooks- useOptimistic: 서버 응답 전 UI를 낙관적으로 업데이트함- useFormStatus: 폼 제출 상태를 .. 2024. 12. 2. [11월] 올해가 벌써 한달밖에 안남았는데.. Intro벌써 2024년도 끝이 보인다. 분명 올 초에 상반기까지는 취업한다 마인드였는데 인턴을 했으니 나름 이룬건가.. 올해 안에는 취업을 하고 싶었는데 아직도 이력서와 포폴을 수정중이다. 과연 나는 이번달(2일 남았지만) 안에 수정이 끝날 것인가.. 나름 긴 시간동안 취업 준비를 하면서 느낀 점은 뭘 해도 여전히 부족하고 준비가 덜 된 느낌만 있다는 것이다. 객관적으로 보면 실력이 우상향 하고 있긴 한데 그것보다 부족한 점이 눈에 더 많이 들어와서 그런것 같다. 일단 자세하게 주 단위 회고를 작성해보자..! 1주차1주차는 2일밖에 되지 않았다. 사실 10월에 매일 커밋하기를 성공하면서 뿌듯함과 약간의 지침 사이에서 이번 주말은 좀 놀자고 생각 했기 때문에 친구를 만났다. 그렇지만 마음 한구석이 불안한.. 2024. 11. 29. [10월] 프로젝트로 가득 채운 한달 Intro 이력서와 포트폴리오에 개인 프로젝트가 따로 없었는데 인턴 하면서 받은 피드백이 개인 프로젝트를 여러개 추가하면 좋을 것 같다는 이야기였다. 그래서 인턴이 끝나고 나서 시간이 오래 걸릴 거 같은 개인 프로젝트는 잠시 미뤄 두고 간단하지는 않지만 그래도 좀 더 수월할 거 같은 프로젝트들을 시작했다. 그렇게 9월까지 프로젝트를 하나 마무리 하고 또 하나를 시작 했는데 금방 끝날 줄 알았던 프로젝트가 생각보다 시간이 더 많이 걸렸다. 이번 기회를 통해 개인 프로젝트를 하는데 걸리는 시간에 대해 슬슬 감을 잡아가고 있는 중이다. 1주차알바 시작한지 얼마 안지난 상태여서 체력적으로 너무 힘들었다. 오픈으로 들어가서 일을 배울게 너무 많았다. 바쁘고 정신 없는데 짐이 되긴 싫어서 정신을 바짝 차리고 일했더.. 2024. 11. 6. [food-app] React Query를 사용해 Infinite scroll 구현하기 React Query의 Infinite scroll: 무한 스크롤을 지원하고, 화면 스크롤을 통해 추가 데이터를 자동으로 로드할 수 있는 강력한 기능 제공• data: Infinite Query 결과 데이터• data.pages: 가져온 페이지들의 배열• data.pageParams: 페이지를 가져오기 위한 페이지 매개 변수. 배열의 형태.• fetchNextPage, fetchPreviousPage: 다음 페이지 및 이전 페이지의 데이터를 가져오는 함수• getNextPageParam, getPreviousPageParam: 다음 및 이전 페이지에 대한 매개 변수를 생성하는 함수• hasNextPage, hasPreviousPage: 다음 페이지 및 이전 페이지가 있는지 여부를 나타내는 불리언 값• i.. 2024. 10. 20. [TanStackQuery] ReactQuery 개념 정리 React Query란? • 리액트에서 복잡한 데이터 상태 및 비동기 작업 관리를 간편하게 처리할 수 있는 기능을 제공하는 라이브러리• 데이터 캐싱, 리패칭, 뮤테이션 등과 같은 복잡한 작업들을 편하게 수행할 수 있게 해줌• 자동으로 데이터를 캐싱하여 네트워크 요청을 최소화함• 실시간 동기화를 지원하여 데이터가 변경될 때 자동으로 새로운 데이터를 업데이트함• 쿼리를 통해 서버 요청을 효과적으로 관리할 수 있음(중복 요청 방지, 요청 취소, 재시도)• 성숙한 생태계를 가지고 있고, 타입스크립트를 지원하고, Next.js와의 통합이 잘 되어 있으며, 비동기 작업 관리에 매우 편리함 React Query 주요 기능• 데이터 가져오기와 캐싱: useQuery 함수를 사용 하여 데이터 불러오기, 자동 캐싱, 중복.. 2024. 10. 20. 이전 1 2 3 4 ··· 8 다음
