Programming Is Hard

🙋‍♀️ 간단한 자기소개 저는 AI-OCR 문서 자동화 시스템을 개발하고 있는 4년 차 프론트엔드 개발자 김유빈입니다. Vue와 Typescript를 주로 사용해왔고, 최근에는 Javascript 딥다이브와 React 생태계를 공부하고 있습니다.벌써 항해를 시작한지 3주가 지났네요. 1챕터는 JS & React 딥다이브였는데요! 그동안의 경험을 돌아보며 회고해봅니다. 🎯 이번 챕터를 시작하며 꼭 해내고 싶었던 목표 여러 목표가 있었지만, 가장 중요하게 생각한 건 공부하는 습관을 들이는 것이였습니다. 퇴근하고 앉아서 공부하는 거 힘들잖아요?기술적인 목표로는 두 가지를 세웠습니다.Vanilla JavaScript 코드에 대한 두려움 없애기React의 동작 원리를 이해하고 사용하는 개발자 되기  🏆 이번..

이번 주차 목표 (프레임워크 없이 SPA 만들기)(1) 가상 DOM을 정의하고 사용할 수 있다.(2) 가상 DOM을 이용하여 이벤트 관리를 최적화할 수 있다.(3) diff 알고리즘을 이용하여 불필요한 렌더링을 최소화할 수 있다.  1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)- 전체적인 가상 DOM 구현가상돔 개념은 Vue와 React가 이를 기반으로 만들어진 프레임워크라서 익숙했다. 아무래도 기술면접에서도 자주 나오는 질문 사항이니깐.직접적으로 구현하는 건 처음이었는데, 개념적으로 이해하는 것과 실제로 구현하는 것의 차이를 실감했다... 진짜 어려웠다. - 이벤트 핸들러 구현createElement와 updateElement 내부에서 이벤트 핸들러를 다루는 부분이 까다로웠다. 가능..

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)대표적으로 3가지로 분리할 수 있을 거 같다. - 라우터 + 렌더 구현직접 라우터를 구현하는 것이 예상보다 훨씬 어려웠다. 평소 프레임워크가 알아서 처리해주는 부분에 대해 새삼 감사함을 느꼈다...(따봉 Vue야 고마워!) 단순히 history.pushState()만 사용하면 될 줄 알았으나, 실제로는 화면 전환 로직을 따로 조정해야 했고... 렌더링 시점을 원하는 대로 컨트롤하기 어려웠고, 이 부분에서 큰 어려움을 겪었다.- 배포GitHub Pages는 프론트엔드 개발자가 쉽게 접할 수 있는 배포 서비스이자, 웹사이트를 무료로 호스팅하기도 쉬운 편이라 가볍게 생각했는데, 라우팅이 제대로 되지 않아 404 페이지에 막혀 고생길을 건넜다.- ..

1. 지금까지의 회고Django + Vue.js를 사용하는 풀스택 웹 개발자로 시작해 온전히 Vue.js만을 사용하는 프론트엔드 개발자로 성장해왔다. Vue.js에서의 전문성을 쌓는 것도 즐겁고 재밌었지만... 사회에 나가야겠다 마음 먹고 이직을 고려하며 시장을 둘러보니, 대부분의 회사는 React를 대부분 사용하는 것을 알게 되었다.Vue.js만을 사용할 줄 아는 나에게 바깥 세상은 너무 낯설고 외로웠고... React를 필수적으로 배워 실무에 사용해야겠다! 라는 마음가짐을 갖게 되었다. 사실 프론트엔드 개발자로 쭉 살아갈 거면 더 열심히 개발 공부를 했어야 했는데... 퇴근 후 책상 앞에 앉아 공부하는 것은 결코 쉬운 일이 아니었다.2. 항해 플러스 참여 계기요즘 JD를 확인해보면 'React 실무 ..

스코프변수와 함수의 접근 가능한 범위전역 스코프에 선언된 변수는 어디서든지 접근할 수 있지만, 지역 스코프에 선언된 변수는 해당 스코프 내에서만 접근 가능함수 내에서 선언된 변수는 해당 함수의 지역 스코프에 속하며, 외부에서는 접근할 수 없음 클로저함수와 그 함수가 선언된 스코프의 조합함수가 다른 함수 내에 중첩되어 있을 때, 내부 함수가 외부 함수의 변수에 접근할 때 클로저가 생성클로저를 통해 외부 함수의 변수가 소멸되더라도 내부 함수에서 해당 변수에 접근할 수 있음클로저를 사용하면 비동기 작업, 콜백 함수 등 다양한 상황에서 활용할 수 있음 이벤트 캡처링이벤트가 상위 요소로 전파되는 단계캡처링 단계에서는 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 이벤트가 전파 이벤트 버블링이벤트가 하위 요소로..

Virtual DOM 실제 DOM을 추상화한 가상의 DOM 트리 실제 DOM은 비용이 많이 들기 때문에 고안된 게 Virtual DOM 실제 DOM의 복사본으로 Javascript 객체이고, React나 Vue에서 이 가상 DOM을 사용해서 UI를 조작하고 업데이트 실제 DOM 조작이 최소화되어 성능을 향상시키고 사용자 경험을 개선 증분 렌더링UI의 변경사항이 발생할 때 전체 UI를 다시 렌더링하는 대신, 이전 상태와의 차이를 계산하여 변경된 부분만을 업데이트하는 기술이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만을 실제 DOM에 반영UI 업데이트를 최적화 하는데 사용React.js에서 Virtual DOM과 함께 핵심 개념 브라우저 작동 원리예시로 google.com을..

최근에 허민석 교수님의 딥러닝 기반 자연어처리 강의를 수강하고 주요 내용을 정리했습니다.

https://github.com/luwbe1/winter-vacation-study/blob/master/NLP/team1/YubinKim/TensorFlow%20example.ipynb