분류 전체보기

총 118개의 글

TIL #049

오늘 한 것 문장카드 작성 API 구현 이미지 저장 API 구현 (AWS S3 버킷과 연동) 세션에 토큰 저장 문장 카드 작성 API 구현(백엔드, 프론트엔드 모두) 오늘 배운 것 Access-Control-Allow-Methods CORS에러 해결 도중 발견한 HTTP 메서드. 주어진 URL 또는 서버에 대해 허용된 통신 옵션을 요청하는 메서드이다. 즉 GET, POST 등의 실질적인 데이터가 동반된 통신이 이루어지기 전에, 해당 통신에서 어떤 메서드들이 사용 가능한지 미리 체크하는 역할의 메서드이다. 특히 CORS와 깊게 관련되어 사용된다. 관련 문서 MDN : OPTIONS 오늘 느낀 점 CORS….죽…ㅇ ㅕ 줘….

TIL 2023.06.02

TIL #048

오늘 한 것 카카오 로그인 / 로그아웃 구현 트러블 슈팅 Error: write EPROTO 140704431285824 문제 원인 localhost에 https 프로토콜로 요청해서 발생 문제 해결 방법 프로토콜을 https에서 http로 변경해주기 Express req.body undefined 문제 원인 body-parser 미비 문제 해결 body-parser 사용 오늘 느낀 점 남들이 했다면, 나도 할 수 있는거다.

TIL 2023.05.31

MongoDB querySrv ENODATA 에러

문제 원인 스타벅스 등의 공용 와이파이에서의 mongodb접근하기 때문에 생기는 문제 문제 해결 와이파이 설정 변경을 해 주면 해결할 수 있다. 1. 와이파이 설정으로 들어간다 2. 사용하고 있는 와이파이의 세부사항을 눌러준다 3. DNS 서버 주소에 8.8.8.8을 추가해준다 4. 와이파이를 껐다 킨 후 다시 mongoDB에 접속해본다

FE/Trouble Shooting 2023.05.31

TIL #047

오늘 한 것 프로필 페이지 UI 구현 프로필 편집 페이지 구현 오늘 배운 것 next13 동적 라우팅 next13은 app 폴더 기반으로 페이지 라우팅이 구성된다. 브래킷으로 폴더 명을 감싸는 방식으로 페이지를 동적으로 라우팅할 수 있다. app ㄴ[id] //폴더명을 브래킷[]으로 감싸면 동적 라우팅이 가능하다. ㄴpage.tsx next13에서 환경변수를 로드할 때 undefined으로 로드되는 에러 환경변수를 불러올 때 반드시 NEXT_PUBLIC_ 접두사를 잊지 말자! 해당 에러와 관련된 자세한 내용은 여기를 통해 확인할 수 있다. next_auth 404에러 (feat. next13) \[...nextauth].ts 파일을 위치가 잘못되어 생긴 문제. 해당 에러와 해결 과정에 대한 자세한 내용은..

TIL 2023.05.30

next_auth 404에러 (feat. next13)

문제 상황 next13 프로젝트에서 next_auth 라이브러리의 signIn()을 사용하자 404에러가 남 문제 원인 […nextauth].ts 파일의 위치를 잘못 잡아서 생긴 문제. 해결 방법 […nextauth].ts 파일을 page/api/auth 폴더 내부로 옮겨주자. 하지만 next_auth쿤…내 next13 프로젝트는 app 폴더 기반이라굿..! 상관하지 않아도 된다. 우리의 프로젝트가 /app 폴더 기반이라도, next_auth는 오로지 /page에서만 동작한다. 프로젝트 최상단에 /page/api/auth 폴더를 추가해줘서 그곳에 […nextauth].ts 파일을 넣어주자. app 폴더와 page폴더가 함께 존재하는 이상한 상황이라도,,,그러려니 하자. next_auth 공식으로 발표한 ..

FE/Trouble Shooting 2023.05.30

next13에서 환경변수를 로드할 때 undefined으로 로드되는 에러

