코딩/React 본 캠프 (43) 썸네일형 리스트형 [본 캠프 26일차] React 숙련 1주차 강의 redux yarn create vite 프로젝트이름 --template react redux - config > configStore.js - modules [ configStore.js ] const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; redux reducer 진짜 뭐라는거야 주요 개념 복습액션객체 : 반드시 type 이란 key 를 가져야 하는 객체. 리듀서로 보낼 "명령"이다.디스패치 : 액션객체를 Reducer 로 보내는 "전달자" 함수.Reducer : 디스패치를 통해 전달받는 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는.. [본 캠프 25일차] 코드카타 + 스탠다드반 4차 수업 + React 숙련 1주차 강의 문자열 내림차순으로 배치하기문자열 s에 나타나는 문자를 큰 것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해 주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. sreturn"Zbcdefg""gfedcbZ"function solution(s) { return s.split('').sort().reverse().join('');} 1. 문자열 자체는 정렬할 수 없기 때문에 s를 split 메서드를 사용하여 각 문자로 나누어 배열로 나눈다. ex) [ 'Z', 'b', 'c', 'd', 'e', 'f', 'g' ]2. 배열로 쪼개진 s를 내림차순으로 정렬한다. ( 이미 정렬이 되어 있어서 굳이 안 해도 된다. 프로그래머스는 다른.. [본 캠프 24일차] React 스탠다드 실습 공휴일 쉬고 오니까 그새 다 잊어버렸다. 실습 망해서 처음부터 다시 복습하기.아.. 강의 들어야 되는데 오늘은 복습만 싹 하고 내일부터 주말 다 쓰는걸로.. Input (추가)input 은 value 와 onChange 를 사용한다.input type은 text고 value 는 name(국가명), onChange 가 발생하면 setName(새로운이름)을 input(target) 창에 value(입력값)을 변경해준다. handleAddCountry 라는 함수를 만들고 event 가 일어나면 event.preventDefault 폼 제출 시 기본 동작(새로고침)을 막는다.newCountries 새로운 객체 함수(id,name,gold,silver,bronze)를 만들고 setCountries를 실행한다se.. [본 캠프 23일차] React 스탠다드 강의, 1차 과제 React 스탠다드반 2회차 강의느슨한 비교 vs 엄격한 비교const vs let 제어컴포넌트 / 비제어컴포넌트 - input 값들을 모두 제어하고 싶을 때 stateinput 으로 들어온 모든 타입은 stringearly return vs if/else단수/복수 명확하게 하자 변수명프리티어 설정리스트 렌더링 시 key 값은 unique 하게- 키를 안줬거나 혹은 키를 잘못줬거나스탠다드반 1차 과제 components 를 추가해서 state를 이용해 props를 자식에게 넘겨주는 걸 이해했다.더러운 코드를 components 에 해당 기능이름으로 jsx 파일을 만들고 잘라내기를 한다음 부모요소인 app.jsx 에서 이런식으로 불러와 그 안에 props 로 넘겨준다. ex)Counter count={co.. [본 캠프 22일차] React 입문 개인과제 마지막날 {countries.length > 0 ? ( div style={tbStyle}> table> thead> tr> th>국가명th> th>금메달th> th>은메달th> th>동메달th> th>th> tr> thead> tbody> {countries.map((data) => { return ( tr key=.. [본 캠프 21일차] React 스탠다드 + React 입문 개인과제 React 에서 제공하는 기능들을 연결 (hook) 시켜주는 것들 useState();React 는 state의 변경을 감지해서 화면을 다시 그린다.(리렌더링을 한다)state 변경 = 리렌더링 태그는 어딘가로 제출이 되어야한다.form 태그 안에있는 button 태그는 기본적으로 submit 속성을 가진다. const [newTodoTitle, setTodoTitle] = useState(""); // 1. input 값이 어딘가에 저장되야 한다. state 로 보관 input = state(value, onChange)input value={newTodoTitle} onChange={(e) => { setTodoTitle(e.target.val.. [본 캠프 20일차] React 입문 1주차 강의 마무리 + 2주차 강의 React 입문 1주차 강의1-5 ~ 1-8 Template Literals 문자열 입력 시 `` (빽틱)을 이용해서 문자열을 삽입하고 그 안에서 여러가지 동작을 하게 하는 것`` 안에 변수를 사용할 땐 ${ }상품 : ${item.name}가격 : ${item.price}안녕하세요. ${ item.name } 제품 가격은 ${ item.price } 원 입니다. Destructuring구조를 파괴하는 것(De + structuring)const item = { name: "커피", price: 4000,} const name = item.name;const price = item.price; const { name, price} = item; function greet({ name, age}) .. [본 캠프 19일차] 걷기반 5주차 실습 + React 입문 1주차 어제 팀 프로젝트 영화 검색 사이트 만들기가 끝나고, 오늘부터 React 입문 1주차 시작이다. 그 전에 저번에 진행했던 걷기반 5주차 강의를 듣고 오늘 실습을 진행했다.원래는 넘어가려고 했으나 React 입문 들어가기에 앞서 굉장히 중요한 부분이라 실습 한다고 하셨다. api fetch비동기함수 async 와 awaittry, catch 문slice 배열 메서드 활용할당과 재할당 나는 햇갈렸던 건 아래 재할당하는 부분이였다.slice 메서드를 활용하여 // comment의 body의 길이가 40 이상일 때 // 0번째부터 39번째 문자를 복사하고 맨 뒤에 "..."을 붙인 문자열을 // slicedBody라는 변수에 할당해주세요.slicedData.forEac.. 이전 1 2 3 4 5 6 다음
