팀 프로젝트 회고 소감 스마일게이트에서의 3개월간의 활동이 끝났다. 개인 프로젝트로 한층 더 성장할 수 있었으며, 처음으로 프론트엔드 역할을 맡아서 좋은 백엔드 개발자팀원과 프로젝트를 할 수 있었던 뜻깊은 경험이었다. 목표달성여부 첫번째 목표인 node.js로 rest api 만들 때 controller와 dbconfig 파일 분리하기 라는 목표는 달성했다! 두번째 목표인 리액트에서 jest로 테스트코드 작성해서 코드 커버리지 높이기는 달성하지 못했다ㅠㅠ 다음에 개발할 때는 테스트코드 작성하는 시간도 고려해서 개발을 해야겠다 세번째는 전역상태관리 recoil 라이브러리의 selector 함수의 역할을 두 줄로 설명하기 인데 selector 함수는 atom의 상태를 변화시키기 위해 사용하는 순수함수이다. get 과 set .. [팀프로젝트] 설계의 중요성을 깨닫다 팀프로젝트로 React 프론트에서 채널 UI 부분을 하다가 api를 주고 받는 부분에서 특히, 데이터 전송에서 useParams로 url에 있는 값을 서버로 보낼 때 에러가 많이 나서 하루종일 이부분 에러를 잡았다. 처음으로 swagger로 api 명세서를 작성하긴 했지만 api return값을 고려하지 않고 api를 설계한 것이 내 착오였다. api 만들 때 제대로 만들었다면 프론트 작업할 때 에러가 줄었을텐데말이다. 중간중간 쿼리문을 수정하며 채널 UI도 작업중이다보니 좀 빡세다. select * from user join user_channel on user.user_id = user_channel.user_id join channel on channel.channel_id = user_channe.. [팀프로젝트] 리액트 코드 분할로 성능 높이기(React.lazy) 아래와 같이 동적으로 import 하면 컴포넌트를 불러올 때 파일을 읽기 때문에 초기 로딩 속도가 빠르다는 글을 읽었다. import React, { lazy, Suspense } from "react"; import { Route, Routes } from "react-router-dom"; const Workspace = lazy(() => import("./Workspace")); const App = () => ( ); export default App; 이전에는 코드를 아래와 같이 작성했는데 router파일에서는 앞으로 위와 같이 코드를 작성해야겠다. 참고로 lazy를 사용할 때는 Suspense 컴포넌트로 감싸야 한다. import React, { lazy, Suspense } from "re.. [팀 프로젝트] 목표 이번 팀 프로젝트를 통해 달성하고 싶은 목표이다 (잊어버릴까봐 이 글에다 박제해놓는다) 프로젝트 끝나고 회고 작성할 때, 다시 보면서 달성여부를 체크하고자 한다 1. 채널, 게시글 rest api 개발할 때 controller 부분을 따로 만들고 db 쿼리문은 config 파일에 작성하기 2. 리액트에서 비공개 채널과 공개 채널 분리하여 상태관리하는 부분의 로직은 jest로 테스트 코드 작성하여 code coverage 70% 달성하기 3. Recoil 의 selector 함수는 어떤 역할을 하는 함수인지 2줄로 설명할 수 있게 되기 4. 채널, 게시글 API 명세서를 swagger 를 이용하여 작성하기 성능! 현재는 팀 프로젝트 개발 전에 API 설계를 하고 있다. 잊어버렸다가 전에 1인 프로젝트로 만든 블로그의 성능을 측정한 결과를 올린다. 크롬 브라우저의 Lighthouse를 사용했지만 사실 이 점수가 그닥 신뢰성이 있지는 않고 측정하는 환경에 따라서 달라지기도 한다. 네이버와 같은 사이트는 성능도 엄청 높던데 어떻게 성능을 올리는 건지 궁금했다. 내가 만든 블로그같은 경우에는 이미지가 들어가서 이미지의 크기 ,용량을 줄이면서 성능 최적화를 해볼 수 있을듯하다, (나중에 한번 해봐야겠다.) 검색엔진최적화는 react와 같은 client side rendering의 경우에는 helmet이라는 라이브러리를 사용해서 할 수 있다고 해서 해보았지만 점수가 높아지지 않아서 (내가 helmet을 제대로 사용하지 못한.. [개발일지] 팀 프로젝트 1월부터 팀 프로젝트를 시작했다 PMP 문서 작성과 아키텍처 설계 후 발표하고 개발을 시작한다 스마게 데브캠프에 참가한 이유는 실무와 똑같을 수는 없겠지만 실무와 비슷한 협업을 통해 성장하고 싶기 때문이다 나의 경우에 협업이란 어려운 것이구나 라는 것을 느껴서 잘해보고 싶은 마음이 있다 사실 현재 어려운 점이 몇 가지 생겼다 일단 12월에 백엔드 개발자 한 분이 취업을 하셔서 프론트 개발자는 나포함 3명 백엔드 개발자 분 1분이었는데, 프론트 개발자분 한 분이 인턴에 합격하셔서 우리 팀은 프론트 개발자 나포함 2 명 백엔드 개발자 1분이 되었다 스프링부트와 node.js로 crud 는 할 수 있어서 crud만 있는 기능의 백엔드부분 한개는 내가 맡기로 했다 백엔드도 해보고 싶어서 좋긴한데 잘하지 못해서 .. [개발일지] 404 에러와의 사투 에러 메세지 : Failed to load resource: the server responded with a status of 404 (Not Found) 문제상황 : 리액트 클라이언트에서 서버로 axios.post 요청을 했는데 계속 위와 같은 404 에러가 뜸 과정 : 요청할 때 404 에러 메세지에 서버 포트번호가 아닌 클라이언트 포트번호로 되어있었는데 확인을 안한 나의 mistake 해결 : 이렇게 아래와 같이 컴포넌트에서 baseUrl을 적어주었더니 해결되었으며 const baseUrl = "http://localhost:3000"; axios .post(baseUrl + "/posts", { cra가 아닌 webpack 이용해서 생성한 리액트 프로젝트의 경우에는 webpack.config.j.. [개발일지]햇빛 눈이 부신 날에 상태관리해봤니 (ref말고 useRef...) 문제상황 : Editor 인풋값을 변경하면 useState 값이 변해서 컴포넌트가 계속 재렌더링이 되어 글자 한개 입력할 때마다 커서가 앞으로 가버리는 문제 해결 : useState 대신 useRef 로 UI 재렌더링을 막음 과정 : 공식문서에서 useRef를 읽었음에도 useState 훅의 setter함수처럼 값 상태관리를 useRef에서 어떻게 해야하는 지 몰라서 헤매다가 다시 공식문서를 찬찬히 읽어봄 function handleStartClick() { const intervalId = setInterval(() => { // ... }, 1000); intervalRef.current = intervalId; } 공식문서에 이렇게 변수이름 뒤에 .current 붙이고 변수에 새로 할당할 값 넣어주.. [개발일지] 만남은 쉽고 리눅스는 어려워 리눅스 서버에 대해서 알아야 할 필요성을 느껴서 윈도우 환경에서 버추얼박스를 설치하고 우분투 리눅스 환경을 셋팅했는데 화면이 작아서 디스플레이 그래픽 컨트롤러를 VBoxSVGA 로 바꾸었습니다. 하지만, 그 후 아예 로그인 화면이 나오지 않아서 구글링을 하다가 윈도우 앱 중에 우분투 앱을 깔고 우분투 앱으로 VScode를 실 행하여 리액트 파일을 만들고자 npm install 그리고 npx create-react-app을 입력하자 입력할 때마다 rename 파일 이라는 에 러로 node_modules 내의 파일의 이름 뒤에 .DELETE를 붙이라는 에러가 나와서 npm을 지우고 다시 설치하고 이것저것해도 NPM: ENOENT: no such file or directory, rename 이러한 에러가 계.. [개발일지] 기술스택과 아키텍처 선택 블로그 만들기 프로젝트이며, 기술스택은 프론트는 React 백은 Node.js, express, MySQL 을 사용하기로 했습니다 Node.js와 MySQL은 사실 사용해 본적이 없어서 고민했지만 VScode 로 프론트와 백 둘다 개발할 수 있고 Node.js는 non-blocking I/O라 비동기로 입출력을 빠르게 할 수 있어서 Node.js를 선택했습니다 그리고 프론트와 백 사이에 Nginx 로 proxy를 두어서 스케일 아웃도 할 수 있도록 설계 했습니다 마이크로서비스 아키텍처도 공부하고 싶어서 도입해볼까 하였으나 어떻게 서버를 나누어야 하는지 아직은 어려워서 모놀리식 아키텍처를 선택했습니다 오늘은 'node.js 교과서' 라는 조현영님의 책으로 Node.js를 공부했는데 Node.js는 싱글 스.. 윈터데브캠프 오리엔테이션 (좋은팀을 만나 미션수행 우수팀으로 뽑혀 키링도 받았습니다) 판교 스마일게이트에 다녀왔습니다. 오리엔테이션을 들으니 이제 개발캠프 시작이라는 생각이 드네요 ㅎㅎ 목표설정과 개인적 성장에 도움이 되도록 문서작성하는 법, 팀빌딩 방법, 그리고 12월 1 -2 월 활동들에 대해 알아가는 유익한 시간이었습니다. 개인적으로 공부해야 할 것이 생겨서 내일부터는 월드컵 볼 시간에 개발공부 해야겠습니다. 화이팅~! 스마일게이트 윈터데브캠프 합격 스마일게이트 윈터데브캠프 합격했습니다 ㅎㅎ 3 개월동안 정말 열심히 해야겠습니다~!!! 이전 1 다음
