일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 웹개발
- 논리연산자
- OOP
- 상속
- 자바스크립트
- 자바스트립트
- REACT
- Zustand
- 투두앱만들기
- 패스트캠퍼스
- Hooks
- frontend
- 추상화
- 클래스
- CSS
- JavaScript
- 노마드코더
- 타입스크립트
- typeScript
- 프론트엔드
- 리액트
- 객체지향프로그래밍
- js
- github
- 불변성
- 캡슐화
- 부트캠프
- webdevelopment
- Fetch
- Props
- Today
- Total
목록분류 전체보기 (78)
connecting dots
--> 함수형 컴포넌트와 클래스 컴포넌트는 App.js에서 불러오는 것은 같지만 모양이 다름 !클래스는 복잡하지만 다양한 기능을 제공함. 대표적인 기능이 상태 ! (함수형 컴포넌트는 지원하지 않음) 클래스 컴포넌트함수형 컴포넌트상태지원미지원요즘 거의 안 씀리액트가 함수형 컴포넌트에서도상태를 사용할 수 있는 방법을 만들어줌 - 상태(state)많은 데이터 중에 값이 변하는 것, 앱이 실행하고 나서 상황, 시간의 흐름 등에 따라 값이 변하는 것 --> onIncrement 잘 호출되고 숫자도 올라가는데 화면의 숫자는 여전히 1 ?--> 함수를 호출하는게 없고 마크업 처럼 쓴 것도 호출이 아님. 리액트에게 넘겨주는 것임 버튼 클릭 시 정상적으로 숫자 증가 --> 최근에 들어서는 클래스 컴포넌..
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번은 자리만 이..
type FooterProps = { message: string color?: 'blue' | 'red' | 'green' | 'yellow" // 또는}type HeaderProps = { title: string size?: 'small' | 'medium' | 'large' color?:'blue' | 'red' | 'green' | 'yellow"}function Header(props: HeaderProps) { return ( {props.title} )}function App() { return ( // 오류 발생, color에는 black이 들어갈 수 없음 ! )}vite: 간단해서 많이 사용↓webp..
부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달할 때 !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이 만들어져서 브라우저로 전송되는 ..