Jieunny의 블로그

➰ 98일차 페어 시간에 리액트 커스텀 훅 만드는 실습 했는데, fetch는 생각보다 쉬웠는데 input은 흐름은 이해가 가는데 왜 이렇게 짜야 하는지 정확히는 잘 모르겠다. 아직 규모가 큰 프로젝트는 해 본 경험이 없어서 커스텀 훅이 얼마나 유용한지 체감하지는 못하겠다. 페어 시간에 몇몇 분들이 오셔서 질문도 해주셨는데 나랑 페어분도 확실히 알고 있지 못해서 큰 도움이 되진 못했다ㅠㅠ... 내일 페어 과제도 시간도 많이 걸리고 어려운 것 같던데.. 그래도 지금 페어분께서 잘 하시고, 알려주시는 것 같아서 배우는 게 많다! 안다고 대충대충 넘어가면 안되겠다는 생각이 요즘 자주 든다..ㅎㅎ 내일은 벌써 금요일 어제 휴가 하루 썼다고 진짜 자주 쉬는 기분이다. 매주 수요일도 휴일이면 얼마나 좋을까!

📣 코드 분할 𝟭. 코드 분할이란? ✔️ 런타임 시 여러 번들을 동적으로 만들고 불러오는 것 ➰ 당장 필요한 코드가 아니라면 따로 분리를 시키고, 나중에 필요할 때 불러와서 사용할 수 있게 한다. ➰ Webpack, Rollup과 같은 번들러가 지원하는 기능 ➰ 페이지의 로딩 속도를 개선할 수 있다. 𝟮. 번들 분할 혹은 줄이는 법 ✔️ 번들링 되는 파일에 npm을 통해 다운받는 것에는 서드파티 라이브러리가 포함되는데 이를 따로 따로 불러와서 사용할 수 있게 한다. ➰ 서드파티 라이브러리 : 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리로, 즉 제 3자 라이브러리 ㄴ 플러그인이나 라이브러리 또는 프레임워크 등이 존재하며, 이 라이브러리를 잘 사용하면 편하고 효율적인 개발을 할 수 있다...

📣 Hook 이란? 𝟭. Hook ✔️ 함수 컴포넌트에서 사용하는 메서드 ➰ 함수 컴포넌트 이전에는 클래스 컴포넌트가 있었다. 𝟮. Class Component class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.handleIncrease.bind(this); } handleIncrease = () => { this.setState({ counter: this.state.counter + 1 }) } render(){ return ( You clicked {this.state.counter} times Click me ) } } ➰ 단..

✔️ 모듈 형식의 코드를 작성해서 여러 개의 파일에 코드를 나눈다. ➰ 각 파일이 관리 가능하고 유지보수 가능하게 되는 것 ➰ import, export로 간단하게 참조 가능 🚨 Chrome 또는 Firefox를 사용하자. 𝟭. 모듈 코드 작성하기 1️⃣ 여러 개의 코드 파일, 타입스크립트 파일 작성 후 수동으로 컴파일 된 js 파일을 HTML에 import 하는 것 2️⃣ Namespaces & File Bundling 3️⃣ ES6 Imports / Exports -> 권장 𝟮. 네임스페이스 작업하기 1️⃣ drag-drop-interface.ts 만들기 2️⃣ Draggable, DragTarget 인터페이스 잘라서 붙여넣기 // drag-drop-interface.ts namespace App {..

📣 Virtual DOM 𝟭. Vertual DOM의 정의 ✔️ React에 있는 가상의 DOM 객체 ➰ 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM에 접근해서 조작하는 대신 가상의 DOM 객체에 접근해서 변화 전과 후를 비교하고 바뀐 부분만 실제 DOM에 적용한다. 𝟮. Vertual DOM이 나오게 된 배경 ✔️ DOM은 애플리케이션의 UI 상태가 변경될 때마다 해당 변경사항을 나타내기 위해 업데이트(리플로우) 되고, 이렇게 DOM을 조작하는 정도가 많아지면 성능에 영향을 미칠 수 있기 때문이다. ➰ 바뀐 부분을 하나하나 리렌더링하게 된다면 비용도 많이 들고 브라우저의 속도도 늦어지게 된다. ➰ 실제 DOM 객체와 동일한 속성을 가지고 있음에도 훨씬 가벼운 사본인 virtual DOM을 ..

➰ 96일차 리액트 웹팩으로 번들링하고 배포하기.. 개념은 이해하겠는데 막상 하려고 하면 어ㅓ어엄청 어렵다🥹 오늘 빌드까지 다 끝냈는데 Advanced 하려다가 뭐 잘못만졌는지 아예 리액트 프로젝트가 다운되버렸다... npm run start 하면 오류가 쫙 뜨면서 실행이 안된다. 일단 오늘 번들링이랑 배포까지 해야해서 새 프로젝트 만들어서 했는데 왜 에러가 나는지는 모르겠다😡 아직 익숙하지 않아서 번들링하는게 얼마나 편한지 체감은 못하겠지만..실무에 가서 많이 쓸지도 잘 모르겠다ㅎㅎ.. 그래도 어찌저찌 빌드하고, 배포도 했는데 아고라스테이츠 구현할 때 서버 API를 받아와서 데이터를 쓰는데 내가 터미널로 서버를 키고 있지 않으면 데이터가 안뜬다ㅠㅠ 깃허브에 서버 관련 폴더도 같이 올려야 하는건지, 아님..