개발조각

로그인 기능 구현할 때 cors, react-query, axios, recoil을 세팅했으므로 로그인 기능과 똑같이 구현해 주시면 됩니다. 회원가입 기능 구성 이메일, 닉네임, 비밀번호, 비밀번호 확인 → 회원가입 버튼 알맞은 일메일을 작성할 경우 : 알맞은 이메일 형식입니다. 알맞은 닉네임을 작성할 경우 : 알맞은 닉네임 형식입니다. 알맞은 비밀번호를 작성할 경우 : 알맞은 비밀번호 형식입니다. 비밀번호, 비밀번호 확인이 일치할 경우: 비밀번호가 일치합니다. 라는 문구를 띄우게 했습니다. api > user.ts import instance from "."; interface User { email: string; nickName: string; password: string; } // 회원가입 ex..

이제 로그인 페이지 관련 css를 다 만들었으니 이전에 백에서 만든 로그인 라우터로 로그인 기능을 구현해 보겠습니다. cors 해결하기 클라이언트에서는 http://localhost:3000, 서버는 http://localhostL:5000이라 하면 클라이언트에서 axios.get('http://localhost:8000')하게되면 서로 다른 origin으로 인해 CORS 이슈가 생깁니다. 저는 CORS 미들웨어를 사용하여 CORS를 해결했습니다. (이게 가장 쉬운 방법입니다!) 1. cors 설치하기 npm i cors 2. express 앱에 적용하기 import express from "express"; import cors from 'cors'; const app = express(); app.u..

작업을 하다 보니 큰 틀? theme.ts, global.ts, _app.tsx를 수정할 경우 styled-components가 풀리는 현상이 발생했습니다. (다시 오류를 구현하려다가 안 나와서 다른 사람 오류캡처를 들고 왔습니다.) - 저도 이거랑 똑같이 `className` did not match. 오류가 났습니다. 이렇게 css가 다 풀린 상태에서요. 이유 Next가 먼저 정적으로 생성된 HTML을 렌더후 나머지 JS파일을 로드하게 됩니다. JS에 의해 동적으로 CSS가 생성되는 CSS-In-Js 방식인 styled-components는 위와 같은 과정에서 생성되는 HTML에 우리의 코드가 함께 빌드되지 않습니다. 해결법 renderPage 함수를 커스터마이징을 통해 해결해야됩니다. renderP..

오늘 로그인 기능을 완성하려 했으나 항상 next에서 뭔가가 걸려서 결국 css까지 밖에 마무리를 못했습니다. 개인프로젝트 진행하면서 Next에서 막혔던 부분들을 공유해보려고 합니다. (css는 딱히 설명할 게 없어서 안 쓰겠습니다.) Next url표시 방법 프로젝트를 작업하다 보면 url을 아래와 같이 쓰고 싶은 경우가 생깁니다. pages |- Login.tsx import Link from "next/link"; const Test = ()=>{ return( 로그인 ) } 하지만 Next에서는 pages에서 작성한 파일이름을 적어야 클릭을 했을 때 Login.tsx로 찾아가게 됩니다. 이때 as를 사용하시면 됩니다. as 이동할 경로 혹은 URL ... 그래서 저는 아래와 같이 작성해 주었습니다..

다크모드는 나중에 구현할까 했지만 프로젝트 규모가 더 커지기 전에 빨리 구현하는 게 좋겠다는 판단이 들어 구현하게 되었습니다. :) 프로젝트 규모가 더 커지기 전에 빠르게 구현 토글을 통해 변경 페이지 이동, 새로고침, 페이지를 나갔다 들어봐도 적용한 테마가 유지 되도록 localStorage를 사용 1. context API를 사용한 이유 다크모드 구현 방법은 대표적으로 contex tAPI, 상태관리(redux, recoil)를 사용해서 구현할 수 있습니다. 하지만 context API를 선택한 이유는 light모드, dark모드만 만들 생각인데 상태관리를 쓸 필요가 있을까 해서 context API를 사용하게 되었습니다. (사실은 context API를 사용해보고 싶어서 사용해보았습니다.) 2. t..

단순하게 css만 짠거라 변경사항 코드만 붙이겠습니다. styles > gloval.ts import { createGlobalStyle } from "styled-components"; import { reset } from "styled-reset"; const Global = createGlobalStyle` ${reset} *{ box-sizing: border-box; outline: none; } html, input, select, textarea{ letter-spacing: -0.05em; color: ${({ theme }) => theme.colors.blackText}; } a{ text-decoration: none; color: ${({ theme }) => theme.color..

Next.js 이미지 넣기 1. 이미지 public에 넣기 next에서는 이미지를 넣을 때 public에 이미지를 넣어줘야 됩니다. 2. 이미지 적용시키기 이미지를 적용시키기 위해서는 Image를 import 해와야 됩니다. 그리고 적용할 이미지도 public에서 불러와야 됩니다. import Image from "next/image"; import logo from "../../../public/logo.svg"; import Image from "next/image"; import logo from "../../../public/logo.svg"; const Header = () => { return ( ); }; 이런 식으로 적용시키면 됩니다. *다음에 추가로 배경이미지 적용방법에 대해서도 적겠습니..

파비콘 적용 1. 파비콘 만들기 저는 평소에 피그마를 자주 사용하는 편이라 피그마에서 로고를 만들었습니다. 파비콘은 .ico확장자로 만들어야 되지만 피그마에서는 ico확장자 파일이 없어서 png로 만들었습니다. 파비콘 사이즈는 32 x 32를 많이 사용해요. 그래서 아래와 같이 가로, 세로 32px인 아이콘을 만들어 주었습니다. 2. 파비콘 저장하기 클릭하시면 오른쪽 패널 제일 아래쪽에 Export부분을 가셔서 이미지 크기(1x : 현재 이미지 사이즈의 1배수 크기로), 파일확장자를 선택하시고 Export Group를 클릭하시면 이미지파일로 만들 수 있습니다. 이미지는 public폴더에 넣어주시면 됩니다. 3. 파비콘 적용하기 파비콘을 적용하기 위해서는 head에 설정해야 됩니다. _app.tsx에 가시..