새싹 프론트엔드 34

유데미 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의와 inpa님 블로그를 참고하여 작성..! inpa님 블로그 | 링크 1. 데코레이터 데코레이터는 코드 조각을 장식해주는 역할을 하며 타입스크립트에서 그 기능을 함수로 구현할 수 있다. 예를들어 메소드 / 클래스 / 프로퍼티 / 파라미터 위에 @함수 를 장식해줌으로써, 코드가 실행(런타임)이 되면 데코레이터 함수가 실행되어, 장식한 멤버를 보다 파워풀하게 꾸며주는 것으로 이해하면 된다. TypeScript 공식 문서 설명 「TypeScript 및 ES6에 클래스가 도입됨에 따라, 클래스 및 클래스 멤버에 어노테이션을 달거나 수정하기 위해 추가 기능이 필요한 특정 시나리오가 있습니다. 데코레이터는 ..

1. 인터섹션 타입 두가지의 타입을 결합하여 다른 타입을 만들 수 있다. type 사용 type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; const e1: ElevatedEmployee = { name: "Max", privileges: ["create-server"], startDate: new Date(), }; interface 사용 interface Admin { name: string; privileges: string[]; }; interface Employee { name: str..

제네릭 타입 TypeScript는 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 한다. 그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있다. 만약 printArray 함수에 경우에 따라 숫자 타입, 문자열 타입, 불리언 타입... 각기 다른 종류의 배열이 전달된다고 할 때, 이 타입들을 전부 처리하기 위해서는 함수 선언부에 들어올 수 있는 타입들을 모두 명시해야 한다. 이런 경우, 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가능하다. // 제네릭 타입을 쓰지 않으면 모든 경우의 수를 다 선언해야 한다 function printArray(arr: number[] | string[] | boolea..

1. 인터페이스 타입이 객체인 객체를 생성할 때, 코드마다 중복되는 객체 타입을 하나로 만들기 위해 사용한다. 코드의 재사용성을 높일 수 있고 작성 중인 코드에 대한 더 많은 정보를 타입 스크립트에 제공하기 위해 사용된다. 클래스나 객체가 특정 구조를 갖추도록 하고, 객체의 형태에 대한 개념을 명확하게 설명하는 강력한 기능. ※ 인터페이스는 자바스크립트 코드로 컴파일 되지 않음 규칙 첫 글자를 대문자로 표기 인터페이스 이름 앞에 대문자(I)를 붙이지 않음 (다른 알파벳 대문자는 가능. 절대 붙이지 말라는 건 아니지만...그래도 웬만하면 다른 대문자로 이름을 만들자) 객체에서만 사용할 수 있다! interface 인터페이스이름 { 속성이름: 속성타입 함수이름(){} string; getInfo(string..

1. TypeScript type이 있는 JavaScript. 변수를 만들 때 별도의 타입을 선언하는 것 개발자가 작성한 프로그램과 사용자 입력 간의 변수 타입이 다르게 되면 오류가 나기 때문에 타입이 필요하다. (내부적으로 의도하지 않은 오류 발생) ex.) function person(name, age){} 에서 age로 숫자 값이 저장되길 원하는데, 사용자 입력이 ("길동", "20") 이면 age 자리에 문자가 들어가는 것이기 때문에 오류가 발생 따라서 TypeScript를 활용하여 function person(name:string, age:number){} 로 타입을 선언해줄 수 있다. 변수 값에 데이터 타입 지정 가능 예측 가능한 코드 작성 가능 디버깅 편리 객체지향 프로그래밍 가능 클래스 기..

Firebase https://firebase.google.com 구글의 모바일 및 웹 어플리케이션 개발 플랫폼 백엔드 서버 기능을 클라우드 서비스 형태로 제공 인증(Authentication), 데이터베이스(Firestore), 분석(Analytics) 등의 기능 제공 Cloud Firestore Firebase가 지원하는 데이터베이스 종류. 요즘은 Cloud Firestore를 쓴다. Realtime Database Cloud Firestore Firebase에서 지원하는 NoSQL 데이터베이스 서비스 사용자와 기기간 데이터의 실시간 동기화 가능 Collection - Document - Field 프로젝트 연동 프로젝트 개요의 아이콘(앱을 추가하여 시작하기)로 앱을 등록한다. 이후 터미널에 Fire..

1. 동기 vs 비동기 동기 방식(synchronous) 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 설계가 간단하고 직관적 요청에 대한 응답을 받을 때까지 대기해야 하는 단점 const Sync = () => { console.log("1. 안녕하세요"); console.log("2. 반가워요"); console.log("3. 안녕히계세요"); return ; }; 비동기 방식(Asynchronous) 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식 동기 방식보다 복잡함 요청에 대한 응답을 받기까지의 대기 시간에 다른 작업을 할 수 있음 const Async = () => { console.log("1. 안녕하세요"); setTimeout(() => console...

싱글 페이지 어플리케이션 예전에는 유저가 서버에 요청을 하면 항상 요청에 맞는 HTML 파일로 응답을 했었는데, 최근에는 싱글 페이지 어플리케이션으로 하나의 HTML만 두고, 나머지 파일은 JS 파일로 만들어 두는 것. 페이지 전환 속도가 빠르고 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업이 필요 없다. 하지만 어플리케이션의 규모가 커지면 자바스크립트 파일 또한 커진다.(모든 파일을 자바스크립트 파일로 관리하기 때문) 라우팅 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. 페이지 이동. https://reactrouter.com/en/main 1. React Router $ npm install react-router-dom // 버전 정해서 설치 $ npm inst..

Context 어플리케이션에서 전반적으로 사용할 값을 관리한다. (ex. 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정) 주의사항 Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음 Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌트들이 리렌더링 됨 일반적으로 최상위 컴포넌트인 App의 state에 데이터를 넣어 관리하는데, 하위 컴포넌트가 state 값이 필요하다면 Props Drilling이 일어나게 된다. 따라서 Context를 사용해 전역으로 상태 관리를 하는 것. Props Drilling function App() { return ; } const GrandParent = ({ value }..

Hooks란? 리액트 버전 16.8에 새로 도입된 기능 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 useState useRef useEffect useReducer useMemo useCallback useRef 1. useState() 가장 기본적인 Hook로 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 준다. const [state, setState] = useState(초기값); state는 변수, 값이라고 생각하면 되고 setState는 state의 값을 바꿔주는 상태 변환 함수이다. uploadInput() 함수 수정 state의 기존 값을 유지하면서 새로운 값을 추가하려면 setState()의 콜백 함수에 prevState 값을 전달해서 유지해야 한다. setState((..

01. 컴포넌트 스타일링 리액트 컴포넌트 스타일링 일반 css 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass 자주 사용되는 CSS 전처리기(pre-processor) 중 하나 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있음 CSS Module CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트 생성 가능 cf.) 클래스 이름 작성의 중요성 Button1 컴포넌트에서 button 하나의 className을 button으로 지정하고 background를 blue로 준다. Button2 컴..

01. 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성 onClick, onKeyUp 등 이벤트의 값으로 함수 형태를 전달 실제 자바스크립트 코드를 전달하지 않음 DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form 등에만 이벤트 설정 가능하며 직접 만든 컴포넌트에는 이벤트 설정 불가능 자주 쓰이는 이벤트 onClick, onSubmit, onMouseMove, onMouseOver, onMouseOut, onKeyDown, onKeyPress cf.) preventDefault | 어떤 태그의 기본 동작을 막음 function App() { function linkClick(e) { e.preventDefault(); consol..