콛 다이어리

CRUD update를 하는데버튼을 click하면 'false'라는 값을 'true'라고변경해 주는 단계가 나왔다. li key={todo.id}>              p>                {todo.text}-{String(todo.completed)}              p>              button                onClick={() =>                  toggleCompleted(todo.id, todo.text, todo.completed)                }              >                완료              button>            li> 'false' 아니면 'true'라는 텍스트로 ..

동기(Synchronous) (단일 스레드, 싱글 스레드)한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것1. 동시에 여러 작업을 수행할 수 없음2. 흐름을 예측하기 쉬움3. 먼저 수행되고 나중에 수행되는 것들이 명확 비동기(asynchronous)응답에 관계없이 바로 다음 동작이 실행되는 방식웹 페이지가 로딩되거나, 이벤트가 30초 이상이 걸린다면,웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작에 지장을 주게 된다.또, 요즘 사용자들은 이런 웹 사이트를 원하지 않는다.(느리고 응답이 없는)그렇기 때문에자바스크립트가 웹 사이트에서 동작할 때,비동기적으로 동작할 수 있어야 한다.1. 동시에 여러 작업을 수행할 수 있음2. 흐름을 예측하기 어려움3...

CRUD만 나오면 눈물이 주르륵 나오는게자바스크립트 문제인가 싶어서자바스크립트 걷기반, 종합반까지 공부하고오랜만에 create부분을 혼자 만들어봤다. 시간이 좀 많이 걸리긴 했지만 만들었다.시간이 많이 걸렸던 이유는 import와 export방법에 문제가 있어서였다.  TodoList.jsx에서 (맞는 경로로) export를 해줬고App.jsx에서 import를 받아왔는데export TodoList 부분이 잘못됐다고 떴다.그래서 튜터님을 찾아갔는데'export'와 'TodoList' 사이에 'default'를 추가하거나'TodoList'를 '{TodoList}'로 변경해 주어야 한다고 하셨다. 맨날 이렇게도 입력해보고 저렇게도 입력해봐서되는걸 사용했는데 나름 규칙이 있었다.export를 'default'..

반복문에서 루프의 흐름을 제어할 때 사용되는 키워드이다. 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를 가져오므로 입력한 값을 출력