전체 글

1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
개발 일상/개발 회고

[개발 회고록] 2월 3주차

💭 1. 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까 2월 12일(일) : Atties 회고, Atties 진행 2월 13일(월) : 개인 공부(Meta Code, 구글 애널리틱스), 홀랑 진행 2월 14일(화) : x(생일) 2월 15일(수) : Atties 오류 수정 2월 16일(목) : Atties QA 진행 지난주 QA를 진행했을 때만큼 수정사항들이 나와서 당황했다. 그래도, 팀원들 모두가 이에 기죽지 않고 역할 분배를 하고 끝까지 열심히 하자고 마음을 다잡았다. 2월 17일(금) : Atties QA 수정사항 반영 2월 18일(토) : Atties QA 수정사항 반영 구현이 힘든 부분들 빼고 QA수정사항 반영을 완료했다. 이제 모레면 배포다. 📚 2. 이번주의 개발 독서 ..

개발 일지/개발 일지

[개발 일지] Suspense를 이용하여 모든 api에 Loading 화면을 설정하자 (NextJS, Suspense)

Suspense란 무엇일까? Suspense란, 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능입니다. SPA(Single-page-Application)의 단점은 한 번에 사용하지 않는 모든 컴포넌트까지 불러오기 때문에 첫 화면이 렌더링 될 때까지 시간이 오래걸리기는 것입니다. React는 lazy를 통해 컴포넌트를 동적으로 import하여 초기 렌더링 지연시간을 어느 정도 줄여줄 수 있습니다. const SomeComponent = React.lazy(() => import('./SomeComponent')); Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 pa..

개발 일상/개발 이야기

[개발 이야기] 사이드 프로젝트 개발팀을 굴려보자

사이드 프로젝트 개발 팀 Atties를 만들고 작성한 회고록입니다. 좌충우돌 8주간 9인의 여정이 끝났다.이 프로젝트는 프로젝트를 시작하는 12월 19일로부터 약 3주 전인 11월 30일부터 기획되어 있던 프로젝트이다. 2학기에 처음으로 '벚꽃 오프닝' 팀 프로젝트를 진행하며 느낀, 부족한 점을 개선하고 배운 점을 적용하여 내가 직접 프로젝트를 움직여봐야겠다고 생각하여 시작하게 되었다. 🧑‍🤝‍🧑 우리 팀은요!우리 팀을 간단하게 소개하자면 기획자 1, 디자이너 2, BE 3, FE 2, FE와 PM을 맡은 나까지 총 9명이서 진행했다. 팀 빌딩은 내가 전담했고, 아이디에이션은 Planner가 전담하였다. 이후 나는 매니징과, 프런트엔드 팀 리딩과 전체적인 팀의 소통을 전담하였다. 🗣️ 커뮤니케이션..

개발 일상/개발 회고

[개발 회고록] 2월 2주차

💭 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까 2/6(월) : React Query에 대한 집중 공부 React Query에 대해 깊게 공부해 보았다. 내가 진행하고 있는 프로젝트에 도입한 라이브러리임에도 기능들을 잘 모르고 있음을 느꼈다. 겉핥기만 하고 있었던 것이다. 2/7 (화) : 낙관적 업데이트 훅 세분화 + 한 컴포넌트에서 라우팅 낙관적 업데이트하는 훅을 세분화하였다. PR 링크 - 같은 '찜하기'라는 post api인데, 각 페이지 마자 get 해오는 api가 달랐다. api가 받아오는 값이 서로 달라서, 이전 값에 대한 처리하는 로직이 달랐다. 그래서 각 페이지별로 이를 구분하였다. '낙관적 업데이트' 참 유용한 기능인 것 같다. post를 한 후, 데이터를 get..

개발 일지/개발 일지

[개발 일지] Axios instance 설정 끝장내기 (Axios, instance, interceptors, JWT)

Axios ; node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 Axios를 사용하기에 앞서서, 우리가 사용할 Axios의 instance를 만들어줄 수 있습니다. 저희는 src > apis > _axios > instance.ts에 instance를 생성하였습니다. 1. instace 생성 import axios from 'axios'; import { CONFIG } from '@config'; ... const instance = axios.create({ baseURL: CONFIG.API_BASE_URL, }); CONFIG.API_BASE_URL은 저희 서버의 uri입니다. 2. instance.interceptors ; then 또는 catch로 처리되기 전에 요청과 응..

개발 일지/개발 일지

[개발 일지] 채팅 기능을 구현해보자 (Websocket, Stomp, SockJS)

REST API vs Websocket API 채팅은 REST API로도 구현할 수 있다. 그러나 Rest API를 이용하여 반복하여 요청해서 데이터를 요청하고, 데이터를 받아올 수 있게 되면 자원 낭비가 일어나게 된다. 그렇다면 한 번만 요청하고 그 뒤로 정보가 변할 때마다 그냥 불러오도록 할 수 없을까? 여기서 새로운 방식의 API가 필요하게 된다. 바로 Websocket API이다. 구독형 API라고도 할 수 있다. Websocket API : Statefull protocol, 요청을 매번 보내는 게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술 - Websocket API 방식에서는 데이터 요청자와 데이터 제공자 간에 흐르는 채널이 열리게 된다. - ..

개발 일상/개발 회고

[개발 회고록] 2월 1주차

‼️ 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까 1/30(월) ~ 2/3(금) : Atties 프로젝트 진행 이번주는 Atties프로젝트 8주 중 7주 차이다. 기존 계획과 달리 마감기한이 늦춰질 것으로 보인다. 그래도, 최소한 다음 주 금요일까지 MVP를 완성하는 것을 목표로 해야겠다. 프로젝트 초반에 기획, 디자인 개발 속도 차이 때문에 2일 쉬었고, 설날 2일을 감안하면 1주일 정도 딜레이 될 수 있다고 생각한다. 다다음주에 회고 및 정리를 진행한다고 하면, 다음 주까지는 무조건 마감해야겠다. 그러고 나서 Atties프로젝트에 대한 회고를 진행해야지. 7주 동안 변함없이 한 명의 낙오자 없이 프로젝트를 끝까지 임해줘서 너무 고맙다. 단 한 명도 느슨해진 사람이 없다. 2/3..

개발 일상/개발 이야기

[개발 Life] 갖고 싶다, 맥북 (+ 맥북 싸게 구매한 후기)

https://peter-coding.tistory.com/278 [개발 Life] 개발용 컴퓨터를 교체해보자 요즘 들어 컴퓨터 부품에 관심이 푹 빠졌다. 컴퓨터 부품에서 시작하여, 노트북까지 관심이 다녀왔다. 고민을 많이 했다. 내가 가진 PC와 노트북 4년 전 1월에 구매한 삼성 PC, 약 120만원 내 PC는 htt peter-coding.tistory.com 이미 위 글에서 맥북에 대한 마음은 접었다. 그런데, 유튜브에서 '맥북'을 검색한 기록이 있는 나의 유튜브 알고리즘에서는 이미 '맥북 사!'를 외치고 있었다. 계속 맥북에 관한 영상이 뜨는데, 열에 아홉은 맥북에 대한 옹호 영상인 것이다. "개발자에게 맥북이 필요한가?", "맥북을 써야 하는 이유".. 그렇다면, 이렇게 다들 맥북 구매에 대해..