콛 다이어리

리액트웹 페이지를 만들 때 사용하는 자바스크립트 라이브러리다양한 화면 요소를 컴포넌트로 나눠서 만들 수 있음 DOM (Document Object Model)웹 페이지의 구조를 나타내는 트리구조트리구조를 이루는 것들은 엘리먼트(여는태그+닫는태그)(엘리먼트들이 모여서 트리구조가 됨)웹 브라우저는 이것을 읽어서 화면에 페이지를 출력   2. 하는 일리액트- 컴포넌트를 DOM이 읽고 웹 브라우저에 보여주는 역할을 한다. 가상 DOM (Virtual DOM)- 실제 DOM의 복사본- 페이지의 변화가 생기면 여기서 변화를 계산한다.- 실제 DOM과 비교해서 필요한 부분만 업데이트한다.  → 페이지가 더 빠르고 효율적으로 작동 즉,리액트 DOM은 리액트 컴포넌트를 웹 페이지에 실제로 보여주고 관리하는 역할을,가상 ..

Terminal → new Terminal (윈도우? Gitbash : powershell)→ Git Bash로 변경→  yarn create vite입력→  프로젝트명 입력→ react 선택→ javascript 선택  내 리액트 파일 인터넷창에서 보는 방법yarn dev→ 파란색 로컬주소 뜨면1. Ctrl 누른채로 클릭2. 웹 브라우저에 로컬주소 복사 붙여넣기

깃에서 Repository를 생성한다.→ git init → git remote add origin 깃 주소 → git add . →  git commit -m "" →  git push 깃에  접속→ 내 프로젝트가 맞는 레포지토리에 들어갔는지 확인 → 초록색 버튼들 다 클릭

아까 튜터님한테 갔는데내가 개발자적 사고가 부족하다고 하셨다.왜인지 모를 속상함에개발자적 사고를 하는 방법을 알아봤다. 1. 데이터 관점에서 나누는 훈련2. 데이터의 구조를 기술하고 생각하는 연습3. 적절한 알고리즘을 선택하는 연습4. 기존 데이터의 구조와 알고리즘을 연결해 새로운 데이터를 도출하는 연습 해보기→  손코딩으로 알고리즘으로 채워나가기 하지만 코테 중심으로 연습하는건 비추 코테는 그저 평가를 위한 도구 실무에서는 문제를 해결하기 위한 다양한 요소를 고려해야함 언어의 특성, 주요 기능, 디자인, 일정, 협업, 보안 및 유지보수 등 다양한 것들을 고려해야 하기 때문 결국 실전처럼 공부하는 것을 추천

import { useState } from "react"; import "./App.css"; function App() {   const style = {     display: "flex",     gap: "12px",     padding: "50px",   };   // 국가 정보 저장   const [countries, setCountries] = useState([]);   // 입력 후 필드 상태   const [countryName, setCountryName] = useState("");   const [goldMedal, setGoldMedal] = useState(0);   const [silverMedal, setSilverMedal] = useState(0);   const [..

카멜케이스(camelCase): 낙타등처럼 굽어져 있는 모습변수, 함수, 대부분에서 사용케밥케이스(kebab-case): 케밥처럼 꼬치에 끼워져 있는 모습css 클래스, 폴더, 컴포넌트가 아닌 일반 자바스크립트 파일파스칼케이스(PascalCase): 파스칼 언어에서 쓰던 표기법리액트 컴포넌트, 클래스명스네이크 케이스(snake_case): 뱀이 기어가는 것처럼 언더바 사용 자바스크립트에서는 쓰이지 않음 분류하는 이유표기법만 보고 파일의 역할을 알 수 있기 때문작명할 때줄임말 사용하지 않기길어도 확실하게 작명하기되도록 2개이상의 단어 사용하기단어의 단수와 복수 구분하기.: 현재 파일

함수 선언하는 방법 - function 함수명() {  } - const 변수 = function 함수명 () { } // 이러한 형태가 가능한 이유는 자바스크립트 안에서 참조한 변수들은 // 부모 타입이라고 할 수 있는 상위타입이// object 타입이라고 할 수 있음// 그래서 function() 역시도// 그냥 값으로 취급한다면 이런 표현도 가능 const add = function (a, b) { return a + b; } //  단어' function'를 없앰 // → 매개변수 괄호 우측에 화살표 입력 // →  return이 한 줄인 경우// 중괄호와 return의 키워드가 필요없음 const add = (a, b)=> { return a + b; } const add = (a, b)=> a..

promise 비동기 작업의 최종 완료 또는 실패 결과에 따라 콜백 함수를 연결할 수 있음 상태 pending (대기중) 초기상태 성공 또는 실패가 결정되지 않은 상태 fulfill (이행됨) 연산이 성공적으로 완료되어 프로미스가 결과값을 반환한 상태 rejected (거부됨) 연산 실패 오류 const myPromise = new Promist(function (resolve, reject) if ( true) { resolve("Seccess"); } else {   reject ("Failed"); } }); then은 성공한 경우 catch는 실패한 경우 async 함수 선언 앞에 붙여 정의 항상 Promise를 반환 async function fetchData() {    return 'Data..

모듈 관련 함수, 변수, 객체, 클래스 등을 한 파일로 그룹화 한 것 재사용할 수 있는 함수, 객체 또는 원시값export 키워드를 사용해서 모듈 생성 다른 파일에서 사용할 수 있게 함 import 키워드로 다른 파일에서 함수를 불러와 사용 가능자바스크립트의 실행 환경은 브라우저 환경과 Node 환경이 존재 Node 환경에서의 import 방식은 CommonJS 방식과 ES6 방식 존재 React 개발환경은 대부분 ES6에서 게시된 방법 사용여러 스크립트에서 동일한 함수 이름을 사용하더라도 모듈을 사용하면 각 스크립트에서 정의된 함수는 해당 모듈 내에서만 유효 사용하는 이유:    // 위에서 아래로 흐르기 때문에 모듈 시스템 import $ from 'jquery'; // 자동으로 jQuery에 대..

spread perators 객체나 배열을 복사할 때 많이 쓰임 배열이나 객체를 합칠 때 많이 쓰임 const originalUser = { name = "조희진" age = 26, };복사해야 할 경우 const updatedUser = originalUser; 복사 X참조하는 위치를 변경 O불변성과도 관련그래서 Spread Operators가 나옴originalUser에 조희진과 26이라는 value를 가지고 있음updatedUser.name = "조은진"; console.log("원본 =>" updatedUser); // name: '조은진', age: 26 console.log("원본 =>" originalUser); // name: '조은진', age: 26 UpdatedUser는 Origina..