CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 (CORS) 는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제. ⭐️ 프록시란? CORS 정책을 우회할 수 있는 기능. 개발 단계에서는 로컬 환경에서 애플리케이션이 실행된다. API 서버와 통신할 때 이러한 부분때문에 CORS 에러가 발생하게 된다. 이를 해결하기 위해 프론트엔드 개발자는 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해 달라고 요청해야 한다. 하지만 프록시 기능을 사용하면 이런 과정 없이 보다 간편하게 CORS 정책을 우회할 수 있다. ✨ 프록시를 통한 우회 흐름 리액트 앱이 프록시..
✏️ 열거형(Enum) ➤ 숫자형 Enum enum Rainbow { Red, //0 Orange, //1 Yellow, //2 Green, //3 Blue, //4 Navy, //5 Perple, //6 } 각 값은 자동으로 0부터 시작하여 1씩 증가한다. enum Rainbow { Red = 2, Orange = 4, Yellow = 6, Green = 8, Blue = 1, Navy = 3, Perple = 5, } let red: Rainbow = Rainbow.Red; let greenValue: number = Rainbow.Green; let blueValue: number = Rainbow.Blue; console.log(red); // 출력: 2 console.log(greenValue)..
✏️ TypeScript의 타입 ➤ Boolean(불리언) 타입 let isShow: boolean = true; let isDone: boolean = false; ➤ Number(숫자) 타입 let number1: number = 5; let number2: number = 0.7; ➤ String(문자열) 타입 let fruits: string = "apple"; let color: string = 'white'; ➤ Array(배열) 타입 //첫 번째 방법 let items: string[] = ["one", "1", "apple"]; //두 번째 방법 let numberList: Array = [1, 20, 100]; ➤ Tuple(튜플) 타입 let user: [string, number, b..
이번주도 my Agora States 리팩토링 시간을 가졌다! 이번주는 많이 진행을 하지 못한거같다🥲 수업이 지쳐서 그런지 느슨해진 기분도 들고,,,다시 화이팅하자! 다음주부터 수업에서 타입스크립트를 배운다고 하니까 미리 공부해두길 잘했다는 생각이 든다,, 깃허브를 관리하는 과정에서 코드가 날아갔다... 다행히 코드는 복구를 했지만 스타일 컴포넌트 파일은 구하지 못했다는...급한대로 기본 틀만 잡아주었다! ➤ Event 객체에 type 지정, id 속성에 타입 변경 const [data, setData] = useState(dataList); const onSubmitDiscussion = (e:React.FormEvent) =>{ e.preventDefault() const newData : NewDa..
저번주에 이어서 my Agora States를 계속 리팩토링하는 시간을 가졌다. 이번주는 코드스테이츠에서 하는 솔로프로젝트 때문에 민선님이나 나나 정신이 없어서 토요일에 스터디를 진행했다! ➤ DummyData에 Type 지정 //data.tsx type Discussions = { id: string; createdAt: string; title: string; url: string; author: string; answer: { author: string; avatarUrl: string; bodyHTML: string; createdAt: string; id: string; url: string; } | null; bodyHTML: string; avatarUrl: string; }; 가져온 데이터..
드디어 기본 타입 공부를 끝내고 코드스테이츠에서 작업했었던 my Agora States를 리팩토링하는 시간이 다가왔다. 기존 아고라 스테이츠는 자바스트립트를 기반으로 작업했었기 때문에 타입스크립트와 리액트를 사용하려면 싹 다 갈아엎어야 한다,,,! 지금껏 했던 과제나 작업들은 모두 세팅이 되어있는상태에서 시작을 했었다. 하지만 아고라스테이츠 리팩토링을 진행하려면 초기 세팅부터 리액트 처음부터 구현해보기 등 전부 내가 직접 진행을 해야했다... 물론 수강 과정에서 다 배웠던 내용이었지만 처음 해보기 때문에 많은 어려움이 있을것이란 걱정을 안고 시작해 보았다.😱 ➤ TypeScript React 초기 세팅하기! 1. Typescirpt create-react-app 생성 $npx create-react-ap..
페어스터디 두번째 주! 이번 주엔 기본타입 정리를 마무리 했다. 새롭게 배운 내용을 정리해 보자! ✏️ TypeScript -Type ➤ 내가 맡은 타입 Intersection, Inference ➤ 민선님이 맡은 타입 discriminated union, enum, type assertion 발표 순서 Intersection → Inference → never → discriminated union → enum → type assertion 👉 여러 타입을 하나의 타입으로 결합하는 Type Intersection 교차 타입(Type Intersection)은 유니언 타입과 비슷한 방식이지만, 사용 방법은 다르다. 유니온 타입은 자바스크립트에서 or 연산자(||)와 같이 'A, B' 둘 중 하나를 선택하..
이벤트란? 이벤트란 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것이다. 이벤트가 발생하면 그에 맞는 반응을 해야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 함수는 이벤트 발생 시 실행된다. 이 함수를 이벤트 핸들러라 한다. 👉 이벤트 처리하기 1. 인라인 방식 이벤트이름 앞에 on을 붙여 사용한다. Click me HTML 삽입 미리보기할 수 없는 소스 2. 프로퍼티 방식 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록 HTML과 JavaScript를 분리할 수 있다. 이벤트에 오직 하나의 이벤트 핸들러만을 바인딩 가능 Click me HTML 삽입 미리보기할 수 없는 소스 3. addEventListener ✨ ad..
