Jaeilit

개인 프로젝트를 하던 중 전에 Vercel 배포할때는 까지 본적 없는 에러를 발견했고 이를 해결해 나간 과정을 설명하려고 합니다.먼저 히스토리를 위해서 도메인 구입과 연결한 것부터 이야기를 하려고 합니다. # 도메인 연결 부터프로젝트 코드보다 인프라에 더 집중을 할 때이다. 도메인 연결부터 이야기를 할 필요는 없지만 전체적인 과정을 설명을 하기 위해 먼저 이야기를 하려고한다. 도메인을 구입을 했는데 .co.kr .com 등 같은 최상위 도메인이 .shop 이나 가비아에서 500원에 파는 것들이 있기한데 지속적으로 운영을 할 목적으로 시작한 프로젝트라 나중에 혹시나 도메인을 이전해야한다거나 할 때 또 귀찮은 일을 해야하는게 2번 일하는 것 같아서 싫었고 또 다른 이유는 도메인을 이전하면 SEO에도 영향이 ..

git action 으로 cicd 를 하는 방법에 대해서 기술하려고 합니다. 본 내용은 nestjs 서버 배포의 내용을 하기 때문에 ec2에 배포를 하려고했고 프론트 배포는 spa 같은 경우엔 s3 에 정적으로 배포를 해도 되니 ec2 인스턴스를 사용할 일은 없을 것 같고, nextjs 를 사용한다면 버셀에서 워낙 잘되있기에 해당사항이 없을 수도 있습니다. 깃 액션에서 수행할 테스크는 로컬에서 하는 방식과 동일합니다.2. aws 로그인을 하고2. 도커 이미지를 빌드와 ecr에 푸쉬하고3. ec2 원격으로 접속한 뒤에4. 이미지를 불러와서 docker copose 해당 서비스를 해주시면 됩니다. 깃 액션에서도 동일하게 수행하면 됩니다. 1. aws 인증- name: Configure AWS credenti..

유저분들에게 관련 안내 이메일을 보내야하는 업무가 발생했다.발송과 발송 과정에서 발생한 문제와 해결 방법을 기록하려고 한다. 이 업무는 단발성으로 다시 사용한다거나 유지보수를 할 코드는 아니기에 작업속도에 집중하려고 했고 코드를 이쁘게한다거나 하려고 하지는 않았다. 보내는 과정은1. csv 형식의 파일로 유저 이메일이 포함 된 리스트를 받아서 json 으로 파싱해서 코드로써 이메일을 추려내서 보내려고 했다.2. 이메일을 발송하고 나서는 sendgird 에도 로그가 남겠지만 노드 자체에서도 발송 후에 로그를 파일로 남기려고 했는데3. nodejs fs 내장모듈을 사용해서 txt 파일생성해서 간단히 유저 별로 sendmail 에 대한 결과만 남기려고 했다. node 의 express 로 서버를 띄우고 간단히..

