Just Do IT!

요즘 next.js로 정적 블로그 만들기 관련 글들을 살펴보다가 공통적으로 나오는 contentlayer에 대해 알게 되었다. next.js 13버전에서 사용했던 것 같은데, next.js14에서도 적용할 수가 있었다. 아직 블로그 글을 작성하지 않아서 모르는데, 추후에 확실히 적용되는지 볼 예정이다. 우선, Next.js의 getStaticPaths 함수에 대해 알아야 한다. getStaticPaths? 정적 생성(static generation)을 위한 경로를 동적으로 설정하는 메서드이다. 이 함수는 next.js 에서 동적 경로를 사용하는 페이지에 사용된다. getStaticPaths 함수는 비동기 함수로 작성이 되고, 경로 데이터를 동적으로 생성하는 로직을 구현해야 한다. 이 함수의 반환 값은 객..

nextjs 공부 겸 알고리즘 전용 블로그를 만들어보고자 프로젝트를 하고 있는데, link 코드를 작성하다가 오류가 나서 기록해본다. import Link from "next/link"; import navlinks from "../data/navlinks"; const Nav = () => { return ( {navlinks.map((nav) => ( {nav.title} ))} ); }; export default Nav; 위의 코드가 그 코드인데, npm run dev를 하고 연 순간 오류가 발생했다. 이런 오류였는데, 처음에는 뭐가 뭔지 몰라 당황했는데 직역해보니 간단했다. a태그를 지우거나 Link에 legacyBehavior를 넣어주라는 것이었다. 그래서 공식 문서를 조금 찾아보니, next..

문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지 지표로 성..

사이드 프로젝트에서 tooltip에 대해 알게 되었다. 뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다. 아무튼 나는 나중으로 미루고(?) 있었는데 메인 페이지 UI 구현하면서 실제로 구현해봤다. 물론 다른 프론트엔드 개발자 분이 구현하신 tooltip 파일을 보고 만든 것이다. 그런데 여러 페이지마다 쓰이고 있어서 모든 폴더마다 새로 만들게 아니라 custom hook으로 만들어 쓰는게 더 효율적일 것 같아서 다른 분의 코드를 토대로 구현했다. tooltip이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다. useTooltip 코드 tooltip에는 꼭 생각해야 할 부분들이 있다...

취업 준비를 하면서, 포토폴리오에 대한 고민이 깊어졌다. 원래 있던 노션 포토폴리오가 있는데, 이력서를 갈아엎고 수정하는 과정에서 방치되었다. 그래서 종종 포토폴리오를 요구하는 회사는 지원하지 못했었는데, next.js 공부도 할 겸 개인 프로젝트로 포토폴리오를 만들어보기로 했다. (tmi, 이렇게 블로그에 적어놓으면 미래의 내가 찔려서라도 만들 것 같았다...) 그래서 잊어버리지 않기 위해 초기 세팅에 대한 글을 적어본다. 1. Next.js 설치하기 npx create-next-app@latest [projectName] react로 프로젝트 세팅할 때와 비슷하지만 다른 명령어이다. projectName은 본인이 원하는 이름으로 작성하면 끝. 2. 이어지는 질문들 대답하기 2-1. Would you ..

문제 설명 원래 프로그래머의 기본 소양은 팔굽혀펴기를 단 한 개도 할 수 없는 것이라고 하지만 인범이는 3대 500을 넘기는 몇 안되는 프로그래머 중 한 명이다. 인범이는 BOJ에서 틀린 제출을 할 때마다 턱걸이를 5회 하는 기적의 운동 루틴을 통해 뇌와 근육을 동시에 단련한다. 근육을 단련할 때 식단이 정말로 중요하다는 것을 아는 인범이는 탄수화물이 많은 밥이나 빵 따위의 아침 식사를 대신해 단백질이 많은 계란찜을 해먹는다. 계란찜을 먹기 위해서는 계란을 깨야 하는데, 인범이는 힘이 너무 넘치는 나머지 부엌의 대리석을 이용해 계란을 깨면 늘 껍데기가 산산조각나 뒷처리가 너무 어렵게 되곤 한다. 어떻게 하면 계란을 조심스럽게 깰 수 있을까 고민하던 인범이에게 유현이는 굉장히 좋은 해결책을 알려주었다. 바..