Frontend

IT 쪽 공부를 시작하면서 좋아하게 된 유튜버, 인스타그래머가 여럿 있는데,그 중에 특히나 정감이 많이 가는 유튜버 '코딩알려주는누나' (..언니🥰)의 강의에서 알게된 지식을 정리하고자 한다.💛실무에서 자주 사용하는 Javascript 문법💛실무에서 이미 몇 번이고 본 코드긴 한데, 막상 내가 쓸려고 보면 생각이 안나서 이렇게 기록 ㅎ1.  Object Shorthand Assignment (객체 축약 할당?)💔 기존const name = 'noona';const age = 28;let person = { name: name, age: age} ❤️ 실무에서는?let person = { name, age}객체 내 변수와 할당할 변수의 이름이 동일할 경우, `name: name..

문제 발생 원인youtube에 있는 react강의를 따라하다가 에러가 발생했다. 더보기상세한 에러 문구React Hook "useEffect" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". (react-hooks/ rules-of-hooks)알고보니, `React` 의 컴포넌트는 대문자로 시작해야 `useEffect`, `useState` 같은 hook을 사용할 때 오류가..

.env를 사용하는 이유1. github 같은 오픈 리포지토리에 소스코드를 업로드할 경우, 오픈되면 안되는 정보들을 변수화하여 노출 없이 관리하기 위함ex) `API Key`, `DB 정보`2. 자주 사용되는 값을 전역 환경변수로 지정해두고, 유지보수를 용이하게 하기 위함ex) Backend `API Uri` 혹은 `Port` 등 .env 파일 생성하기어떤 프로젝트 파일이든, 처음 생성하면 `.env` 파일이 없는 경우가 많다.그 경우 직접 만들어주면 된다!⭐️.env 파일의 위치⭐️`.env` 파일은 꼭 정해진 위치 -프로젝트 최상위 Root- 에 생성되어야 한다!헷갈리면 `package.json`과 동일 선에 있다고 생각하믄 됨. ⭐️.env 파일 gitignore 처리⭐️열심히 `.env` 파일 만..

함께 업무 중인 '프론트 선배님'이 오늘 공부해보라고 알려준 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..

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 한다.- 참고..