교차 출처 리소스 공유 (Cross-Origin Resource Sharing) CORS란 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 입니다. 여기서 출처(Origin)는 프로토콜,호스트,포트번호를 기반으로 구분합니다. 즉 프로토콜,호스트,포트번호가 동일하다면 이는 동일한출처(Same-Origin) 입니다. 교차출처 예시 : https://domain-a.com 의 프론트 엔드 자바스크립트 코드가 https://domain-b.com/data.json 을 요청하는경우 보안상의 이유로 브라우저는 프론트엔드측 에서 시작한 HTTP 요청을 제한합니다. XMLHttpRequest 와 FetchAPI 는 동일 출처 정책(Same-O..
위 사진은 프로젝트에 신청한 지원자 및 프로젝트 팀원을 전체적으로 관리하는 모달 입니다. 첫번째로 지원현황,팀원관리 에 따라 모달의 뷰가 바뀌어야하며 포지션별로도 화면이 바뀌어야하기 때문에 초기 구상당시에는 구현이 약간 어려울지도 모르겠다고 생각이 들었었습니다. 서버데이터 양식은 크게 객체안에 포지션별로 있고 포지션별객체안에는 각 지원자들 그리고 총 지원자들의 수가 있습니다. 모달에서 백엔드포지션을 누르면 백엔드를 지원한 지원자들의 데이터만 보여주어야 하기때문에 한번에 받아오는 데이터를 적절하게 걸러줄 필요성이 있었습니다. 저는 이를 해결하기위해 useQuery 안에 내장되어있는 select 를 사용하여 해결하였습니다. 기본적으로 useQuery 를 사용하여 서버데이터를 fetch 하는양식은 이와 같습니..
Item 26 - 타입 추론에 문맥이 어떻게 사용되는지 이해하기 type Language = "JavaScript" | "TypeScript" | "Python"; function setLanguage(language: Language) { return language; } setLanguage("JavaScript"); // OK let language = "JavaScript"; setLanguage(language); // 'string' 형식의 인수는 // 'Language' 형식의 매개변수에 할당될 수 없습니다. 타입을 변수로 분리하면 타입스크립트는 할당 시점에 타입을 추론합니다. 그러므로 let language = "JavaScript" 는 string 형식으로 추론이 되어서 오류가 발생하게됩..
Item 25 - 비동기 코드에는 콜백 대신 async 함수 사용하기 과거 자바스크립트 에서는 비동기 동작을 구현하기 위해 콜백을 사용하였고, 그렇기 때문에 '콜백 지옥(callback hell)'을 마주할 수 밖에 없었습니다. function fetchURL(url: string, cb: (response: string) => void) { cb(url); } const url1 = "1"; const url2 = "2"; const url3 = "3"; // END fetchURL(url1, function (response1) { fetchURL(url2, function (response2) { fetchURL(url3, function (response3) { // ... console.log(..
