Chapter 1-2. 프레임워크 없이 SPA 만들기 Part 2
Chapter 1-3. React, Beyond the Basics
1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)
Q. 이번 주차를 지나며 겪었던 문제가 무엇이었나요?
A.
Virtual DOM개념에 대한 이해는 어느 정도 있었지만, 이를 직접 구현해보는 과정에서 어려움을 겪었습니다. 이론적으로는 알고 있었던 Virtual DOM이 실제로 어떻게 렌더링 성능을 개선하는지, 그리고 효율적인 상태 관리를 통해 DOM 업데이트를 최소화하는 것이 중요하다는 것은 알았지만, 이를 직접 코딩으로 풀어내는 것은 예상보다 복잡했습니다.
또한, Vue.js에 익숙한 상태에서 React의 기본적인 사용에 적응하는 데도 어려움이 있었습니다. Vue는 컴포넌트와 데이터 바인딩에 대해 매우 직관적인 접근 방식을 제공하지만, React는 JSX 문법과 상태 관리 방식이 다르기 때문에 초기 적응에 시간이 걸렸습니다. 특히, Vue에서는 템플릿 기반의 직관적인 코드 작성이 가능했던 반면, React에서는 함수형 컴포넌트를 통해 보다 직접적으로 상태를 관리하고, 이를 렌더링에 반영해야 하는 차이점을 느꼈습니다.
이러한 차이로 인해, React의 useState와 useEffect 같은 기본적인 훅(Hooks)을 자유자재로 사용하는 데 어려움이 있었고, 컴포넌트 간 데이터 흐름을 효율적으로 관리하는 방식에 대한 이해가 부족했습니다.
2. 시도
Q. 문제를 해결하기 위해 어떤 시도를 하셨나요?
A.
간단한 예제 코드를 반복적으로 작성하고 실행해보는 방식으로 React 사용에 대한 숙련도를 높였습니다. 처음에는 상태를 관리하는 작은 컴포넌트를 만들고, 그 다음에는 상태가 변화함에 따라 컴포넌트가 어떻게 다시 렌더링되는지 관찰하는 연습을 했습니다. 예를 들어, 버튼을 클릭했을 때 카운터가 증가하는 아주 간단한 컴포넌트를 여러 번 작성하여, 상태 관리와 렌더링의 흐름을 자연스럽게 익힐 수 있었습니다.
이 외에도, 다양한 튜토리얼과 온라인 강의 자료를 참고하여 React의 컴포넌트 구조와 데이터 흐름을 명확하게 이해하려는 노력을 기울였습니다. 이런 과정을 통해 React에서의 상태 관리와 Vue.js에서의 데이터 바인딩 차이를 이해하고, React에 좀 더 익숙해질 수 있었습니다.
또한, Virtual DOM과 diff 알고리즘에 대해서도 추가적으로 학습했습니다. Virtual DOM은 실제 DOM에 직접 접근하여 변경하는 대신, 가상 메모리에 DOM 구조의 사본을 만들어 관리함으로써 성능을 최적화하는 방식입니다. React가 어떻게 Virtual DOM을 활용하여 빠르고 효율적인 렌더링을 구현하는지, 그리고 변경된 부분만을 비교하고 업데이트하는 diff 알고리즘의 작동 방식을 이해하게 되었습니다. 이를 통해, React의 렌더링 성능 최적화 원리를 더 깊이 이해할 수 있었습니다.
3. 해결 & 알게된 것
A.
과제 요구사항에 맞게 과제를 성공적으로 진행할 수 있었습니다. React의 기본적인 사용법을 이해하고, 상태 관리와 컴포넌트 렌더링의 흐름을 파악함으로써, 프로젝트의 구조를 효율적으로 설계하고 개발할 수 있었습니다.
추가적으로, Virtual DOM과 diff 알고리즘에 대해 학습한 덕분에 React의 성능 최적화 원리도 깊이 이해할 수 있었습니다. 이를 통해 실제 DOM을 직접적으로 조작하지 않고도 빠른 렌더링을 구현하는 방법과, 변경 사항만을 업데이트함으로써 불필요한 렌더링을 줄이는 방식에 대해 더욱 명확히 알게 되었습니다. 이 과정에서 성능 향상뿐만 아니라 효율적인 상태 관리의 중요성도 깨달을 수 있었습니다.
따라서 React의 상태 관리, 렌더링 최적화, 그리고 Virtual DOM을 활용한 성능 향상에 대한 이해를 기반으로 요구사항들을 문제없이 수행할 수 있었습니다.
Keep : 현재 만족하고 계속 유지할 부분
A.
현재 꾸준하게 학습하는 습관을 만들어 가고 있다는 점이 매우 만족스럽습니다. 매일 학습을 지속하는 과정에서 학습 루틴이 자연스럽게 형성되고, 이는 지식을 점진적으로 쌓아가는 데 큰 도움이 됩니다.
또한, 단순히 지식만 쌓는 것이 아니라, 원리부터 깊이 있게 공부하는 것이 매우 긍정적이라고 생각합니다. 개념을 깊이 이해함으로써 단순한 문제 해결이 아닌, 더 나아가 다양한 상황에서 응용할 수 있는 능력이 길러지고 있다고 느낍니다.
이러한 학습 방식은 앞으로도 유지할 가치가 있으며, 이 방향을 계속해서 발전시킬 수 있도록 할 계획입니다.
Problem : 개선이 필요하다고 생각하는 문제점
Q. 이번 주를 마무리 하며 개선이 필요하다고 생각했던 문제점은 무엇인가요?
A.
이번 주를 마무리하면서 느낀 문제점은 마감 기한에 맞춰 과제를 진행해야 하는 상황에서, 더 깊게 학습할 기회가 있었음에도 불구하고 일정에 맞추기 위해 학습을 정리하고 마무리해야만 했다는 점입니다. 비록 어느 정도 이해는 했지만, 충분히 깊이 있게 다루지 못한 개념이 있어 아쉬움이 남습니다. 주어진 제한 시간 내에 원하는 만큼 충분히 학습하고 정리하지 못하는 점이 스스로 가장 크게 아쉬운 부분입니다. 좀 더 시간을 확보해 완벽하게 만족할 만큼의 학습을 진행할 수 있었으면 좋겠다고 느꼈습니다.
Try : 문제점을 해결하기 위해 시도해야 할 것
Q. 이 문제점을 해결하기 위해 다음 한 주간 시도 할 것은 무엇인가요?
A.
시간 관리를 더 철저히 하고 우선순위를 설정하는 방법을 시도해볼 계획입니다. 구체적으로, 과제나 학습에 사용할 시간을 미리 계획하고, 학습 과정에서 중요한 부분을 먼저 깊이 있게 다루는 방식을 적용하려 합니다. 또한, 짧은 시간 안에서도 효율적으로 학습할 수 있는 방법을 찾아, 마감 기한 내에 더 높은 만족도를 얻을 수 있도록 노력할 것입니다. 이를 통해 제한된 시간 안에서도 중요한 개념을 충분히 이해하고 적용할 수 있는 능력을 키우고자 합니다
'개발 > 항해플러스_프론트엔드' 카테고리의 다른 글
| 1주차 WIL (2) | 2024.09.28 |
|---|
댓글