콛 다이어리

아까 튜터님한테 갔는데내가 개발자적 사고가 부족하다고 하셨다.왜인지 모를 속상함에개발자적 사고를 하는 방법을 알아봤다. 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..

Template Literals 변수와 표현식을 문자열 안에 쉽게 삽입할 게 해주는 문법백틱(`) 문자열을 여러 줄로 작성하는 목적으로도 사용됨const customer = { name: "인스피릿",    }; const item = { name: 스타크래프트 리마스터 카툰팩"; price: 50, };console.log("감사합니다. " + customer.name + "님!"); // 감사합니다. 인스피릿님! console.log("감사합니다. " + customer.name + "님!" +  item.name + "을(를) +  item.price + "원에 구매하셨습니다."); // 감사합니다. 인스피릿님! 스타크래프트 리마스터 카툰팩을 50원에 구매하셨습니다. console.log(`감사합니..

Keep - 현재 만족하고 있는 부분1. 바닐라 자바스크립트로 코딩한 부분2. 팀원들과의 피드백 및 소통이 잘된 부분- 서로 예쁜말 사용한 것- 계속 같은질문 했는데도 화내지 않고 끝까지 차근차근 알려준 게 너무 고마웠다.3. 어려워도 포기하지 않고 끝까지 노력하는 모습4. 코드를 세부적으로 모듈화하여 깃허브 충돌없이 원활한 프로그래밍이 가능했던 부분Problem - 불편하게 느끼는 부분1. 진행 상황에 대한 공유가 다소 미흡했던 부분2. 코드 리뷰를 하지 못해 서로의 코드 및 구현 기능을 제대로 알지 못한 점3. 컨벤션이 잘 지켜지지 않은 점Try - Problem에 대한 해결책, 당장 실행 가능한 것1. 팀 룰을 조금 더 세부적이고 자세하게 계획한다2. 깃허브 규칙을 수정하여 코드리뷰를 작성하도록 한다

html에서 js파일 연결하는 방법  다른 js파일에서 함수 호출하는 방법:    1) 내가 사용할 js파일에 import { 함수명 } from "파일경로";    2) 가져올 함수명 앞에 export를 입력한다ex)내가 movie.js파일에서 movieInfo라는 함수를 가져오고 싶으면,main.js 파일에 가서 import { movieInfo } from "./movie.js"; 를 입력하고movie.js 파일의 movieInfo 앞에는 export를 입력하면 된다.   api 호출하는 방법 (api는 비동기 ↓)(특정 코드가 끝날때 까지 실행을 멈추지 않고다음 코드를 먼저 실행하는 것)API: (Application Propramming Interface): 소통하기 위한 접점 앱이 프로그래밍 ..