seopport.log

bundler란? js파일을 합쳐주는 거 번들러(Bundler)는 웹 개발에서 사용되는 자바스크립트(JS) 애플리케이션의 의존성 관리 도구이다. 웹 개발 프로젝트는 여러 개의 JS 파일, CSS 파일, 이미지 등 다양한 리소스로 구성되어 있으며, 이러한 자산들을 효율적으로 관리하고 배포하기 위해 번들러를 사용한다. 번들러는 이러한 파일들을 모아서(번들링) 하나 또는 몇 개의 파일로 합치는 역할을 한다. 이 과정에서 파일 크기를 최소화하는 압축, 브라우저에서 사용할 수 있도록 변환(트랜스파일링), 모듈 의존성 해결 등의 작업을 자동으로 처리해 준다. CRA로 프로젝트를 만들면 webpack을 bundler로 사용 vite로 프로젝트를 만들면 veet을 번들러로 사용 Create React App (CRA)..

redux로 투두리스트 만들기 타임어택 redux 개념자체는 알겠는데, 그것보다 객체배열, 구조분해할당 다루는게 더 어렵다..;; 그래서 지웠다 써보고 하면서 연습하면서 이해하려고 노력했다. 리듀서 case를 작성할 때 받아올 payload를 미리 생각해서 주석으로 써놓고 하니까 좋은 것 같다. return할 때도 객체랑 구조분해할당 때문에 문법오류가 자꾸 났는데, return문에서 값을 조작하려고 하지말고 변수에 할당해서 return하니까 알아보기도 쉽고 문법도 잘 이해되는 것 같다. 저번 redux 타임어택할때 보다 늘긴한 것 같으니 괜찮아 // 리듀서 const todos = (state = initialState, action) => { switch (action.type) { case ADD_T..

context로 관리한 상태를 redux로 리팩토링하기 context가 한정된 범위의 상태 관리 느낌이라면 redux는 앱의 전역 상태를 중앙 store에서 관리한다는 느낌이다. 저번에는 최상위 컴포넌트에서 편지 정보를 관리하고, Home 컴포넌트에서 선택 캐릭터 정보를 관리했다면 이번에는 아예 store로 따로 빼서 관리하는 느낌? 저번에 도식화했던 프로젝트 구조를 context와 redux로 리팩토링한 구조로 표현해보았다. router에서는 편지 정보를 관리하고, Home에서는 선택 캐릭터 정보를 관리 지정된 범위 내에서 상태를 관리하는 context 중앙 처리소 store를 만들어서 어디에서든 꺼내쓸 수 있는 redux letters.js const letters = (state = initialS..

prop-drilling 코드 Context API로 리팩토링 하기 작업중인 팬 레터 사이트 프로젝트의 컴포넌트와 전달받는 props들을 도식으로 정리해보았다. 프로젝트 구조를 살펴보면 Home과 Detail 페이지에서는 단순히 프롭스를 받아서 하위 컴포넌트로 전달하는 역할만을 수행하고 있다. 이를 해결하기 위해 context를 통해 state를 전역에서 관리하도록 수정하였다. 최상위 컴포넌트인 router.js 에서 편지를 저장하는 state를 정의하였고, 선택 캐릭터 정보는 Home컴포넌트에서만 쓰이기 때문에 Home 컴포넌트에서 정의하여 context로 관리하였다. 트러블 슈팅 - 초기 렌더링 시 undefined 오류 및 useEffect로 발생하는 렌더링 문제 문제 상황 페이지가 불러와지면 한 ..

팬레터 사이트 트러블슈팅 1. styledComponent, props 오류 styled components에서 props를 통해 스타일을 제어하는 부분에서 오류가 나고있었다. 1.' React에서 "알 수 없는 속성이 DOM 요소로 전달되고 있습니다' 코드를 살펴보니 이러한 오류가 나는 props들은 스타일드 컴포넌트에서만 사용되는 props였다. 다른 컴포넌트로 해당 props를 전달하지 않고, 해당 스타일 규칙이 현재 컴포넌트의 스타일 범위 내에 있다면 해당 props는 스타일드 컴포넌트에서만 사용되는 것으로 간주된다. 그러나 DOM은 이를 알지 못하고 속성(attribute)으로 인식하게 되어 경고가 발생하는 것이다. 해결 방법은 transient props(일시적인 props)를 사용하는 것이다..

router, param으로 동적 페이지 이동하기 /: 뒤에 값을 지정하면 슬래쉬 어떤 값이 들어오든 details 라는 하위페이지로 이동하게 된다. id라고 적어주는 값은 슬래쉬 뒤에 들어온 값을 id로 지칭하겠다는 의미이다. navigate(`/details/${item.id}`)}>상세보기 그런 다음 details 페이지로 넘어가는 버튼(링크) 역할을 하는 요소에 navigate를 줄때 param 부분에 요소의 id값을 가지고 넘어가도록 작성하면 하위페이지에서는 이런식으로 주소가 설정된다. const param = useParams(); 따라서 하위페이지에서는 id라고 지칭한 부분을 usePrams를 통해 받아옴으로써 클릭한 요소의 id값을 알 수 있다. //클릭한 요소만 출력되게 {savedLet..

useState와 useRef 비교하기 useState와 useRef의 차이점을 알아보기 위해 간단한 코드를 작성해보았다. function App() { console.log("렌더링 되었음") const [text, setText] = useState(''); const handleStateChange = (e) => { const newText = e.target.value; setText(newText) console.log(newText) } const inputRef = useRef(); const handleRefChange = () => { console.log(inputRef.current.value); } return ( State Ref ) } 두 input에 각각 state와 ref를..

절대경로 설정하기 1. root 경로에 jsconfig.json 파일 생성 // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 2. vscode 재시작 3. baseUrl을 기준으로 작성하면 됨 ex 1) src/assets/melting_chiikawa 이미지 import 하기 import meltingChiikawa from "assets/melting_chiikawa.png" ex 2) src/components/Main/LetterSummaryView 컴포넌트 import 하기 import LetterSummaryView from "components/Main/LetterSummaryView"; chi..

함수형 setState const filterByAge = (minAge) => { //기존 // const filteredByAgeStudent = initialStudents.filter((item) => { // return item.age >= minAge // }) // setFilteredStudents(filteredByAgeStudent) //함수형 setFilteredStudents((prev) => { return prev.filter((item) => item.age >= minAge) }) }; 함수형 setState를 사용하면 초기값을 받아오지 않고도 set에 들어있는 prev 데이터를 이용해서 데이터를 가공할 수 있다. setState를 컴포넌트로 넘겨주기 function App..

개인과제 리팩토링 1. 함수이름 컨벤션에 맞게 수정 2. nano id 라이브러리로 아이디값 설정 Virtual Dom (가상돔) 리액트의 virtual dom을 사용하면 조작을 빠르게 처리할 수 있다. 리액트는 가상돔을 이용해서 실제돔을 변경하는 작업을 효율적으로 수행한다. 실제 돔의 구조를 그대로 따온 복사본 형태 실제 돔은 아니지만 객체 형태로 메모리에 저장되기 때문에 실제 돔 조작보다 빠르게 조작할 수 있다. (실제 돔 조작보다 메모리상에 올라와있는 js객체를 변경하는 작업이 훨씬 가볍다) 리액트의 DOM조작 과정 리액트는 두가지 버전의 DOM 정보를 가지고 있음. 화면이 갱신되기 전 구조가 담겨있는 가상 돔 객체(좋아요 누르기 전) 화면 갱신 후 보여줘야할 돔 객체(좋아요 누르기 후) - sta..