기록하고 싶은 것들

오늘은 React Router에 대해서 배웠다. React Router는 주소에 따라서 다른 뷰를 보여주기 위해 필요하고, 대표적으로 BrowserRouter, Routes, Route, Link 등의 컴포넌트를 사용한다. BrowserRouter 컴포넌트는 HTML5의 History API를 사용해 페이지를 새로고침 없이 주소를 변경하게 도우며. 일반적으로 index.js에 을 감싼 형태로 사용한다. Routes 컴포넌트는 Route들을 포함하는 컴포넌트이고, Route는 path와 element 속성을 가지며, 각각 경로와 보여주고자 하는 컴포넌트를 나타낸다. Link 컴포넌트는 경로를 연결해주는 역할을 하는 컴포넌트이며, 와는 다르게, 페이지를 새로 불러오지 않고 애플케이션을 유지시킨다. 배운 바탕..

오늘은 React 라이브러리를 설치하고 과제를 진행하였다. React는 프론트엔드 개발을 위한 JS 라이브러리이며, 선언형, 컴포넌트 기반의 특징과, 프레임워크와 달리 기존 프로젝트에서도 유연하게 적용이 가능한 장점을 가지고 있다. React에서는 JS가 아닌 JSX를 사용하는데, JSX 형태는 브라우저가 바로 실행이 불가능하기 때문에, 'Babel'을 사용하여 JSX->JS로 컴파일하여 브라우저가 읽을 수 있게한다. 과제를 진행하면서 JSX규칙 중에 헷갈리는 내용이 있었다. 특정 사용자인지에 따라서 다른 className을 적용시켜, style을 변경시켰어야 했는데 {} 내부에 if문을 사용하여서 풀어야할지 헷갈렸다. 관련 내용를 찾아보니, 주로 삼항연산자를 통해서 조건에 따라 className을 변수..

오늘은 fetch 함수, axios함수에 대해서 공부하고 실습을 하며 사용을 해보았다. 그동안 Promise를 fetch의 기본이해를 위해서 배운것이고, 사실상 fetch를 기반으로 만들어진 axios api를 많이 사용한다고 한다. fetch는 promise와 사용법이 비슷하였고 url을 통해 json데이터를 받아오는 것이 신기하였다. axios는 json()메서드를 사용할 필요없이 js 객체로 변경시켜주고, fetch보다 단순한 형태였다. 공부를 진행하면서 가장 어려웠다고 생각했던 부분은 받은 데이터의 조작이었다. json 데이터를 받아서 원하는 데이터의 형태로 가공시키는 부분이 생각보다 어려웠다. 데이터를 받아서 다른 데이터와 결합을 해야하는데 어떤식으로 가공하여 결합할지 막막했다. 그 과정속에서 ..

오늘은 타이머 api와 Fs 모듈을 실습해보면서, callback함수, promise, promise의 chaning, promiseAll, async await 등 비동기 함수들의 활용방법을 살펴보았다. 단순히 개념만 읽었을 때는 이해가 어느정도 갔는데, 실제로 전달인자를 넣어주고, 결과값을 받는 과정에서 어떤 값을 받아주고 받아야 하는지 너무 너무 헷갈렸다. 특히 아래 예시 처럼, Promise의 인수인 콜백함수에 들어가는 resolve, reject 함수의 사용법 때문에, 생각하기 어려웠던 것 같다. 정상적인 처리에는 resolve를 처리하고, 에러 시 reject를 호출하는 구조가 익숙치 않아서, 해결하는 데 오랜시간을 들였다. 이외에도, Promise의 chaning도 너무 헷갈렸다. .then..

오늘은 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; //현재 페이지 위치에 ..