콛 다이어리

미들웨어 (Middleware):요청이 처리되기 전에 실행되는 서버 측 함수요청을 가로채어 인증, 리다이렉션 또는사용자에게 맞는 페이지를 제공하는 등의 작업 수행역할1. 사용자 인증2. 권한 검증3. 페이지 리다이렉션   1) 권한이 없는 사용자를 로그인 페이지로 리다이렉션   2) 다른 적절한 페이지로 안내4. 요청 정보 변경   1) 요청 객체의 내용을 변경하거나 추가 작업 수행

props 너무 어렵다..친하게 지내고싶다.. 숙련 강의랑 블로그 몇 개를 봤는데 데이터를 던져주는 곳에서는이렇게 하는데,던질 변수명은 내 마음대로 정해도 된다고 한다. 데이터를 잡는 곳에서는{props.잡을 변수명}이렇게 하는데잡을 변수명은 데이터를 던져주는 곳에서 사용한변수명을 사용하면 된다.

알고리즘 문제를 푸는데if문과 switch - case문 모두를 사용할 수 있는문제가 있었다. if문으로 쓸까 했는데오랜만에 switch - case문 써보자 해서switch - case문을 사용해봤는데헷갈리는 부분이 있어서 다시 공부해본다.   if문과 switch - case문을 사용하는 경우1. 조건문에서 비교할 초이스(값)이 많은 경우    1) switch문을 이용하면 가독성을 높일 수 있다  차이점1. if - else 문    1) 조건식이 반드시 참, 거짓으로 평가됨    2) 논리적 참, 거짓으로 실행할 코드 블록을 결정2. switch - case 문     1) 문자열, 숫자 값      2) 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용  기본 문법 구조는 switch 문의..

const [상태 변수, 상태 변경 함수] = useState(초기값); 1. 상태 변경 함수 (상태 변수 + 1);2. 상태 변경 함수((현재값) => {return 현재값 + 1;});→ 1번과 2번은 같다.3. 이벤트핸들러 = {() => {상태변경함수 {(상태변수 +1)};상태변경함수 {(상태변수 +1)};상태변경함수 {(상태변수 +1)};//  총 1 증가setCount((prev) => prev + 1);setCount((prev) => prev + 1);setCount((prev) => prev + 1);// (prev에 값이 쌓여서) 총 3증가 // (배치 업데이트)}} 배치 업데이트 (Batch Update): 어떤 state를 변경시킬 때 한 번에 처리하는 리액트만의 알고리즘4. con..

동기(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'..

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

자바스크립트 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 (            )} 문제점..