List 7

[Nextjs 험난한 여정] 2-2. 내가 바로 웹사이트 건축가

이번 글은 스압이 예상됩니다. 그런데 요즘도 스압이라는 말을 쓰나요?…쩝~ 🪜 헤더 구조util: 로그인, 회원가입 등 보조 기능 제공logo: 사이트 아이덴티티 역할gnb: 주요 메뉴 제공하여 사이트 구조를 쉽게 파악 가능 🪜 푸터 구조site map: 주요 하위 메뉴 제공info, copy: 회사정보 및 저작권 문구sns: 외부 sns 채널 연결 ⚒️ 대략적인 사이트 구조 모습아래에는 실제 레이아웃 코드를 작성하겠다. 1️⃣ Header.js 1️⃣ 실제 화면 2️⃣ Footer.js2️⃣ 실제 화면 아니갑자기 프로젝트 투입해야해서 여기까지 쓰고 올리겠습니다ㅜ

Study/Develop 2025.05.02

[Nextjs 험난한 여정] 2-1. 부실공사 방지하기

앞서 폴더 구조를 잡았으니 이번엔 사이트 구조를 잡아보겠다. 정말 단순한 구조이다.이미지에선 header와 nav가 분리되어 있지만 사실상 붙어있다고 해도 무방. 아무튼~ 이 구조를 만들기 위해 이전에 만든 폴더 구조를 활용하여 작업할 것이다. (작업 전 추가된 내용이 있는데 Emotion이라는 라이브러리를 사용하게 되었다. 이전 글에 업데이트하겠숨) 📂 layout 📂 Footer.js 📂 Header.js 📂 styles.js 각 파일 설명을 하자면,Footer.js: 레이아웃 푸터 담당Header.js: 레이아웃 헤더 담당(nav 포함)styles.js: 레이아웃 스타일(css) 담당 갑자기 여기서 골🦴 아파지는 문제 발생.요소를 쪼개서 레이아웃을 구성하고 스타일을 짜야하는데 어떻게 해야..

Study/Develop 2025.04.30

[Nextjs 험난한 여정] 번외. 이상한 데에서 찾는 궁금증(주기적으로 업데이트할거시다)

근본없이 공부하느라 갑자기 궁금한 것들을 찾고 기록하는 소연브러리입니다. (20250429) 궁그미 1️⃣ 중괄호의 의미는 뭘까?// case Aimport { tistory } from '경로'; // case Bimport tistory from '경로'; case A는 named import, case B는 default import라고 칭하겠다. 💫 named import의 경우 js 내 유틸 함수가 다수일 경우여러 컴포넌트를 한 번에 export할 때 💫 default import의 경우 js 내 유틸 함수가 단일인 경우 로 나눌 수 있다. (20250430) 궁그미 2️⃣ 리턴 아래에 div를 감싸야 하는 이유는 무엇인가료return ( ); 위와 같이 작성하니 에러가 났다...

Study/Develop 2025.04.29

[Nextjs 험난한 여정] 2. 구조 파악하는데 213498205시간

드디어.... 지옥의 불구덩이로 들어가게숩니다. 우리는 계속 이 문서를 볼 거시다... -> https://nextjs-ko.org/docs/getting-started 시작하기 – Nextjs 한글 문서Next.js 문서에 오신 것을 환영합니다.nextjs-ko.org 🗂️ 구조별 폴더 생성 및 컨벤션 정립Getting Started > Project Structure를 보면 프로젝트 구조가 나와 있으며 해당 문서를 참고하여 다음과 같이 만들었다.📂 public📂 src 📂 app  📂 assets  📂 components  📂 layout  📂 pages 📂 각 폴더별 설명public정적 자산을 제공(favicon, og:images 등)src/app실제 작업 파일assets이미지..

Study/Develop 2025.04.29

[React 여정 시작] 1-3. Material UI를 아시나요?

Material UI는 Google의 Marerial Design을 구현한 오픈소스 라이브러리다.줄여서 mui라고 부르고 이번 프로젝트에선 해당 라이브러리를 사용하기 때문에 설치를 해보겠다. 1️⃣ 설치npm install @mui/material @emotion/react @emotion/styled 2️⃣ 스타일이 지정된 구성 요소 사용npm install @mui/material @mui/styled-engine-sc styled-components 2️⃣➖1️⃣ 옵션mui는 기본적으로 Roboto를 사용한다고 되어 있으나 나는 다른 폰트를 설치하겠다. # Roboto Installnpm install @fontsource/roboto# icon Installnpm install @mui/ico..

Study/Develop 2025.04.29

[React 여정 시작] 1-2. 프로젝트를 만들어봅시다.

1️⃣ node js 설치# fnm 다운로드 및 설치winget install Schniz.fnm# Node.js 다운로드 및 설치fnm install 22# Node.js 버전 확인node -v# npm 버전 확인npm -v 2️⃣ 프로젝트 생성2️⃣➖1️⃣ 자동설치npx create-next-app@latest# 프로젝트 이름What is your project named? my-app# TypeScript 사용여부Would you like to use TypeScript? No / Yes# ESLint 사용여부Would you like to use ESLint? No / Yes# Tailwind CSS 사용여부(UI키트)Would you like to use Tailwind CSS? No ..

Study/Develop 2025.04.21

[React 여정 시작] 1-1. VSCode Extensions

이번에 시작하게 된 프로젝트에서 리액트를 쓰게 되었다.리액트를 써보기는 했으나 거의 4-5년전 일이라 다 까먹어버렸다 (냠) 셋팅 전 필요한 VSCode 확장 프로그램 리스트부터 소개하겠다~! Reactjs code snippetsReact 개발을 위한 Snippet들을 제공 JavaScript (ES6) code snippets Javascript 코드 조각을 제공 ESLint 문법오류 및 버그 확인 npm Intellisense npm module을 import 할 때 자동완성 기능을 제공 + 20250421나는 퍼블리셔이기 때문에 필요한 확장프로그램이 하나 더 있다.vscode-style-componentsReact 환경에서 css 속성을 자동완성 시켜주는 프로그램

Study/Develop 2025.04.18