전체 글57 [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. [food-app] next.js에서 getStaticProps 사용 하다가 마주친 에러 에러 발생 상황data.json파일을 직접 import하는 방법 대신 서버에 요청해서 받아오려고 코드를 수정했다. next.js에서 getStaticProps를 사용해서 데이터를 받아오기 위해 아래와 같이 코드를 작성했다.export async function getStaticProps() { const stores = await fetch( ${process.env.NEXT_PUBLIC_API_URL}/api/store ).then((res) => res); return { props: { stores }, revalidate: 60 * 60, };}에러 원인데이터를 받아서 json으로 바꿔주는 작업을 하지 않아서 데이터를 인식할 수 없었던 것이었다. 그래서 json으로 바꿔주는.. 2024. 10. 7. [9월] 슬슬 슬럼프가 올 때가 된거지 Intro인턴이 끝나고 잘 놀았는데 너무 잘 놀았는지 다시 마음을 잡는게 쉽지 않았다. 꾸준히 하는데 성과가 없는것 만큼 지치는 일이 없는것 같다. 프로젝트를 후다닥 하고 이력서와 포폴에 추가하자는 나의 야심찬 계획은 희망사항일 뿐이었다. 나는 디자인과 기획이 빠진 개발만 하면 금방 끝낼 수 있을 줄 알았다. 어림없지.. 사실 마음이 심란하다는 핑계, 경쟁이 너무 치열하다는 핑계 등등 이런저런 이유를 만들어 현실을 잠깐 도피하고 싶었다. 근데 그것도 마음대로 되는건 아니였다. 뭐 어떡하냐.. 버텨야지.. 그래서 알바를 새로 구하게 되었다. 언제까지 알바로 시간을 죽일수도 없는데.. 하지만 일단 올해까지는 해보자 라고 또 타임 리밋을 걸어버렸다. 1. 야심차게 리액트 블로그 프로젝트를 계획했다. 추석 전에.. 2024. 9. 30. [Firebase] Auth, Store 사용하기 Firebase 설치yarn add firebase React 앱에서 Firebase 초기화import firebase from 'firebase/app'const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENTER_ID, appId: process.env.REACT_APP_ID,};f.. 2024. 9. 25. [AWS TechCamp] AWS 서버리스로 서버 고민 없이 웹 애플리케이션 구축하기 Intro개인 프로젝트를 하면서 AWS를 사용해보고 싶다는 생각에 공부해보려고 알아보던 중 테크캠프를 한다는 소식을 접하게 되었다. 서버리스로 웹 서비스 구현하는 2개의 과정이 있었고 전부 신청해서 들어보기로 마음먹었다. 첫날 들었던 건 4가지의 aws 서비스를 연계해서 서버리스로 웹서비스를 구현하는 것이었다. 알아야 하는 것은 s3, API Gateway, Lambda함수, DynamoDB 서비스이고 각각 웹, api, 서버 동작 기능, DB와 관련된 서비스들이었다. 1. DB 만들기구현하는 순서가 평소의 프론트엔드 구현 과정과 사뭇 달라서 흥미로웠다. 먼저 DB를 생성하고 테이블을 만들어 둔 뒤에 기능에서 호출해서 사용하려고 한다는 설명을 들었다. 여기에서 주의사항은 앞으로 설정하는 서비스들과 지역.. 2024. 9. 4. [8월] 인턴이 끝나고 잘 쉬었습니다! Intro이렇게 놀아도 괜찮을까 싶게 놀았다. 고작 10주의 인턴이었지만 그새 습관이 되었는지 일찍 눈이 떠지는데 출근을 안한다는 생각에 약간은 허탈한 기분이었다. 다시 방에서 이력서를 정리하고 개인프로젝트를 보고 있자니 한숨이 먼저 나와서 그냥 놀고 스트레스와 이런저런 감정을 정리하자는 마음이 많이 컸다. 아무래도 취준 기간이 길어지다보니 지치는 것 같다. 하지만 별수 있나 그냥 하는거지..ㅎ.. 1~2주차남은 인턴 기간을 열심히 마무리했고 많은 경험을 하게 되었다는 생각을 했다. 이미 블로그 글로 정리해 두어서 링크만 달아 놓는 걸로!https://smileyj.tistory.com/64 [일경험 인턴] 10주간의 경험을 뒤돌아보기!Intro 10주간의 인턴 과정이 끝이 난다. 분명 기록을 조금씩 해.. 2024. 8. 29. 이전 1 2 3 4 ··· 8 다음
