기록하고 싶은 것들

오늘은 객체지향에 대해서 공부하였다. 객체지향이라고 하면 대표적인 언어로 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 지식을 채우고, 이를 활용해 배포 가능한 웹서비스를 직접 제작한 뒤 제작한 ..

const는 상수이며 재할당, 재선언이 불가하다. 하지만 아래의 예시를 보면, 상수가 변화한 것을 볼 수가 있다. const arr = [1,2,3,4] console.log(arr) //[1,2,3,4] arr.push(5) console.log(arr) //[1,2,3,4,5] 그렇다면 상수는 재할당이 가능한 것 아닌가? 정답: 아니다 분명 상수의 값이 변화하였는데, 재할당이 가능하지 않은 이유는 무엇일까? 그 이유는 arr가 배열이기 때문이다. 원시형은 그 자체의 값을 할당하는 데에 반해, 참조형인 객체는 주소값을 할당한다. 배열 또한 객체에 해당되기 때문에, 메모리에는 주소값이 할당된다. 즉, 메모리 저장공간에 곧바로 값을 저장하지않았기 때문에 객체가 생성된 이후, 동적으로 값을 추가해도 주소는 ..

오늘은 아고라 스테이츠에 간단한 기능을 추가하였다. 글의 목록을 지정한 개수로 나누어서 나눠진 글의 개수를 볼 수 있게 만드는 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)의 예시 상황 등에 대해서도..

오늘은 JS 핵심 개념과 주요 문법에 대해서 공부하였다. 하루종일 자습이라서 조금 여유있게 공부할 수 있었던 것 같다. 첫번째로는 원시 자료형과 참조 자료형의 기초에 대해 배웠다. 원시 자료형은 값 복사, 참조 자료형은 데이터 주소를 복사한다는 것을 배웠다. 두번째로는 스코프에 대해서 배웠다. 기존에 알고 있던 용어가 아니어서, 생소하였는데 개념에 대해서 살펴보니 변수 접근 규칙에 따른 범위를 나타내는 것 이었다. 즉 기존에 변수를 설정할 때, 적용되는 범위를 스코프라고 하는 것이었다. 새로 알게된 내용은 화살표 함수는 블록 스코프라는 것과 var을 사용시 블록 스코프를 무시한다는 것이었다, 하지만 이러한 예외 경우를 막기위해 var사용을 지양해야한다고 배우게 되었다. 마지막으로는 클로저에 대해서 배웠다..