그날의 공부기록

seokachu's Front-End Archive 🙂

📚 이론정리/JS & TS

open api를 사용하던 중 cors가 "no"로 제공되는 애들이 있다.CORS 정책에 의해 막혔다고 나오는 것을 종종 볼 수 있다.CORS가 뭐고, 어떻게 흘러가는지 알아보자결론은 무료api기 때문에 CORS가 `no`로 되어있어도 사용 가능하다!    그래서 CORS가 뭔데?CORS를 이해하기전에 SOP에 대해 이해해야 할 필요가 있다.   SOP(Same Origin Policy) - 같은 출발지 정책CORS (Cross Origin Resource Sharing)    SOP방식 SOP방식은 이미지로 쉽게 설명하자면 다음 브라우저와 다음 백엔드 컴퓨터만 사용 가능하다.즉, 다른 브라우저들은(네이버 구글)등 다음의 백엔드 컴퓨터를 사용할 수 없다. (유연하게 사용할 수 없다)같은 회사의 백엔드 컴..

2024. 9. 26.

📚 이론정리/JS & TS

이벤트 버블링은 `디폴트`로 생각하면 편하다`이벤트버블링` 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다.  버블링은 위로 버블버블 올라간다고 생각하면 훨씬 이해하기 쉽다. `버블링` : 자식 → 부모`캡처링` : 부모 → 자식 버블링이 디폴트고, 캡처링은 따로 선언해 주어야 한다.    예시 코드 P  위와 같은 구조에서 를 클릭하면 `p`→`div`→`form` 순서로 3개의 경고창을 나타나게 된다.목록의 제목이나 내용에 `onClick`함수가 있는것이 아닌 전체를 감싸주는 박스에 `onClick`함수가 있을 경우 발생하게 된다.이러한 경우 `event.target.id`가 아닌 `event.currentTarget.id` 를 사용..

2024. 9. 26.

📚 이론정리/JS & TS

유틸리티 타입이란?어떤 타입이 있고, 내 마음대로 요리할 수 있도록 다른 타입으로 만드는 것이 유틸리티 타입이다.   예시interface Profile { name: string; age: number; school: string; hobby?: string;} 먼저 하나의 타입을 만들었다고 가정  1. Partial 타입type aaa = Partial; 파셜타입은 전부 타입들이 있어도 되고, 없어도 되는 타입으로 지정할 수 있다.   2. Required 타입 type bbb = Required; 모두가 다 필수요건인 타입이다.    3. Pick 타입type ccc = Pick; name과 age만 뽑아서 다른 타입으로 쓰고싶을 때    4. Omit 타입type ddd = Omit; sc..

2024. 9. 20.

📚 이론정리/JS & TS

2024. 9. 10.

📚 이론정리/JS & TS

as const?readonly 속성으로 깊은 객체까지 참조할 수 있다.

2024. 3. 10.

📚 이론정리/JS & TS

2024. 3. 9.

📚 이론정리/JS & TS

두 컴퓨터 간 데이터 전송 중 HTTP 전송이라는 것에 대해서 알아보았다.HTTP통신은 텍스트와&하이퍼텍스트를 보내는 연결 통신이다.    그림으로 이해하면 좀 더 쉬운데요청을 보낼때, 편지처럼 헤더에 보내고 받는사람, 바디는 내용을 담아 요청을 한다.        백엔드 컴퓨터에 보낼때 request나 또는 req라고도 많이 한다.         요청을 보냈으면, 답장을 해줘야하는데 이럴 때 백엔드 컴퓨터에서 답장을 보내준다.그럴때 `응답`으로 답장이 오고 response또는 res라고도 한다.그리고 백엔드 컴퓨터에서 답장이 올때는 상태코드와 함께 답장이 온다.보내는 내용 형태로는 `객체` - json 형태이다.      우리가 서버에게 요청을 보낼 때, 작성자 따로비밀번호 따로제목 내용 따로...등등..

2024. 1. 24.

📚 이론정리/JS & TS

복사란 무엇인가?JavaScript에서 다음과 같은 방법으로 데이터를 복사할 수 있다.let aaa = "철수"let bbb = aaaconsole.log(aaa) // 철수console.log(bbb) // 철수 이런 경우 aaa는 원본, bbb는 복사본이 된다.     bbb = "영희"console.log(aaa) // 철수console.log(bbb) // 영희 복사본의 값을 변경해서 재할당을 하면원본인 aaa의 값은 변하지 않고,복사본인 bbb의 값만 변한 것을 확인할 수 있다.       객체 복사let child1 = { name: "철수", age: 8, school: "다람쥐초등학교"}let child2 = child1child2 // {name: '철수', age: 8, school: ..

2024. 1. 22.

📚 이론정리/JS & TS

객체가 어떤 클래스인지, 어떤 클래스를 상속 받았는지 확인하는데 사용하는 연산자 이다.즉, 참조변수가 참조하고 있는 인스턴스의 실제 타입을 알아보기 위해 해당 연산자를 사용한다. 문법object instanceOf type `object`: 판별할 객체`type` : 판별할 함수  instanceof 연산자는 object의 프로토타입 체인에 type.prototype이 존재하는지 판별한다.    예시 (자주쓰는 Dete)  const date = new Date();date instanceof Datedate는 객체(인스턴스)date의 인스턴스가 Date이다.date는 인스턴스도 되고 객체도 된다.   예시 (자주쓰는 instanceof Error)catch(error){    if(error insta..

2024. 1. 19.

📚 이론정리/JS & TS

객체에서 `대괄호 표기법([])`을 사용하면 Key를 동적으로 접근할 수 있다.const example = { a: 1, b: 2, c: 3,};const key = "b"; // 동적으로 Key를 정함console.log(example[key]); // 결과: 2  • key 변수에 저장된 값("b")이 객체의 Key로 사용된다. • 즉, example["b"]는 Key "b"에 대응하는 Value인 2를 반환한다.    Key를 고정해서 접근하는 경우Key가 고정되어 있다면 대괄호 없이 점 표기법을 사용할 수 있다.console.log(example.b); //결과 2

2024. 1. 17.