기록하고 싶은 것들

오늘은 React의 Props와 State를 배웠다. props는 외부로부터 전달받은 값, 부모컴포넌트로부터 전달받은 값을 의미한다. State는 컴포넌트 내에서 변할 수 있는 값이며, State는 React State로 다루어야 한다, useState를 호출하여, state변수와 변수를 갱신할 함수를 생성한 뒤, 갱신하는 함수를 호출하여, state값을 조작해야하고 강제로 변경하면 안 된다. 그 밖에도, onClick, onChange를 사용하여 이벤트를 처리하는 방법등을 배웠다. 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라, 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 전달해야한다 why? 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결..

오늘은 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..

오늘은 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문제나 되는 코플릿 문제를 풀었는데, 역대급으로 어려웠다. 시간안에 모두 마치긴 하였..

오늘은 아고라 스테이츠에 간단한 기능을 추가하였다. 글의 목록을 지정한 개수로 나누어서 나눠진 글의 개수를 볼 수 있게 만드는 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; //현재 페이지 위치에 ..

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