JNarin Development Story

프론트 개발자라면 명세서 api에 대해서 많이 듣고 참고를 하고 있을 듯하다. 현재의 나도 그걸 참고로 하여 서버와 통신을 하여 개발을 하게 되는데 여기서 몇 가지 문제점이 있어서 삽질이 진행이 되었다. 일반적으로 axios의 통신은 이러하다. import axios from 'axios'; Axios.post('url', data, header) .then(response => { console.log(response); }) .catch(error => { console.log(error); }) 일반적인 구조로 하게 될 경우 이렇지만, 만약 기존의 통신과 다르거나, 세팅한 통신과 다를 경우 새로이 입력을 하는 경우가 발생한다. import axios from 'axios'; // headers가 다..

안녕하세요. 제이나린 입니다. 오늘은 우측에 있는 사이드 비디오를 만드는 과정을 적어보려고 합니다. 1. SideoVideo 템플릿 만들기 먼저 SideVideo 템플릿을 만들기 위해서는 다음과 같은 경로가 필요하다. VideoDetailPage 폴더 안에 Sections라는 폴더를 만든 후 그 안에 SideVideo.js를 만든다. // src > components > views > VideoDetailPage > Sections > SideVideo.js import React from "react"; function SideVideo() { return ( {/* 이미지 */} {/* 이미지에 대한 정보 */} videoTitle videoWriterName videoViews Time ); } ..

오늘은 axios에 대한 공부를 진행해보았다. 1. axios 설치하기 axios는 벡앤드와 프론트앤드 통신을 쉽게 하기 위한 비동기 통신 라이브러리다. axios를 설치하는 명령어는 다음과 같다. npm install axios --save yarn add axios 2. axios 사용해보기 axios를 한번 사용해는데 방법은 다음과 같다. // client > src > components > views > LandgingPage > LAndingPage.js import React, { useEffect } from 'react'; import axios from 'axios'; function LandingPage() { useEffect(() => { axios.get('/api/hello')..