분류 전체보기

Next.js를 활용해 다수의 프로젝트를 구현하면서 관련된 정리를 해보고자 글을 쓰기로 했다. Next.js는 무엇인가?공식 문서를 살펴보면 React framework for building full-stack web applications이라고 설명이 되어있다. React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현하는 프레임 워크임을 나타내고 있다. Next.js의 주요 특징1. 파일 기반 라우팅pages 폴더나 app 디렉토리 기반으로 자동으로 라우팅 생성pages/about.tsx 만들면 자동으로 /about 경로 생성됨2. 서버 사이드 렌더링 (SSR) / 정적 사이트 생성 (SSG) 페이지별로 렌더링 전략 선택 가능 (get..

프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.Prettier 설치npm install --save-dev prettier  프로젝트 루트에  .prettierrc / .prettierrc.js 파일 추가 module.exports = { printWidth: 200, tabWidth: 2, bracketSpacing: true, arrowParens: 'always', semi: true, singleQuote: true, trailingComma: 'all', endOfLine: 'auto', singleAttributePerLine: true,};semi: false - 세미콜론을 사용하지 않는다.singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 ..

React 렌더링에 대한 최적화시키기 위한 도구인 React.memo, useMemo, useCallback 에 대해 정리 해보았다. 최적화, 메모이제이션업데이트, 변경과 같은 상황이 화면에서 이루어지면 컴포넌트를 다시 센터링하고 레이아웃 및 페인팅 과정을 다시 계산하는 상황이 발생하여 React의 성능을 점검할 때는 컴포넌트 자체의 리랜더링이 불필요하게 반복되고 있지 않은지, 그리고 내부 로직이 쓸데없이 다시 만들어지거나 복잡한 계산을 반복하고 있지는 않은지 고려해야 한다.Memoization(메모이제이션)은 Caching의 일종으로 이미 계산해 본 연산 결과를 기억해두었다가 동일한 연산을 해야 할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법으로 쓸데없이 같은 계산을 반복하게 하지 않게..

저번 글에 이어서 휠 이벤트(= 스크롤) 시 화면이 fadeInOut 이 되면서 페이지가 전환되게 구현해보았다. 구현 포인트마우스 휠 사용 시 fadeInOut 이 되면서 한 페이지 씩 넘어가기handleScrollVertical 함수handleScrollVertical함수는 useCallback을 통해 메모이제이션되므로, 동일한 함수 참조가 유지된다. ( useCallback을 사용 안 하면 컴포넌트가 리렌더링 될 때마다 handleScrollVertical 함수가 새로 생성된다. useEffect 내부의 클린업 함수가 이전 함수와 같은 참조를 가지지 않기 때문에 이벤트 리스너를 정확히 제거하지 못 할 수 있다.)event.deltaY값을 사용하여 사용자가 스크롤 하는 방향을 결정합니다 (event.d..

프로젝트 중 FullPage 스크롤 구현이 필요하여 라이브러리 없이 제작해보았다. 구현 포인트마우스 휠 사용 시 한 페이지 씩 넘어가기풀 페이지를 차지 하지 않는 footer까지 스크롤 가능하게 하기화면구조body 태그에 overflow-y: hidden; 속성을 주고 화면 높이 만큼을 가지고 있는 section 태그에 overflow-y: auto; (outer 클래스 명) 속성을 주어 사용자가 페이지 전체를 스크롤 하지 못하게 방지하며 outer 섹션 내부에서만 스크롤이 가능하게 한다.outer 섹션안에 fullPage를 만들고 싶은 화면 높이 만큼을 가지고 있는 section 들과 footer를 넣어준다. html  cssbody { overflow-y: hidd..

달력 (히트맵) 만들기 (1) 이어서…  이전 글에서는 달력을 만들었다면 이번 글에서는 날짜에 해당하는 포스트 수와 Home에서 이번 달 만이 아닌 다른 달과 년도를 선택할 수 있는 모달 창과 월 별 총 포스팅 수, 달력을 만든 에 넘겨줄 props 를 구한다. 날짜에 해당하는 포스트 수달력을 만들기 전에 날짜마다 포스팅 된 글 수를 구한다.map() 함수를 사용하여 각 포스트의 created_time을 추출하고, 이를 JavaScript의 Date 객체로 변환하여 해당 날짜를 한국 표준시(UTC+9)로 변환하고, 날짜 정보에서 시간 부분을 제외한 후 toISOString()을 통해 ISO 형식의 문자열로 변환해 split("T")[0]을 사용하여 날짜 부분 만을 추출하여 korDate에 저장한다.cre..

개인 웹사이트를 만들면서 깃 헙에 있는 잔디처럼 하루에 포스팅 된 글 수를 한 눈에 보고 싶어 아펙스 차트의 히트맵을 사용하여 잔디와 조금 다르게 구현했다. 구현 포인트월 별 히트 맵 ( 달력처럼 구현 )페이지 진입 시 오늘 날짜 해당 월에 대해 보여주기년, 월 선택 가능하게마우스 호버 시 포스트 갯 수 툴 팁으로 보여주기히트 맵을 사용하여 달력 구현dynamic 을 사용하여 ApexCharts를 import 시켰다.( 관련 글 : https://min-sun.vercel.app/blog/f3df2808-d7ac-4b7f-b2b4-0acda188806d ) 달력 제작 시 고려해야 할 사항전달, 다음날 날짜가 같은 주에 있는 첫 번째 주, 마지막 주 일 자 수를 구해야 한다. 이번 달 날짜 수먼저 Home..

여러 리스트 중 리스트들이 개별로 기능하는 방법에 대해 정리했다. 고려할 사항리스트 중 클릭한 리스트만 열고 닫을 수 있어야 한다.다른 리스트를 열더라도 기존 열린 리스트에 영향이 없어야 한다.리스트 click 이벤트를 주어 handleShowDetail 함수를 통해 해당 리스트의 값을(여기서는 index) 받아researchDetailLiStates에 저장된 값 중 빋아 온 리스트에 대한 값을 반전 시켜 새로운 상태를 업데이트한다.const [researchDetailLiStates, setResearchDetailLiStates] = useState({});const handleShowDetail = (index) => { // setResearchDetailLiStates 함수를 사용하여 이전 상..

Next.js 에 있는 module.css 사용법에 대해 정리해보았다.CSS mosulesCSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다. 파일 명파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css{이름}.module.css 사용법사용할 module.css 파일을 import 해와 className에 적용하면된다.// index.jsximport styles from "@/styles/Home.module.css";export default function Home() { return ( ..

리렌더링 여부를 편하게 확인 할 수 있는 크롬 확장 프로그램 중 하나인 React Developer Tools 사용법에 대해 정리했다.설치chrome extention에서 react develop tools을 설치한다. React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision ccb20cb88b on 7/3/2024.chromewebstore.google.com 설정확장 프로그램에서 React Developer Tools 세부 정보에 들어간다,세부 정보에서 사이트 액세스와 파일 URL에 대한 액세스 허용 설정하고, 시크릿 모드에서도 개발테스트를 허용한다면 ..