1. 개요Next.js 프로젝트에서 특정 섹션으로 부드럽게 스크롤 이동하는 기능을 구현하고 싶다면 react-scroll 라이브러리를 사용하는 것이 가장 간편한 방법 중 하나입니다. 이 글에서는 react-scroll의 기본적인 사용법과 TypeScript 환경에서 발생할 수 있는 오류 해결 방법, 그리고 스크롤 유도 애니메이션 구현까지 소개합니다.2. react-scroll 기본 사용법react-scroll을 사용하면 클릭만으로 페이지 내 특정 요소로 부드럽게 이동할 수 있습니다. 사용 방법도 매우 간단합니다.설치npm install react-scroll사용 방법스크롤을 트리거할 버튼이나 텍스트에 Link 컴포넌트를 사용합니다.import { Link } from 'react-scroll'; 이동할..

1. Next.js 소개설명Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅 등 다양한 기능을 제공합니다. 페이지 로딩 속도, SEO, 코드 분할 등의 장점이 있습니다.2. 폴더 구조와 자동 라우팅설명app 폴더 하위에 생성된 폴더명이 URL 경로가 됩니다각 폴더 안에 page.js를 만들면 해당 URL로 접속 가능3. 레이아웃 시스템설명layout.js는 해당 경로 내 모든 페이지의 공통 레이아웃을 정의합니다.내부의 {children}은 해당 위치에 각 page.js의 내용이 삽입됩니다.상위 폴더에 layout.js가 있다면 중첩되어 적용됩니다.4. 컴포넌트의 종류Server Component설명기본 컴포넌트 (별도 지정..

1. Type vs Interface공통점객체의 구조를 정의할 때 사용React 컴포넌트의 props 타입으로 모두 사용 가능차이점 확장교차 타입 (&)extends 키워드유니언 타입 지원가능불가능중복 선언에러 발생선언 시 자동 병합사용 추천 용도유니언 타입, 복합 구조순수 객체 구조, 확장 구조결론Interface -> 유니온/교차 타입, 함수/튜플, 리터럴 사용 시Type -> 객체 구조, 클래스, 확장성 필요할 시 2. React.FC를 안 쓰는 이유장점props 타입을 간단하게 작성 가능children이 자동으로 포함됨단점children이 자동 포함되므로 원치 않는 속성이 생길 수 있음제네릭이나 defaultProps와 같이 복잡한 구조에 제약이 생김권장 방식type Props = { titl..

평소 클라우드에 관심은 있지만 어려워 보여 접근을 하지 못했는데네이버 클라우드에서 주최하는 HANDS-ON-LAB은 무료 교육이라길래 다녀와봤습니다! 먼저 HANDS ON LAB에 대해 설명드리자면네이버 클라우드에서 진행하는 무료 교육으로 네이버를 처음 접하는 사용자가 대상입니다.교육 시간은 10시~17, 교육장소는 네이버 클라우드 플랫폼 교육장 (강남 테헤란로)였습니다.점심 식사와 카페 음료가 제공되었고 대신 노트북이 필수였습니다 ▼ 신청은 아래의 네이버 클라우드 플랫 사이트에서  NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology C..

웹 성능을 최적화하는 방법으로 다양한 방법이 있지만그 중 간단한 방법을 뽑자면 바로 '폰트 경량화'입니다. 폰트 경량화는 2가지 종류로 나뉘는데요.1)폰트 용량을 줄이는 방법과2)잘 쓰지 않는 글자를 빼버리는 방법입니다. 2번의 방법은 한글과 같이 다양한 문자가 발생 가능한 언어에서만 사용가능하며모든 언어에서 사용 가능하지는 않습니다.따라서 이번 포스팅에서는 1번의 방법에 대해서 자세히 소개하겠습니다.✔폰트 종류(용량별)WOFF2: 가장 성능이 좋은 폰트 ( WOFF보다 더 압축된 폰트 )WOFF: 기본적인 압축 폰트EOT / TTF : 압축이 되어 있지 않은 폰트폰트 용량을 줄이는 방법으로는 다른 확장자의 파일을 사용하는 것입니다.이 중에서도 woof2 파일이 가장 압축률이 좋아 파일 용량이 적습니다...