UI 라이브러리 초기 세팅 (모노레포 -v) 1. 미리보는 폴더 구조  모노레포 구조로 세팅하기- 실제 ui가 담길 packages/**- react + vite 가 담긴 app/docs 구조 1. 프로젝트 생성패키지 매니저는 pnpm 을 사용했다.패키지 매니저 init 명령어를 입력하고 pacakge.json 이 생성 된 것을 확인 후에 packages 폴더와 app/docs 디렉토리를 만들어준다. package.json 생성 이후 필요없는 부분은 지워주고 name 에 패키지의 이름을 지어준다.패키지를 npm에 배포할 목적이라면 npm 에 가입하고 Organization 을 생성해주고 사용하는게 좋은데 배포 목적이 아니라면 딱히 이름을 어떻게 짓던 상관없을 것 같다.pnpm init// pagckage..

이 토글 버튼 UI는 처음엔 a,b 두개로만 동작을 해서 정말 토글버튼이였습니다만 리스트 갯수를 2개에서 더 많은 갯수로 늘려 다양하게 활용처에 사용하고싶은 마음에 코드를 수정한 결과 이런 결과물이 나왔습니다. 사실 토글버튼 보다 nav 버튼에 가깝지 않을까 싶지만 적당한 명칭을 정하지 못하여 최초의 이름인 토글로 지정하였습니다.구조컴포넌트마다 독립적인 구조를 위해서 폴더마다 tsx, hooks, provider, css, types 파일을 가지도록 했습니다.📦components ┗ 📂toggle ┃ ┣ 📜hooks.ts ┃ ┣ 📜index.tsx ┃ ┣ 📜provider.tsx ┃ ┣ 📜styles.module.css ┃ ┗ 📜type.ts - tsx: view 담당- hooks: 로직 담..

렌더링과 리렌더링 최적화(Feat. 메모이제이션) 리액트에서 렌더링이란props와 state를 기반으로 컴포넌트를 구성하는데 이를 요청하고 제공하는 프로세스를 의미한다.브라우저에서도 렌더링이라는 단어를 사용하기 때문에 리액트 렌더링도 흔히 비슷하게 화면에 그리는 페인팅 과정이라고 오해할 수 있는데 리액트에서의 렌더링은 컴포넌트를 호출하는 것이다. 리액트는 렌더링을 먼저 완료하고 DOM을 업데이트한 후 브라우저가 리페인팅한다. 렌더링 프로세스렌더링 프로세스 자체는 트리거, 렌더, 커밋 총 3단계로 구성된다. 먼저 렌더링을 하기 위해서는 아무때나 시도때도 없이 렌더링을 할 수 없으니 이때는 꼭 렌더링 해주세요! 라는 트리거 장치가 필요하다. 그리고 당연히 이 트리거가 되는 조건이 있다. 렌더링을 시키는 트리..

간혹 Graphql 과 RESTful API 의 차이점에 대해서 질의를 받는 경우가 있어서 한번 비교해보고 쉽게 정리 해보려고 합니다. 1. 데이터 쿼리 방식 REST API는 미리 정의된 엔드포인트를 통해 리소스에 접근합니다. 각 엔드포인트는 특정 리소스나 리소스 집합에 대한 정보를 반환합니다. 클라이언트는 서버가 제공하는 방식대로 리소스를 요청해야 하며, 개별 엔드포인트를 통해 데이터를 가져옵니다. GraphQL은 단일 엔드포인트를 사용하며, 클라이언트는 필요한 데이터의 구조를 정의하는 쿼리를 전송합니다. 이를 통해 클라이언트는 필요한 데이터만을 정확히 요청할 수 있으며, 여러 리소스를 하나의 요청으로 가져올 수 있습니다. 2. 오버페칭과 언더페칭 REST API에서는 오버페칭(필요 이상의 데이터를 ..

1. 현상 스토리북 크로마틱 ci cd 를 사용하려고 문서를 보고 따라했는데 깃 액션에서 에러가 발생했다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 에러 내용 non-zero exit code 액션에서 정의해놓은 에러이외로 예기치않게 프로세스가 종..

비동기 프로그래밍의 반대 말은 동기 프로그래밍입니다. 동기 프로그래밍은 순차적으로 위에서 아래로 작성 된 순서대로 코드를 실행하는 프로그래밍법을 이야기하는데요 만약에 동기적으로 프로그래밍을 하다가 시간이 많이 걸리는 작업을 만나면 어떻게 될까요? 브라우저는 이 동기작업이 완료 될때까지 멈춰있게 됩니다. 이런 현상을 방지하고자 비동기적인 프로그래밍이 필요한데 자바스크립트 엔진에서는 브라우저의 웹 API 를 활용하여 비동기 프로그래밍을 할 수 있습니다. 자바스크립트 엔진에는 메모리 힙과 콜 스택이 있습니다. 그 중에서 콜 스택이 비동기 프로그래밍을 가능하게 하는데 어떻게 가능하게 하는지 살펴보겠습니다. 콜 스택에는 함수를 호출하면 함수의 실행 컨텍스트가 순차적으로 스택 구조로 쌓이게 됩니다. 그래서 호출스택..

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터입니다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있습니다. 먼저, 인터프리터란 사람이 이해할수있는 고수준의 언어를 기계어(저수준언어)로의 컴파일을 하지않고 한줄씩 명령어를 읽으면서 바로 실행하는 프로그램 또는 환경을 이야기 합니다. 파이썬, JS 등이 대표적인 언어입니다. 인터프리터는 단점으로 최적화 과정없이 변환하기 때문에 컴파일러보다 성능이 느리다는 점입니다. 흔히들 JS 엔진은 브라우저에서 인터프리터로 처리된다고 알고있지만 V8 엔진에서는 순수 인터프리터만 사용하여 구동하지 않습니다. 인터프리터일 경우 항상 같은 코드를 반복해서 실행합니다. 웹이란 특성상 새로고..