전체 글 (11) 썸네일형 리스트형 🕶️ CORS 에러 공부하기 오늘은 서버와 연동에서 한번쯤은 경험한다는 에러 이다. 나는 아직 서버와 연동 경험이 적어, 격어보지 못했지만... 미리 알아보자. Cross Origin Resource Sharing CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. 왜 CORS가 생겼을까? 그럼 왜 CORS가 필요하게 됐을까? 이전에는 동일한 도메인에서 리소스를 받아왔는데, 지금은 클라이언트에서 도메인이 다른 서버에서 제공하는 API를 사용하는 일이 많아졌다. 그래서 이전처럼 동일한 도메인간의 요청만 할 수 없어졌고 CORS가 생겼다. 동작 방식 동일 출처 정책은 브라우저에서 임의로 하는 것이다. 즉 브라우저를 통하지 않고 요청을 보내거나.. 블로그 쓰고있는... 후기 나는 현제 웹개발을 하면서 그동안 있었던 스텍에 대해 주로 블로그를 작성하고 있다. 그래서 한번 블로그를 쓰면서 느꼈던 것을 정리해 볼까 한다. 처음에는 선생님이 숙제(?)를 내주셔서 하게되었다. 하루에 하나씩 블로그를 쓰라고 하셨다. 나는 귀찮았지만 그래도 취업에 도움이 된다는 선배들의 조언이 기억나서 해보기로 하였다. 당시 막 시작한 Typescript를 공부하기 위해 공식문서를 한국어로 번역한 블로그를 참고하여 글을 썼다. 그러던중 다른개발 스텍들도 조금씩 늘려나갔다. 그러던중 방학이 되고 공부하는 양이 줄어, 소재고갈로 인해 지금 글을쓰는 중이다. 가끔은 이렇게 내이야기를 남기는 것도 좋을 것 같다. 블로그를 쓰면서 귀찮기도 했지만 쓰다보니 글을 정리하는 것도 좋고 블로그가 커서 사람들과 소통을 .. 🕶️ Firebase 연동하기 Firebase로 프로젝트를 만들기 위해 연동시켜보자. Firebase 추가 yarn add firebase https://console.firebase.google.com/u/0/ 들어가서 로그인 해보자. 로그인 하고보면 이런 화면일 것이다. 프로젝트를 추가하여 만들면 된다. 프로젝트 이름을 정하고 계속 누르다보면 프로젝트가 만들어 진다. 조금 기다리다보면 된다. 그후 앱추가에서 웹을 선택하고 가자 닉네임을 적고 기다리면 이렇게 나온다. 기다란 코드는 복사해서 firebaseConfig.js 파일에 만들어 넣는다. import firebase from "firebase/compat/app" import "firebase/compat/auth" import { initializeApp } from "fi.. 🕶️ Create React App 공부하기 시작 Create React App(cra) 두가지 방법이 있는데 npm이나 yarn을 이용하는 방법이다. npm create react-app 프로젝트명 --template typescript yarn create react-app 프로젝트명 --template typescript 두가지 방법중 yarn을 많이 사용한다. yarn이 병렬설치로 npm보다 설치가 빠르고, 버전을 어디에서나 같게 하여 버그를 줄임으로써 보안을 높였다. 구성 node_modules 폴더 node.js의 패키지 구성요소 중 하나로 외부 모듈을 저장하는 폴더이다. react도 외부 모듈이므로 여기에 저장된다. node_modules 폴더는 설치된 외부 모듈들의 소스코드를 갖고있기 때문에 매우 큰 용량을 차지한다. 협업을 위해 g.. 🕶️ Yarn 설치 및 사용하기 Facebook에서 만든 자바스크립트 패키지 매니저인 Yarn을 사용해 봅시다. Yarn 설치 Homebrew를 사용하는 설치 $ brew install yarn NVM 같은 버전 관리 툴을 사용해야 한다면 Node.js의 설치를 제외하도록 한다. $ brew install yarn --without-node NPM NPM으로 설치할 수도 있다. $ npm install -g yarn 설치가 잘 되었는지 확인하자. $ yarn --version 설치 후 전역 사용에 문제가 있다면 Path 설정을 해줘야 한다. .profile, .bash_profile, .bashrc, .zshrc 등… $ export PATH="$PATH:/opt/yarn-[version]/bin" Yarn 사용법 NPM을 사용한다면 .. 🕶️ TypeScript 공부 하기 3장 TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것입니다. 이를 "덕 타이핑" 혹은 "구조적 서브타이핑 "이라고도 합니다. TypeScript에서, 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법입니다. 첫 번째 인터페이스 어떻게 인터페이스가 동작하는지 확인하는 가장 쉬운 방법은 간단한 예제로 시작하는 것이다. function printLabel(labeledObj: { label: string }) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; print.. 🕶️ recoil 공부 하기 Installation CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다. npm i recoil // or yarn add recoil RecoilRoot 리코일 state를 사용하는 컴포넌트들은 를 필요로 한다. 를 사용하는 가장 좋은곳은 root component이다. // app.js import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; // import!!! import하는것은 important하닌까 ~ function App() { return ( // 이렇게 감싸주어야한다. ); } Atom.. 🕶️ emotion.js 공부 하기 emotion.js란? emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react @emotion/css 패키지는 프레임워크에 구애받지 않으며 Emotion 을 사용할수 있는 방법이다. 바벨 플러그인, config 변경 같은 다른 추가 셋팅이 필요하지 않는다. 자동으로 벤더프리픽스를 지원하고, 중첩 선택자, 미디어 쿼리를 지원한다. css 클래스 이름을 생성하고 cx 구성하는 기능을 사용하는 것을 선호한다. import emotion.js를 사용해야 할 컴포넌트에 import 해야 한다. /.. 이전 1 2 다음
