본문 바로가기

분류 전체보기91

프로젝트 기록 1 - 프로젝트 기획 및 와이어 프레임 구현 오늘은 스파르타 프론트엔드 엔지니어 양성과정 9기의 2번째 팀 프로젝트가 진행되었다.새로운 프로젝트를 시작하면서 아이디어 구상 및 와이어 프레임 작성, 사용기술 스택에 대해 살펴보겠다! 📜 프로젝트 주제 선정브레인스토밍 과정처음 프로젝트를 시작하면 팀원들끼리 어떤 프로젝트를 구현할 지 주제를 정해야한다!원활한 진행을 위해 팀원들 서로서로 1개씩 주제를 말하기로 했다. 흥미 & 관심사와 관련된 주제로 글을 작성하는 사이트스파르타 프론트엔드 9기의 TIL 및 인사이트 등의 블로그 글 공유 사이트향수등 여러 제품에 대해서 사용자가 리뷰를 작성할 수 있는 사이트코드에 대한 궁금증을 올리고 다른 사용자에게 코드 리뷰를 받을 수 있는 사이트트위터와 인스타그램 같이 오늘 일을 작성하고 공유할 수 있는 사이트집 주위.. 2025. 2. 13.
React 프로젝트에서 코드 컨벤션 소프트웨어 개발에서 코드 일관성은 프로젝트의 성공을 좌우하는 핵심 요소이다. 특히 여러 개발자가 협업하는 환경에서는 더욱 중요하다.오늘은 여러 단체/개인 프로젝트를 진행하면서 만들게 된 나만의 코드 컨벤션에 대해 말해보겠다! 코드 컨벤션이란?프로젝트에서 일관되게 따르는 코드 작성 규칙/ 스타일 가이드 프로젝트를 시작할 때 가장 먼저하는 일은 기획일 것이다.그리고 기획 이후 실제 개발 단계로 넘어가면, 코드를 개발하기 전에 코드 컨벤션을 정해야 한다.명확한 켄변선 없이 프로젝트를 진행하면 코드의 일관성 저하, 코드 리뷰 어려움, 새로운 팀원의 온보딩 시간 증가 등의 문제가 발생할 것이다.이 글에서는 간단하게 디렉토리 구조부터 디렉토리/파일 네이밍 규칙, 함수 및 컴포넌트의 접두사 및 접미사 규칙 등에 대한.. 2025. 2. 12.
var, let, const의 5가지 차이점 (재선언, 재할당, 스코프, 호이스팅, 전역 객체) JavaScript에서 var, let, const 키워드를 이용하여 변수를 선언할 수 있다. 기존에는 var 키워드가 유일한 변수 선언 키워드였다. 하지만 var 키워드에는 여러 문제점을 가지고 있었고, 이를 해결하기 위해서 ES6(ECMAScript2015)에서 let과 const 키워드가 도입되었다. 오늘은 var 키워드의 문제점을 살펴보면서 let과 const 키워드에서는 어떻게 달라졌는지 차이점에 대해 알아보도록 하겠다!  1. 재선언재선언이란 동일한 스코프 내에서 동일한 이름의 변수를 다시 선언하는 것을 의미한다. var user = { firstName: "Gil-dong", lastName: "Hong" };var user = { name: "Hong Gil-dong" };console.l.. 2025. 2. 11.
React 프로젝트 이벤트 위임을 통한 리렌더링 최적화 오늘은 React 프로젝트에서 이벤트 위임을 통해 렌더링 최적화를 하였고 성능 개선하였는지 말해보겠다.  이벤트 위임이란?자신의 이벤트를 상위 또는 하위의 요소에 위임하는 것이다.주로 하위 요소 각각에 이벤트 핸들러를 붙이는 대신, 그들의 부모 요소에 하나의 이벤트 핸들러를 붙여서 하위 요소들의 이벤트를 관리한다.이렇게 하위 요소의 이벤트가 상위 요소로 퍼지는 방식은 이벤트 버블링(Event Bubbling)을 이용한 개념이다. 반대로 상위 요소의 이벤트를 하위로 위임하여 하위 요소에서 이벤트를 관리할 수도 있다.이처럼 상위 요소의 이벤트가 하위 요소로 퍼지는 방식이 이벤트 캡쳐링(Event Capturing)이라고 한다. 따라서 하나의 자신을 대신할 요소가 "대표자" 역할을 하면서 연관된 요소들의 이벤.. 2025. 2. 10.
프론트엔드 프로젝트 구조를 위한 디자인 패턴 알아보기 (Atomic Design Pattern, Feature-Sliced Design) 프론트엔드 프로젝트를 진행할 때, 가장 먼저 고민해야할 것 중 하나는 "어떤 폴더 구조를 사용할 것인가?" 이다.프로젝트 구조를 잘 설계하면 유지보수성과 확장성이 높아지며, 개발 생산성에도 큰 영향을 미친다.이번 글에서는 2 가지 프론트엔드 아키택처 패턴을 살펴보며, 각 방식이 언제 적합한지 알아보겠다!  1. Atomic Design PatternAtomic Design은 화학의 원자(Atom) 개념에서 영감을 받은 디자인 시스템이다.쪼개지지 않는 최소 단위인 원자부터, 원자가 모여 만들어지는 분자, 분자가 결합되어 유기체가 생성된고, 유기체들이 모여서 하나의 템플릿을 구성하게 되며, 이 템플릿에 데이터가 결합되면서 페이지가 완성되는 흐름을 가진다. 원자 (Atoms) : 더 이상 분해할 수 없는 최소.. 2025. 2. 5.
자연스러운 UX: 뒤로 가기에서 스크롤 위치 유지하기 웹 애플리케이션을 사용하다보면 리스트 페이지에서 특정 아이템의 상세 페이지로 이동했다가 다시 돌아올 때, 스크롤 위치가 맨 위로 초기화되는 경험을 하곤한다. 이는 사용자 경험을 지해하는 요소 중 하나로, 오늘은 React-router-dom과 window.scrollTo 메서드를 활용해 이 문제를 해결한 방법에 대해 작성해보겠다! 상황 구성하기먼저 세로 스크롤이 긴 / 페이지와 특정 아이템의 상세 내용을 볼 수 있는 /item가 있다고 하자.// Home.tsximport { Link } from "react-router-dom";export default function Home() { const items = Array.from({ length: 30 }, (_, i) => i); return (.. 2025. 2. 4.

티스토리툴바