티스토리

Jaeilit

검색하기

블로그 홈

Jaeilit

jaeilit.tistory.com/m

Jaeilit 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Vercel 배포가 자꾸 실패한 이유 (403 Fobidden) + AWS WAF 개인 프로젝트를 하던 중 전에 Vercel 배포할때는 까지 본적 없는 에러를 발견했고 이를 해결해 나간 과정을 설명하려고 합니다.먼저 히스토리를 위해서 도메인 구입과 연결한 것부터 이야기를 하려고 합니다. # 도메인 연결 부터프로젝트 코드보다 인프라에 더 집중을 할 때이다. 도메인 연결부터 이야기를 할 필요는 없지만 전체적인 과정을 설명을 하기 위해 먼저 이야기를 하려고한다. 도메인을 구입을 했는데 .co.kr .com 등 같은 최상위 도메인이 .shop 이나 가비아에서 500원에 파는 것들이 있기한데 지속적으로 운영을 할 목적으로 시작한 프로젝트라 나중에 혹시나 도메인을 이전해야한다거나 할 때 또 귀찮은 일을 해야하는게 2번 일하는 것 같아서 싫었고 또 다른 이유는 도메인을 이전하면 SEO에도 영향이 .. 공감수 3 댓글수 3 2024. 9. 4.
Git action + CICD (EC2 + ECR) git action 으로 cicd 를 하는 방법에 대해서 기술하려고 합니다. 본 내용은 nestjs 서버 배포의 내용을 하기 때문에 ec2에 배포를 하려고했고 프론트 배포는 spa 같은 경우엔 s3 에 정적으로 배포를 해도 되니 ec2 인스턴스를 사용할 일은 없을 것 같고, nextjs 를 사용한다면 버셀에서 워낙 잘되있기에 해당사항이 없을 수도 있습니다. 깃 액션에서 수행할 테스크는 로컬에서 하는 방식과 동일합니다.2. aws 로그인을 하고2. 도커 이미지를 빌드와 ecr에 푸쉬하고3. ec2 원격으로 접속한 뒤에4. 이미지를 불러와서 docker copose 해당 서비스를 해주시면 됩니다. 깃 액션에서도 동일하게 수행하면 됩니다. 1. aws 인증- name: Configure AWS credenti.. 공감수 4 댓글수 1 2024. 8. 30.
smtp sendgrid 이메일 보내기 유저분들에게 관련 안내 이메일을 보내야하는 업무가 발생했다.발송과 발송 과정에서 발생한 문제와 해결 방법을 기록하려고 한다. 이 업무는 단발성으로 다시 사용한다거나 유지보수를 할 코드는 아니기에 작업속도에 집중하려고 했고 코드를 이쁘게한다거나 하려고 하지는 않았다. 보내는 과정은1. csv 형식의 파일로 유저 이메일이 포함 된 리스트를 받아서 json 으로 파싱해서 코드로써 이메일을 추려내서 보내려고 했다.2. 이메일을 발송하고 나서는 sendgird 에도 로그가 남겠지만 노드 자체에서도 발송 후에 로그를 파일로 남기려고 했는데3. nodejs fs 내장모듈을 사용해서 txt 파일생성해서 간단히 유저 별로 sendmail 에 대한 결과만 남기려고 했다. node 의 express 로 서버를 띄우고 간단히.. 공감수 3 댓글수 0 2024. 8. 29.
UI 라이브러리 초기세팅 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.. 공감수 1 댓글수 0 2024. 6. 27.
토글버튼 만들어보기 이 토글 버튼 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: 로직 담.. 공감수 0 댓글수 0 2024. 6. 20.
렌더링과 리렌더링 최적화(메모이제이션) 렌더링과 리렌더링 최적화(Feat. 메모이제이션) 리액트에서 렌더링이란props와 state를 기반으로 컴포넌트를 구성하는데 이를 요청하고 제공하는 프로세스를 의미한다.브라우저에서도 렌더링이라는 단어를 사용하기 때문에 리액트 렌더링도 흔히 비슷하게 화면에 그리는 페인팅 과정이라고 오해할 수 있는데 리액트에서의 렌더링은 컴포넌트를 호출하는 것이다. 리액트는 렌더링을 먼저 완료하고 DOM을 업데이트한 후 브라우저가 리페인팅한다. 렌더링 프로세스렌더링 프로세스 자체는 트리거, 렌더, 커밋 총 3단계로 구성된다. 먼저 렌더링을 하기 위해서는 아무때나 시도때도 없이 렌더링을 할 수 없으니 이때는 꼭 렌더링 해주세요! 라는 트리거 장치가 필요하다. 그리고 당연히 이 트리거가 되는 조건이 있다. 렌더링을 시키는 트리.. 공감수 0 댓글수 0 2024. 5. 2.
Graphql 과 RESTful API 차이점 간혹 Graphql 과 RESTful API 의 차이점에 대해서 질의를 받는 경우가 있어서 한번 비교해보고 쉽게 정리 해보려고 합니다. 1. 데이터 쿼리 방식 REST API는 미리 정의된 엔드포인트를 통해 리소스에 접근합니다. 각 엔드포인트는 특정 리소스나 리소스 집합에 대한 정보를 반환합니다. 클라이언트는 서버가 제공하는 방식대로 리소스를 요청해야 하며, 개별 엔드포인트를 통해 데이터를 가져옵니다. GraphQL은 단일 엔드포인트를 사용하며, 클라이언트는 필요한 데이터의 구조를 정의하는 쿼리를 전송합니다. 이를 통해 클라이언트는 필요한 데이터만을 정확히 요청할 수 있으며, 여러 리소스를 하나의 요청으로 가져올 수 있습니다. 2. 오버페칭과 언더페칭 REST API에서는 오버페칭(필요 이상의 데이터를 .. 공감수 0 댓글수 0 2024. 4. 11.
스토리북 chromatic action error 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 액션에서 정의해놓은 에러이외로 예기치않게 프로세스가 종.. 공감수 0 댓글수 0 2024. 3. 8.
자바스크립트의 비동기 프로그래밍 Promise 비동기 프로그래밍의 반대 말은 동기 프로그래밍입니다. 동기 프로그래밍은 순차적으로 위에서 아래로 작성 된 순서대로 코드를 실행하는 프로그래밍법을 이야기하는데요 만약에 동기적으로 프로그래밍을 하다가 시간이 많이 걸리는 작업을 만나면 어떻게 될까요? 브라우저는 이 동기작업이 완료 될때까지 멈춰있게 됩니다. 이런 현상을 방지하고자 비동기적인 프로그래밍이 필요한데 자바스크립트 엔진에서는 브라우저의 웹 API 를 활용하여 비동기 프로그래밍을 할 수 있습니다. 자바스크립트 엔진에는 메모리 힙과 콜 스택이 있습니다. 그 중에서 콜 스택이 비동기 프로그래밍을 가능하게 하는데 어떻게 가능하게 하는지 살펴보겠습니다. 콜 스택에는 함수를 호출하면 함수의 실행 컨텍스트가 순차적으로 스택 구조로 쌓이게 됩니다. 그래서 호출스택.. 공감수 0 댓글수 0 2023. 11. 16.
자바스크립트 V8 엔진 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터입니다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있습니다. 먼저, 인터프리터란 사람이 이해할수있는 고수준의 언어를 기계어(저수준언어)로의 컴파일을 하지않고 한줄씩 명령어를 읽으면서 바로 실행하는 프로그램 또는 환경을 이야기 합니다. 파이썬, JS 등이 대표적인 언어입니다. 인터프리터는 단점으로 최적화 과정없이 변환하기 때문에 컴파일러보다 성능이 느리다는 점입니다. 흔히들 JS 엔진은 브라우저에서 인터프리터로 처리된다고 알고있지만 V8 엔진에서는 순수 인터프리터만 사용하여 구동하지 않습니다. 인터프리터일 경우 항상 같은 코드를 반복해서 실행합니다. 웹이란 특성상 새로고.. 공감수 2 댓글수 1 2023. 10. 26.
번들러 웹팩 웹 페이지의 서비스들이 규모가 커지기 시작하고 SPA 의 프레임워크/라이브러리 들이 등장함에 따라서 번들러의 역할도 중요해졌습니다. 또한 최근 트렌드 중 Nexjts 는 리액트의 Server Components 를 활용하여 번들 용량을 최대한 줄여 사용자 경험과 성능을 더 최적화 하려고 하고 있기 때문에 번들이 무엇인가에 대해 한번 공부해보려고 했습니다. 모듈 번들러란 브라우저가 필요한 리소스들(html, css, js 기타 Img file font 등)을 병합 및 압축을 해주는 동작입니다. 번들러중에서도 가장 많이 사용되는 모듈 번들러는 Webpack 웹팩 입니다. 그 외에도 Rollup, Parcel, 최근 Vite 도 있습니다. 번들러 사용 이전에는 JS 파일을 사용하기 위해서 기능/페이지 단위 모.. 공감수 0 댓글수 0 2023. 9. 7.
함수형 프로그래밍 - 고차함수 HOF ( 일급객체 ) 프로그래밍 패러다임에서도 설명드렸다시피 프로그래밍에는 크게 명령형과 선언형으로 구분됩니다. 명령형은 결과(Waht)보다 과정(How)을 중요시하고 선언형은 과정(How)보다 결과(What)를 중요시합니다. 이 과정에서 명령형은 OOP 를 지향하여 객체들간의 상호작용과 객체의 상태변화를 중심으로 프로그래밍을 설계하고 선언형은 함수형 프로그래밍을 지향합니다. 함수형 프로그래밍의 특징 - 순수함수 - 불변성 - 고차함수 - 1급 객체 순수함수 순수함수란 같은 입력에는 항상 같은 출력을 반환해야하며, 외부상태를 변경하지않고 외부에 사이드이팩트를 미치지 않는 함수를 말합니다 순수함수 예제) // 순수 함수 예제 1: 두 숫자의 합을 반환하는 함수 function add(a, b) { return a + b; } .. 공감수 0 댓글수 0 2023. 8. 21.
JS - Module System JS 모듈 시스템 모듈 시스템은 코드를 모듈이라는 독립적인 단위로 구성하고, 이를 필요한 곳에서 재사용할 수 있도록 하는 개념입니다. 1. CommonJs CommonJS 는 모듈 시스템의 일종으로, Javascript 를 서버사이드에서 사용하기 위해서 설계되었습니다. 주로 Node.js 환경에서 사용되며, 파일 단위로 코드를 모듈화하고 필요한 곳에서 재사용할수있게 해줍니다. (범용적인 사용) CoomonJS 는 ES6 이전에 널리 사용되었던 모듈 시스템 중 하나입니다. CJS 는 동기적으로 동작하기 때문에 해당 모듈의 내용이 완전히 로드 될때까지 다음 모듈은 기다려야합니다. 또한 동기적이란 말과 헷갈릴수도 있는 동적 로딩입니다. 동적 로딩이란 런타임 시에 필요한 모듈을 동적으로 결정하고 로딩할 수 있는.. 공감수 1 댓글수 0 2023. 8. 20.
프론트엔드 테스트 종류와 비교 테스트 코드 테스트 코드를 왜 작성할까요? 테스트 코드를 작성해야하는 이유는 여러가지가 있습니다. 첫째 버그를 미리 발견할 수 있기 때문입니다. 테스트 코드를 작성하면 코드를 실행하기 전에 버그를 미리 발견할 수 있고 예상치 못한 사이드 이팩트를 찾아내고 버그를 수정함으로써 프로덕트와 내 코드를 더 안전하게 만들수 있습니다. 둘째 리팩토링과 유지보수에 유리합니다. 테스트 코드를 작성하면 리팩토링 과정에서 코드를 변경 할때 기존의 기능들이 올바르게 동작하는지 확인할 수 있어 코드의 유지보수성을 높이고 변경으로 인한 오류를 방지하는데 도움이 됩니다. 셋째 팀 협업 강화에 도움이 됩니다. 테스트 코드를 작성하면 코드의 안전성을 높여 팀내 협업을 강화에 도움이 됩니다. 테스트 코드 종류 유닛 테스트 가장 작은 .. 공감수 1 댓글수 0 2023. 7. 28.
nextjs @svgr/webpack jest + @issue 해결 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. @svg/webpack 으로 react compoent 로 svg 를 사용하고 있었는데 jest testing 하려니까 이런 에러가 발생했다. 에러 내용은 import 를 잘못했다는 내용이다. 첫번째 시도 - 구글링 @icons/ 경로로 tsconfig 에서 path 를 매핑해서 쓰고있었는데 이게 문젠가 싶어서 jest config 에서 moduleNameMapper 부분을 여러번 수정해봤지만 이건 아니였다. tsconfig "paths": { .. 공감수 0 댓글수 0 2023. 7. 21.
프로그래밍 패러다임 위키에서 소개하는 패러다임이란, 한 시대의 사람들의 견해나 사고를 근본적으로 규정하고 있는 테두리로써 인식의 체계, 또는 사물에 대한 이론적인 틀이나 체계를 의미하는 개념이라고 한다. 위 글에서 "체계" 라는 말이 공통적으로 나온다. 즉 프로그래밍 패러다임은 프로그래밍에 대한 체계라고 볼 수 있다. 사실 패러다임이 어떤 사전적인 의미를 가지고있는지보다는 어떤 패러다임이 있는지가 더 중요하다. 패러다임의 종류 무수히 많은 패러다임이 존재하지만 웹 개발시 가장 중요시되는 명령형 프로그래밍과 선언형 프로그래밍에 대해 알아보려고 한다. 1. 명령형 프로그래밍(How) 명령형 프로그래밍은 어떻게에 집중한 프로그래밍으로 절차형 프로그래밍과 객체지향 프로그래밍이 있다. - 어떻게 하는지만 묘사하고 무엇을 해야하는지는.. 공감수 0 댓글수 0 2023. 7. 9.
Nextjs v13.4 Error: connect ECONNREFUSED 127.0.0.1:3001 에러해결 어제 작업하고 푸쉬까지 했는데 오늘 다시 npm run dev 개발 서버를 열어보니 Error: connect ECONNREFUSED 127.0.0.1:3001 라는 에러가 발생했다. 소켓은 쓰지도 않는데 소켓이라..? 일단, 내용은 3001번 포트로 연결하지 못했다는 것인데 로컬은 3000번 포트를 쓰고 있는데 이게 무슨 일이람.. 문제 해결을 위해서 했던 방법들을 나열 해봤다. 1. ls -i :3000 으로 3000번 포트 찾아서 포트 죽여버리기 2. 브라우저에서 localhost 페이지에 쿠키/캐시를 다 날려버리기 3. rm -rf node_modules 로 패키지를 다 삭제하고 설치하기 결론적으로 이 3가지 방법으로도 해결하지 못했는데 사실 json-server 를 썻고 포트를 3001번으로 사.. 공감수 0 댓글수 0 2023. 6. 14.
리액트 재조정과 가상돔 재조정 공식문서 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 이전글에서 브라우저 렌더링 과정을 살펴 봤습니다. 브라우저가 HTML 파싱하여 렌더트리를 구성하고 레이아웃을 계산하여 페인팅을 하는데 DOM 요소의 추가 또는 width height 같이 위치값 변경이 일어나면 Reflow가 일어나서 렌더트리를 재구성하게 됩니다. SPA 의 스택기반의 페이지들은 dom 요소의 변화가 빈번하기 때문에 Reflow 는 많은 연산을 요구함으로 비용이 많이 드는 작업입니다. 이는 성능과도 연결이 되므로 리플로우를 최소화하는 것이 성능을 향상시키는 방법이 됩니다. 재조정과 가상돔 처음에.. 공감수 0 댓글수 0 2023. 6. 8.
브라우저 렌더링 앞에 글에서 URL 을 입력했을 때 DNS 서버에서 IP 를 반환받아 해당 IP 주소의 서버에서 리소스를 받아오는 것까지 알아봤습니다. 받아온 리소스를 어떻게 브라우저에 렌더링하는지 알아보려고 합니다. 브라우저 렌더링 과정 파싱 브라우저는 렌더링 엔진을 통해서 HTML 을 파싱하기 시작합니다. 파싱하던 중 Javascript 코드인 script 태그를 만나게 됩니다. script 태그를 만난 렌더링 엔진은 파싱을 일시중단하고 JS 리소스를 다운로드 하고, JS 를 파싱하기위해 제어권을 JS 엔진에게 넘깁니다. HTML 을 동기적으로 파싱하고 있었기 때문에 JS 엔진에게 넘긴 script 태그도 끝날때까지 기다려야합니다. 이 부분에서 지연이 발생할수있고 JS가 돔을 조작하는 이벤트를 가지고 있다면 scri.. 공감수 0 댓글수 0 2023. 6. 7.
URL 을 입력 했을 때 일어나는 일 제가 롯데자이언츠 야구 경기를 보고싶어서 평일 경기시간인 6시30분에 네이버 스포츠를 들어가려고 합니다. 가장 먼저 naver.com 에 접속하죠 이때 어떤 일들이 벌어질까요? 1. DNS 조회 DNS 조회는 가지고 IP 주소를 받아오는 것을 말하는데요, 여기서 DNS 는 간단히 이야기하면 전화번호부나 노래방 번호 책 같은 겁니다. 저같은 90년대 초반 학생들은 학창시절에 포지션 i love you 를 6666 이라는 번호를 외웠죠,, 여기서 6666 이 인터넷으로 치면 ip, 포지션 i love you 가 DNS 가 됩니다. 다시, 우리는 네이버에 접속 할때 naver 의 ip 주소를 입력하지않고 www.naver.com 를 url 에 입력해서 바로 이동할수있는데요 여기서 naver.com 는 DNS .. 공감수 0 댓글수 1 2023. 5. 26.
Nextjs 13.4 app prefetch 하는 방법 공식문서 내용 Routing: Linking and Navigating | Next.js Using App Router Features available in /app nextjs.org prefetch? 공식문서 설명을 보면 prefetch 은 페이지를 방문하기 전에 백그라운드에서 미리 로드하는 방법입니다. 미리 가져온 경로의 렌더링 결과는 라우터의 클라이언트 측 캐시에 추가됩니다. 클라이언측 캐시를 활용하여 변경되지 않는 세그먼트는 재사용하여 불필요한 작업을 방지합니다. router api 가 달라진점 useRouter() 를 'next/router' 에서 import 하여 router.push( { pathname : '/test/[id]', query : { id: id } } 와 같이 pathn.. 공감수 0 댓글수 0 2023. 5. 20.
대기시간(Latency) 웹 성능 MDN 인용문 웹 성능 | MDN 웹 성능은 객관적인 측정치이면서 로드 시간과 런타임을 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 사이트가 로드되는 데 걸리는 시간, 로드 후 상호작용에 반응할 수 있게 되기 developer.mozilla.org 웹의 성능은 객관적인 측정치고 로드 시간과 런타임에 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 로드에 관해서는 사이트의 로드시간, 로드되고나서 인터랙션이 가능하는데까지의 시간에 속하고 런타임에 대한 인식은 인터랙션이 얼마나 부드럽게 작동되는지에 대한 설명입니다. 로드시간과 인터랙션 시간을 나눠볼수있습니다. SPA 를 다뤄보면 리액트에서는 초기에 text/html 파일로 빈 html 을 내려받고 UI + 인터랙션은 번들링 된 JS 가.. 공감수 0 댓글수 0 2023. 5. 19.
array 중복제거 js arr 에 중복을 제거하는 방법 3가지를 알아보겠습니다. 1. ES6 set MDN 의 설명과 같이 하나의 값만 저장하기 때문에 배열에서 중복값 제거를 쉽게 할 수 있습니다. 2. indexof 와 filter 의 활용 간단한 설명 indexOf 는 배열에서 지정한 값의 첫번째 인덱스를 반환합니다. 비슷하게 findIndex 도 존재하는데 findIndex 는 조건에 부합하는 첫번째 인덱스를 반환 합니다. indexOf 를 활용하여 1번의 숫자가 몇번째 인덱스에 존재하는지 확인 후에 배열의 filter loop 안 index 와 부합한지 확인 후 filter 메서드의 특징의 참인 값만 return 받는 로직입니다. 예를들어 중복 값 1은 인덱스 기준 0, 3,4,5,6~~ 이렇게 나열되어있는데 index.. 공감수 0 댓글수 0 2023. 5. 19.
custom hooks 와 typescript generic 사용하여 input hooks 만들기 늘 잘 관리 된 프로젝트를 위해서 고민하고 노력하는 것을 즐기는데 인풋에 대해서 고민을 해봤다. 인풋은 로그인, 회원가입, 검색 등 input 을 다양한 곳에서 사용한다. 위에는 login page 라고 생각하고 email 과 password 2개의 input 을 만들어봤다. 위에서 필요한 속성은 label tag 를 제외하고 input 의 name 과 value 또 type 정도가 있을 수 있다. handler fn 으로는 onChange, form 태그에 onSubmit 까지가 필수 속성일것 같다. input tag 하나에 name, value, type, placeholder 는 동적으로 컨트롤 한다고 하더라도 onChage, onSubmit 정도는 custom hooks 으로 숨길 수 있지 않을까.. 공감수 0 댓글수 0 2023. 3. 18.
Appollo Client 공식문서 캐시 + 캐시 맛보기(머지,리드) 공식문서 https://www.apollographql.com/docs/react/caching/overview#data-normalization Caching in Apollo Client Overview www.apollographql.com 캐시 동작방법 예를들어 book5 를 두번 호출했을 경우에 inMemoryCache에 저장 된 캐시 데이터가 반환됩니다. 네트워크 호출을 하지않습니다. 캐시는 어디에 저장하는 걸까요? 데이터를 정규화하여 로컬 메모리내에 저장합니다. 캐시는 어떻게 저장 하는 걸까요? 아폴로 클라이언트의 캐시는 falt lookup table 로 저장합니다. 데이터를 서로 참조할수있는 조회테이블(look up table)로 저장하지만 실제로 반환되는 쿼리는 그렇지 않은 경우가 많습.. 공감수 0 댓글수 0 2023. 1. 18.
Next js Jest Test Setting https://nextjs.org/docs/testing#quickstart-2 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. npm 설치 npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom 2. jest.config.js 설정하기 -- 공식문서의 기본옵션 외에도 커버리지로 테스트 범위를 설정해주는 옵션과 test 시 무시할 파일들,, 필요에 따라 기타.. 공감수 0 댓글수 0 2023. 1. 8.
Nextjs 13 CSS in JS 와 CSS Module 사용하기 next가 때문에 ssr이 핫해진건지 ssr 때문에 next가 핫해진건지 여튼 next 와 ssr이 핫해져서 next 를 사용해보기로 했다. 가장 먼저 문제점을 발견했는데 스타일에서 ssr를 적용하면 cra 할때 사용하던 styeld-compoent가 깨진다는 단점이 있었다. 정확히 말하면 깨지는게 아니라 스타일 적용이 늦었다. 네트워크 탭에서 login.html 을 받아올때 적용 된게 아니라 밑에 부분에 page.js 가 모두 로드되고나서야 스타일이 적용됬다. page.html 만 불러오고나서 (page.js)를 불러오기 전 page.js 를 불러오고 나서 nextjs 13 버전에서 app 디렉토리에서 'use client' 부분에서 이 문제가 드러났다. use client는 내용이 많아서 따로 정리를.. 공감수 0 댓글수 0 2023. 1. 8.
EC2 우분투 20.04 도커 설치 https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04 공감수 0 댓글수 0 2022. 11. 14.
react -> nextjs(13 beta) migrate 기본세팅 1. 스크립트랑 라우터 지워주기 npm uninstall react-scripts react-router-dom 2. npm install next - @lastest를 하지 않더라도 13버전이라 자동으로 13버전으로 설치됩니다. npm install next 3. 폴더구조 변경해주기 - next 의 폴더구조를 따라줍니다. 13버전 이전에는 src 안에 pages 라는 폴더 안에서 라우팅을 해주었다면 13버전 이후로는 app 폴더 안에서 이루어집니다. 일단 이 부분은 나중에 해주고 지워준 react-scripts, react-router-dom 이 빨간 줄로 뜰텐데 변경해줍니다. 1. 먼저 react-scripts 는 package.json 에서 Next scrpit 로 변경해줍니다. 보통 이런 부분은 .. 공감수 0 댓글수 0 2022. 11. 11.
공통함수 분리하기 중복체크라는 버튼의 활용범위 1. 회원가입 시에 email 체크시 사용 2. 프로필에서 닉네임 변경 시 사용 3. 기타.. 당장 생각은 안나지만 또 쓸일이 있을수도 있다. 밑에 사진의 코드가 회원가입 컴포넌트와 프로필 컴포넌트 2군데에 중복으로 작성 되어있다. 회원가입에만 작성을 하고 export 로 공유하는 방법도 있겠지만? 또는 .. 커스텀훅으로 어찌어찌만들면 되겠지만 훅까지 만들 필요는 없어보였고 중복되는 함수만 분리해내면 될 것 같아서 공통함수 분리라는 타이틀로 작업하게 됬다. 현재도 기타 다른공부로 인해서 온전히 이 프로젝트에만 시간을 할애하는것도 아니기 때문에 충분히 내 머릿속은 복잡한데, 좀 더 복잡해지기전에 체계?폴더구조? 를 확실하게 잡기위해서 따로 빼자는 생각을 했다. 파라미터 1. e.. 공감수 0 댓글수 0 2022. 11. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.