ez-dev-oo

◾ WHY진행중인 프로젝트에서는 모든 페이지가 섹션 소제목과 그 밑에 각 섹션에 맞는 내용을 보여준다.그런데 각각의 페이지에서 동일한 구조를 반복하다보니 중복되는 코드가 많아졌고, 내용이 많아질수록 가독성도 떨어져 코드 구조를 한눈에 파악하기가 점점 어려워졌다.게다가 모두 동일한 디자인의 섹션과 페이지 구조를 갖고 있어 중복되는 css 코드 또한 많아졌기에 분리의 필요성을 느끼게 되었다.  ◾ Section 컴포넌트 분리하기먼저 모든 페이지에서 동일하게 사용하는 Section 컴포넌트를 만들어주었다.각 페이지마다 사용할 소제목을 name으로 받아왔다.// Section.tsxinterface SectionProps { name: String;}export default function Section({..

* 학습을 목적으로 작성된 글입니다* 각종 피드백은 언제든지 감사히 받겠습니다 😀프로젝트에 여느 때와 같이 이미지 파일을 사용하기 위해 src/assets 에 저장하려던 중, 문득 이미지 파일은 어디서 저장·관리하는게 맞는지 궁금해져 찾아보았다. 프로젝트에서 정적 파일을 관리할 때, 주로 저장되는 위치는 public 폴더 아래와 src 폴더 아래이다. ◾ public 폴더-  public 폴더에 넣은 파일은 webpack에 의해 관리되지 않고, 원본이 build 폴더에 복사된다.    → 경량화되지 않고, content hash가 포함되지 않기 때문에 파일이 수정될 때마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 한다.- 경로가 잘못되거나 파일이 없는 경우 컴파일 에러 없이 404 에러만 발생..

* 학습을 목적으로 작성된 글입니다* 각종 피드백은 언제든지 감사히 받겠습니다 😀React로 웹 개발에 처음 관심을 가졌던 나로서는 .jsx 혹은 .tsx 확장자를 사용하는 것이 익숙하다. 그런데 최근 유데미에서 꽤나 오래된 강의를 듣는 중에, .jsx가 아닌 .js를 사용하는 것을 보고 두 확장자의 차이에 대해 알아보고자 한다. ◾ JSX란?JSX란, JavaScript에서 XML을 추가한 확장형 문법으로 JavaScript XML의 약어로, JavaScript 파일 내에 HTML과 유사한 마크업을 쉽게 사용할 수 있도록 돕는다 (내부적으로 XML/HTML 코드를 React.createElement() 함수를 통해 자바스크립트로 변환해준다). ◾ .js vs .jsx결론부터 말하자면 확장자로서의 차이..

* 학습을 목적으로 작성된 글입니다 * 각종 피드백은 언제든지 감사히 받겠습니다 😀React 강의를 듣던 중 StrictMode를 삭제하고 프로젝트를 진행하는 것을 보며, StrictMode는 무엇이고 어떤 역할을 하며 개발에 어떤 영향을 미치는지 알아보고자 한다.◾ StrictMode란?초기 리액트 프로젝트 세팅 시 App 컴포넌트가 태그로 감싸져 있는 모습을 볼 수 있다.import React from "react";import ReactDOM from "react-dom/client";import App from "./App.jsx";ReactDOM.createRoot(document.getElementById("root")).render( ); StrictMode는 컴포넌트 내부..

* 학습을 목적으로 작성된 글입니다* 각종 피드백은 언제든지 감사히 받겠습니다 😀◾ useState란?const [state, setState] = useState(initialState)  useState는 컴포넌트 내부에 새로운 State를 생성하고 관리하도록 하는 React Hook이다. 매개변수로는 state의 초기 설정값(initialState)을 가지며, 현재 상태(state)와 상태 변경 함수(setState)를 갖는 배열을 반환한다. 그리고 반환된 배열은 구조 분해 할당을 통하여 [ state, setState ] 로 지정된다. 주로 단순한 상태 관리에 사용되며, [ something, setSomething ] 과 같이 지정해주는 것이 관례이다. ◾  구조 분해 할당이 뭔데? 구조 분해..