본문 바로가기
반응형

전체 글99

2024. 06. 05 (수) 6주차 - Daily Coding - Day03 29강- Form 제출하기- Two-way binding(현업에서 많이 쓰이는 개념) Form 제출하기에는 onSubmit(메서드) 이벤트 리스너가 있어서 form의 제출 이벤트를 핸들링하고,이 이벤트를 발생하기 위해서는 이 필요하다. event.preventDefault()해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우즉, 강제로 해당 실행을 막을 때 사용한다고 보면 된다.ex)1. a 태그 클릭 시 href 링크로 이동 => 해당 링크로 이동을 막는다2. form의 submit을 클릭 시 새로 실행이 됨 => submit을 눌러도 아무런 실행이 되지 않게 됨 const buttonSubmitHander = (event_) => {     event.preventDefaul.. 2024. 6. 5.
2024. 06. 04 (화) 6주차 - Daily Coding - Day02 27강useState- state를 업데이트 해주는 React  라이브러리에서 제공해 주는 빌트인 훅이다*훅(hook): 리액트 v16.8버전부터 나온 기능이며 함수형 컴포넌트에서만 쓸 수 있는 함수로,리액트의 lifecycle 기능을 연동(hook) 할 수 있다. useState 특징- 해당 컴포넌트 안에서만 사용할 수 있다. (컴포넌트 밖에서는 선언도 사용도 불가!)- const [state, setState] = useState(initialState)와 같이 사용.*state : state명, 원하는 문자 아무거나로 설정해도 무방*setState : 앞의 state  를 바꿔주는 메서드 set + '앞의 state 명'으로 기재한다 (카멜케이스로 기재해야함!)import React, { useSt.. 2024. 6. 4.
2024. 06. 03 (월) 6주차 - Daily Coding - Day01 24강- 리액트 상태- 리스트 렌더링- 스타일일 (인라인 css / css module / styled-component / tailwindcss)- 디버깅 (작성한 코드에서 에러, 오류 확인 / 디버깅 시간 ⬆️)- 실습 프로젝트    form으로 값을 입력받기    리스트로 보여주고    에러가 발생할 경우 모달로 띄워주는 어플리케이션 (약 1시간 강의 분량)  25강리액트 상태 Part 1.- 이벤트 핸들러- 이벤트 리스닝 이벤트란?- 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurance)하는 상태를 말한다 이벤트 핸들러란?- 이벤트가 발생되면 실행되는 코드 블럭(보통 프로그래머가 만드는 자바스크립트 함수)- 코드 블럭이 이벤트에 응답해서 실행.. 2024. 6. 3.
2024. 06. 01 (토) 5주차 - Weekly Coding - Day06 기본 자료형 - 숫자, 문자열, 블복합 자료형 - 배열, 함수, 객체 저장을 할 때 사용하는 공간스택(Stack) - 기본 자료형과 주소 등을 저장하는 메모리 공간 [잘 쌓는 공간]-> 기본 자료형은 직접 들어 간다-> 복합 자료형은 그 주소(addresss)가 들어 간다 힙(Heap)- 복합 자료형을 저장하는 메모리 공간 [대충 큰 것들을 던져서 쌓는 공간]-> 복합 자료형의 본체가 저장된다 주소- 저장된 자료의 위치 레퍼런스 한다- 스택의 주소가 힙의 자료를 가리키는 것 래퍼런스 변수- 스택에 저장된 것중에 주소가 저장된 변수 const의 제한- const의 경우 스택에 있는 값에 대해 변경을 못하는 거지, 힙에 있는건 변경할 수 있다const a = 10a = 20//error 발생const a .. 2024. 6. 2.
2024. 05. 31 (금) 5주차 - Daily Coding - Day05 21강 컴포넌트컴포넌트 나누기  (리팩토리)- 리액트는 관심사를 분리해서 담아야함.- 하나의 컴포넌트가 하나의 관심사만 담는 거을 지향 컴포넌트 합성- 컴포넌트의 개수를 늘리는 것이 아닌 컴포넌트 합성을 사용하여 재사용성을 높인다- 컴포넌트에서 props를 선언해주지 않아도 기본적으로 children은 자동 생성이 가능하다 ex) ToastMessage.js / ToastButton.js 생성해서 분리하고 Toast.js에 연결 22강 모듈 시스템 Import 안의 세부 로직1. Toast(내가 만든 js파일) 라는 변수를 선언=> 변수명은 다른 값으로 얼마든지 가능.2. /components/Toast.js에서 default export 를 찾음3. 2에서 찾은 default export를 Toast에.. 2024. 5. 31.
반응형

티스토리툴바