우리는 프론트엔드와 백엔드를 개발하고 프론트엔드에서 백엔드로 api호출할 때 마주치는 에러가 있습니다. 바로 CORS에러입니다. CORS는 Cross Origin Resource Sharing의 약자로 출처가 다른 자원들을 공유한다는 뜻입니다. 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하기 위해 허가가 필요하다는 뜻이고 허가 없이 자원을 호출하면 에러를 내보냅니다. Corss - Origin은 총 3가지로 구분합니다. 1. 프로토콜 - http와 https 2. 도메인 - doyeonism.com과 doyeon.com 3. 포트번호 - 3000번과 8080번 Corss Origin의 구분 방법은 위 세가지중 하나라도 다를 경우 다르다고 규제합니다. 그래서 우리가 localhost에서 프론트엔..
이번 프로젝트는 [리액트 따라하며 배우기] 달력 프로젝트 React+typescript, styled-components 이번 리따배 프로젝트는 달력만들기 입니다. 깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/calender GitHub - jdy0120/frontendproject Contribute to jdy0120/frontendproject development by creating an account on G blog.doyeonism.com 위 프로젝트에서 추가기능을 생성한 프로젝트입니다. 위 프로젝트를 먼저 따라와주신 후 이번 프로젝트를 진행해주시면 되겠습니다. 이번 프로젝트는 React + axios를 사용하여 공공데..
위 이미지에서 이상한점이 보이시나요? url을 치고 들어갈때 css 가 적용이 안된 상태로 0.1초정도 있다가 css가 뒤늦게 적용되는 모습이 보이실 겁니다. 굉장히 거슬렸고 저는 오류라고 판단해 구글링을 시작했습니다. 역시 저 이외에도 비슷한 증상을 겪는 분들이 많았고 해결방법도 의외로 쉽게 찾을 수 있었습니다. 이런 현상이 발생되는 이유를 추측해보자면 nextjs는 ssr형식으로 렌더링을 진행하고 클라이언트에게 렌더링된 웹사이트를 보내줍니다. 이때 styled-components는 렌더링이 안된채로 클라이언트에게 보내지고 html만 파싱된 상태에서 styled-components가 클라이언트에서 적용되는 것이라고 추측하고 있습니다. 서버측에서 styled-components가 적용되고 클라이언트에 보..
이번 글에선 리액트에서 사용하는 대표적인 fetch라이브러리인 axios에 대해 알아보고 직접 공휴일 데이터를 호출해보겠습니다. 이번 글에선 공공데이터포털에서 휴일데이터를 받아와 출력해주는 프로젝트를 만들어보겠습니다. 또 리따배에서 만든 달력 프로젝트에 휴일을 표시하는 기능을 넣어주는 것도 좋을 것 같습니다. 우선 대부분 api는 get또는 post 방식으로 호출하게 되는데요. 이 둘의 차이를 먼저 간단하게 확인해보겠습니다. get과 post알아보기 api를 호출할 때 대표적으로 사용하는 방식인 get과 post에 대해 알아보겠습니다. 1. get 특징 : url뒤에 매개변수를 적어 서버에 전달한다. https:localhost/getdata?name=doyeon&age=29&nickname=doyeon..
