본문 바로가기

개발일지 Dev Diaries/항해99 Hanghae9917

[항해99 92일차] (22.06.06.) WIL_실전 프로젝트 정리 Q&A 이번 WIL 은 이력서 작성과 향후 기술면접을 대비해서 Q&A 형식으로 정리해보려 한다. 여기에 계속 내용을 정리해나가면 좋은 참고자료가 될 것이라고 생각된다. React 관련 Q1. useRef는 어떤 목적으로 사용했나요? - 값이 변경되지 않아야 하는 변수를 할당할 때 사용했습니다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다 - 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.. 리액트 공식문서에서는 useRef 로 만든 변수를 사용하여 다음과 같은 값을 관리 할 수 있다고 말합니다. setTimeout,.. 2022. 6. 6.
[항해99 89일차] (22.06.03) WIL_실전 프로젝트 6주차 종료 오늘은 최종 발표를 하게 된다. 왠지, 블로그를 쓰는 것이 주저되어 계속 쓰지 못했다. 계속 WIL 쓰기를 미뤄오다가.. 이렇게 일기 느낌으로라도 적어둔다. 지난 6주 간 팀 노션 페이지에 매일매일 기록하는 습관을 들이며 작업을 했는데, 이를 블로그에 빨리 옮겨 적어야 겠다는 생각을 한다. 정리 용도로! 일단 오늘은 package.json 과 각 컴포넌트에서 import 해 온 것들을 중심으로, 이번 프로젝트에서 사용한 기술들을 정리해본다. 발표 잘 마치고 옮기자! 1. CRA 프로젝트 생성 2. React hooks - useState, useEffect, useEffect, useCallback, useRef, useLayoutEffect - React.memo() 3. React-redux - us.. 2022. 6. 3.
[항해99 70일차] WIL_실전 프로젝트 3주차 종료 이번 WIL 키워드 MVP 개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지 정리해보세요. 패키지 및 메소드 package.json 에 설치된 순으로 정렬 react - useState - useRef - useEffect redux-toolkit (전역 상태 관리) axios (서버-클라이언트 간 통신) react-dom react-modal react-redux - useDispatch - useSelector react-router-dom - useNavigate redux redux-logger sockjs-client - SockJS : 실시간 채팅 & 알람 기능 stompjs - Stomp : 실시간 채팅 & 알람 기능 styled-components - styled 기술 1. axios 통신 .. 2022. 5. 15.
[항해99 63일차] (22.05.08) WIL_실전 프로젝트 2주차 종료. 매일 작업 기록 5/2(월) 마이페이지 분기 마이페이지 : 게시물 삭제하기 버튼 API 연동 chatList : 채팅리스트 불러오기 API 연동 chatDetail: socket 연결, 구독, 채팅 보내기 연결 성공 5/3(화) 프로젝트 노션 정리 소셜로그인 API 확인 및 response 값 처리 요청 (Login) 닉네임 설정 여부에 따라 페이지 이동 다르게 처리 완료 (signup 또는 select로) (signup) 닉네임 필수값으로 설정. 중복닉네임 아닐 시에만 닉네임 저장 버튼 활성화 처리 (Mypage / ChatList ) isLoading 세팅(useEffect 관련) (ChatList) 뷰 보완 : 채팅방 나가기 버튼 추가, (ChatDetail) 데이터 처리 방법 결정: state 에.. 2022. 5. 8.
[항해99 58일차] (22.05.03) TIL_실전 프로젝트 2주차. 요즘 매일매일 프로젝트 진행사항을 팀 내 공유 노션에 정리하고 있는데, 이것을 블로그에도 정리해두면 좋겠다는 생각이 들어 남겨둔다. 5/3(화) 목표 1. ChatDetail.js 이전 메시지 불러오는 API는 있음. 서로가 입력한 새로운 메시지를 어떻게 처리할 것인가? 이 부분에 대한 고민 필요. (리덕스 툴킷? 다른 방법?) (과제) 데이터 처리 방법 결정! 2. Mypage / MyTempPage / ChatList / ChatDetail 페이지 첫 렌더링 시 useEffect 가 렌더링 이후에 실행되면서, list 를 렌더링 이후에 가져오게 됨. → 그로 인해 렌더링되는 return 안에 있는 map 함수가 제대로 실행되지 않는 오류 발생.이것이 최선의 방법은 아닐 것으로 보이는데, 어떻게 처리해.. 2022. 5. 3.
[항해99 56일차] (22.05.01) WIL_실전 프로젝트 1주차 종료 실전프로젝트 1주차가 종료되었다. 실전프로젝트는 S.A. 에 매일의 작업 기록, 리뷰, troubleshooting 을 적고 있다. 리뷰 1. 프로젝트 세팅 이번 프로젝트 세팅은 React로 서버사이드 렌더링을 하기 위해 Next.JS를 사용하기로 했다. Next.js 를 사용하는 과정에서 일단 기본적인 개념을 이해해야 했다. 사용하면서 소소하고 다양한 어려움을 겪었는데.. 기술 검토를 해보면서, SSR 을 하고 싶다고 치더라도 React 18버전 에서 SSR 을 지원하는데, 굳이 Next.js 를 쓸 필요가 없다는 결론에 도달하였다. 그래서 다시 결론은 CRA 를 사용하여 프로젝트를 생성. 2. 라우팅 useHistory Hooks 를 사용하지 않고 navigate 를 사용했다. troubleshoot.. 2022. 5. 1.
[항해99 50일차] (22.04.25) 클론 프로젝트 종료, 실전 프로젝트 시작 클론 프로젝트 회고 ○ 스코프 대부분 구현 완료 기능 구현 완료 : 회원가입, 로그인, 로그아웃, 게시글 CRUD, 좋아요 및 관심상품 담기, 검색어 및 카테고리 검색 기능 구현 미완료 : 무한 스크롤 , 소셜 로그인 ○ Trouble Shooting 1. useEffect 실행 컨트롤이 너무 어렵다. 메인 페이지에서 axios, getpost 를 실행하여 포스트리스트를 받아오는 상황이 있었다. useEffect 는 컴포넌트가 렌더된 이후 실행되는 hook 이기 때문에, useEffect 에 getpost를 넣어두면, getpost가 실행되기 전에 state 값이 불러와지고, render 가 진행되어 state 값이 undefined 가 출력되고. 페이지에 오류가 발생하게 된다. 웹 애플리케이션에서 서버.. 2022. 4. 25.
[항해99 42일차] (22.04.17) WIL_미니 프로젝트 종료, 클론 코딩 시작 미니 프로젝트 회고 1. 백엔드 분들과 처음으로 진행한 협업 프로젝트 - API 설계.. 멘붕이었다. 뭘 요청해야 하고, 우리는 뭘 보내줘야 하는건지. 도무지 아무것도 이해되지 않는 상황에서 논의를 시작해야했고, 설계서를 제출해야 했다. 프로젝트 중반으로 와서 첫 API 통신을 성공하자, 드디어 이 과정이 어떻게 진행되는 건지 조금씩 이해되기 시작했다. - API 테스트를 빠르게 시작해보지 못한 점이 아쉽다. 짧은 기간의 프로젝트에서 성공적인 프로젝트 수행을 위해서는, 백엔드-프론트 모두 효율적인 시간 활용이 중요한 것 같다. 이를 위해서는 백-프론트 우선 설계한 API 를 만들어, 제대로 통신하는지를 빠르게 확인해보고, 통신이 원활하지 않을 시 각 포지션에서 원인을 찾아보는 작업이 진행되어야 한다. -.. 2022. 4. 17.
[항해99 37일차] (22.04.12) 계속되는 로그인/회원가입. Form Data 사용 파일 업로드 기록 어제 새벽까지 JWT 토큰 기반 인증으로 회원가입/로그인 기능을 구현했다. 오늘 오전에 서버 통신 테스트를 해보았는데, 로그인 시도 시 아래와 같은 오류 발생 서버 측의 오류로 보여, 백엔드 담당자께서 작업중이다. 나는 오늘 메인페이지, 마이페이지 작업을 해보려고 한다. (새벽이 됨..) 아.. 정말 머릿속이 너무 복잡하다. 알 것 같으면서도 모르겠는 미궁 속에 빠진 기분이다. 컨디션 관리하면서 계속 파고들 뿐이다..!!! 내일도 화이팅해보자. 기능 구현을 하며 알게된 것들 1. 회원가입 / 로그인 axios 를 사용한 api 통신에 성공했다! post 리퀘스트를 보냈고, 결과값이 위와 같이 떴다. 그런데 로그인 API, 회원가입 시 아이디 중복 체크 API 는 작동하지 않았다. 여러 방식을 시도해.. 2022. 4. 13.

티스토리툴바