s0yk_

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

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

근본없이 공부하느라 갑자기 궁금한 것들을 찾고 기록하는 소연브러리입니다. (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 ( ); 위와 같이 작성하니 에러가 났다...

드디어.... 지옥의 불구덩이로 들어가게숩니다. 우리는 계속 이 문서를 볼 거시다... -> 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이미지..

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..

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 ..

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