영상 설명: 빈 댓글을 입력하면 경고창이, 댓글 삭제에 성공하면 성공했다는 알림이 뜬다. 알림창을 전역 관리하는 목적 처음에는 알림창을 각각의 컴포넌트에서 호출하고 그에 따른 상태 관리도 따로 했었다. 이 방법에는 다음과 같은 단점이 있었다. >1. 알림창을 사용하는 컴포넌트마다 ` 를 호출하고 useState()` 로 상태관리를 해줘야 하며 알림창을 띄우는 함수를 따로 구현해야 해서 코드가 상당히 복잡해진다. 특정 컴포넌트에서 호출하기 때문에 해당 컴포넌트가 반환되면 알림창도 같이 꺼진다. (가장 큰 문제) 알림창을 사용할 때마다 아래의 세팅을 해줘야 한다. 이러한 이유로 useContext를 활용해 알림창을 최상위 컴포넌트 `_ap

모처럼 방학을 맞이한 기념으로 그동안 해보고 싶었던 토이 프로젝트를 시작했다. 소셜 로그인은 일단 카카오로만 구현할 생각이었고 Next.JS의 기본적인 설정(데이터베이스 연결, Scss 설정 등) 후에 바로 카카오 로그인 구현을 시작했다. 처음엔 3일이면 충분히 해낼 줄 알았지만 거의 일주일이란 시간이 걸려버렸다. ㅜㅜ Next.js에서 카카오 로그인을 구현하기까지의 모든 과정과 코드를 공유한다. (카카오 홈페이지에서 사이트 등록을 하는 등의 작업은 다른 포스트에서 많이 다루기 때문에 패스했다.) 인증 순서 그림 출처(https://data-jj.tistory.com/53) 구현 과정은 위와 거의 동일하다. 다만 내 사이트에선 토큰 대신 세션을 사용해 유저를 인증한다. (6번만 다르고 카카오

Next.Js 에서 Scss 사용하는 방법 1. Sass 설치 2. 이미 있는 css 파일 모두 scss로 변경 styles/global.css styles/Home.module.css 를 styles/global.scss styles/Home.module.scss 이렇게 바꿔준다. 3. next.config.js 파일 수정 next.config.js에 sassOptions 옵션을 추가한다. 4. variables.scss, mixins.scss 파일 추가 모든 scss 파일에서 공통으로 사용할 variables.scss, mixins.scss 파일을 추가한다. styles/variables.scss styles/mixins.scss 5. next.config.js 파일 수정 이제 next.con