본문 바로가기

분류 전체보기

 (265)
유데미 -Git으로 만드는 전설의 레시피 (GitHub원격저장소에 올리기) 2-3.commit: Git 초기화와 로컬저장소, 최초의 커밋 만들기 2-4.push: GitHub 원격 저장소에 내가 만든 레시피 업로드하기 2-5.pull: 원격 저장소에 있는 변경사항을 내 로컬 저장소와 동기화 시키기 Git 업로드 1. git init Git을 사용하기 위해서는 내가 작업하는 디렉터리에서 git을 사용하겠다라는 명령을 내려줘야함 이걸 쓰면 git 로컬 저장소가 생김 README.md 파일 생성 (or 새 레퍼지토리 생성할때 선택) 2.파일을 추가 git add 파일명 3. 변경사항에 대한 설명을 위한 메시지를 작성 git commit -m "기록메시지" git log : 진행한 commit log 를 확인 git log --oneline : git log보다 더 심플하게 커밋 기록..
[코드숨] 리액트 13기 - 2주차 주간 회고 CodeSoom 2022.10.17 - 2022.10.23 Facts (사실, 객관) Feelings(느낌, 주관) Findings(배운 점) Facts (사실, 객관) ㆍ리액트 이해하기 (ReactDOM.render, Components & Props, Hook- useState, 선언형 프로그래밍, 관심사의 분리) ㆍ과제 1 수행 : 카운터 앱을 만들고 각 컴포넌트 마다 파일을 분류한다. ㆍ과제 2 수행 : Todo 앱 만들기 - 입력하여 등록, Todo List 삭제, 없을시 해당 문구 띄우기 Feelings(느낌, 주관) 더 많은 공부의 필요성 제출한 과제의 코드 리뷰를 받으면서 몰랐던 정보를 많이 알게 되었다. import React from 'react'; 를 사용하는 것이 당연한 줄 알았는데..
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기(과제풀이) 1. 에러 Objects are not valid as a React child.... object 를 못보여준다. {JSON.stringify(..)} : JSON형태로 확인 가능 =>객체이기때문에 .title 이런식으로 메소드를 통해 이용해야했음 export default function List({ tasks }) { return ( {JSON.stringify(tasks)} ); } 2. 그냥 배열이면 이렇게 쓰지만 state 경우 이렇게도 작성이 가능하다 3. Destructuring 디스트럭쳐링 : 기존에 구조를 가지고 있던 객체(Array or Object)를 파괴(Destructure)하여 별도의 변수에 값을 할당하는 것 => 배열이나 객체 안의 어떤 값을 추출할 때 쉽게 받아오는 방법 >..
[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기(과제풀이) import Counter from 'Counter' //노드 JS같은 경우 공용으로 된건 이렇게 쓰지만 (O)import Counter from './Counter'; //우리가 만든건 이렇게 ./을 앞에 붙여줌 1. 오류: 이렇게 했을 때 Module not found: Error: Can't resolve './Counter' in 'C:\Users\user\Desktop\codeSoom\demo\src' ....Counter.wasm doesn't exist 오류가 난다면 해결: webpack.config.js 에서 아래 resolve를 추가해줘야함, 다시 npm start resolve: { extensions: ['.js', '.jsx'], }, 2. 아래 코드에서 맨 밑에 export 한꺼번..
[코드숨] 리액트 13기 -2강/ 과제2 - 간단한 Todo App 만들기 ▼ index.jsx 중간 제출 (파일나누기전 전체) import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function TodoForm({ onSubmit }) { const [todoText, setTodoText] = useState(''); const handleChange = (e) => setTodoText(e.target.value); const handleSubmit = (e) => { e.preventDefault(); if (!todoText) { // eslint-disable-next-line no-alert //밑에 alert에 대해 ESLint 비활성화하려면 위에꺼 작성 alert('할 일을 입력해..
[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기 useState에 객체로 쓰고 싶지 않았음 const [state, setState] = useState({ count: 0, }); const { count } = state; //{count}는 객체에서 count를 의미 아래와 같이 코드 작성 const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } function handleClickNumber(value) { setCount(count + value); } ex let object ={ a : "aaaa" }; // const a = object.a; 기존 javascript 문법 const {a} = object; https://sang12.co...
[코드숨] 리액트 13기 -2강/ 2. React(useState, 관심사의 분리) 리액트 훅 Hook: 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.) import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} ..
[코드숨] 리액트 13기 -2강/ 1. React index.js const element = ( Hello,world ); 작성후 npm start 할 경우 error가 남 (jsx가 아니기 때문) 해결 1. 파일이름을 .jsx 로 변경 2.webpack.config.js 파일에서 아래 추가 const path = require('path'); //1 추가 module.exports = { entry: path.resolve(__dirname, 'src/index.jsx'), //2 추가 path: 표준라이브러리 __dirname, :현재 디렉토리 경로, 'src/index.jsx' 결합 const path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/index.j..

티스토리툴바