분류 전체보기 (65) 썸네일형 리스트형 백엔드와 API 통신 시 헤더 오류 평일은 플젝,주말엔 알바를 하다보니 블로그를 쓸 시간이 없었는데억울해서 좀 써야할 거 같아 남긴다. (백엔드분 잘못은 절대 아니다!)우리 플젝은 음식모임을 생성->만남을 위한 플젝이다.그럼 모임생성이 빨리 되어야하고 내가 그 역할을 맡게 되었다. 스웨거에서 제공 된 형식과 맞췄고 multipart/form-data으로 보냈다.그런데 자꾸 500에러가 뜨는 걸까? headers 부분에 쿠키도 따로 넣어보고credentials 값도 계속 변경해보고 했다.- omit (기본,쿠키 미전송) , include(쿠키 항상전송) , same-origin 쿠키를 동일출처 요청에만 전송왜냐면 콘솔로 찍혔을 땐 쿠키가 값이 잘들어왔다.(accessToken=쿠키값)이라고 한다면, 쿠키값만 정확히 콘솔에 찍혔기 때문이.. 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 같은 훅이 클라이언트 컴포넌트에서만 동작하.. Jest 테스트 방법 jest 테스트 방법은 몇가지가 있다.일단 BDD,AAA를 보겠다. given , when , then을 강조했는데 이걸 좀 보겠다..이게 뭔지 좀 알아봐야겠다. BDD(Behavior-Driven Development)Behavior-Driven Development, 즉 행위 주도 개발은 테스트를 사용자 관점에서 작성하는 방법이다.코드를 짜기 전에, **사용자가 기대하는 행동(Behavior)**을 기반으로 테스트를 작성한다.구성요소:BDD는 주로 다음 구조로 작성돼요:Given: 어떤 상황이 주어졌을 때 (초기 상태 설명)When: 특정 행동을 했을 때 (테스트할 동작)Then: 기대하는 결과가 나와야 한다 (결과 확인)test("",()=>{ given -회원가입 페이지가 그려짐 .. 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 함수 관련 메.. Jest란? Jest는 자바스크립트 테스트 프레임워크다.- 메타에서 개발- React를 포함한 다양한 JS애플리케이션 테스트를 작성하고 실행하는 데 유용하다.-유닛테스트,통합테스트,엔드투엔드테스트까지 다 커버할 수 있다. (차후에 설명) Jest 특징쉬운 설정 가능 : 기본적으로 설정 없이도 바로 사용할 수 있다.빠른 실행 속도 : 테스트를 병렬로 실행해 빠르게 결과를 확인할 수 있다. 스냅샷 테스트 : UI변화가 없는지 검증할 때 유용하다.모킹 함수 기능 : 함수,모듈 등을 모킹(mocking)해서 독립적인 테스트 환경을 만들 수 있다. Jest 언제 쓰나요? 유닛 테스트:개별 함수나 모듈이 예상대로 동작하는지 확인.예) 로그인 함수가 올바른 데이터를 반환하는지 확인.통합 테스트:여러 모듈이 함께 동작할 때, 그.. TodoList(Node.js) 나는 노드가 어렵다. 서버가 어려운 걸지도 모르겠다.원래라면 SQL,Node.js, React를 써서 프로젝트를 해야하는데내가 너무 얕봤다.SQLD,학은제를 하면서 하기엔 당장은 저 플젝 완성을 못할 거 같는 생각에투두리스트 먼저 해보기로 했다.(11.07부턴 코드잇 가서 배운다..!)일단 모습은 이렇고 진짜 별 거 없다. 단순 CRUD가 끝이다.입력 시 input을 초기화 하는 것과 같은 기능은 안넣었다. 파일구조는 이렇게 되어있다.server..js는 서버코드 , todo.html은 웹에 표기, 함수는 todo.js에 넣어놨다.express,cors를 사용하였는데 각각 이런 놈들이다. express - 서버 구성을 좀 더 쉽게 해주는 프레임워크cors -서버에 허용할 도메인을 지정해줘서 보안이랑 .. 새로운 프로젝트 시작 새로운 시작: 노드 공부와 프로젝트 시작이번에는 Node.js를 본격적으로 공부해보려고 한다. 새 프로젝트와 함께 말이다.프로젝트 목표는 명확하다. React, Node.js, SQL을 사용해 티스토리 같은 블로그 사이트를 혼자서 만들어 보는 것이다.이 프로젝트를 통해 내가 얻고 싶은 것은 다음과 같다:Zustand: 로그인, 다크모드 등 전역 상태 관리에 익숙해지기SQL: 관계형 데이터베이스를 직접 다뤄보며 실전 경험 쌓기Node.js: 서버 코드 작성에 능숙해지기또한, 무중단 배포를 도전해보려고 한다. 이는 기존 프로젝트에서는 시도하지 않았던 부분이다.기존 학습 방식의 한계지금까지는 강의를 하나 골라 프로젝트를 따라가는 방식으로 공부해왔다.하지만 이렇게 공부하다 보니 겉핥기만 하는 것 같았고, 배우는.. 포트폴리오 회고 & 도메인 연결 기존 포트폴리오는 이런 모습이었다.지금 보면 정말 못만들었지만 당시엔 이만큼이 내 최대였다.돌아보면 지금 새로 만드는 포트폴리오도 그럴 거 같다.항상 그럴 것이다.전에 있던 것이 이상해보이고 왜 이렇게 짰냐 생각하겠지.그런데 위와 같은 생각을 할 수 있는 건 그만큼 내가 성장했다는 거라 생각한다.오히려 코드가 이상해 보이지 않으면 불안할 거 같다.성장이 멈췄다는 뜻이기도 하니까. 이번 포트폴리오는 배포가 정말 어려웠던 거 같다.가비아에서 도메인을 구매했더니 https를 사용할 수 없었다. 기존 절차는 이렇다.1.버셀로 배포 (.vercel.app) (생략)2.가비아에서 산 도메인을 vercel과 연결vercel에 가서 도메인 추가 그리고 ssl인증을 받아야한다고 한다.3.AWS Certificate M.. 이전 1 2 3 4 ··· 9 다음
