React context 성능 챙겨 잘 써보기
저는 전역상태관리 라이브러리를 별로 즐겨 사용하지는 않습니다. 그래서인지 Context를 잘 써보고 싶은 마음이 있었는데요. 리액트 Context 하면 보통 하위 자식 컴포넌트들이 전부 리랜더링 된다는 단점을 꼽습니다. 자식 컴포넌트가 전부 리랜더링 된다는 단점만 없다면.. 모든 상태를 전역에서 관리하는 전역상태 라이브러리보다 훨씬 문맥에 맞게 코딩할 수 있는 Context가 좋을 것 같습니다. Context사용에 따른 리랜더링을 방지하기 위해 모든 자식 컴포넌트에 React.memo를 사용하자는 말이 아닙니다. 바로 커스텀 프로바이더 훅을 만들어서 리랜더링을 방지하는 것입니다. 제 앱입니다. Change Theme 간단하게 이런 구조로 생긴 앱입니다. 이제부터 app 컴포넌트에서 상태를 공유하기 위해 ..
목적: 데이터베이스 정규화와 관련된 내용을 복습하고 이해. 정규화란 관계형 모델에서 논리 스키마를 효과적으로 모델링하기 위해 이용하는 기법. 정규형을 분석함으로써 릴레이션의 스키마가 얼마나 효율적으로 실세계를 반영하고 있는지 평가할 수 있다. 정규화란 개념을 모르고 스키마를 만들때 프론트엔드에서 요청할 때 이런 데이터들이 필요하니까 이 모델에는 이런 스키마가 필요하겠다.라고 해서 만들었는데, 내가 만든 스키마를 보면 정규화가 무슨 역할을 하는지 모두 이해할 수 있다. 정규화의 효용성 1. 한 릴레이션 내의 컬럼들 간의 관계 표현 2. 불필요한 데이터의 종속과 중복 제거 3. 새로운 컬럼 추가 시 기존 컬럼과의 관계 수정을 최소화 함수적 종속성이란? 속성들 간의 값의 연관관계를 표현한 것. 잘못 설계된 릴..
React Compound Pattern - 코드 사용자를 배려하는 패턴
목적: React Compound Pattern로 개선한 점과 느낀 점을 남긴다. 위와 같은 컴포넌트를 구현하기 위해 Select와 TextField를 감싸는 Container를 구현하고 children으로 내부에 포함하고자 하는 아이템들(Select, TextField, DatePicker 등)을 받을 수 있는 컴포넌트를 만들었습니다.const Search = () => { return ( );};export default Search; 예를 들어 위와 같이 사용하게 됩니다. AutocompleteQueryBox와 SearchKeyword라는 컴포넌트는SearchContainer안에서 Context를 받아서 완벽히 작동하도록 공들여 만든 컴포넌트입니다. 문제가 발..
C와 JS의 함수 선언,호출 차이
C에서 함수를 선언하고 호출하기 위해서는 main함수 위에 함수원형을 먼저 선언해야 한다고 배웠습니다. 왜 그럴까요? js의 함수 선언문과 함수 표현식은 호이스팅에 의해 선언과 호출의 위치가 중요한데, 궁금해지네요. C언어 - 원형선언이 필요한 경우 #include int sum(int a, int b); int main(){ int s; s = sum(30, 40); printf("sum from 30 to 40=%d\n", s); } int sum(int a, int b){ int i,s=0; for (i = a; i
AWS CloudWatch ec2상태 & 로그 모니터링
드디어 개인프로젝트를 배포하고 Github Action으로 배포 자동화까지 완료했습니다. 운영환경에서 테스트를 하는데 서버의 에러로그를 확인하는 방법이 필요했습니다. 로그를 확인할 방법이 따로 없다 보니 디버깅이 어렵고 ec2에 직접 접속해서 docker compose up을 해서 로그를 확인해 보는 수밖에 없었습니다. 또한 동일한 ec2에 프론트엔드, 백엔드 도커 컨테이너를 동시에 실행하다 보니 메모리나 cpu가 잘 버텨줄지도 궁금했습니다. Nextjs가 이미지최적화를 하는데 꽤 많은 cpu를 소모한다는것을 알고 있었거든요. 서버의 log확인, cpu, 메모리 상태 모니터링을 해야할 필요가 있었고 aws 서비스와 연동이 좋은 cloudwatch를 사용해 보기로 했습니다. 방법은 어렵지 않습니다. 블로그..
Github Actions, AWS EC2 배포 자동화
바로 어제 github action으로 도커이미지를 빌드하고 ecr에 푸시하는 것까지 완료했습니다. https://pungwa.tistory.com/217 Docker & ECR & EC2 & Gibhub Action 배포과정 Nest.js로 작성한 백엔드 서비스를 배포하면서 겪은 트러블슈팅입니다. 예전에 개인프로젝트를 배포할 때 ec2인스턴스에 직접 원격접속해서 git pull로 소스를 다운로드하여 build, start 했던 경험이 pungwa.tistory.com 그리고 개발자가 직접 ec2에 원격접속하여 aws cli 로그인, 도커로그인, ecr에서 도커이미지 pull, 도커컴포즈 실행까지 직접 해줘야 했습니다. 오늘은 이 과정까지 자동화하여 main브랜치에 푸시하는것만으로 배포까지 자동화하도록..
Github Actions, Docker, ECR push 자동화
Nest.js로 작성한 백엔드 서비스를 배포하면서 겪은 트러블슈팅입니다. 예전에 개인프로젝트를 배포할 때 ec2인스턴스에 직접 원격접속해서 git pull로 소스를 다운로드하여 build, start 했던 경험이 있습니다. 소스부터 배포까지 해본 경험은 처음이라 ec2가 무엇이고 소스가 어떻게 세상에 공개되는지 공부하는 용도로는 적합했지만 실제 코드를 수정하고 배포하는 과정은 너무 힘들었던 경험이 있습니다. 그래서 이번에는 이 과정을 최대한 줄이고 배포를 쉽게 할 수 있는 환경을 만들어보고자 했습니다. 첫 번째는 일단 ec2관리요소가 적어지도록 dockerizing을 해야겠다는 생각을 했습니다. 일단 도커 이미지 만드는 것부터 해야 했어요. 저는 postgres를 앱과 함께 다중컨테이너로 구성해야 했습니..
React 18.2 useOptimistic(Experimental) 낙관적 업데이트(정말 react-query, SWR은 필요없어지나!?)
게시물에 좋아요 버튼을 Server Action으로 구현했습니다 서버컴포넌트 서버액션은 많은 장점이 있지만 유저 인터렉션이 필요한 부분에서는 클라이언트 컴포넌트를 사용해야 합니다. 위 코드는 서버에서 함수를 실행하고 Js 번들에 포함되지 않고 서버에서 한 번만 랜더링 되겠지만 postLikeSA(서버액션)이 실행되고 성공하면 revalidateTag()로 getIsLiked() fetch 함수를 초기화해서 다시 상태를 업데이트합니다. 아무리 빨라도 당연히 딜레이가 생기게 됩니다. 위 이미지는 클라이언트와 서버가 api엔드포인트로 직접 상태를 업데이트하는 과정을 나타낸 그림이지만 왼쪽에 모니터 이미지를 Nextjs 서버로 생각하시면 되겠습니다. 백엔드 서버에서 200 응답을 받으면 getIsLiked()를..