사이드 프로젝트(6)
-
네브바 스크롤에 따라 사라지고 나타나게 하기 (w. React & Tailwind)
👉 네브바에 해당 기능을 넣은 이유일단 네브바가 기본적으로 계속 따라오는 것도 좋지만 아래로 내릴때 화면의 일정 부분을 차지하는게 '포트폴리오' 사이트라는 점에서 시야를 방해하는 요소로 작용할 수도 있다고 생각했다. 🛠 적용 방법 및 코드일단 나는 리액트 + Nextjs + tailwind를 사용하여 프로젝트를 진행 중이고 useState와 useRef, useEffect를 활용해서 구현했다.스크롤 위치를 감지 (window.scrollY)아래로 스크롤하면 Navbar를 숨기고, 위로 스크롤하면 다시 보이게 설정useEffect를 이용해서 scroll 이벤트 핸들러 등록'use client';import { useState, useEffect, useRef } from 'react';export d..
2025.02.01 -
포트폴리오 사이트 제작 계획 (4) [페이지 기획 변경 및 앞으로의 계획]
계획 변경 이유포트폴리오 사이트 페이지를 만들며 든 생각은 '정말 이 디자인이 최선일까?'였다. 흔히들 프론트엔드 개발자의 필수 역량을 얘기할때 기술적인 면과 그 외적인 면을 공통적으로 아우르는 '역량'이 필요하다고 한다. 근데 나를 가장 잘 보여줘야하는 포트폴리오에서 간단하고 무미건조한 디자인과 애니메이션으로 누군가에게 흥미를 끌 수 있을까? 일단 나는 아니라고 생각했다. 그래서 디자인을 갈아 엎어보자라는 마음으로 현재 구조를 변경 중이며 아마 차근히 완료한 내용을 업로드해야지 싶다. 그럼 나는 어떤 디자인을 하고 싶은가?이건 나도 아직 잘 모르겠다. 다만 굉장히 많은 분들의 포트폴리오 사이트를 보고 다양한 영감을 받았다. 결론적으로 내가 선택한 방향은 '컨셉'과 '적당함'이다. 디자인의 컨셉을 정확..
2025.01.31 -
FSD 구조를 적용할때 생겼던 의문점 정리 (w. GPT)
1. Entities와 Features의 상태 관리 차이점Entities의 상태 관리:도메인 중심으로 설계된 상태 관리.하나의 **엔티티(예: User, Product, Order 등)**에 대해 모든 비즈니스 로직과 상태를 캡슐화.재사용성이 높은 상태를 관리하며, 여러 기능에서 활용 가능.예시:userStore는 user 데이터를 로드, 수정, 삭제하는 등 전역적으로 필요한 로직과 상태를 포함.src/entities/user/model/userStore.tsFeatures의 상태 관리:특정 기능을 구현하기 위해 필요한 상태를 관리.다른 기능에서 필요하지 않을 경우 독립적으로 설계.엔티티를 기반으로 하는 로직을 확장하거나 결합하여 기능 중심으로 상태를 관리.예시:authStore는 로그인, 로그아웃, 인..
2025.01.19 -
포트폴리오 사이트 제작 계획 (3) [FSD 구조 적용]
새로 알게된 사실들1. 파일명은 대문자 시작인데 import문 작성하니 소문자로 변경됨TypeScript는 대소문자 경로 충돌을 감지할 때 에러를 발생시킵니다. 이를 완화하려면 tsconfig.json에서forceConsistentCasingInFileNames 옵션을 활성화하세요.이 설정은 파일 경로 대소문자가 불일치할 경우 컴파일 단계에서 에러를 발생시켜, 문제를 조기에 감지하고 수정할 수 있도록 합니다.{ "compilerOptions": { "forceConsistentCasingInFileNames": true}} 2. tailwind 설정 위치?tailwind.config.ts에서 디렉토리를 추가한 위치마다 content에 경로 추가가 필요합니다.import type { Config }..
2025.01.18 -
포트폴리오 사이트 제작 계획 (2) [ESLint, Prettier] 세팅
일단 NextJs, React, TypeScript로 프로젝트를 시작했고 아래는 package.js이다. { "name": "port", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "15.1.4", "react": "^19.0.0", "react-dom": "^19.0.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@types..
2025.01.11 -
포트폴리오 사이트 제작 계획 (1)
처음으로 제대로된 개인 사이드 프로젝트를 시작하고자 해당 시리즈를 작성한다. 누군가 만약 개인 포트폴리오 사이트를 만드는 것을 계획한다면 내 글이 아주 조금이나마 도움이 됐으면 한다. 일단 나는 제대로된 목표 혹은 시각적 데이터가 없으면 프로젝트를 끝까지 진행하기 힘들어하는 성격이다. 막연한 가이드라도 있어야 할 수 있다보니 첫 글은 기획에 대해 작성할 것이다. https://pixso.net/ [OFFICIAL] Pixso - A Free Online UI/UX Design ToolKeep Track of Project Progress to Achieve Lean Operation With Pixso, operators can evaluate and review the work, send feedbac..
2025.01.10