콛 다이어리

타입스크립트(TypeScript)자바스크립트에 정적 타입을 추가한 프로그래밍 언어자바스크립트로 작성된 코드를 확장하여 타입 검사와 코드 안정성을 높여줌런타임 오류를 줄이고 더 안정적인 코드를 작성할 수 있음(컴파일 시점에 타입 오류를 잡아낼 수 있기 때문)컴파일 시점: 우리가 vsc에서 코드를 작성하는 시점런타임 시점: 프로젝트가 동작하는 시점특징1. 정적 타입: 변수, 함수의 매개변수 및 반환 값에 타입을 지정하여 컴파일 시점에 타입 오류를 검사할 수 있음2. 타입 추론: 타입을 자동으로 추론3. jsx와 호환: 그대로 사용하면서 타입 검사를 추가할 수 있음장점1. 타입 안정성: 컴파일 시점에서 오류를 방지할 수 있음2. 자동 완성: 코드 작성이 빠르고 오류가 줄어듬3. 유지 보수성 향상: 오류를 미리..

target: 이벤트가 일어난 대상value: 입력한 데이터e.target: 이벤트 객체의 target만 가져와서 출력*e.target.value: input의 value를 가져오므로 입력한 값을 출력

promise랑 await의 추가 내용 async function Test( ) {// 데이터를 받아오기 전까지 기다린다.// fetch 함수는 promise// (pending, successed, rejected)// 를 return 하니까// 그 결과를 기다리지 않으면// pending이 무조건// console.log( )로 찍힐테니// pending이 안 찍히도록// fulfilled가 될 때까지// 기다리는게 await의 fetch // 즉, fetch 함수는 promise를 return 하는데,// 결과를 기다리지 않으면 pending이 // console.log( )에 찍힌다.// 그러지 않기 위해서// await를 사용하는 것이다.  try {        const result = aw..

메서드: 호출의 주체가 있는 것함수: 호출의 주체가 없는 것 slice인덱스 자르기배열.slice( ) some배열.some(콜백함수())논리 합 연산자조건을 만족하는지 확인하는 함수if문 사용이 필수는 아님 비동기:동기적으로 작동하지 않는 것외부적으로 어떤 데이터를 가져오거나입력해야 할 때 사용 (firebase)비동기 관련 처리= promise 객체를 이용하여 코딩핸들링 할 수 있는 두가지1. then, catch2. async, awaitfetch("url 주소"): 외부 데이터를 요청하는 함수 promisepromise의 세가지 상태1. 요청중 (pending)2. 성공(fulfilled)3. 실패(rejected) async, await함수명 앞에 async를 입력해야 함 우리가 원하는 건 pe..

배열API:배열이 가지고 있는 메서드 truthy:true인 것 같은 값참인 것 같은 값 falsy:false인 것 같은 값거짓인 것 같은 값 find조건에 맞는 첫번째 요소만 반환배열.find(콜백함수()) sort( )배열.sort()배열.sort((a,b) => ( a - b )는 오름차순배열.sort((a, b) => (b - a)는 내림차순(1) 원본배열 영향 있음(2) sort도 콜백 함수를 가짐(3) 이 콜백 함수는 인자가 2개(4) 이 콜백 함수의 return에는 숫자가 필요(5) 숫자로 이뤄진 배열은 b - a 가능(6) 문자로 이뤄진 배열은 localCompare 필요

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

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

배열 API요소는 어떤 형태든 상관 없음[ ].로 접근배열 변수. 로 접근할 수 있음 요소 추가pop( ) 마지막 요소 리턴push( ) forEach 배열.forEach(콜백 함수()) for문과 비슷콜백 함수의 매개변수에는배열의 각 요소가 차례로 할당됨매개변수의 이름은 뭐든 상관 없음(1) forEach는 배열의 메서드(2) 이 배열 메서드는 매개변수를 가짐(3) 매개변수는 (콜백)함수(4) 콜백함수는 매개변수를 가짐(5) 매개변수에는 호출의 주체가 됨배열의 각 요소가 차례로 할당됨아웃풋이 없음배열을 내보냄 map배열.map(콜백함수())값을 변경해서 반환return값이 있음 filter배열.filter(콜백함수())return문에 filter의 조건을 넣음return true;는 모두 true로 반..

반복문 (for문)for (let 변수 = 시작조건; 종료조건; 증감식;) {// 로직} 조건문 (if문)1. if - else문if (조건) {// 참일 경우 로직} else {// 거짓일 경우 로직}2. if - else if문if (조건) {// 참일 경우 로직} else if (조건){// 참일 경우 로직}3. if - else if- else문if (조건) {// 참일 경우 로직} else if (조건){// 참일 경우 로직}else {// 거짓일 경우 로직}

변수 (= 변하는 수)변수는 값을 넣고 재활용하는 용도로 쓰인다.Hello World를 10번째, 100번째 줄에 치거나,1,000개, 10,000개를 쓰거나,Hello를 My로 변경해야 한다면엄청 많이 변경을 해야한다.하지만, 변수를 사용한다면 그럴 필요가 없다. const word = "Hello World";console.log(word); 변수명: word변수 값: Hello World변수 선언: const word변수 참조: console.log(word)메모리에 저장하는 과정변수 할당: const word = "Hello World"; 데이터 타입숫자 ( = 정수, 실수)문자열 문자열의 길이변수.length; 문자열 대체변수.replace("변경 전 문자열", "변경 후 문자열"); 문자열 반..