Javascript
React SPA
SPA (Single Page Application)SPA의 장점SPA의 단점React에서의 Wireframe (컴포넌트 나누기)Routing?React RouterReact Router 주요 컴포넌트React Router 환경 세팅1. react-router 라이브러리 설치2. App.js에 react-router 컴포넌트 꺼내오기React Router 구현방법, useNavigateSPA (Single Page Application)웹페이지에서는 페이지를 유저에게 보여줄 때, 즉 페이지를 로딩할 때마다 서버에 미리 준비된 페이지를 전달받아 렌더링 했지만 규모가 커질수록 유저와의 상호작용이 많아지고 이에 따른 속도 저하 등의 문제가 발생했다. 이는 서버에 필요 이상의 트래픽을 발생시키는 것은 물론 유저..
React State & Props
Propsprops 사용 방법1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다2. props를 이용해 정의된 값과 속성을 전달한다3. 전달받은 props를 렌더링한다StateState hook, useStateuseState 사용법state 갱신하기주의점이벤트 처리자주 사용하는 이벤트 처리onChangeonClickControlled ComponentReact의 데이터 흐름개발은 상향식(bottom-up)으로데이터의 흐름은 하향식(top-bottom)으로데이터 정의, 속성(props)인가 상태(state)인가?상태(state)를 위치시키는 방법예시를 토대로 : “전체 트윗 목록” 데이터 위치시키기Props컴포넌트의 속성(property)을 의미한다. 사람으로 비유하자면 성별이나 이름처럼 변하지 ..
ES6 축약문법
삼항조건 연산자 (The Ternary Operator) ?if..else 문항을 한 줄로 줄일 수 있다. 조건을 작성하고 ? 를 입력 한 뒤 각 조건에 대한 실행을 true : false 형식으로 작성하면 된다.const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } else { answer = 'less than 10'; }const answer = x > 10 ? 'greater than 10' : 'less than 10';간략계산법(Short-circuit Evaluation)기존의 변수를 다른 변수에 할당하고 싶은 경우 기존 변수가 빈 값(null, undefined, empty)이라면 에러가 발생한다. 이를 해결하기 위해 기..
클로저
클로저JavaScript에서는 다른 컴퓨터 언어와 조금 다른 특성이 몇 가지 있는데, 그 중 종종 사용되는 것이 클로저라는 개념이다. JavaScript는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경, 즉 어휘적 환경을 기준으로 변수를 조회하려 한다. 이와 같은 이유로 “외부 함수의 변수에 접근할 수 있는 내부 함수”를 클로저 함수라 일컫는다.첫 번째 특징 : 함수를 리턴하는 함수// 화살표 함수를 이용한 간단한 덧셈 함수 const add = (x, y) => x + y; add(5, 7); // 12 // 함수의 호출이 두 번 발생하는 화살표 함수 const adder = x => y => x + y; adder(5)(7); // 12 // 리턴 값이 함수의 형태 typeof adder(..
스코프
스코프(Scope)변수 접근 규칙에 따른 유효 범위. 가장 바깥의 스코프를 전역 스코프(Global scope)라 부르며, 그 외의 안쪽을 지역 스코프(Local scope)라 부른다.if문이나 for문, 함수(function) 처럼 중괄호{}를 기준으로 전역/지역 스코프를 구분전역 스코프에서 선언한 변수는 지역 스코프에서 사용 가능지역 스코프에서 선언한 변수는 전역 스코프에서 사용 불가지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.let name = 'nine'; // 전역변수 function showName(){ let name = 'floor'; // 지역변수 console.log(name); // 두 번째 출력 } console.log(name); // 첫 번째 출력 showName(); ..