일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- bucket4j
- oauth
- TypeORM
- compateto
- 스프링부트
- this
- redis
- 모던 자바스크립트
- invalid_grant
- Dev-Matching
- 타입스크립트
- api 요청 수 제한
- NestJS
- 딥다이브
- 자바스크립트
- api 비동기처리
- 프론트엔드 과제
- AWS
- 유효시간 설정 url
- 우아한 테크코스
- 음악 url 파일 다운로드
- 파일 url
- 프로그래머스
- 프리코스
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 검색
- concurrency limit
- Deep Dive
- 우아한테크코스
- 프론트엔드
- Today
- Total
목록프론트엔드 과제 (2)
개발 알다가도 모르겠네요
App의 state에 선택한 언어 추가 App 컴포넌트의 Suggestion 컴포넌트 생성하는 쪽에 선언해둔 onSelect 코드에 selectedLanguages를 자신의 state에 추가해보자. //App.js import { fetchLanguages } from "./api.js"; import SearchInput from "./SearchInput.js"; import Suggestion from "./Suggestion.js"; export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { this.state..
컴포넌트 구조 App 컴포넌트가 세 컴포넌트를 제어하는 형태이다. SelectedLanguages, SearchInput, Suggestion 각각의 컴포넌트는 서로 의존성을 띄지 않는 형태로 작성해야 재사용이 가능하다. App 컴포넌트 작성 // App.js export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { //TODO: 구현해야함 }; } 그 후, App 컴포넌트를 생성하는 index.js를 선언, index.html에서 불러오게 한다. // index.js import App from "./App.js"..