기록하고 싶은 것들

오늘은 underbar 과제를 통해서, 기존에 존재하는 메서드들을 직접 구현해보는 시간을 가졌다. 과제는 처음에 만든 함수를 뒤에서도 활용을 하면서 구현하는 식으로 진행이 되었고, 맨 마지막에, 가장 애를 먹었던 _.reduce 함수를 구현하는데 겪었던 어려움을 써보고자 한다. 기존 reduce 메소드 // reduce const numbers = [1, 2, 3, 4]; numbers.reduce((누산값, 현재요소값) => { return 다음누산값; }, 초기누산값); reduce는 배열의 각 요소를 순회하며, callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값으로 설정되고, 두번째 요소부터 순회를 한다. _.reduce 함수 ..

오늘은 class 관련 과제를 진행하면서 알게된 내용을 써보려고 한다. Grub class를 상속받기 위해서 Bee class에 extends를 이용하여 상속을 받았고, 기존에 있던 age, color, job 속성에 대해서 재정의를 해주기 위해서 constructor를 생성한 뒤 this를 이용하여 재정의 해주었다. 재정의한 속성의 값들이 잘 바뀔거라고 예상한 것과 달리 ReferenceError가 발생했다. ReferenceError 발생 이유 그 이유를 찾아본 결과, 상속받은 class는 this를 사용 시, 그 전에 super()를 선언 해 주어야 한다는 것이었다. 자바스크립트는 '상속 클래스의 생성자 함수(derived constructor)'와 그렇지 않은 생성자 함수를 구분한다. 상속 클래스..

오늘은 객체지향에 대해서 공부하였다. 객체지향이라고 하면 대표적인 언어로 Java만 떠올렸는데, JS에서도 주요한 프로그래밍 기법으로 사용된다고 한다. 객체 지향 프로그래밍이란, class 라는 하나의 모델을 만들고, 그 모델을 바탕으로 한 인스턴스를 생성하는 프로그래밍 패턴이다. 객체 지향은 기존에 알고 있던 개념이라 이해하기는 쉬었으나, 프로토타입이라는 새로운 개념을 접한 후, 머리가 아파왔다. JS는 프로토타입 기반 언어, 프로토타입(Prototype)은 원형 객체 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 **프로토타입 객체(prototype object)**를 가진다는 의미인데, 이 개념을 이해하기 어려워서 코딩애플의 프로토타입 강의를 참고했다. 출처 : https://www...

오늘은 Section2의 첫 날이자, 고차함수에 대해서 배운 날이다. 고차함수란 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수 콜백함수란 다른 함수의 전달인자로 전달되는 함수 라는 것을 배웠다. 특히 콜백함수라는 말은 듣기만 많이 들었지, 정확한 개념에 대해서는 이해하지 못하고 있었는데 정리하고 갈 수 있어서 좋았다. 수업의 대부분은 내장 고차 함수인 filter, map, reduce애 대해서 익숙해 지는 시간이었다. filter와 map은 기존에 사용해본 경험이 있어서 잘 이해가 갔는데 reduce 메서드는 생소하여 예제를 찾아보고, 다른 글들을 읽어가면서 이해할 수 있었다. 배운 내용을 바탕으로 32문제나 되는 코플릿 문제를 풀었는데, 역대급으로 어려웠다. 시간안에 모두 마치긴 하였..

긴지 짧은지 생각할 겨를도 없이 Section 1이 마무리가 되었습니다. 이번 회고는 아래의 형식으로 진행되는 KPT 회고로 작성하고자 합니다. 목표 상기하기 Keep, Problem 작성하기 Try 작성하기 우선순위 정하기 1. 목표 상기하기 저는 12월 15일 지금으로 부터 1달전 쯤 목표를 세웠었습니다. 연봉 4000이상 웰컴키트 증정 복지 포인트 제공 서울 내 or 판교 위치 자유로운 분위기의 it회사 지금 생각해보면 조금(?) 무리인 조건일 수도 있어도, 꿈이라도 크게 가지고 싶다는 마음에 적은 것 같습니다 목표를 상기하기 위한 질문 Q. 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가? 학습을 통해 부족한 JS 지식을 채우고, 이를 활용해 배포 가능한 웹서비스를 직접 제작한 뒤 제작한 ..

