본문 바로가기

전체 글

(27)
react nodeBird 3-2 (SWR, Moment, next 빌드) SWR dispatch로 인해 코드량이 많아진다면 SWR를 이용해서 코드량을 줄일 수 있습니다. 자동으로 data 값과 error값이 들어가 있고, 노드버드는 axios를 이용하고 있으므로 fetcher를 이용할 수 있습니다. Moment moment는 날짜를 사용할 수 있는 라이브러리입니다. moment, date-fns, dayjs 등이 많이 사용됩니다. moment: 가장 많이 사용되는 라이브러리. date-fns: moment가 불변성을 지키기때문에 사용하기 까다롭기에 다음으로 많이 사용되는 라이브러리. dayjs: 데이터용량이 제일 적기 때문에 사용됨. 리트윗하거나 게시글이 작성될 때 작성 날짜가 게시글의 오른쪽에 나오게 할 것이므로 위와 같이 작성해줍니다. 다양한 표현 메서드들이 있으니 for..
CI/CD CI CI(Continuous Integration) 즉 지속적인 통합(병합)을 의미합니다. 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되는 것을 의미 보통 형상관리툴(Git, SVN 등)을 사용하는데, 기능 추가할 때마다 commit으로 레포지토리에 업데이트를 하게됨 업데이트될 때마다 빌드/테스트/병합하기엔 번거로움이 있음 자동화된 빌드&테스트는 원천 소스코드의 충돌을 미리 방지하는데 있습니다. 따라서, CI의 핵심 목표는 아래와 같습니다. 버그를 신속하게 찾아서 해결 소프트웨어의 품질개선 새로운 업데이트의 검증 및 릴리즈 시간의 단축 CD CD(Continuous Delivery or Continuous Deployment)로 지속적인 서비스제공 or ..
react nodeBird 3-1 (서버사이드렌더링, getStaticProps, getServerSideProps,다이나믹라우팅) 서버사이드 렌더링 CSR(Client Side Rendering) 서버에서 HTML을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하여 전달해주는 방식. 장점 사이트 상호작용에 있어 활발 초기 로딩 후 빠른 웹사이트 렌더링 웹애플리케이션에 좋음 자바스크립트 라이브러리 활용 단점 제대로 구현하지 않을 시 SEO(검색최적화)가 취약 초기 로딩에 많은 시간이 걸림 대부분 추가적인 라이브러리가 필요 SSR(Server Side Rendering) 서버에 HTML 파일을 저장해두었다가 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식. SEO, 크롤링에 최적화 되어 있습니다. 장점 검색엔진 SEO에 최적화 초기 화면 로딩이 빠름 단점 잦은 서버 요청 전체적으로 느린 페이지 렌더링 모든 페이지를 리로..
react nodeBird 2-9 (쿼리 스트링과 lastId방식) 쿼리스트링과 lastId 방식 현재 스크롤을 내리면 같은 게시글을 계속 불러오는 버그가 있습니다. 여러 방법 중 lastId 방식으로 이 문제를 해결하는데, 먼저 mainPosts의 마지막(첫번째) 게시글의 id를 찾아서 이걸 lastId로 데이터를 전달해줍니다. 하지만, get방식은 데이터를 보낼 수 없기 때문에 넣으려면 쿼리스트링(`/주소?key=${value}`)를 이용해야 됩니다. 쿼리스트링의 값은 req.query에 담겨있으므로 req.query.lastId를 백엔드에서 값으로 사용합니다. 또한, 서비스가 처음 시작되는 경우, lastId의 값이 undefined가 되어버려서 에러가 발생할 수 있습니다. 초기로딩이 아닐시에는 if(parseInt(req.query.lastId, 10)) 구문을 ..
react nodeBird 2-8 (multer, express static, 해시태그 완성하기) 이미지 업로드를 위한 multer encType="multipart/form-data" 이미지를 올리게되면 multipart 라는 form-data로 데이터가 전송이 되게 됩니다. 하지만, 지금의 백엔드에서는 json 형식과 이미지나 비디오 같은 데이터를 받을 수 없는 일반적인 Form 데이터만 받을 수 있기 때문에 multer를 설치합니다. multer는 app.js에서 미들웨어로 전체 라우터에 연결해줄 수 있지만 어떤 게시글은 text, 이미지만 올릴 수 있기때문에 라우터에 적용합니다. storage: 파일이 저장될 위치를 설정함 diskStorage: 파일을 디스크에 저장함 destination: 파일이 어떤 디렉토리(폴더)에 저장될 것인지 설정하는 메서드 filename: 폴더 내 저장될 파일의 ..
react nodeBird 2-7 (좋아요, 게시글 삭제, 닉네임수정하기) 게시글 좋아요 완성하기 데이터의 흐름을 기억하면서 코드를 작성하는 것이 좋습니다. dispatch한 postCard.js → 리듀서 → 사가 →백엔드 라우터순으로 작성하면 됩니다. axios.patch(`/post/${data}/like`, data);로 data를 2번쓰게 되면 불필요한 용량만 차지하기 때문에 axios.patch(`/post/${data}/like`)로 줄여주는 것이 좋습니다. 없는 게시글에 좋아요를 누를 수는 없으니 백엔드에서는 게시글의 존재유무를 한번 더 검사하여 안전하게 서비스를 이용할 수 있도록 해주는 것이 좋습니다. 또한, 시퀄라이즈는 MySQL을 사용하므로 관계 메서드가 생성됩니다. 예를 들면, post.addLikers : 추가 post.removeLikers : 삭제 p..
react nodeBird 2-6 (게시글 불러오기, morgan 도입하기) 게시글을 불러오기 위해 posts.js를 만들어 줍니다. findAll로 여러개의 항목을 DB에서 찾아올 수 있습니다. 시퀄라이즈의 find 메소드는 SELECT 쿼리문으로 이해하면 됩니다. findOne : 특정된 하나의 레코드만 찾는다 findAll: 모든 레코드를 찾는다 보통의 SNS를 보면 1~20까지의 게시글이 있다면 최신게시글이 최상단에 위치하는것을 볼 수 있습니다. order를 통해 'DESC' 내림차순으로 설정을 하면 20~1로 최신 게시글이 제일 위에 나타나게 할 수 있습니다. 또한, 모든 게시글을 불러오기에는 컴퓨터 용량의 무리가 될 수 있으므로 인피니트스크롤 할 때 limit, offset 방식과 limit, lastId 방식으로 일정부분 게시글을 불러온 후 그 다음 게시글이 불러올 ..
react nodeBird 2-5 (게시글 댓글 완성, 로그인정보, credentials 이해하기) 게시글, 댓글 완성하기 데이터가 어떻게 이동하는지 잘봐야 됩니다. 그래야 코드를 짤 때 수월하게 할 수 있습니다. PostForm에서 Submit → dispatch({ addPost(text) }) reducers/addPost의 data로 text 데이터를 받음 sagas/addPost로 가서 action.data로 addPostAPI의 { content: data } axios가 백엔드로 요청함 routes/post.js에서 req.body.content로 데이터를 받고 처리해서 프론트로 전달 User의 DB 모델을 만들 때 Post항목이 없기때문에 에러가 발생합니다. 그래서, 관계를 맺고 있는 항목이기 때문에, include를 이용하여 작성해주도록 합니다. 댓글 기능 완성하기 `/post/${da..

반응형