함께 업무 중인 '프론트 선배님'이 오늘 공부해보라고 알려준 Keyword `FSD` 요즘 디자인 패턴은 fsd가 대세입니다- 합정 칼퇴러- 🤔 FSD? 그게 뭐지?프론트엔드 실무를 그래도 2년 정도 찐하게 했다고 생각했는데, 이런 아키텍처 방법론까지는 파고들 생각을 못했다.프로젝트 구조를 더 안정적으로 만들 수 있도록 이제라도 해보자!👉🏻 이 글에서 참고한 문서 : https://feature-sliced.design/kr/docs/get-started/overview   1️⃣ FSD 방법론이란?[Feature-Sliced Design]- 개요 : 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론- 방식 : 코드 구성에 관한 규칙, 관례, 도구(린터, 폴더생성기 등)를 모아놓음- 목적 : 계..

Vite(비트)를 사용해서 Svelte 프로젝트를 생성하고, 생성된 프로젝트의 기본 구조에 대해 알아봅니다. 💡 Vite 를 사용해서 Svelte 프로젝트 만들기1. Vite CLI 설치npm install -g create-vite-g : global (전역 설치) 2. Vite 로 Svelte 프로젝트 생성설치한 Vite CLI를 활용해서 Svelte 프로젝트를 생성해봅시다.2-1. 터미널을 켜서, 프로젝트를 생성할 폴더로 이동참고)현재 위치 내 모든 폴더 보기 : `ls`폴더 이동하기 : `cd 이동할폴더명`폴더 생성하기 : `mkdir 생성할폴더명` 2-2. Vite CLI를 실행해서 Svelte 프로젝트 만들기npm create vite@latestcreate-vite 명령어가 실행되면서, C..

실무를 진행하다보면, 한 브랜치에서 여러개 브랜치를 따서 작업을 진행하는 경우가 많다.예를 들면, dev 브랜치 - feature1 브랜치                  - feature2 브랜치                  - feature3 브랜치이렇게 진행하다 Merge 할 때 꼭 문제가 발생한다.이번에도 문제해결하면서 Git Merge에 대해 한번 싹 정리해두면 좋을 것 같아 쓰는 글.. :)💡Git Merge 병합 방법참고! 이번 글에서 사용하는 대상 브랜치와 병합 브랜치라는 명칭이 좀 헷갈릴 수 있다.- 대상 브랜치 : 부모 브랜치 (위에 든 예시로 보자면 dev)- 병합 브랜치 : 자식 브랜치 (위에 든 예시로 보자면 feature1,2,3)대상(부모)으로부터 병합(자식)이 만들어졌고, ..

👉🏻 Local branch 이름 변경변경할 브랜치로 이동$ git checkout 브랜치명$ git checkout old-branch로컬브랜치 이름 변경$ git branch -m 바꿀브랜치명$ git branch -m new-branch$ --> old-branch가 new-branch로 이름이 변경됨!old-branch에 commit/push 히스토리가 있어도 상관 없다!해당 히스토리를 그대로 간직한 채로 branch 이름만 변경된 것!👉🏻 Remote branch 이름 변경이미 Github, Gitlab에 Push한 branch의 경우,로컬에서 이름 바꾼 브랜치를 Push해서 새 브랜치를 생성하고, 기존 브랜치를 삭제하는 방법으로 변경해야 합니다.Local branch 이름 변경하는 2 ..

Github에서 프로젝트를 클론해서 열어보려고 했는데인텔리제이 좌측 Project 영역에 부분적으로 파일만 뜨고, src라든가.. 하는 폴더들이 뜨지 않았다 🖥️ 내가 해결한 방법1. IntelliJ 종료2. 해당 프로젝트 폴더로 고고- Project 루트에 있는 .idea 폴더를 삭제3. IntelliJ 재실행 🤔 Idea 폴더가 뭐지?IntelliJ로 프로젝트를 여는 순간 자동으로 생성되는 `프로젝트 세팅 파일`즉, 해당 프로젝트의 IDE 옵션을 저장하는 폴더이다!여러명이 협업 하는 경우, 각 작업자마다 IDE 세팅을 다르게 할 수 있기 때문에.gitignore에 추가해서 Git에 올리지 않는 것이 일반적이다.# .gitignore.idea

1. PropsProps (Properties) : 속성 - 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 변수1-1. Props 예시 1기존 하드코딩 방식변경 성공적 ✨1-2. Props 예시 2기존 하드코딩 방식1-3. Props 예시 심화Nav 태그 값을 유연하게 변경할 수 있도록 바꿔보자!기존 하드코딩 방식 막간을 이용한 오류 일기 😉자동으로 태그를 생성하는 방식을 사용할 때는, React가 추적하기 위해 중복되지 않는 unique key 값을 넣어주라는 의미2. Event2-1. Event 예시 1Header 클릭 시 Alert 을 띄워보자!event.preventDefault(); : 적용된 태그의 기본 동작 방지 (a 태그일 경우, 페이지 Re-load 방지)  2-2. Event 예시 심화N..

✨ React 에서의 Component1. 컴포넌트란?소프트웨어 디자인 수준에서 나눌 수 있는 가장 작은 단위로, 재사용이 가능한 각각의 독립된 모듈을 뜻 함.프론트엔드에 적용하자면, `웹·앱을 구성하는 가장 작은 단위` 2. 컴포넌트화를 해야 하는 이유는 뭘까?컴포넌트 방식(파일을 여러개로 쪼개서 관리하는)을 사용하는 목적은 바로1. 유지 보수의 용이성2. 성능 개선이 두 가지의 목적이 가장 크다.하나의 스크립트만으로 코드를 작성이 불가능한 것은 아니다.그러나, 프로젝트의 기능이 다양한 경우, 한 기능을 수정하기 위해 코드를 다 뒤져야 하는 상황이 발생한다.컴포넌트화가 되어있다면, 수정할 기능이 있는 컴포넌트 파일로 바로 찾아가서 수정하면 된다!즉, 컴포넌트화 하게 된다면!메인 어플리케이션과 완전히 분..

1. React 프로젝트 내 구동 방식프로젝트 구조페이지 구조1-1. index.jsApp이라는 컴포넌트를 가지고 있다!App은 어디에 있는걸까?▼▼ 1-2. App.jsApp.js 안에서 이렇게 Function 이름을 App으로 명시하고, html 코드를 반환하고 있다.그렇다면 App을 감싸고 있는 이 root는 어디에 있는걸까?▼▼1-3. index.html즉, 전체적으로 보자면, index.js 파일이 전체 프로젝트 구조를 관리하며, 전체 DOM 구조를 렌더링하는 역할을 한다index.html 코드 안에 App.js return html 코드가 있는 구조로 렌더링함index.html은 가장 겉 단에서 기본적인 html 구조를 담당함App.js는 개발자가 구현하는 페이지들을 return 한다.- 참고..