오늘은 아고라 스테이츠에 간단한 기능을 추가하였다. 글의 목록을 지정한 개수로 나누어서 나눠진 글의 개수를 볼 수 있게 만드는 pagination 기능을 구현해보았다. //Pagination const paginationContianer = document.querySelector(".page_list"); //8개씩 출력 let totalPage = Math.ceil(agoraStatesDiscussions.length / 8); let currentPage = 1; function setPage(totalPage, currentPage) { let li = ""; let prevPage = currentPage - 2; let nextPage = currentPage + 2; //현재 페이지 위치에 ..

오늘은 아고라스테이츠 게시판을 제작하는 개인프로젝트를 진행했고, 그 과정에서 겪은 어려웠던 점에 대해서 작성하고자 한다. 우선 글 작성 시, 요소의 맨 앞에 새로운 요소를 넣으려고 unshift를 사용하였다. 오류가 나서, 무엇때문인지 고민해 보았다. 분명 unshift는 맨 앞에 넣은 명령어인데 적용이 되지 않아서 의아했다. 문제를 찾아본 결과, unshift는 배열에 적용되는 메소드이고, 요소의 맨앞을 추가할 때는 prepend()를 사용해야 했다. 이후 프로필 이미지를 깃허브 api를 이용하여 github 프로필 이미지를 받아오려고 시도하였다. 하지만, 사진이 받아지지 않고, Promise()이란 문구가 console에 찍혔다. 문제점을 찾아보다가 let으로 설정해준 뒤에 재선언을 해주면 어떨까? ..

오늘은 DOM에 대해서 배웠다. JS로 HTML을 조작할 때 사용한다는 것은 알고있었지만, CRUD 실습을 하면서 다시 복습하니까 이해가 잘 되었다. querySelector와 getElementById의 차이가 궁금했었는데 동일한 기능이지만, 요즘에는 querySelector를 더 선호해서 사용한다고 한다. 그리고 여러 개의 요소를 한 번에 가져오는 querySelectorAll로 조회된 HTML 요소들이, 배열은 아니지만, for문을 사용할 수 있는 배열형 객체 라는것을 새롭게 알게되었다. 이외에도 Element.setAttribute(name,value)를 이용하여 속성을 추가 할 수 있다는 것도 Mdn 검색을 통해서 알게되었다. 이후에는 이를 배운 내용을 바탕으로 유효성 검사 과제를 진행하였다. ..

JavaScript Koans 과제를 진행하면서, 새롭게 알게 된 내용을 정리해보았다. 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 함수 선언식은 호이스팅 가능 catName("클로이"); //"제 고양이의 이름은 클로이입니다" function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); //"제 고양이의 이름은 호랑이입니다" 함수 표현식은 호이스팅 불가 console.log(catName("클로이")); // ReferenceError let catName = function(name) { return "제 고양이의 이름은 " + name + "입니다"; } consol..

오늘은 ES6 주요 문법에 대해서 공부하였다. 기존에 복사의 목적으로 사용하던, ... 연산자에 대해서 자세히 알 수 있었고, 이를 활용해서 배열 합치기, 복사, 객체 합치기, 복사, 나머지 파라미터 받기 등 다양한 방법으로 활용할 수 있다는 것을 알게되었다. 또한 구조분해할당을 통해서 배열이나 객체를 분해하여 변수에 새롭게 할당이 가능하다는 것을 알게되었다. 이후 koans 과제 활동을 하면서, 부족한 개념에 대해서 정리하였고 새로운 개념에 대해서 많이 알아갔다. (과제에서 새롭게 알게 된 내용은 내일 게시물로 올릴 예정이다.) 수업이 끝난 뒤, 스터디를 진행하였다. 오늘 주제인 표현식과 연산자 이외에도 Js가 왜 동적인 언어로 불리는지, 단축 평가(short circuit)의 예시 상황 등에 대해서도..