우선 가끔 너무 당당하게 헛소리를 하는 GPT 선생님께 해당 내용에 대해서 질의를 해보았습니다 이번에 프로젝트를 하면서 특정 값들이 component(prop) drilling이 되는 상황을 발견했습니다. 전역 상태로 관리하는 항목들이 저러한 값들이 있는것들은 생각을 하고 있는 내용이긴 했으나, 한 3~4개정도의 컴포넌트를 drilling하다보니, 이정도면 위의 항목에는 해당하지 않아도 전역상태로 관리해줘야 하는게 아닐까? 라는 생각을 했습니다. 해서, 해당 내용까지 GPT에 함께 질의해보았습니다. GPT 선생님꼐서도, prop drilling 이 발생한다면 전역 상태로 분리하는것이 좋은 방법이라고 대답을 해주시네요, 하지만 단순 지피티만 곧이 곧대로 믿기에는 곤란해서, 해당 내용을 구글링하여 좋은 포스..

(해당 글은 이전 포스트와 이어지며, 하단 링크에 있는 글을 참고하여 학습한 내용을 정리한 포스트입니다) 프론트엔드 아키텍처: 컴포넌트를 분리하는 기준과 방법 컴포넌트를 언제 분리해야 하고 어떻게 분리해야 하는지 살펴봅니다. medium.com 복잡한 컴포넌트 컴포넌트가 여러 책임을 갖는 경우 컴포넌트 분리 없이 만든 거대한 페이지 컴포넌트를 예시로 들 수 있겠습니다. 예시와는 알맞지 않지만, 이런 컴포넌트에서 페이징도 하고, 여러 기능이 추가적으로 달려있다고 가정해봅시다. 이런 경우라면 기능간에 결합이 강하게 발생해서 수정이 쉽지 않을 것 입니다. 글에서는 이를 서로 상호작용하는 기능이 많아지는 것보다 문제의 복잡성이 더 빨리 어려워지는 상황이라고 이야기를 하고있습니다. 따라서, 이런 경우에 컴포넌트를..

요즘 이래저래 개발을 진행하면서 로직을 작성하고있는데, 문득 그런 생각이 들었습니다. 지금까지는 단순히 '재사용을 할 것 같다', '나눠야 할 것 같다' 와 같은 구체화 되지는 않은 기준에 따라 로직을 작성했는데 확실한 기준을 잡고 컴포넌트를 분리해야 하지 않을까? 라는 생각이 말이죠 또, 컴포넌트 분리도 분리고 로직의 디자인패턴 또한 그렇습니다. 워낙 이전까지는 Redux 라이브러리를 사용했기때문에 전체적인 구조를 Page - Container - Component의 구성으로 로직을 작성했는데 이번 프로젝트부터는 recoil을 사용하면서 이러한 고민이 더 깊어진 것 같습니다. Redux를 사용해보신 분들이라면 알겠지만, Redux에서는 Redux 와 연결된 (Store와 연결된) Container를 만..

React에서 자주 사용하게되는 Hook인 useState문 보통 useState문은 다음과 같이 사용하게 됩니다. const [number, changeNumber] = useState(0); 그리고 우리는 changeNumber를 통해서 number를 바꾸게 됩니다. changeNumber(prevNumber => number + 1); 어라? 근데 이상합니다. 분명 const는 재할당이 되지 않는 상수를 선언하는 것으로 알고 있는데, 어떻게 const로 선언된 변수인 number의 값이 변할 수 있을까요? number의 값이 바뀔 수 있다면 우리는 재할당이 가능한 let으로 useState를 사용해야 하는 것이 아닐까요? 아닙니다. 기본적으로 자바스크립트의 클로저의 대한 개념이 필요합니다. http..

https://react.vlpt.us/basic/05-props.html 5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook 5. props 를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트의 props 라는 개념에 대해서 알아보겠습니다. props 는 properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, react.vlpt.us https://learnjs.vlpt.us/useful/06-destructuring.html 06. 비구조화 할당 (구조 분해) 문법 · GitBook 06. 비구조화 할당 (구조분해) 문법 이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다. 이전에 배웠던것을 복습해보자면..

지금까지 공부한 내용들 중에서 자바스크립트의 핵심적인 내용들을 정리할 예정(업데이트 지속적으로 할 예정) 1. 비동기 처리 자바스크립트는 기본적으로 비동기적으로 작동한다. 간단히 요약하자면 동기적 처리는 1의 과정이 끝나야 2의 작업이 시작되는 구조이고 비동기적 처리는 1의 과정의 진행유무와 상관없이 2, 3, 4... 번 작업들이 시작됨을 말한다 자바스크립트는 기본적으로 비동기적으로 실행된다. 그래서 비동기적인게 뭐가 중요하냐? 에 대한 물음에 답을 해보자면 어떤 결과를 바탕으로 실행되어야 하는 작업이 있다면, 아무생각없이 코드를 작성했다면 결과가 나오기 전에 작업이 시작되어 정확하지 않은 결과를 만들어 낼 수도 있다는 것이다. 정확한 결과를 위해 동기적으로 작업을 진행시켜야 하는 경우가 있는데 이 때..