최근 포트폴리오 웹사이트를 만드는 중 문제가 생겨 애를 먹었습니다. 제가 운영하는 유튜브 채널의 데이터를 받아오기 위해 axios를 사용하는데 이렇게 정상적으로 글자가 나오지 않고 위 사진처럼 글자가 깨지는 현상이 있었습니다. status나 statusText,headers 등 대체적으로 모든 데이터가 제대로 들어왔으나 정작 중요한 response.data는 깨짐현상이 발생했습니다. axios가 아닌 fetch를 써도 정상적인 데이터가 나오지 않았습니다. 구글에 한글로 문제를 검색해도 한글 깨짐현상만 나올 뿐 근본적인 해결책을 찾지 못했습니다. 하지만 영어로 검색하니 바로 해결책이 나오더군요. Error response data nodejs · Issue #5298 · axios/axios Describ..
cra없이 react 프로젝트 설정하기(feat. webpack,babel) 리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다. 하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기 때문에 크게 wepack과 babel에 대해 신경쓰지 않아도 blog.doyeonism.com 저번 글에서 우리는 cra없이 리액트를 세팅했습니다. 하지만 글이너무 길어져 각 파일의 구성에 대해선 알아보지 못했는데요. 이번글에선 각 파일들의 내용에 대해 분석해보고 알아가보겠습니다. webpack.config.js 저번 글에서 우리가 만들었던 webpack.config.js의 코드는 이렇습니다. const path = require("path"); const HtmlWebp..
이번 글에선 프론트엔드의 기본인 api호출을 알아보도록 하겠습니다. api란 Application Programming Interface의 줄임말입니다. API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다. 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어있습니다. 출처: aws 간단히 말해 API는 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미합니다. 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야하는지, 그리고 어떠한 데이터를 제공받을..
리액트를 만들고 사용하다보면 webpack과 babel에 대해 많이 들어봤을 겁니다. 하지만 지금까지 진행한 프로젝트는 cra로 react 프로젝트를 셋팅하기 때문에 크게 wepack과 babel에 대해 신경쓰지 않아도 됐습니다. webpack과 babel에 대해 알지 못하면 깊은 리액트 공부가 되지 않을 것 같다는 생각에 webpack과 babel에 대해 알아보고 직접 cra없이 react프로젝트를 셋팅해보겠습니다. Webpack이란? 웹팩(Webpack 또는 webpack)은 오픈소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는..
