개발공작소
728x90
반응형
article thumbnail
[JS] Axios를 통한 비동기 통신방법 정리 :: GET방식, POST방식 및 Axios문법
FrontEnd/JavaScript 2022. 9. 3. 11:26

Axios를 많이 쓰긴 했는데, 정확히 정리해놓은 게 없어서 정리해본다. 주로 많이 쓰이는 GET요청과 POST요청만 정리해봄.. npm trends에서 사용자들의 axios 다운로드 통계를 검색해보면 하루에 1000만건 ~ 3000만건의 다운로드 건수를 확인 할 수 있다. 우리가 보통 비동기통신하면 떠오르는 녀석들이 ajax, fetch API, axios인데 이 3개를 비교해보아도 axios가 압도적으로 많이 쓰이는 걸 알 수 있다. ( 검색해보니, npm에서 fetch는 react 내장함수라고 하길래 react로 비교했다. ) Axios로 GET 요청하는 방법 주로 GET방식을 사용하는 상황 단순 데이터를 요청하는 경우 파라메터 데이터를 포함하여 URL을 요청하는 경우 기본문법 axios({ url..

article thumbnail
[JS] Javascript에서 주석을 다는 3가지 방법 :: 한줄 주석, 여러줄 주석
FrontEnd/JavaScript 2022. 8. 25. 12:52

보통 자바스크립트에서 주석을 다는 방식이 3개가 있다. 다음과 어려운 게 아니라, 습관이 중요하니 그냥 바로바로 알아보자. javascript에서 주석을 다는 3가지 방식 1. 한줄 주석 // 한 줄 주석을 달때는 //를 사용함 2. 여러줄 주석 /* 여러 줄 주석을 달 때 *을 / 사이에 넣음 */ 3. 여러줄 주석 + 명세작성 /** * 여러 줄 주석을 달 때 * 함수나 클래스에 힌트(명세)를 달 수 있음 */ 위를 보면 한줄 주석은 //로, 여러줄 주석은 /* ... */ 로 작성한다. 근데 3번을 보면 /** ... */ 와 같이 작성하는데 뭐가 다를까? 함수 선언하는 부분의 바로 위에 3번과 같이 작성을 하면 실제로 해당 함수를 호출할 때 이 주석을 확인 할 수 있다. /** ... */와 같이..

article thumbnail
[JS] Axios GET요청으로 데이터를 보낼 때 415 (Unsupported Media Type) 에러 뜨는 문제 해결방법
FrontEnd/JavaScript 2022. 8. 9. 12:50

보통 aixos를 통해 데이터를 전송할 때 데이터들을 객체에 담아서 보내고는 했었는데, 지금까지는 대부분 .post 요청으로 데이터를 전송했었기 때문에 .get 요청으로 데이터를 보낼 일이 없었다. 그래서 그냥 평소하던대로 .post() 를 .get()으로만 바꿔서 URL을 호출하니 다음과 같은 에러가 떴다. 그래서 한번 이것저것 찾아보다 정리해본다. 415 ( Unsupported Media Type ) 에러가 발생하는 이유? 보통 415 (Unsupported Media Type) 에러가 떨어진다는 말은 전송한 데이터와 전송받는 데이터의 타입이 일치하지 않기 때문이라고 알고 있었다. 이런 에러가 예전에도 뜬 적이 있는데, json데이터를 서버로 보냈는데 Controller에서 받을 때 json이 아니..

article thumbnail
[JS] 문자열을 자바스크립트 코드로 사용하는 방법 / 문자열과 변수를 조합하여 자바스크립트 코드 만들기 :: window.Function
FrontEnd/JavaScript 2022. 8. 5. 12:58

얼마전에 문자열을 자바스크립트 코드로 사용하기 위해 eval 함수가 있다는 것을 정리했는데 보안상의 문제로 MDN에서 절대 사용하지 말라고 하였었다. 그렇다면 그림의 떡이라는 말인데.. 여기서 MDN이 다른 대안을 문서로 제공하고 있다. 바로 window.Function을 사용하는 것이다. 오늘은 이 window.Function에 대해 정리해보려고 한다. window.Function함수를 사용하여 문자열을 자바스크립트 코드로 변환해보자. 오늘은 이 window.Function을 통해 문자열을 자바스크립트로 변환하는 것만 알아볼 것이기 때문에 자세한 내용은 MDN문서를 참조하도록 하자 - MDN문서 참조 샘플변수 선언 //샘플 변수 선언 const originVar_1 = 'this_is_originVar..

article thumbnail
[JS] 문자열을 자바스크립트 코드로 사용하는 방법 / 문자열과 변수를 조합하여 자바스크립트 코드 만들기 :: eval()
FrontEnd/JavaScript 2022. 8. 5. 12:26

가끔 개발하다보면 다음과 같은 경우가 있다. 1. 문자열 변수로 특정 변수를 호출해야 하는 상황 2. 문자열 변수에 특정 문자열을 더해서 변수를 호출해야 하는 상황 eval함수를 활용하여 문자열로 자바스크립트 코드를 실행해보자. 1. eval 함수란? 문자로 표현 된 Javascript 코드를 실행하는 함수이다. - MDN 참조 주의 : 개발을 할 때 절대로 eval()를 사용하지 말도록 하자. 문자열을 통해 eval함수를 사용하는 것은 매우 위험하다. ※ eval()를 사용하면 안되는 이유는 MDN문서를 참조하도록 하자. 샘플변수 선언 //샘플 변수 선언 const originVar_1 = 'this_is_originVar_1'; const originVar_2 = 'this_is_originVar_2..

[JS] 자바스크립트 :: 문자열 변수를 객체의 키값으로 사용하는 방법
FrontEnd/JavaScript 2022. 8. 2. 12:51

진짜 아무것도 아니긴 한데, 블로그에 정리가 안되어 있는 것 같아 정리해본다. 문자별 변수로 객체의 키값을 통해 value값 가져오기 이 방법이 어떨 때 주로 쓰이냐면, 같은 로직이라도 객체의 값이 변할 때 주로 쓰인다. ( 나는 그럴 때 씀.. ) 기본문법 그냥 객체에 해당 변수를 넣어만 주면 된다. 객체명[변수명] ex) obj[srh] 샘플코드 var obj = {}; var srh = ''; // true/false에 따라 obj값이 변하는 함수선언 const testFun = (bool) =>{ // bool이 true면 obj는 'one'이라는 키값을 가짐 if(bool==true){ obj = { 'one' : 'this is one', }; // 변수 srh에 'one'을 넣어줌 srh =..

728x90
반응형