개발공작소
728x90
반응형
article thumbnail
[JS] ES6 : Fetch함수에 대한 정리 ( feat. GET요청, POST요청 )
FrontEnd/JavaScript 2022. 3. 1. 03:00

저번에 ES6의 내장함수인 Fetch함수를 이용해서 API를 호출해보았다. ( 궁금한 사람은 아래 링크 참조 ) https://bongra.tistory.com/131 [JS] ES6 내장 함수인 Fetch를 활용하여 비동기 통신을 해보자. ( 오픈 API로 데이터 받아오기 ) 며칠전에 옆 팀에 놀러갔다가, 같이 일했던 선임이 Fetch함수를 이용해서 비동기통신을 하고 있는 걸 보고 나도 한번 써보고 싶어져서 이렇게 정리한다. 지금까지는 ajax아니면 axios ( axios를 더 많 bongra.tistory.com 이제 Fetch함수를 활용해서 API호출은 할 수 있게 됬는데, 정확히 Fetch함수의 구조와 활용형태에 대해서는 잘 몰라서 이번에 정리해보려고 한다. ( 실습위주가 아니라, 그냥 정리임 ..

article thumbnail
[JS] ES6 내장 함수인 Fetch를 활용하여 비동기 통신을 해보자. ( 오픈 API로 데이터 받아오기 )
FrontEnd/JavaScript 2022. 2. 24. 19:59

며칠전에 옆 팀에 놀러갔다가, 같이 일했던 선임이 Fetch함수를 이용해서 비동기통신을 하고 있는 걸 보고 나도 한번 써보고 싶어져서 이렇게 정리한다. 지금까지는 ajax아니면 axios ( axios를 더 많이 씀.. ) 를 썼었다. 왜냐하면 지금까지 우리 프로젝트는 ES6를 쓰지 않았기 때문.. 근데 옆팀은 ES6를 쓰니, ES6 내장함수인 Fetch를 쓰고 있는 모양이었다. 서론은 여기까지 하고 바로 정리해보자. Fetch란? ============================================================================ ajax, axios등과 마찬가지로, 클라이언트 ( 여기에서는 javascript )에서 서버로 비동기 통신을 하기 위해 사용하는 API이..

article thumbnail
[JS] 변수가 JSON형식인지 확인하는 방법. ( feat. JSON.parse 메서드 활용, Unexpected token in JSON at position 에러)
FrontEnd/JavaScript 2022. 2. 23. 21:49

이번에 프로젝트를 하면서 새로 레이어를 발행해서 지도에 뿌려주는데, 제대로 뿌려지지 않았다.( GIS관련임 ) 디버깅을 해보니까. 아래 구문에서 에러가 발생하였다. --샘플 var testShow = (item.jsonOb) ? JSON.parse(item.jsonOb).showLabel ? true : false : false; Unexpected token in JSON at position.... 즉 JSON을 객체로 변환하려고 하는데 JSON이 없다는 말이다. 보면 item객체안에서 jsonOb라는 녀석을 JSON.parse해주는 코드인데 즉, JSON형태 => 객체형태로 변환해주는 부분이다. 근데 문제는 평소에는 JSON형태가 들어와줘서 에러가 안났는데, 가끔 JSON형태가 아닌 객체형태의 데이..

article thumbnail
[JS] ES6 : const, let 그리고 var 변수 선언방식에 대해 알아보자. ( feat. error '[변수명]' is constant no-const-assign 에러 )
FrontEnd/JavaScript 2022. 2. 20. 04:11

ES5 시절에는 변수 선언 방식이 딱 하나 있었다. 바로 var 형식이다. 어딜가나 var를 썼었다. 내가 했던 프로젝트도 처음에는 ES6를 쓸 수 없어서, var만 썼었는데 프로젝트를 진행하다보니 ES6를 사용해도 되는 환경이 되었다. ( 망할 놈의 익스.. ) 어쨌든, 오늘 변수 선언 방식 때문에 에러도 난 김에 정리해보고자 한다. var ============================================================================ 가장 많이 사용한 선언 방식이고, ES6로 넘어오면서 잘 사용하지 않게 된 녀석이다. 문제점이 없었으면 const나 let 형식이 나오지도 않았겠지? 그럼 한번 보자. 이미지를 보면 varTxt라는 녀석을 선언하고 그 뒤에 var..

article thumbnail
[JQuery] jqGrid : formatter 옵션을 사용해서 컬럼 data를 변경해보자.
FrontEnd/JavaScript 2022. 2. 16. 12:53

내가 진행했던 프로젝트에서는 제이쿼리에서 지원하는 플러그인인 jqGrid를 사용했다. 물론 지금도 그때 뭐 데이터가 null인 녀석이 있다면 그리드 자체에서도 'null' 이라는 문자열이 떴고, 고객쪽에서 이거 보기 안좋다. null인 녀석들은 그냥 아무것도 표기 되지 않게 해달라 라는 요청이 있었다. jqGrid에서는 목록으로 만들 데이터를 model에 넣어서 목록으로 뿌리는데, 그 안에서 for문처럼 데이터의 갯수, 행 만큼 돌고 돌아 그리드를 만드는 형식이다. jqGrid에 대한 자세한 설명은 다음에 설명하기로 하고, 오늘은 formatter 옵션에 대해서만 좀 알아보자. 대충 로직은 다음과 같다. ( 혹시 이해 안되면, 다음에 jqGrid에 대한 글을 써서 링크를 달아놓을테니 참고 바람.. ) m..

article thumbnail
[JS] ES6문법 : import와 export에 대해서 알아보자.
FrontEnd/JavaScript 2022. 2. 14. 20:56

보통 개발을 하다보면 외부라이브러리든, 직접 만든 라이브러리든 써야하는 경우가 생긴다. 보통 js파일을 가져올 때 아래와 같이 를 이용해서 가져오는 경우가 많았는데, 2015년 ES6가 공개되면서 ES6 문법인 import와 export를 이용해서 javascript를 모듈화 하는 일이 많아졌다. 지금까지는 나도 저렇게 사용했었는데, 이제는 import와 export를 사용해보려 하는 김에 정리해본다. ============================================================================ export란? 내가 만든 모듈의 함수, 변수, 객체... 여러 타입의 데이터를 다른 모듈에서 사용 할 수 있도록 내보내는 것을 의미한다. export의 형식으로는 크게..

728x90
반응형