전체 글
-
[프로그래머스 웹 데브코스] ReacTree 프로젝트 회고나만의 이야기 2021. 11. 8. 14:55
웹 데브 코스 14주 차 첫 번째 팀 프로젝트 Reactree 회고 프로그래머스 웹 데브코스 과정 중 첫 번째 팀 프로젝트가 끝났다. 이제 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운점 - 아쉬운 점 - 다음에 또 프로젝트를 한다면 어떻게 할 것인가? - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 프로젝트를 많이 진행해보진 않았지만, 매번 프로젝트마다 배운 점이 정말 너무나도 많다고 생각한다. 개발자로서, 사람으로서 스스로 학습하고 배우는 것도 분명 있지만, 다른 사람들과 함께하면서 배우고 깨닫게 되는 것들이 많다. 그중 이번 프로젝트에서 배우고 깨달은 점을 내 나름의 정리를 통해 기록으로 남겨보려 한다. 1.1 토론하는 습관 우리 팀의 경우 각자 자신이 맡..
-
webpack 이란 무엇인가?TIL/프로그래머스 웹 데브코스 2021. 9. 17. 13:44
웹사이트를 구성할때 .js .css .images 파일등 수 많은 들이 모여 웹사이트를 구성하게 된다. 따라서 웹사이트에 접속했을때 굉장히 많은 파일이 다운로드될 수 있는데 이것에 비례하여 서버의 자원을 소모하고 웹사이트가 느리게 로딩이 된다. 또한, 많은 자바스크립트 패키지등을 사용하다보면 각각의 서로 다른 패키지들이 서로 같은 이름이나 함수를 사용하게 되면서 애플리케이션이 깨지게 되는데 이러한 현상을 해결하기 위해 나온 개념이 묶는다는 개념의 번들러가 등장하였다. Weppack, Broserify, Parcel 과 같은 도구들이 번들러에 속한다. 그 중에서도 가장 인기 있는 번들러가 웹팩이다. 웹팩의 정의 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다. 모듈 번들..
-
프론트엔드 코드 길잡이나만의 이야기 2021. 9. 8. 21:46
이제 갓 한달이 지났지만 많은 것을 배웠다고 생각한다. 첫번째 Toto App 과제를 진행했을때는 어렵지 않게 배운내용을 적용하며 순조롭게 진행을 했다면 두번째 노션 클로닝 과제는 굉장히 어렵게 느껴졌다. 다행히 기본 요구사항 구현은 성공하였지만, 보너스 요구사항과 기타 추가 기능등 완벽하게 해내지 못한 부분이 있어 굉장히 찝찝하다. 일단 구현하고 배포도 해보았지만, 데브코스 수료하기 전 조금 더 성장한 상태에서 코드를 들여다보고 리팩토링을 꼭 진행해보려 한다. 나만의 프론트엔드 코드 길잡이 키워드 ==> 일관성 프론트엔드 프로젝트를 처음해보는 입장으로써 나에게 맞는 앞으로의 프론트엔드 코드 길잡이?를 내려볼까 한다. 이번 두번째 과제를 진행하면서 왜 어려웠는지 생각해보자면 아래 단 한마디로 정의할 수 ..
-
3주차 데브코스 회고록나만의 이야기 2021. 8. 20. 17:16
프로그래머스 데브 코스 프론드 엔드 과정 회고록을 작성해보고자 한다. 아직 마무리까지는 4개월이 넘는 시간이 남았지만 생각보다 시간이 너무 빨리 지나갔다. 벌써 3주 차라니 그만큼 내가 집중하고 있다는 의미라고 생각한다. 저번 주까지의 나 2주 차까지는 함수형 프로그래밍 강의가 굉장히 밀렸었다. 원인을 파악해보자면 한 강의를 보며 실습 내용들을 내가 볼 포스팅으로 정리하는데 시간을 생각보다 많이 쏟았던 것 같다. 3주 차부터는 강의의 총개수가 줄기는 하였으나 내가 모르는 것 위주 + 내가 나중에 참고할 만 내용들을 짧게 짧게 디자인, 내용 등을 생각하지 않고 메모장과 같이 작성하며 포스팅에 걸리는 시간을 단축했다. 이제는 강의가 밀리지 않고 복습하고 혼자서 생각하는 시간을 여유롭게 가질 수 있는 점이 제..
-
자바스크립트 엔진과 이벤트 루프TIL/프로그래머스 웹 데브코스 2021. 8. 18. 22:21
대표적으로 자바스크립트는 '단일 스레드' 기반의 언어이다. 스레드가 하나라는 말은 동시에 하나의 작업만을 처리할 수 있다는 의미이다. 하지만 모두 알다시피 자바스크립트에서는 비동기 처리가 가능하다. 우리는 특정 웹 페이지에서 애니메이션 효과를 보여줌과 동시에 마우스나 키보드의 입력을 받아 처리하고 웹 페이지상에서 여러 개의 작업을 동시에 할 수 있다는 것을 잘 알고 있다. 또한, Node.js 기반의 웹 서버에서 동시에 여러개의 HTTP 요청을 처리하기도 한다. 이는 브라우저 위에서 동작하는 자바스크립트라는 언어가 HTML과 CSS를 핸들링하며 동적인 웹 페이지를 만들기 때문이라 생각한다. 위에서 단일 스레드로 동시의 하나의 작업만을 처리 할 수 있다고어떻게 이러한 비동기 처리가 가능한 걸까? 결론부터 ..
-
JS_명령형 프로그래밍과 선언형 프로그래밍TIL/프로그래머스 웹 데브코스 2021. 8. 17. 13:31
명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 우리가 익히 해왔던 방식과 같이 컴퓨터가 수행할 명령들을 순서대로 기술해 놓은 것이다. 즉, "어떻게 구현하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법이다. // 명령형 // "어떻게" 처리하는지에 대한 묘사 function double(arr){ let res = []; for (let i = 0; i < arr.length; i++){ res.push(arr[i] * 2) } return res // } 선언형 프로그래밍은 대표적으로 SQL Query 문과 HTML이 있다. 우리가 약속된 태그들을 쭉 나열하면서 실제로 어떻게 랜더링 되느냐에 대해서는 크게 신경 쓰지 않아도 된다. 무엇을 나타내야 하는지만 선언하면 브라우저가 ..
-
JS_잘 틀리는 예제TIL/프로그래머스 웹 데브코스 2021. 8. 16. 19:48
this 관련하여 잘 틀리는 예제 1 function Cat(name, age){ this.name = name; this.age = age; } const A = Cat('nana', 7); console.log(A.name) 이 결과는 에러가 발생함 이유는 this 때문이다. 자바스크립트에서는 this는 함수가 실행될 때 결정되는 부분이 있다. 따라서, Cat 함수를 실행을 하면 놀랍게도 this는 window를 가리키게 된다. 또한, Cat 함수는 결과를 리턴하는 로직이 없기 때문에 A는 undefined가 되고 undefined.name에 접근하기 때문에 에러가 나는 것이다. 따라서 window.name 을 할 경우 아래와 같이 출력되며 의도치 않게 전역 윈도우 객체를 수정하는 상황이 발생한다. ..
-
JS_PromiseTIL/프로그래머스 웹 데브코스 2021. 8. 14. 18:35
Promise가 특별하게 callback과 다른 차이를 가지는 점은 than 메서드를 통해 결과를 꺼내 보는 것이 아니라!! 비동기 상황을 일급 값으로 다룬다는 점이 가장 중요한 차이이다. 프로미스는 프로미스라는 클래스를 통해서 만들어진 인스턴스를 반환한다. 그 프로미스라는 값은 대기, 성공, 실패를 다루는 일급 값으로 이루어져 있다는 게 핵심이다. 대기와 일을 끝내는 것들을 코드, 컨텍스트로 만! 다루는 게 아니라 대기되어지고 있다는 어떤 값을 만든다는 점에서 콜백과 가장 큰 차이를 가지며 이점이 정말 정말 정말 정말 핵심이다. 콜백 비동기적인 상황을 다루는것이 오직 코드로만 표현이 되며 function addCall(a, callback){ setTimeout(() => callback(a + 10)..