muntari Log muntari Log

이전 DOM에 관해 글을 남긴 적이 있다. 면접을 보게 되면서 무언가 깔끔하고 장황하지 않게 정리한 점과 몰랐던 부분에 대해 기록으로 남겨보자 한다. 알고 있는데, 듣기 쉽고 알아듣기 쉽도록 말하는 것도 능력이지 않을까 싶다. 브라우저 랜더링 정리 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 랜더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저의 랜더링 엔진인 서버로 부터 응답받은 HTML, CSS를 파싱 하여 DOM과 CSSOM 트리를 생성하고 이 둘을 결합해 랜더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로 부터 응답받은 JS를 파싱 하여 AST(Abstract Syntax Tree)를 생성하고 바잍트 코드로 변환하여 이를 실행한다. 이때 js가 DOM API를..

프런트엔드 개발을 하면 자연스럽게 따라오는 것들이 있다. TypeScript, Webpack, Babel 이전 프로그래머스 교육을 받으며 사용했던 것들이다. (이것 말고도 많겠지만...) 그런 느낌이 있다 개발을 하다 보면 이래서 이걸 사용하는구나?라고 느낄 때가 있지만 누군가 물어본다면 속 시원하게 대답할 수 없을 것 같은 느낌적인 느낌 말이다. 다른 사람에게 설명을 하지 못하면 진짜 내 지식이 아니지 않을까 생각한다. 이 기회에 왜 이것들을 사용해야 하는지에 대한 이유를 나름 정리해보려 한다. 혹시라도 잘못된 내용이 있다면 가감 없이 피드백 해주시면 감사하겠습니다. 왜 TypeScript를 사용하는가? JavaScript는 동적 타입의 인터프리터 언어이다. 동적 타입이라는 의미는 number, str..

웹 데브 코스 마지막 팀 프로젝트 금 나와라 뚝딱! 회고 금 나와라 뚝딱! 해당 프로젝트를 끝으로 짧다면 짧고, 길다면 긴 프로그래머스 KDT 과정이 마무리되었다. 이전과 동일하게 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운 점 - 아쉬운 점 - 이번 프로젝트에서 이루고자 했던 목표?! - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 1.1 프런트 입장에서의 협업! 이전 프로젝트에서는 공통 API를 제공받아 사용하였다. 따라서 API 협의 과정이 없이 만들어진 API 내에서 최대한 활용을 해야 했었다. 하지만, 이번 금 나와라 뚝딱 프로젝트에서는 프로그래머스 KDT 백/프 수강생끼리 함께 팀을 이뤄 프로젝트를 진행하였고 API 협의라는 것을 프런트 입장에서 해..

React JS에서 Ts로 변환하기 배포까지 마무리한 React 애플리케이션을 Javascirpt ==> Typescript로 변환해보자. 먼저, Private 레포를 우리 팀만의 ORG를 하나 만들어서 Public으로 전환해서 우리 팀만을 위한 연습용 레포를 하나 만들고 시작한다. 아래 문서에서 권장하는 방법을 살펴보자. https://create-react-app.dev/docs/adding-typescript/ Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev 기존 프로젝트에서 TypeScript를 추가하는 경우니 아래 cl..

웹 데브 코스 14주 차 첫 번째 팀 프로젝트 Reactree 회고 프로그래머스 웹 데브코스 과정 중 첫 번째 팀 프로젝트가 끝났다. 이제 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운점 - 아쉬운 점 - 다음에 또 프로젝트를 한다면 어떻게 할 것인가? - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 프로젝트를 많이 진행해보진 않았지만, 매번 프로젝트마다 배운 점이 정말 너무나도 많다고 생각한다. 개발자로서, 사람으로서 스스로 학습하고 배우는 것도 분명 있지만, 다른 사람들과 함께하면서 배우고 깨닫게 되는 것들이 많다. 그중 이번 프로젝트에서 배우고 깨달은 점을 내 나름의 정리를 통해 기록으로 남겨보려 한다. 1.1 토론하는 습관 우리 팀의 경우 각자 자신이 맡..

웹사이트를 구성할때 .js .css .images 파일등 수 많은 들이 모여 웹사이트를 구성하게 된다. 따라서 웹사이트에 접속했을때 굉장히 많은 파일이 다운로드될 수 있는데 이것에 비례하여 서버의 자원을 소모하고 웹사이트가 느리게 로딩이 된다. 또한, 많은 자바스크립트 패키지등을 사용하다보면 각각의 서로 다른 패키지들이 서로 같은 이름이나 함수를 사용하게 되면서 애플리케이션이 깨지게 되는데 이러한 현상을 해결하기 위해 나온 개념이 묶는다는 개념의 번들러가 등장하였다. Weppack, Broserify, Parcel 과 같은 도구들이 번들러에 속한다. 그 중에서도 가장 인기 있는 번들러가 웹팩이다. 웹팩의 정의 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다. 모듈 번들..

이제 갓 한달이 지났지만 많은 것을 배웠다고 생각한다. 첫번째 Toto App 과제를 진행했을때는 어렵지 않게 배운내용을 적용하며 순조롭게 진행을 했다면 두번째 노션 클로닝 과제는 굉장히 어렵게 느껴졌다. 다행히 기본 요구사항 구현은 성공하였지만, 보너스 요구사항과 기타 추가 기능등 완벽하게 해내지 못한 부분이 있어 굉장히 찝찝하다. 일단 구현하고 배포도 해보았지만, 데브코스 수료하기 전 조금 더 성장한 상태에서 코드를 들여다보고 리팩토링을 꼭 진행해보려 한다. 나만의 프론트엔드 코드 길잡이 키워드 ==> 일관성 프론트엔드 프로젝트를 처음해보는 입장으로써 나에게 맞는 앞으로의 프론트엔드 코드 길잡이?를 내려볼까 한다. 이번 두번째 과제를 진행하면서 왜 어려웠는지 생각해보자면 아래 단 한마디로 정의할 수 ..

프로그래머스 데브 코스 프론드 엔드 과정 회고록을 작성해보고자 한다. 아직 마무리까지는 4개월이 넘는 시간이 남았지만 생각보다 시간이 너무 빨리 지나갔다. 벌써 3주 차라니 그만큼 내가 집중하고 있다는 의미라고 생각한다. 저번 주까지의 나 2주 차까지는 함수형 프로그래밍 강의가 굉장히 밀렸었다. 원인을 파악해보자면 한 강의를 보며 실습 내용들을 내가 볼 포스팅으로 정리하는데 시간을 생각보다 많이 쏟았던 것 같다. 3주 차부터는 강의의 총개수가 줄기는 하였으나 내가 모르는 것 위주 + 내가 나중에 참고할 만 내용들을 짧게 짧게 디자인, 내용 등을 생각하지 않고 메모장과 같이 작성하며 포스팅에 걸리는 시간을 단축했다. 이제는 강의가 밀리지 않고 복습하고 혼자서 생각하는 시간을 여유롭게 가질 수 있는 점이 제..