분류 전체보기

💡 REST API 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 우리가 어떤 식당이나 카페의 손님이고, 식사 혹은 음료를 주문한다고 가정해 보자. 메뉴판의 상태가 아래 사진과 같다면 어떨까? 알아보기도 어렵고, 주문하기도 어려울 것이다. 클라이언트와 서버 사이에도 데이터와 리소스를 요청하고, 요청에 따른 응답을 전달하기 위한 메뉴판이 필요하다. 메뉴판을 보고 손님이 식당에서 음식을 주문하듯 클라이언트는 API를 통해 서버에 요청하고 이에 대한 응답을 받는다. 따라서 HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로..

state 애플리케이션의 "상태" 컴포넌트 내부에서 변할 수 있는 값 props 외부로부터 전달받은 값 컴포넌트의 속성(property)을 의미합니다. 이름이나 출생지처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록..

💡 SPA 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아서 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 애플리케이션이나 웹 사이트 SPA의 등장 배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다. 페이지 전체를 로딩하면서 깜빡이는 현상 등이 생기기 때문에 유저 경험이 좋지 않았습니다. 또한 사용자와 서비스 사이에 상호작용이 더욱 많아지면서 웹사이트가 더욱 복잡해졌습니다. 상호작용을 할 때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다. 이런 문제를 개선..

우리가 작성한 JavaScript코드는 웹브라우저의 엔진을 통해 해석하고 실행합니다. 하지만 자바스크립트 엔진만으로 충분하지 않아서 브라우저가 제공하는 JS런타임 환경이 Web API, Queue, Event Loop 등을 동원합니다. Runtime 자바스크립트 엔진(Single Thread) 자바스크립트 엔진 중 가장 유명한 것이 크롬의 V8엔진입니다. V8엔진은 크롬과 node.js 등 에서 사용됩니다. V8엔진을 간단히 표시한 모습은 이렇습니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙(Memory Heap): 메모리 힙은 변수 및 객체들을 메모리 할당하는 공간입니다. 콜 스택(Call Stack): 코드가 실행되면서 스택 프레임이 쌓이는 곳입니다. JS Engine은 단 하나의 Call..

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. — 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 한 객체에 정의된 메소드와 속성을 다른 객체에서 사용할 수 있도록합니다. 프로토타입 체인이란? 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다. JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은..

💡 프로토타입 JavaScript에서 상속을 위해 사용하는 매커니즘 클래스 JavaScript에는 class가 없기 때문에 생성자 함수를 사용해서 그 역할을 대신합니다. class Human { constructor(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log(this.name + " said hello"); } } } new 키워드를 이용해 Human생성자 함수를 실행하고 전달 인자로 name과 age를 줍니다. let steve = new Human('steve', 30); steve.sayHello(); // "steve said hello" let kim = new Human("kim"..

💡 객체 지향 프로그래밍(object-oriented programming) 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식 객체란? 하나의 역할을 수행하는 '데이터(속성)와 기능(메서드)'의 묶음 객체 지향 프로그래밍의 탄생 초기 프로그래밍 방식은 절차적 프로그래밍 방식이었다. 입력을 받아 명시된 순서대로 처리한 다음, 그 결과를 출력하는 것으로 명령어의 모음일 뿐이었다. 이 방식은 프로그램이 조금만 복잡해지면 순서도로 나타내는것이 불가능할 정도로 꼬인 “스파게티 코드”를 만들게 된다. 객체 지향 프로그래밍은 이것을 상향식(Bottom-up) 해결법을 통해 해결한다. 작은 문제들을 해결할 수..

💡 객체 지향 프로그래밍 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴. 청사진은 클래스(class)라고 부르고, 청사진을 바탕으로 만든 객체를 인스턴스 객체(instance object) 줄여서 인스턴스 라고 부른다. 클래스를 만드는 방법 ES5이전 문법 function Car(brand, name, color) { this.brand = brand; this.name = name; this.color = color; } // 속성 Car.prototype.refuel = function(){ return "연료 공급"; } // 메서드 Car.prototype.drive = function(){ return "운전 시작"; } // 메..

목표 설정 section1을 들어가며 처음에 썼던 나의 다짐은 이랬다. 수정 전 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프론트엔드 기초 즐겁게 공부하는 습관 익히기 매끄럽게 협업 할 수 있는 커뮤니케이션 능력 나의 다짐 정규시간 후 최소 2시간 복습 블로그에 꾸준히 회고 올리기 주 3회 이상 운동으로 건강 챙기기! 섹션 1을 공부하면서, 그리고 좋은 회고에 대해서 배우고 나서 보니 다소 모호한 부분을 수정하고 싶어졌다. 큰 틀은 유지하되 안에 세부 내용을 추가해 보았다. 수정 후 💡 목표: IT대기업 목표하고 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프론트엔드 기초 배운건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(..

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미 코드스테이츠 JavaScript Koans 파트에서 새로 배운 개념들을 정리해 보았다. Types tricky parts of JavaScript console.log(1 + "1") // "11" console.log(123 - "1") // 122 console.log(1 + true) // 2 console.log("1" + true) // "1true" 자바스크립트에는 다소 이해하기 힘든 부분들이 존재한다. 자바스크립트의 별난 부분들을 따로 모아둔 저장소도 있다. https://github.com/denysdovhan/wtfjs 함수의 전달인자 let num = 10; function addTen(num..