터미널에 'watch'를 하기 위해 사용한 json-server --watch db.json 명령어가 오류가 나길래 왜인가 싶었더니해당 json-server를 global 로 설치하니 포트가 연결되면서 해결이됐다.그 전에 이 파일 안에서만 설치하도록 했던 것이 오류 원인이였던 것이다. npm install json-server 말고 npm install json-server -g 를 설치하면 된다. 그 후 json-server --watch jason.db를 써주면 \{^_^}/ hi! 가 출력된다.

HTML로 웹페이지를 만들다 보면 반응형으로 웹을 만들어야 겠다는 생각을 하게 됩니다.일반적으로 반응형 웹을 고려하고 만들지 않으면  제작한 디바이스가 아닌다른 디바이스로 들어갔을때 UI 요소들이 이상한 곳에 가있거나 글씨가 깨지게 깨져 있기 때문입니다. *반응형 웹은 ?디바이스의 창의 크기에 따라 알아서 요소들이 유기적으로 배치되는 사이트를 의미  이를 해결하기 위한 방법으로는 3단계로 1.html - 특정 meta 태그 삽입하기2.폰트 사이즈 px 대신 em 이나 rem사용하기3.css - 미디어 쿼리 사용하기 가 있습니다.1.html - 특정 meta 태그 삽입하기위와 같이 head 태그 안에 저 meta 태그를 삽입해주면 됩니다. 해당 내용을 자세히 설명해드리자면viewport는 웹 페이지에서 보..

위 사진처럼   html과 css를 이용해 원을 만들고 글자,이미지를 원 위에 배치하고 싶으신가요..?저도 처음 웹페이지를 제작 하며 자초지종 다 겪어가며 성공했는데요 ㅠㅠㅠ정답이 아닐 수도 있습니다만 html과 css로 제가 완성시킨 방법을 알려드릴게요1) 원 만들기첫번째로 우리는 원을 만들어 줘야 합니다.HTML에서 태그를 만들어주세요 그 다음으로는 css에서 꾸며주면 돼요이 때 중요한것은 position !! 꼭 relative 여야 해요div{ background-color: antiquewhite; border-radius: 50%; width: 24%; padding-bottom: 24%; position: relative;} 자세히 설명 드리자면 해당..

CSS를 쓰다보면 특정한 셀렉터를 쓰고 싶을때 어떻게 써야 할지 막힐 때가 있다. 이를 쉽고, 재밌게 배울 수가 있는 방법이 있는데 바로 css dinner 게임으로 익히는 것이다. 이는 깃허브에서 제공하는 무료프로그램으로 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 위의 창을 누르면 해볼 수 있다. 게임을 하는 방법은 이렇게 가운데 문제가 뜨면 (ex plate를 골라라) 왼쪽 아래의 흰창 첫째줄에 정답인 셀렉터를 쓰고 엔터키를 누르면 된다. 바로 옆 검은 페이지에는 html 코드가 적혀 있으므로 이를 참고하면 되고 막힐때는 가장 오른쪽의 힌트와..

div나 section 등으로 만든 박스가 있다. 이 박스 내에 써진 글 뿐만 아니라 border인 테두리까지 가운데로 정렬 하고 싶다면 어떻게 해야할까? CSS에서 일단 어느 정도 크기를 할지 (박스크기) 를 width와 height를 정해주고 margin-left : auto , margin-right : auto 를 { } 안에 써주면 가운데로 정렬이 된다! text-align 과의 차이점은 얘는 text만 정렬되기 때문 box자체가 정렬되는 것이 아니다. (그래서 만약 box width가 원하는 길이보다 짧다면 박스 내에서는 center지만 원하는 것보다 왼쪽으로 치우친 글을 만날 수 있게 된다.)