자기계발 캠퍼스

동아리에서 진행하는 프로젝트 중 세부 nav 바 중 하나의 item을 클릭하면 그에 맞춰 포커스가 유지되는 nav 바를 만들어보았다. 현재 Nextjs를 사용 중이다. 일단 결과를 먼저 보면 이렇다. hover했을 때 색깔이 변경되고 클릭하게 되면 foucs가 유지되어 선택된 항목은 계속 색깔이 바뀐 채로 있는다. 사실 이걸 맨 처음 구현하려고 했을 때 foucs 이벤트를 걸어줘야겠다고 생각했다. 근데 Nextjs 상으로 focus를 걸어주는 방법은 useRef를 사용하여 걸어주는 방법이 있는데 여러개 항목을 다 ref로 컨트롤하고 그때그때마다 선택된 애는 focus 다른 애들은 그냥 가만히 냅두는 그런 코드를 짜는 것에 대해서 어려움도 느꼈을 뿐더러 굉장히 비효율적인 것 같다는 생각이 들었다. 그래서 ..

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=PL6QREj8te1P7gixBDSU8JLvQndTEEX3c3 어떤 스프린트를 해볼까하다가 Next를 좀 더 익숙하게 다뤄보고자 하는 마음에 클론코딩을 하나 더 해보기로 했다. 저번에 했던 포트폴리오 웹사이트인데 전혀 다른 구성과 디자인으로 해보았다. 일단 완성본부터 보자. 솔직히 유튜브 영상 썸네일이 너무 까리해보여서 선택하기는 했음. SPA(single page application)이고 페이지 구성은 -헤더와 푸터 -Hero 섹션 -Projects 섹션 -Technology 섹션 -Timeline 섹션 - Accomplishments 섹션 헤더와 푸터는 그렇게 어려운 부분이 없었다. 컴포넌트를 좀더 잘게 쪼개어 ..

이 글은 '개발하는 정대리' 님의 Next.js 포트폴리오 사이트를 듣고 실습한 후에 작성하는 회고록입니다. https://www.youtube.com/watch?v=KvoFvmu5eRo&t=5717s 사용된 스택 - Next js - tailwind css - Notion API - LottieFiles (그림 삽입) 구현 목표 1. 홈페이지 - LottieFiles에서 Lottie 삽입하기 - Tailwind 라이브러리에서 헤더와 푸터 가져오기 - 포트폴리오 페이지와 링크 연결 - 헤더와 푸터에서 홈페이지 링크 연결 2. 프로젝트 페이지 - Notion에서 데이터 테이블 생성한 후 fetch로 데이터 가져오기 - 가져온 데이터를 컴포넌트 하나를 map하는 구조로 화면 생성 - 컴포넌트에 삽입할 데이터..

Next JS에서 next.config.js 파일을 조작하는 법 중 Redirects와 Rewrites를 알아보자. Next App 에서 next.config.js 파일을 가서 본다. 처음에는 reactStrictMode: true만 있을 텐데 아래와 같이 redirects함수를 async로 선언한다. source : '입력주소' destination : 'source 주소 입력하면 이동할 주소' premanet : true/false 캐싱 여부 source 주소 입력 -> destination 주소 이런 구조다. 서버를 실행하고 localhost:3000/hello를 입력하고 엔터를 누르면 이렇게 짠하고 /hello가 아닌 /bye로 향하게 된다. 이게 redirects다. source에 따라 원하는 ..

리액트 프레임워크인 Next를 시작해보자. 역시 시작은 공식 docs를 보는 게 국룰 create-react-app를 하는 것처럼 시작한다. 다만 뒤에 @latest를 붙여주는 걸 까먹지 말자. 이왕이면 최신 버전 쓰는게 좋으니깐ㅎㅎ 설치가 완료되면 npm run dev를 하고 우리의 베프인 localhost:3000으로 가서 열리는지 확인한다. pages/index.js를 열심히 수정해서 원하는 웹사이트를 만들면 된다. 이 app은 '/' route를 시작할 때 index.js 파일을 불러온다. 이제 VSCode를 켜보자. 파일들이 정말 많다. package를 확인해보면 react와 react-dom은 물론이거니와 next가 깔려있다. 이제 페이지를 만들러 가보자. pages 폴더에 가서 원하는 파일명..