connecting dots

타입스크립트란 ?자바스크립트에 타입을 부여한 언어자바스크립트의 확장된 언어(super set) = 자바스크립트의 기능을 가지고 있고 + 그 외의 기능도 가짐자바스크립트와는 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 함 --> 이 변환 과정을 컴파일(compile)이라고 함 Typescript: 정적타임(static) 또는 컴파일 타임. 코드 작성 단계에서 오류 확인↓Typescript Compiler↓Javascript: 동적타임(dynamic). 런타임에서 동작할 때 타입 오류 확인 (비교적 안정성이 높음) Type System개발 환경에서 에러를 잡는 걸 도와줌type annotations를 사용해서 코드를 분석할 수 있음오직 개발환경에서만 활성화됨타입 스크립트와 성능 향상과는 관계가 없음..

React Hooks란 ?ReactConf에서 2018년 발표된, class 없이 state를 사용할 수 있는 새로운 기능 React Hooks가 필요한 이유 ?항상 기술은 그 전의 불편함이나 문제점을 해결하기 위해서 더욱 발전함react hooks도 주로 class component로 사용되어온 react에서 느껴왔던 불편함이나 문제점을 해결하기 위해 개발됨--> 원래 리액트는 주로 class component를 사용하고, react hooks는 functional component를 사용함React ComponentClass ComponentFunctional Component더 많은 기능 제공더 많은 코드 양더 복잡한 코드더딘 성능더 적은 기능 제공짧은 코드 양더 심플한 코드더 빠른 성능 함수형 컴..

JSX Key 속성 이해하기리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 함키는 리액트에서 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됨.요소에 안정적인 id를 부여하려면 배열 내부의 요소에 key를 제공해야 함 리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 반영--> 리스트에서 나열할 때 바뀐 부분을 어떻게 찾을까 ? key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있음 ! 3번을 1,2번 뒤에 추가할 때는 react가 3번만 추가하면 된다고 쉽게알 수 있음3번을 1,2번 앞에 추가할 때는react가 모든 요소가 새롭게 된 것이라고 인식하고 모든 자식 엘리먼트를 새롭게 그려버림이 경우 key를 추가햐서 1,2번을 새롭게 그리는 것이 아닌3번을 추가 후 1,2번은 자리만 이..

부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달할 때 !Props- Properties의 줄임말- Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법- Props는 읽기 전용(immutable)으로 자녀 컴포넌트에서는 데이터를 변경할 수 없음 (읽기만 할 수 있음)(변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 함)     App.jsinitialExpenses = [ { id: 1, charge: "렌트비", amount: "1600" }, { id: 2, charge: "교통비", amount: "400" }, { id: 3, charge: "식비", amount: "1200" }, ];{/* expenseList로 데이터를 내려줌 *..

이름이 수정되면 안되는 파일들1. public/index.html --> 페이지 템플릿 역할2. src/index.js --> 자바스크립트의 시작점 역할      => public 내부의 파일만public/index.html에서 사용할 수 있음        => 여기에 js 파일과 css 파일들을 넣으면 됨webpack은 여기에 있는 파일만 봄그래서 이 폴더 이외에 넣는 것은 webpack에 의해서처리되지 않음 ! => 대부분의 리액트 소스코드를 여기다가 작성하게 됨      =>  package.json해당 프로젝트에 대한 정보들이 들어있음프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있음.앱 시작시 사용할 스크립트, 앱 빌드할 때나 테스트할 때 사용할 스크립트 등이 명시되어..

Typescript는 왜 필요할까 ?타입스크립트는 자바스크립트의 슈퍼셋 != 하위 호환성을 지원한다타입스크립트는 자바스크립트의 모든 기능을 지원하고 + 추가적인 기능을 제공함 Typescript - 유형 정의자바스크립트가 제공하지 못하는 것, 앞으로도 제공하지 못할 것 = 명시적인 유형 설명(데이터 설명)이 부분을 타입스크립트가 제공하면서 공생의 전략을 가짐 실습// javascriptlet age = 10; // 10은 나이인가보다, 데이터의 의미를 유추할 수 있음, 보고 숫자임을 파악let x = 10; // 어떤 의미인지 알 수 없음let weight = 80; // 실제로 들어가 있는 값이 어떤 유형인지는 안 알려줌// typescripttype Centimeter = number;type Rai..

구성요소 ?필요한 여러가지 구성요소--> HTML, CSS, Javascript 무엇을 만드느냐에 따라 필수 구성요소가 달라질 수 있음html = 브라우저html + css = 페이지, 문서(정적인 정보만 전달)html + css + Javascript = 앱(상태를 가지고 있고 사용자와 interactive하게 소통하는 기능 탑재) 실행 관점의 구성요소웹앱을 실행시키는 역할 = 브라우저--> 브라우저는 실행시간(런타임)을 제공하는 환경 !Node.js 등장 이후 브라우저 밖에서 js를 실행시킬 수 있는 환경이 다수 만들어짐 CSR & SSR브라우저에 최초 전송된 html에는 거의 내용이 없고js가 실행하면서 필요한 ui를 그때그때 생성해내는 방식vs 웹서버에서 html이 만들어져서 브라우저로 전송되는 ..

리액트(React)란 ?사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용Angular, Vue와의 차이점 --> 둘은 프레임워크, 리액트는 라이브러리 cf. 프레임워크(framework) vs 라이브러리(library)프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있음)라이브러리: 어떠한 특정한 기능을 모듈화해놓은 것=> 프레임워크는 라이브러리를 포함하고 소스코드를 호출함=> 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출함 리액트가 라이브러리인 이유 ?리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문 ! 화면을 바꾸는 라우팅은 react-router-dom ..