콛 다이어리

반복문에서 루프의 흐름을 제어할 때 사용되는 키워드이다. breakfor, while, do...while과 같은 반복문에서 사용할 수 있음즉시 반복을 중단하고 루프를 완전히 빠져나감특정 조건이 만족되면 루프를 종료나머지 코드를 건너뛰고 다음 코드로 넘어감 continue 반복문의 현재 반복만 건너뛰고, 다음 반복을 계속 진행해당 루프의 나머지 코드는 건너뛰고, 바로 다음 반복으로 넘어감   즉, break문은 반복문을 즉시 종료하고 반복문 바깥의 코드로 이동하고continue문은: 현재 반복을 중단하고, 다음 반복을 계속 진행합니다

함수:특별한 목적의 작업 수행을 위해 설계된 코드의 집합구현된 기능은 여러 곳에서 호출되어 사용이 가능함 메서드:객체의 기능 구현을 위한 클래스 내부에서 구현되는 함수(메서드를) 구현하면 객체의 기능을 구현하는 것*객체: Key / Value Pair를 저장할 수 있는 구조멤버 함수 차이점프로그래밍 언어마다 함수로 부르는 언어도 있고메서드라고 부르는 언어도 있음1. 함수        1) 단독 모듈         2) 그냥 호출해서 사용할 수 있음2. 메서드: 함수의 일종이긴 하지만         1) 클래스에 속해있고         2) 클래스의 멤버 변수들을 이용해서 구현된 것

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

자바스크립트 Date는 2개의 시간대를 고려해서 만들어졌다.Local Time: 현재 실행되고 있는 환경을 기반으로 한 시간대UTC (Coordinated Universal Time): GMT를 기반으로 하는협정 세계시 시간대 1. 기본 생성자 함수로 만들기new Date( ); 2. 인자로 날짜 만들기최대 7개의 인자를 전달할 수 있음(년, 월, 일, 시간, 분, 초, 밀리초) new Date(2024, 09, 27); 3. 날짜 및 시간 설정setFullYear: 연도 설정setMonth:(0 ~ 11): 월 설정 (0부터 시작)setDate: (0 ~ 31): 날짜 설정 (0은 전 달의 마지막 날)setHours: (0 ~ 23): 시간 설정setMinutes: (0 ~ 59): 분 설정setSec..

리액트 내 이벤트 핸들러는모든 브라우저에서의 동일한 이벤트 처리를 위한합성 이벤트의 객체를 전달받음 합성 이벤트 (Synthetic Event):모든 브라우저에서 동일한 이벤트 처리를 위한 Wrapper 객체* Wrapper : 기본기능을 감싸는 새로운 기능을 만드는 것 리액트에서 보통 이벤트를 핸들링 할 때const onClick = (e) => {      console.log(e);이렇게 전달받음 자주 쓰이는 이벤트 타입1. Form 이벤트    1) onclick (click 이벤트)    엘리먼트의 마우스나 키보드가 클릭 된 경우    2) onChange (change이벤트)    엘리먼트의 내용이 변경된 경우    3) onSubmit (submit 이벤트)    Form의 데이터가 전송될 ..

자주 나오기도 하고, 나올 때마다 찾아보기도 애매해서오늘은 각잡고 공부를 했다. 용어가 무슨 뜻인지 풀어놓은 것은 이해가 잘 안갔다. 제어 컴포넌트:사용자의 입력을 기반으로 state를 관리하고 update 하는,이런 방식으로 React에 의해 값이 제어되는 컴포넌트즉, 입력한 데이터 상태와 저장된 데이터 상태가 같은 것사용자가 입력한 값과 저장되는 값이 실시간으로 동기화 되는 것 function MyApp () {      const [name, setName] = useState(null);            const changeName = (e) => {             setName(e.current.value);        }       return (            )} 문제점..

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

템플릿 리터럴변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해줌백틱(`) 사용문자열을 여러 줄로 작성하는 목적으로도 사용됨 destructing객체에서는 키가 중요함배열에서는 인덱스가 중요함배열에서는 위치만 맞으면 구조분해할당이 됨파일을 기능별로 분류하는 것과변수명을 나눠서 분류하는 것은 그저 선호도 차이임const customer = {   name: "은진", };const item = {  name: "아메리카노",  price: 4000,};const name = item.name;const price = item.price;// 얘네가 몇 백개, 몇 천개 있으면// 일일이 써줘야 하는데// 이 일을 한 번에 해줄 수 있다.// 구조를 객체 형태로 가지고 있는데// name과 price를 각각..

노트북에 로컬 계정 로그인하고,사용자 폴더 이름 바꾼다고 이것저것 만졌더니노트북이 이상해졌다..기존에 쓰던 데이터가 폭삭 날아가버려서VSCode를 다시 설치하게 되는 일이 발생했다. yarn을 설치했는데 컴퓨터가 yarn의 위치를읽지 못한다는 에러가 자꾸 떴고,해결 방법으로는환경변수에서 경로를 변경해줘야 하는 것이었다. 전에 JAVA배울 때 eclipse 설치하면서환경변수 잘못 만지면 큰일 난다고 들어서불안했지만 다행이 그런 일 없이 잘 연결됐다. 내가 환경변수를 설정했어야 했던 이유는노트북이 내가 설치했던 yarn의 경로를 몰라서그랬던 것이다. 그래서 도대체 환경 변수가 뭔가 하고 알아봤다.  환경 변수:운영체제가 참조하는 변수 윈도우는 파일을 현재 디렉토리에서 찾고,현재 디렉토리에서 아무 파일을 열고..

push( )배열.push( )배열에 요소 추가 pop( )배열.pop( )배열의 마지막 요소 출력 map( )배열.map(콜백함수( ))원본 배열에서 각 요소를 가공한새로운 배열을 리턴하는 함수1) 배열 내의 모든 요소 각각에 대해2) 주어진 함수를 호출한 결과를 모아3) 새로운 배열을 반환 filter( )배열.filter(콜백함수( ))변수를 선언해서 사용해야 함 reducereduce(콜백함수(누적된 값, 일반 값))배열의 각 요소에 대한 함수를 실행하고결과를 누적해서 반환함숫자던, 배열이던, 객체던하나의 값으로 줄여 리턴하는 함수// 숫자들의 합을 구하기// 가장 큰 숫자 찾기(누적기)numbers.reduce(function (누적값, 일반값) {  console.log("------");  ..