문제 상황 process.env를 통해 환경변수를 불러왔을 때, undefined으로 나옴 next13에서는 process.env를 별도의 라이브러리 설치 없이 기본적으로 사용가능하다. 문제 원인 및 해결 방법 에러 방랑자(?) 당신의 에러도 다음 중 하나이길 바란다. 원인 1. process.env를 비구조화 할당을 통해 불러옴 env는 비구조화 할당을 통해 불러올 수 없다. 비구조화 할당을 풀어주도록 하자. 참고로 Dynamic Variables (동적 변수) 도 process.env에서는 먹히지 않으니 주의하도록 하자. // Before const { NEXT_PUBLIC_PRIVATE_KEY } = process.env; // After const PRIVATE_KEY = process.env.N..

FE/Trouble Shooting 2023.05.30

TIL #046

오늘 한 것 Project : 1Day1Quote 작성 페이지 UI 로직 수정 ( 풀리퀘 링크 ) 커뮤니티 페이지 UI 로직 수정 ( 풀리퀘 링크 ) 테스트용 페이지 배포 ( 링크 ) 오늘 배운 것 모바일 브라우저에서 input을 통해 사진 받기 input의 type을 ‘file’로, accept를 ‘image/*’로 지정 해 주면 된다. 오늘 느낀 것 작성, 커뮤니티 페이지 UI 구현 및 테스트 페이지 배포 작성, 커뮤니티 페이지 UI를 구현 완료했다. 더미데이터를 통해 별도의 API 없이 컴포넌트 기능 사용이 가능하도록 구현했다. (새로고침하면 전부 사라지지만…😂) 이렇게 구현한 페이지들을 테스트 URL에 배포까지 완료하였다. 테스트페이지를 통해 배포하니 실제 모바일로 테스트 해 볼 수 있어서 편리한..

TIL 2023.05.28

TIL #045

오늘 한 것 GNB 위치 지정 BNB 구현 AppGuide 구현 LoginTemplate 구현 CommunityCard 구현 RoundButton 구현 CommunityTemplate 구현 #1 issue 풀리퀘 형성 및 dev로 머지 테스트 페이지 배포 오늘 배운 것 fixed 컴포넌트 가운데 정렬하기 %를 이용해 top, left 등을 지정하면 된다 .container { position: fixed; top: 50%; left: 50%; } next13에서 현재 url 찾는 방법 : usePathname usePathname을 통해 현재 url을 알 수 있다. usePathname은 next/navigation을 통해 불러올 수 있다. 'use client' import {usePat..

TIL 2023.05.26

TIL #044

오늘한 것 Project : 1Day1Quote 프로젝트 피그마 디자인 끝내기 프로젝트에 사용할 기술 선정 프로젝트 노션 페이지 작성 프로젝트 앱 생성 프로젝트 기본 설정 (Emotion, CSS, SVGR 등) GNB 컴포넌트 구현 FE Next13 변화&장점 학습 Next13 변화 및 장점 관련 기술 블로그 글 작성 오늘 배운 것 Next13 변화 및 장점 (부제 : Next13을 사용해야 하는 이유) Next13의 변화와 장점에 대해 알아보고 작성한 글은 여기서 확인할 수 있습니다. HMR Hot Module Replacement. 런타임에 페이지 새로고침 없이 모듈을 자동으로 개싱하는 기능을 의미합니다. 개발 경험을 향상시킨다는 장점이 있습니다. ThemeProvider와 SSR 서버사이드렌더링에..

TIL 2023.05.24

Next13 변화와 장점 빠르게 알아보기

들어가기 앞서 사이드 프로젝트를 진행하기 앞서, 소문의 Next13이 정말로 사용할만한 가치가 있는 것인지 판단하기 위해 Next13의 변화와 해당 변화에 대한 장점들에 대해 간단히 알아보았습니다. 톺아보기 수준은 아니지만, 빠르고 간단하게 Next13의 장점과 가치에 대해 알고 싶은 독자에게 도움이 되길 바랍니다. 변화 1 : app directory (beta) ❗ 프로덕션 환경에선 아직 사용하지 않기를 권장 설명 레이아웃 Layouts 파일 시스템을 통해 레이아웃 정의 가능합니다. 정의된 레이아웃은 상태를 유지하고, 다시 랜더링 되지 않습니다. 보다 자세한 정보는 여기에서 장점 상태를 유지 가능 비용이 많이 드는 재랜더링을 최대한 피할 수 있음 또한 경로간의 UI 또한 쉽게 공유 가능 사용 방법 /..

FE 2023.05.24
< [1] [2] [3] [4] [5] [6] [7] [···] [12] >

티스토리툴바