Frontend/React

문제 발생 원인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` 파일 만..

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

Vite (비트) 란 간략하게 말하자면, '진짜 빠른 번들링 툴'실무 초반엔 Vue-CLI를 활용한 빌드를 진행했었다. (Vite의 필요성을 크게 느끼지 못했기 때문)그런데 프로젝트 규모가 커지면서, 빌드하는데 시간이 오래걸리기 시작했다.프론트엔드 개발은 코드를 계속 갱신하면서 테스트를 진행하기 때문에, 핫로딩/빌딩이 빠르게 이뤄져야 개발효율성이 높아진다. 그래서 Vue-CLI에서 Vite로 전환을 하게 되었고, 빠른 빌드 속도로 업무 효율성이 크게 증가했다.Vite는 비록, Vue.js의 창시자인 Evan You가 Vue3과 함께 개발한 번들링 툴이긴 하지만, Vue에만 국한되진 않는다.그래서 React 프로젝트에도 요즘 많이 사용된다고 들었다.💎 Vite 템플릿으로 프로젝트 생성하는 방법1. cre..

요즘 채용 시장을 쭉 훑어보니 Vue보다 React의 비중이 훨씬 높은 것 같다.기존에 Vue 기반 프로젝트를 찐하게 해오던 상황이라, React로도 경험을 쌓아봐야할 것 같아 제대로 공부해보기로 했다.이미 SPA 프레임워크에 대한 이해는 어느 정도 되어있는 상황이라, 빨리 적응할 수 있지 않을까?React와 React Native두개는 용도가 다르기 때문에, 프로젝트의 목적에 따라 어떤 것을 사용할지 결정해야 한다. 항목  React  React Native 플랫폼  웹 (PC/모바일 웹 브라우저) iOS, Android (모바일 앱) 언어  HTML, CSS (JSX), JavaScript/TS JavaScript/TS (네이티브 컴포넌트) 렌더링 방식 DOM (HTML) 렌더링 네..

React 프로젝트 환경 구축 후, 로그인 페이지 만드는 과정에서 마주친 오류 해결 일기:) 우와! 난리가 났다! Too many re-renders. React limits the number of renders to prevent an infinite loop. 영어를 그대로 해석하면 알 수 있듯, 리렌더링이 무한으로 계속 돌면서 발생하다보니 React에서 터뜨려버린 에러이다. 에러 원인 setState를 잘못 사용했다. App.js 컴포넌트에서 조건문이나, 이벤트 핸들러 없이 바로 냅다 그냥 호출해버렸더니... 컴포넌트가 렌더링될 때마다 state가 set 되면서 무한 루프에 빠져버린 것... 에러 해결 useEffect안에 setState를 넣어주면, 렌더링 후 한번 실행이 된다! 짜잔! 이렇게 ..