본문 바로가기

전체 글46

0. 시작하는 마음 항해플러스 프론트엔드 1일차, 시작하는 마음을 주제로 포스팅하기  2024년 6월 15일, 커리어를 시작하고 딱 1년이 되는 날이다. 첫번째 회사에 적응하고 개발자로 길을 나아가다 말고, 갑자기 길이 희미해졌다.분명 몸은 편하지만, 이에 적응하면 커리어가 꼬일 것이라 생각이 들었다.현재 느끼고 있는 늪에 빠지지 않기 위해, 성장하여 커리어를 이어갈 수 있도록 하고자 신청한 경력자 부트캠프는 어떤 길을 보여줄 지 웹 프론트엔드 개발자라는 길을 선택하고는 2년쯤 된 것 같다.앞으로 있을 5년, 10년 웹 프론트라는 prefix는 떨어지더라도 개발자라는 title은 가지고 갈 수 있도록 준비하고 스스로를 갈고 닦아야 한다. 당장은 3년차까지만, 1인분 이상 해낼 수 있는 프론트엔드 개발자가 되는 것을 목표로 .. 2024. 6. 15.
[23.06 - 24.03] 프로젝트 회고이며 첫 해의 회고 23년 6월 중순 회사에 합류했고 6월 말, 7월부터 진행중이던 프로젝트에 합류하게 되었다. 그리고 24년 3월 릴리즈에 맞춰 QA와 결함 수정 작업을 반복하던 중 프로젝트가 종료되었다. 23년 6월 회사에 처음 들어오고 진행중인 프로젝트의 코드베이스와 노션 문서들을 보며 어떤 작업들을 하겠구나 생각했었다. 이미 많이 쓰여져있는 코드와 한눈에 들어오지 않는 문서들은 높다란 빌딩을 올려다보는 심정이었을 지도 모르겠다. 7월의 신입 합류인원을 대상으로 하는 교육을 지나 본격적으로 프로젝트에 참여하기 시작했다. 백오피스의 웹 프론트엔드를 개발하는 팀에 속하게 되었고, ppt와 구글시트 기반의 화면설계, 피그마로 전달받은 화면 디자인을 통해 이미지와 로직을 파악하고 개발을 진행하게 되었다.(급조된 팀으로, 혼자.. 2024. 3. 28.
[WebAPI] Crypto randomUUID https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID Crypto: randomUUID() method - Web APIs | MDN The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator. developer.mozilla.org Crypto API는 https 환경에서만, 지원되는 브라우저에서만 작동한다. WebAPI인 Crypto에 속한 method이며 uuid를 생성할 수 있고 const uuid = crypto.randomUUID(); 와 같이 생성.. 2023. 11. 10.
탭 컴포넌트 그리고 useTab 훅을 만들어보다 프로젝트의 요구사항에 따르면 브라우저 탭과 유사하게 동작하는 탭 컴포넌트가 필요했다. 요구되었던 내용 상단 nav 영역에서 메뉴를 선택 시 신규 탭으로 열려야 한다 탭은 최대 10 ~ 12개로 제한되어야 한다 -> 추가로 열려야 하는 경우 알림을 띄울 필요는 없다 탭 영역의 홈 아이콘은 하나의 탭으로써, 메인 화면을 보여주는 형태여야 한다 동일한 메뉴를 선택하더라도 서로 다른 탭으로 동작해야 한다 탭의 이동 시 탭에서 작성 중이던 form의 내용은 유지되어야 한다 최종 산출물 기준으로 새로고침과 뒤로가기 등의 액션은 일어나지 않는 것을 전제로 한다 기본적으로 요구되었던 내용은 위와 같았고 논의를 거듭하며 상세 동작을 정하기로 했다. 결과적으로 정해진 내용 기존에 사용하던 react-router-dom의 .. 2023. 9. 20.
ChatGPT를 이용한 Code Review https://github.com/anc95/ChatGPT-CodeReview GitHub - anc95/ChatGPT-CodeReview: 🐥 A code review bot powered by ChatGPT 🐥 A code review bot powered by ChatGPT. Contribute to anc95/ChatGPT-CodeReview development by creating an account on GitHub. github.com OpenAI API와 위의 봇, 깃허브 액션을 사용하면 깃허브 PR 시 ChatGPT를 이용한 코드 리뷰를 진행할 수 있다. 예시 > https://github.com/LucetTin5/alchol-diary/pull/12 feat: use Next/Imag.. 2023. 4. 14.
로컬 개발을 모바일에서 확인하기 프로젝트를 진행하면서 화면 구성을 모바일에 맞춰 작업하던 중 문득 생각이 들었다. "모바일 브라우저의 사이즈에 맞추어 화면을 제작하고 있는데, 크롬의 개발자 도구를 이용한 확인만으로 충분할까?" 위와 같은 의문점이 들어 배포를 거치지 않고 현재 개발 상태의 화면을 호스팅하여 확인할 수 있는 방법이 없는지 찾아보았고 내가 찾은 방법은 locultunnel을 이용하는 방법이었다. https://github.com/localtunnel/localtunnel GitHub - localtunnel/localtunnel: expose yourself expose yourself. Contribute to localtunnel/localtunnel development by creating an account on .. 2023. 3. 29.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 5. Mutations - Mutations는 무엇일까? Mutation은 개발자가 서버에서 데이터를 생성하거나 수정하거나 삭제하는 등의 데이터 변경/수정 작업을 처리할 수 있도록 해주는 React-Query의 핵심 개념이다. 리액트 애플리케이션에서 위의 작업들에 해당하는 Side-effect를 수행하고 로컬 캐시를 업데이트하여 클라이언트 측의 데이터가 서버와 동기화 상태를 유지하도록 하는 데 사용된다. Mutation을 이해하기에 앞서 Mutation은 Query와 어떻게 다른 지 알아보면 다음과 같다. - 데이터 연산: Query는 데이터를 가져오고 읽는 데 중점을 두고 있으나 Mutation은 생성, 업데이트, 삭제와 같은 작업을 통해 데이터를 수정하는 역할을 담당한다. - Idempotence(멱.. 2023. 3. 16.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 1 https://tanstack.com/query/v4 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 1. React-Query란? 리액트 쿼리는 리액트 애플리케이션의 데이터 fetching(이하 불러오기), 캐싱, 업데이트 및 동기화를 간소화하는 라이브러리이다. 리액트 쿼리의 직관적이며 유연한 API를 통해 pagination, 실시간 업데이트, 최적화 업데이트 등과 같이 복잡한 로직을 직접 작성.. 2023. 3. 14.
GraphQL GraphQL은 무엇일까? GraphQL은 몇 가지 특징을 갖는 API용 쿼리 언어이자 런타임이다. 2012년 Facebook(현 Meta)에서 만들었고, 많은 회사에서 기존의 REST API를 대체하는 방식으로 채택하고 있다. 1. GraphQL이 갖는 특징 - 효율적인 Data Fetching: GraphQL을 이용할 시 클라이언트가 한 번의 요청으로 필요한 데이터만을 요청하고 수신할 수 있다. 이를 통해 Underfetching, Overfetching 이슈가 해결되어 불필요한 네트워크 트래픽을 줄일 수 있으며 애플리케이션의 성능 향상 또한 이룰 수 있다. 또한, GraphQL을 사용할 시 데이터베이스, 마이크로서비스, 외부 API 등을 포함하는 여러 소스에서 데이터를 검색하여 단일 응답으로 클라이.. 2023. 2. 23.

티스토리툴바