코드스테이츠

화,수 휴가를 제출하고 여행을 다녀왔더니 정말 많은 공부가 밀려있었다 ... 오늘 화, 수 안한만큼 해야지 !! 했는데 너무 피곤했는지 늦게 일어나서 9시 12분에 출석을 해버렸다 ... ㅜ 부랴부랴 웹 서버 기초에 대해 유어클래스를 공부해보았는데 아무래도 3일치를 하루만에 하려고 하니 뇌에 과부하가 온 거 같다. 오늘은 과제 제출도 하지 못해 반딧불반에 오게 되었고 당연한 결과인 만큼 열심히 나머지 공부를 해 볼것이당 ! ! 웹 서버에 대해서는 거의 노베이스라고 해도 될 정도로 무지해 공부하는데 어려움이 많았던 거같다. node.js 를 사용해본적이 없어 더 헤맸었던 거같다 .. 오늘 포스트는 오늘 공부한 web server 기초와 mini node server 과제를 의사코드로 작성해 볼 것이다. 또..

지난 포스트까지 콜백함수를 통해 비동기를 처리하는 것을 알아보았다. 오늘은 비동기로 작동하는 코드를 제어할 수 있는 방법 중 Promise 를 활용하는 방법에 대해 정리해보겠다 ! 또한 프로미스 사용을 간결하게 하기 위한 Async/Await 에 대해서도 정리해보겠다 ! Promise 를 공부하면서 헷갈리는 부분이 정말 많았다 . 헷갈렸던 부분, 새롭게 알게된 사실과 개념을 중심으로 글을 작성해갈 예정이다. Promise Promise 는 클래스이므로 new 키워드를 통해 Promise 객체를 생성할 수 있다 . 인자로는 비동기 처리를 수행할 콜백 함수 ( executor) 를 전달 받는데 이 콜백 함수는 resolve, reject 함수를 인자로 전달받는다. Promise 객체가 생성된 후 -> exe..

어제 프로토타입에 대해 공부했었다. 오늘 공부한 프로토타입 체인을 우리가 자주 사용하는 배열을 예로 설명해보겠다. 프로토타입은 객체의 원형으라고 했다. 그래서 우리가 배열을 생성할 때 let arr = [] 이런식으로 배열을 생성해도 내부적으로는 new Array() 같이 생성자 함수로 선언되었다는 것을 알 수 있었다. 이렇게 생성된 인스턴스 arr 은 생성자 함수에게서 메소드를 상속받는다. arr 배열 객체의 원형은 Array 임을 알 수 있다. 그럼 객체는 프로퍼티일까 ? 정확히는 아니라고 할 수 있다. 함수 객체가 가지는 프로토타입이라는 특수한 형태의 객체 프로퍼티를 통해 상속받는 것이다 ! 따라서 Array.prototype 객체를 살펴보면 배열에서 사용한 메소드들을 찾아볼 수 있는 것이다. Ar..

프로토타입이라는 단어는 매우 생소했다. 또한 공부하기도 어려웠다 .. 잘 이해가 안됐던 거같다 ㅜ.ㅜ 조금 더 공부가 필요할 것 같다 !! 그래도 공부해본 프로토타입과 클래스에 대해 정리해보겠다 . 프로토타입(Prototype) 프로토타입은 원형 객체를 의미하며 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 기반 언어 ? 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미 프로토타입 객체도 또 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있고 그 상위도 마찬가지이다. 이를 프로토타입 체인이라고 하며 이에 관한 내용은 다음 블로깅때 정리하겠다. 즉 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어있..

클래스와 인스턴스에 대해 배우고 이를 포함한 큰 개념인 객체 지향 프로그래밍에 대해 배웠다. 예전 처음 코딩을 접했을 때 c언어를 배웠었는데 그 후 자바를 배웠을 때 확실히 사용하기 편했던 것이 기억이 난다. 그 기억을 떠올려가며 오늘 공부한 객체 지향 프로그래밍에 대해 작성해보겠다 ! 절차적 언어 vs 객체지향 언어 절차적 언어는 별개의 변수와 함수로 순차적으로 작동한다 하지만 객체지향 언어는 데이터의 접근과 , 데이터의 처리과정에 대한 모형을 만들어 데이터와 기능이 별개로 취급되지 않고 한 번에 묶어 처리할 수 있다. OOP ? Object Oriented Programming 의 약자로 프로그램 설계 철학을 의미한다. 모든 것을 객체로 그룹화 하고 4가지 주요 개념을 통해 재사용성을 얻을 수 있다...

