본문 바로가기

분류 전체보기100

Next.js14 Suspense 오류 현재 15버전까지 나왔지만 호환성 이슈로 인해 14버전으로 프로젝트를 진행중이다.지금 하고 있는 플젝 중에 겪은 일이다.오류 내용은 코드블럭에 있다. Generating static pages (19/24) [= ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout이 오류는 **useSearchParams()**가 Suspense로 감싸져 있지 않아서 발생한 것이다.. Next.js 13 이상부터는 useSearchParams 같은 훅이 클라이언트 컴포넌트에서만 동작하.. 2024. 12. 12.
Jest 테스트 방법 jest 테스트 방법은 몇가지가 있다.일단 BDD,AAA를 보겠다. given , when , then을 강조했는데 이걸 좀 보겠다..이게 뭔지 좀 알아봐야겠다.  BDD(Behavior-Driven Development)Behavior-Driven Development, 즉 행위 주도 개발은 테스트를 사용자 관점에서 작성하는 방법이다.코드를 짜기 전에, **사용자가 기대하는 행동(Behavior)**을 기반으로 테스트를 작성한다.구성요소:BDD는 주로 다음 구조로 작성돼요:Given: 어떤 상황이 주어졌을 때 (초기 상태 설명)When: 특정 행동을 했을 때 (테스트할 동작)Then: 기대하는 결과가 나와야 한다 (결과 확인)test("",()=>{ given -회원가입 페이지가 그려짐 .. 2024. 11. 19.
Jest Method 1. Test 블록 관련 메서드describe(name, fn): 테스트 그룹을 정의하는 블록입니다. 테스트 케이스를 논리적으로 묶을 때 사용합니다.test(name, fn) 또는 it(name, fn): 개별 테스트 케이스를 정의합니다.beforeAll(fn, timeout): 테스트 케이스가 실행되기 전에 한 번 실행됩니다.afterAll(fn, timeout): 모든 테스트 케이스가 실행된 후 한 번 실행됩니다.beforeEach(fn, timeout): 각 테스트 케이스가 실행되기 전에 실행됩니다.afterEach(fn, timeout): 각 테스트 케이스가 실행된 후 실행됩니다.2. Assertions (단언) 메서드expect(value): 테스트할 값을 지정합니다.3. Mock 함수 관련 메.. 2024. 11. 19.
Jest란? Jest는 자바스크립트 테스트 프레임워크다.- 메타에서 개발- React를 포함한 다양한 JS애플리케이션 테스트를 작성하고 실행하는 데 유용하다.-유닛테스트,통합테스트,엔드투엔드테스트까지 다 커버할 수 있다. (차후에 설명) Jest 특징쉬운 설정 가능 : 기본적으로 설정 없이도 바로 사용할 수 있다.빠른 실행 속도 : 테스트를 병렬로 실행해 빠르게 결과를 확인할 수 있다. 스냅샷 테스트 : UI변화가 없는지 검증할 때 유용하다.모킹 함수 기능 : 함수,모듈 등을 모킹(mocking)해서 독립적인 테스트 환경을 만들 수 있다. Jest 언제 쓰나요? 유닛 테스트:개별 함수나 모듈이 예상대로 동작하는지 확인.예) 로그인 함수가 올바른 데이터를 반환하는지 확인.통합 테스트:여러 모듈이 함께 동작할 때, 그.. 2024. 11. 19.
TodoList(Node.js) 나는 노드가 어렵다. 서버가 어려운 걸지도 모르겠다.원래라면 SQL,Node.js, React를 써서 프로젝트를 해야하는데내가 너무 얕봤다.SQLD,학은제를 하면서 하기엔 당장은 저 플젝 완성을 못할 거 같는 생각에투두리스트 먼저 해보기로 했다.(11.07부턴 코드잇 가서 배운다..!)일단 모습은 이렇고 진짜 별 거 없다. 단순 CRUD가 끝이다.입력 시 input을 초기화 하는 것과 같은 기능은 안넣었다. 파일구조는  이렇게 되어있다.server..js는 서버코드 , todo.html은 웹에 표기, 함수는 todo.js에 넣어놨다.express,cors를 사용하였는데 각각 이런 놈들이다. express - 서버 구성을 좀 더 쉽게 해주는 프레임워크cors -서버에 허용할 도메인을 지정해줘서 보안이랑 .. 2024. 11. 2.
새로운 프로젝트 시작 새로운 시작: 노드 공부와 프로젝트 시작이번에는 Node.js를 본격적으로 공부해보려고 한다. 새 프로젝트와 함께 말이다.프로젝트 목표는 명확하다. React, Node.js, SQL을 사용해 티스토리 같은 블로그 사이트를 혼자서 만들어 보는 것이다.이 프로젝트를 통해 내가 얻고 싶은 것은 다음과 같다:Zustand: 로그인, 다크모드 등 전역 상태 관리에 익숙해지기SQL: 관계형 데이터베이스를 직접 다뤄보며 실전 경험 쌓기Node.js: 서버 코드 작성에 능숙해지기또한, 무중단 배포를 도전해보려고 한다. 이는 기존 프로젝트에서는 시도하지 않았던 부분이다.기존 학습 방식의 한계지금까지는 강의를 하나 골라 프로젝트를 따라가는 방식으로 공부해왔다.하지만 이렇게 공부하다 보니 겉핥기만 하는 것 같았고, 배우는.. 2024. 10. 9.

티스토리툴바