티스토리

그날의 공부기록

검색하기

블로그 홈

그날의 공부기록

seokachu.tistory.com/m

seokachu's Front-End Archive 🙂

구독자: 7

방명록 방문하기

주요 글 목록

CORS에 대해서 알아보자 open api를 사용하던 중 cors가 "no"로 제공되는 애들이 있다.CORS 정책에 의해 막혔다고 나오는 것을 종종 볼 수 있다.CORS가 뭐고, 어떻게 흘러가는지 알아보자결론은 무료api기 때문에 CORS가 `no`로 되어있어도 사용 가능하다! 그래서 CORS가 뭔데?CORS를 이해하기전에 SOP에 대해 이해해야 할 필요가 있다. SOP(Same Origin Policy) - 같은 출발지 정책CORS (Cross Origin Resource Sharing) SOP방식 SOP방식은 이미지로 쉽게 설명하자면 다음 브라우저와 다음 백엔드 컴퓨터만 사용 가능하다.즉, 다른 브라우저들은(네이버 구글)등 다음의 백엔드 컴퓨터를 사용할 수 없다. (유연하게 사용할 수 없다)같은 회사의 백엔드 컴.. 공감수 2 댓글수 0 2024. 9. 26.
이벤트 버블링과 이벤트 캡처링 이벤트 버블링은 `디폴트`로 생각하면 편하다`이벤트버블링` 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다. 버블링은 위로 버블버블 올라간다고 생각하면 훨씬 이해하기 쉽다. `버블링` : 자식 → 부모`캡처링` : 부모 → 자식 버블링이 디폴트고, 캡처링은 따로 선언해 주어야 한다. 예시 코드 P 위와 같은 구조에서 를 클릭하면 `p`→`div`→`form` 순서로 3개의 경고창을 나타나게 된다.목록의 제목이나 내용에 `onClick`함수가 있는것이 아닌 전체를 감싸주는 박스에 `onClick`함수가 있을 경우 발생하게 된다.이러한 경우 `event.target.id`가 아닌 `event.currentTarget.id` 를 사용.. 공감수 2 댓글수 0 2024. 9. 26.
타입스크립트의 유틸리티 타입 유틸리티 타입이란?어떤 타입이 있고, 내 마음대로 요리할 수 있도록 다른 타입으로 만드는 것이 유틸리티 타입이다. 예시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.. 공감수 1 댓글수 0 2024. 9. 20.
타입스크립트 제네릭 타입 공감수 0 댓글수 0 2024. 9. 10.
타입스크립트의 as const as const?readonly 속성으로 깊은 객체까지 참조할 수 있다. 공감수 0 댓글수 0 2024. 3. 10.
✏️ 인증, 인가, JWT토큰 공감수 0 댓글수 0 2024. 3. 9.
✏️ HTTP 통신 두 컴퓨터 간 데이터 전송 중 HTTP 전송이라는 것에 대해서 알아보았다.HTTP통신은 텍스트와&하이퍼텍스트를 보내는 연결 통신이다. 그림으로 이해하면 좀 더 쉬운데요청을 보낼때, 편지처럼 헤더에 보내고 받는사람, 바디는 내용을 담아 요청을 한다. 백엔드 컴퓨터에 보낼때 request나 또는 req라고도 많이 한다. 요청을 보냈으면, 답장을 해줘야하는데 이럴 때 백엔드 컴퓨터에서 답장을 보내준다.그럴때 `응답`으로 답장이 오고 response또는 res라고도 한다.그리고 백엔드 컴퓨터에서 답장이 올때는 상태코드와 함께 답장이 온다.보내는 내용 형태로는 `객체` - json 형태이다. 우리가 서버에게 요청을 보낼 때, 작성자 따로비밀번호 따로제목 내용 따로...등등.. 공감수 0 댓글수 0 2024. 1. 24.
✏️ 얕은복사와 깊은복사, 스프레드 연산자 복사란 무엇인가?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: .. 공감수 0 댓글수 0 2024. 1. 22.
✏️ Instanceof 연산자 객체가 어떤 클래스인지, 어떤 클래스를 상속 받았는지 확인하는데 사용하는 연산자 이다.즉, 참조변수가 참조하고 있는 인스턴스의 실제 타입을 알아보기 위해 해당 연산자를 사용한다. 문법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.. 공감수 0 댓글수 0 2024. 1. 19.
✏️ 객체 동적 접근 대괄호 표기법([]) 객체에서 `대괄호 표기법([])`을 사용하면 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 공감수 0 댓글수 0 2024. 1. 17.
✏️ Reduce 함수 Reduce는 배열의 모든 요소를 순회하면서 하나의 결과값을 만들어내는 배열 메서드이다"배열" 메서드 인게 중요! 기본 문법// reduce의 기본 문법array.reduce((누적값, 현재값) => { // 계산 로직 return 새로운누적값;}, 초기값); 예시)// 1. 숫자 배열의 합계 구하기 const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((acc, cur) => { console.log(`누적값(acc): ${acc}, 현재값(cur): ${cur}`); return acc + cur;}, 0); 이 예시의 실행과정은 이렇게 된다.// 실행 과정: // 1단계: acc: 0, cur: 1 => 반환값: 1 // 2단계.. 공감수 0 댓글수 1 2024. 1. 3.
Map,Set Map,Set추가적인 자료구조가 등장함. 최근에 등장한 내용임. Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리 -> 기존의 객체 또는 배열보다 효율적으로 만들기 위해 1. Map - key,value를 저장하는 객체랑 비슷함. 객체와 다르게 key에 어떤 데이터타입(유형)도 다 들어올 수 있다. - Map은 키가 정렬된 순서로 저장되기 때문이다. 키가 정렬된 순서로 저장되기 때문에 추가한 순서대로 반복할 필요가 없음. - 기능 -> 검색, 삭제, 제거 여부 확인 - 원래 데이터를 가공하여 출력함. Map은 다음과 같은 작업을 수행할 수 있음 1. 키 - 값 쌍 추가 및 검색(set) 2. 키 - 값 쌍 삭제 (delete) 3. 모든 키 - 값 쌍 제거 (clear) 4. Ma.. 공감수 0 댓글수 0 2024. 1. 2.
스크롤감지 getBoundingClientRect 메서드 getBoundingClientRect()는 웹 브라우저에서 요소의 위치와 크기를 반환하는 메서드이다.이 메서드는 DOM 요소의 경계를 나타내는 정보를 제공하며, 페이지에서의 상대적인 위치를 기반으로 계산된 값을 반환한다.스크롤 위치를 감지하거나 특정 요소가 화면에 보이는지 확인할 때 유용하게 사용된다. 예시const element = document.querySelector('#myElement');const rect = element.getBoundingClientRect();console.log(rect.top); // 요소의 상단이 뷰포트 상단에서부터 얼마나 떨어져 있는지console.log(rect.left); // 요소의 좌측이 뷰포트 좌측에서부터 얼마나 떨어져 있는지console.. 공감수 0 댓글수 0 2024. 1. 2.
✏️ 옵셔널체이닝(Optional-chaining)과 널리쉬퀄리싱(Nullish-coalescing) 옵셔널 체이닝(Optional-chaining)옵셔널 체이닝은 `?` 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 예를 들어서 우리가 비동기 데이터 통신을 한다고 가정해보자, 자바스크립트가 한줄 한줄씩 실행되는데 const { data } = useQuery(PRODUCT_LIST); console.log(data); return ( {data.fetchProfile.title} ); 코드가 이렇게 있다고 가정해보면, console.log에는 데이터가 들어오는데return 영역에서는 에러가 뜬다.그 이유는 비동기 통신을 하는데 백엔드에서 데이터가 가져오기 전에 아래가 먼저 실행이 되어버려서 오류가 뜨는 것이다. 그래서 해결 방안으로.. 공감수 0 댓글수 0 2023. 11. 3.
✏️ 동기와 비동기 오늘은 동기와 비동기에 대해서 정리해 보려고 한다. 그림으로 보자면 왼쪽이 `동기`, 오른쪽이 `비동기`이다.데이터 처리 모델을 쉽게 표현하자면 이렇게 생겼는데, 이 방식에는 크게 동기와 비동기식 처리 모델이 존재한다. 동기(Synchronous : 씽크로나이즈)동기는 데이터의 요청한 결과가 한 자리에서 동시에 일어나는 것을 말한다.요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야한다.즉, 서버컴퓨터가 작업이 끝날때까지 기다리는 통신이다. ex) 내가 컴퓨터에 게임을 하려고 하는데, 게임을 하려면 그 전에 게임팩을 깔고, 게임을 실행한다! 비동기 (Asynchronous : 에이씽크로나이즈)동시에 일어나지 않고, 요청한 결과는 동시에 일어나지 않는다.동시에 여러가지 .. 공감수 0 댓글수 0 2023. 11. 1.
✏️ 예외처리 throw, try와 catch 그리고 finally 프로그램이 실행되는 동안 문제가 발생하면 프로그램이 자동으로 중단된다.이럴 경우 프로그램이 대처할 수 있도록 처리해 주는 것이 `예외처리(Exception Handling)`라고 한다.프로그램 실행 중에 발생하는 오류를 `예외(Exception)`라고 하고, 프로그래밍 언어의 문법적인 오류를 `에러(Error)`라고 한다. 예외가 발생하는 이유는 여러가지가 있지만 일반적으로 잘못된 코드를 작성했거나사용자가 개발자가 원하지 않는 방향으로 프로그램을 사용했을 수 있다.예외는 `기본 예외 처리`와 `고급 예외 처리` 두 가지 방법으로 처리한다.예외가 발생하지 않게 사전에 해결하는 것을 `기본 예외 처리`라고 하며 대개 `조건문`으로 처리할 수 있다.예외 처리 방법 중에 `고급 예외처리` 하는 방법에 대해 알아.. 공감수 0 댓글수 0 2023. 10. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.