어제부터 섹션2가 시작되고 많이 허둥댔다. 내가 전공자가 맞나 ? 싶을정도로 어려운 개념이었던 거같다. 그래서 더 노력해야겠다는 생각이 들었다. 오늘은 클래스와 인스턴스에 대해 배웠다. 다행히 예전에 자바를 공부한 적이 있어서 클래스와 인스턴스에 대한 개념들은 머릿속에 잘 들어왔던 거같다. 예전 자바스크립트를 독학할 때 따로 책을 사서 차근차근 공부한 것이 아니라 공식문서를 찾아보고 유튜브를 통해 실전에 사용시 모르는 부분만 공부를 했어서 개념에 대한 이해가 조금은 부족했었다. (배열을 생성할 때 바로 let arr = [] 라고 선언하는 것과 new 키워드를 사용하여 선언하는 것이 같은 것인지 오늘 알게되었다. ㅎㅎ ! ) 서론 끝! 지금부터 클래스와 인스턴스에 대해 공부한 부분을 정리해보겠다 ! 객체..

오늘은 섹션 1을 모두 마무리하고 회고 시간을 갖게 되었다. 회고란 지난일을 돌이켜 생각해보는 것인데 정말 회고라는건 어떤일을 하기에 꼭 필요한 습관인 거같다. KPT 회고 방식으로 회고록을 작성해보았다. 내가 이루고자하는 목표를 향해 끝없이 달려나갈 것이다 !! 🤔목표 상기하기 😶‍🌫️ 부트캠프에 들어오기 전 나는 생각했었다. 정말 누구보다도 열심히 하자 . 달라 지자 . 내 선택이 후회없는 선택이 되도록 노력하자 이 세가지였다. 섹션 1이 끝난 지금의 나는 사실 저 세가지를 모두 지켰다고는 말 할 수는 없다. 하지만 한가지 확실한 것은 하루하루 성장하고 있다는 것이다. 사실 살아오면서 목표라는 것을 세우고 지켜본적이 없는 것 같다. 예전에 MBTI 검사를 했었는데 P가 90프로 이상이 나왔었다. 이렇..

목금 이틀동안 솔로 프로젝트로 나만의 아고라스테이츠를 만들어보았다. 섹션1에서 배웠던 개념들을 모두 사용하여 하나의 웹페이지를 구현해보는 프로젝트였다. 사실 예전에 졸업 프로젝트를 만든다던가 해커톤이나 종종 프로젝트를 참여한 적이 있어 큰 부담은 없었던 거 같다. 하지만 확실히 느낀건 그때보다 지금의 내가 훨씬 성장했다는 점이다. 예전에 화면 레이아웃을 구성할 때 flex 박스 사용방법을 잘 몰라 아무곳이나 다 flex를 때려박고 고생을 했던 기억이있는데 섹션 1에서 학습한 대로 부모요소에 적용하는 속성과 자식요소에 적용하는 속성을 따로 두어 적용하니 수월하게 레이아웃을 손 볼 수 있었다. 그럼 서론은 여기까지 적고 아고라스테이츠를 구현하면서 느낀점이나 어려웠던 점 알게된 점을 중심으로 글을 작성해보겠다..

오늘부터는 새로운 페어분과 활동하게 되었다. 오늘의 활동으로는 계산기의 기능을 구현하는 활동이었다. 처음부터 만드는 것이 아니라 틀은 잡혀있고 그 안의 기능들을 구현하는 것이었다. 구현해볼 계산기는 위의 칸처럼 첫 번째 숫자칸, 연산자 칸 , 두 번째 숫자칸, 결과 칸 이렇게 나누어져있었고 버튼을 클릭할 시 칸에 적절한 버튼 텍스트가 뜨게 구현해야 했다. 예전에 이와 비슷하게 버튼을 클릭했을 때 .innerHTML 을 활용하여 화면에 텍스트를 변경했던 기억이 있어 그렇게 해보았는데 코드를 다시 살펴보니 아래 처럼 사용할 수 있게 변수로 선언되어있었다. const firstOperend = document.querySelector('.calculator__operend--left'); // calculat..