본문 바로가기

분류 전체보기173

Code States 19일차 - React SPA SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야 한다. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. 전통적인 웹사이트의 한계와 단점 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 됐다. 하지만 이때마다 Header와 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러 오는 것이 서버와의 불필요한 트래픽.. 2021. 8. 12.
Code States 18일차 - React 기초 JSX란 무엇인가 JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그래서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 "Babel"이다. Babel은 JSX를 브라우저가 이해할 수있는 JavaScript로 컴파일 한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. DOM 그리고 React JSX React에서는 DOM과 다.. 2021. 8. 11.
Code States 17일차 - 고차함수 일급객체 컴퓨터 프로그래밍 언어 디자인에서, 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 출처: 일급객체 - 위키백과 일급객체의 특징 변수에 할당(assignment) 할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 1. 변수에 할당(a.. 2021. 8. 10.
Code States 15일차 - DOM DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. HTML에 JavaScript 적용하기 HTML에 JavaScript를 적용하기 위해서는 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다. HTML 해석을 잠시 멈춘 웹 브라우저는 요소를 먼저 실행한다. HTML은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에 이전에 배웠던 조건문이나 반복문을 사용할 수 없고, 정보를 저장하기에도 적합한 언어가 아니다. 그래서 자바스크립트라는 프.. 2021. 8. 6.
Code States 14일차 - Spread/Rest 문법 Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); // 6 Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 6 sum(1,2,3,4) // 10 배열에서 사용하기 1. 배열 합치기 let parts = ['shoulders',.. 2021. 8. 5.
Code States 13일차 - 클로저 클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성 된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 라고 한다. 여기서의 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"이다. 특이하게도 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 한다. 클로저 함수: 클로저는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻한다. 외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있다. 클로저 사용 예시: 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각.. 2021. 8. 4.