2020.코딩일지

UI, 프론트엔드 개발에서는 state란, 상태란, "UI에 동적으로 표현될 데이터"이다. - 상태의 변경이 일어나고 변경의 영향을 받는곳을 컴포넌트로 분리해서 보는 시각을 기르자! Side Effect란, 함수(또는 컴포넌트)의 입력외에도 함수의 결과에 영향을 미치는 요인 (ex, 네트워크요청, API호출) 예를든 컴포넌트는 API요청이 없이도 이 컴포넌트는 작동되어야한다 어떤 데이터가 들어오는지 상관하지 말고, 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중하는 것. React공식문서의 "React로 사고하기" 부분을 읽어야함!!!⭐️중요중요⭐️ 대부분의 경우 form(input box, select box, radio button 등)을 이용한 상태는 ..

useEffect() 언제 실행되나? 컴포넌트 생성 후 처음 화면에 렌더링할 때, 컴포넌트에 새로운 props가 전달되며 렌더링될 때, 컴포넌트에 상태(state)가 바뀌며 렌더링 될 때, --> 매 번 새롭게 컴포넌트가 렌더링 될 때! Effect Hook 실행된다. **Hook사용시 주의점 최상위에서만 Hook호출하기. React함수 내에서 Hook을 호출하기. Effect Hook의 기본(예시)-명언제조 [명언제조]버튼을 클릭할때마다, 랜덤으로 명언이 나오며, 크롬의 타이틀 부분도 같이 변경된다. 더보기 import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const prov..

🛫StatesAirlline Client part1.에서는 파일2개만 수정하면 된다. useState의 condition 업데이트하기 자식이 부모에게 props전달하기 Main.js 더보기 import Head from 'next/head' import { useEffect, useState } from 'react' import { getFlight } from '../api/FlightDataApi' import FlightList from './component/FlightList' import LoadingIndicator from './component/LoadingIndicator' import Search from './component/Search' import Debug from './c..

import React, { useState } from "react"; export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setValue("보여줄게 완전히 달라진 값"); }; return ( 값은 {value} 입니다 ); } function ChildComponent({ qq }) { const handleClick = () => { // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까? qq(); }; return 값 변경; }

Twittler React - Lifting State Up Hooks import React, { useState } from "react"; import "./styles.css"; const currentUser = "김코딩"; function Twittler() { const [tweets, setTweets] = useState([ { uuid: 1, writer: "김코딩", date: "2020-10-10", content: "안녕 리액트" }, { uuid: 2, writer: "박해커", date: "2020-10-12", content: "좋아 코드스테이츠!" } ]); const addNewTweet = (newTweet) => { setTweets([...tweets, newTwee..

Create - POST (생성) [단어추가]버튼의 기능구현 // component디렉토리안에 📒CreateWord.js생성 export default function CreateWord() { return; } //📒App.js 상단에 선언 및 경로연결하여 컴포넌트 추가 import CreateWord from "./component/CreateWord"; //📒Header.js에 (버튼있는곳)???버튼태그가없다?????? 경로연결하기 Link to="" 단어 추가 버튼클릭하면 경로 이동하는지 확인 📒CreateWord.js에 단어등록 폼만들기 더보기 export default function CreateWord() { return ( Eng Kor Day 1 2 저장 ); } 하지만 옵션에 하드코딩된..

Update - PUT (수정) 새로고침했을때 상태유지가 된다 오호호홓 fetch(`주소`, {object}) .then((res) => { if(res.ok) { ok일때의액션 }}) object내용은 method: "메소드", headers: {"컨텐츠타입":"어플제이쓴"}, body: {내용} 더보기 📒Word.js 부분수정 function toggleDone() { // setIsDone(!isDone); fetch(`http://localhost:3001/words/${el.id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...el, isDone: !isDone, }), }..

index.js에서 가 정의되어있으면 api call을 두번씩 1️⃣ React App설치(작업폴더simpleroute가 자동생성됨) npx모듈은 기존node.js가 설치되어있어야(1)`node-v`로 확인가능, (2)`npx`로 사용가능한지 확인 `npx create-react-app ` 꺽쇠생략 해당폴더에 들어가서 `npm start` 2️⃣`npm install react-router-dom` component하단 파일의 기본양식 import dummy from "../db/data.json" export default function DayList() { return ( {/*여기에작성*/} ); } map 사용법 App.js에서 루트분기하기. •Routes사용법 import { BrowserRo..

Node.js란? 비동기 이벤트 기반! 로컬환경에서 자바스크립트를 실행할 수 있는 '자바스트립트 런타임' 브러우저 환경과는 다르게 Node.js환경은 로컬컴에서 직접 실행되므로 파일을 불러오거나(파일열기) 저장하는(파일저장하기) 등의 액션이 가능하다. (비동기상황을 연출하여 연습할 수 있다) Node.js의내장모듈목록 DNS모듈사용법 const fs = require('fs'); //파일시스템 "전체"모듈이 불러옴 const { readFile } = require("fs"); // readFile만 쏙뽑았 const dns = require('dns');//DNS모듈을 불러옴 fs(Filse System)module 파일읽기`readFile` 파일저장`writeFile` fs.readFile(path[..

[BEB 6th]000일차 코드스테이츠 블록체인 부트캠프 6기 👌Async비동기가 좋은 것은 알겠는데.. 순서를 제어하고 싶은 경우엔? ... 🫶최종결론은 `async,await` 비동기예시 더보기 // 비동기씨는 효율적이긴한데, 언제끝날지 예측이 불가하다 const printString = (string) => { setTimeout(() => { console.log(string); }, Math.floor(Math.random() * 100) + 1); }; const printAll = () => { printString("A"); printString("B"); printString("C"); }; printAll(); 콜백예시 더보기 // -----------비동기는 효율적이나, 언제끝날지 예..