1. Props 컴포넌트의 속성(property)를 의미한다. 변하지 않는 외부로부터 전달받은 값이며 웹 애플리케이션에서 해당 컴포넌트가 가진 속성들의 객체이다. 1) 특징 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. props를 함수의 전달인자처럼 전달받아서 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다. 컴포넌트가 최초로 렌더링 될때 화면에 출력하려는 데이터를 담은 초기값으로도 사용할 수 있다. 객체 형태이며, 어떠한 타입의 값도 전달할 수 있다. 읽기 전용이다. 외부로부터 전달받는 변하지 않는 값이어야 함으로 함부로 변경되지 않도록 읽기 전용(read-only) 객체이다. 만약 읽기 전용 객체가 아닐경우 props가 의도치 않게 수정되면서 상위 컴포넌트들에 영..
study/TIL
1. React SPA 1) MPA vs SPA MPA(Multiple Page Application) 페이지마다 새로운 html을 받아와 보여주는 양식이다. 누를때마다 깜빡이고 서버에서 html을 받아오는 시간이 소요된다. SPA(Single Page Application) 서버로부터 완전한 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하여 사용자와 소통하는 웹 애플리케이션이나 사이트. 사용자가 다른 페이지로 이동할 때 MPA : html로 된 페이지 전체를 불러옴으로 페이지 전체가 새로 로딩되며 깜빡이게 된다. SPA : 메뉴나 푸터 등 페이지 전환 전후에 중복되는 부분은 제외하고 변경해야 하는 부분만 새로 불러오게 된다. 웹사이트가 복잡해지고..
1. React 프론트엔드 개발을 위한 자바스크립트 오픈 소스 라이브러리. 📂 React의 특징 선언형(Declarative) 코드를 분석하지 않고도 의도를 이해할 수 있음. => 명시적인 코드 작성 한 페이지를 구현할때 html / css / js를 나눠서 작성하는 것이 아닌, JSX를 활용한 선언형 프로그래밍을 지향함 컴포넌트 기반(Component-Based) 컴포넌트(Component) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것 리액트는 기능 구현을 위해 컴포넌트를 기반으로 애플리케이션을 개발함 컴포넌트로 분리시, 각각의 컴포넌트가 독립적이고 재사용이 가능하다. => 각 기능 자체에 집중하여 개발 가능. 유지보수가 편해지고 컴포넌트간 의존성은 줄어듬. 범용성(Learn Once,..
1. fetch API 자바스크립트를 사용하면 필요할때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. ✅ 네트워크 요청이 필요할때 주문 전송하기 사용자의 정보 읽기 서버에서 최신 변경분 가져오기 fetch API를 사용하면 페이지 새로고침 없이 네트워크 요청을 보내고 새 정보를 받아올 수 있다. 1) fetch의 역할 특정 URL로부터 정보를 받아올 수 있다. 이 과정은 비동기로 이루어지며 경우에 따라 시간이 걸릴 수도 있다. 이때는 blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될때까지 로딩창을 대신 띄우기도 한다. 2) fetch 사용하기 let promise = fetch(url, [options]) url : 필수. 접근하고자 하는 url을 넣어줌 opti..
1. Node.js Node.js는 비동기 이벤트 기반 JavaScript 런타임(실행환경)이다. Node.js의 많은 API들은 비동기로 작성되어있다. => 동시 다발적인 업무 처리가 쉽기 때문에 💡 모듈 : 어떤 기능을 조립할 수 있는 형태로 만든 부분 1) Node.js 모듈 사용법 Node.js 내장 모듈 목록 위의 링크에서 사용하고싶은 메서드를 찾아 읽고 사용할 수 있다. (1) require const fs = require('fs'); // 파일 시스템 모듈 불러오기 cosnt dns = require('dns'); // DNS 모듈 불러오기 JavaScript 파일 코드 최상단에 require 구문을 이용해 모듈 파일을 불러와서 사용한다. (2) 서드 파티 모듈(3rd-party modul..
1. 비동기 1) 동기와 비동기 (1) 동기(synchronous) 특정 코드의 실행이 완료될때까지 기다린 후에 다음 코드를 수행한다. 즉 여러가지를 한꺼번에 실행할 수 없고 한번에 하나씩만 실행한다. (2) 비동기(asynchronous) 특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드들을 수행한다. 즉 여러가지 코드를 한꺼번에 실행할 수 있다. 동기적인 코드보다 효율적이다. 2) 타이머 관련 API 이 API들은 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다. (1) setTimeout() / clearTimeout() const timerId = setTimeout(()=>{ console.log('1초 뒤에 실행') }, 1000) clearTimeout(tim..
프로토타입 체인 상속 객체 지향 프로그래밍의 특성 중 하나. 부모 클래스가 자식 클래스에게 속성과 메서드를 물려주는 과정을 말한다. 그리고 이 상속 과정을 JavaScript에서 구현하기 위해, 프로토타입 체인을 사용한다. 프로토타입 체인 객체 생성자의 prototype 속성에 정의된 속성과 메서드들이 하위 객체 생성자의 prototype으로 상속되는 것. 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있게 해준다. 예를 들어 클래스 A로 생성한 인스턴스 A’에서 특정 메서드를 실행할 경우, 브라우저는 우선 A’에 해당 메서드를 갖고 있는지 체크한다. 없다면 A’의 프로토타입 객체(A의 프로토타입)에 메서드가 있는지 체크하고, 또 없다면 상위의 프로토타입 객체에 해당 메서드를 갖고 있는지 체..
1. 클래스와 인스턴스 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진을 만들고 그것을 바탕으로 한 객체를 만드는 프로그래밍 패턴 1) 용어 정리 (1) 클래스 클래스(class)는 객체 지향 프로그래밍에서 말하는 청사진이라고 할 수 있다. 즉, 클래스는 객체를 생성하기 위한 템플릿이다. 클래스는 일반적인 함수와 구분하기 위해 보통 대문자로 시작하고, 일반명사 형태로 만든다. return 값을 만들지 않는다. (2) 인스턴스 인스턴스 객체(instance object)는 클래스를 바탕으로 한 객체이다. 줄여서 인스턴스(isntance)라고 한다. 예를 들자면, 클래스는 자동차의 거푸집과 같은 것이라고 할 수 있다. 그렇다면 인스턴스는 클래스라는 틀에서 나온 자동차일것이다. 거푸집에 네개의 문과 네개의..
1. 고차 함수 1) 일급 객체(first-class object) 컴퓨터 프로그래밍 언어에서 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할때 그것을 일급 객체라고 한다. (위키피디아) 📝 JavaScript의 대표적인 일급 객체, 함수의 특징 ✅ 함수는 변수에 할당(assignment)할 수 있다. const addNum = function(num1, num2) { return num1 + num2; } let result = addNum(5, 10); console.log(result); // 15 이러한 특성을 이용해 함수를 데이터(string,..
1. 유효성 검사 1) 구현해야 하는 내용 이름이 빈 값인 경우 경고 메시지 출력. 채워졌을 경우 성공 표시 아이디가 5글자 미만인 경우 경고 메시지 출력. 조건이 일치할 경우 성공 표시 비밀번호가 빈 값인 경우 경고 메시지 출력. 채워졌을 경우 성공 표시 비밀번호 확인 입력시 비밀번호와 비밀번호 확인의 내용이 일치하지 않는 경우 경고 메시지 출력. 일치할 경우 성공 표시 모든 조건이 일치하는 경우에만 회원가입 버튼 활성화 회원가입 버튼 클릭시 가입 완료 메시지 띄우기 2) 구현한 코드 📚 HTML Sign Up 이름 이름은 비워둘 수 없습니다 아이디 아이디는 다섯 글자 이상이어야 합니다 비밀번호 비밀번호는 비워둘 수 없습니다 비밀번호 확인 비밀번호가 일치하지 않습니다 회원가입 이름님, 환영합니다! 회원..
