WEB Dev/Javascript | REACT | Node.js(29)
-
[Javascript] fetch에서 HTTP 헤더 사용하기
최근 일하면서 fetch로 백엔드랑 API 통신할 일이 엄청 많아졌는데, fetch를 잘 모르고 통신하다보니 불필요하게 서버에 자주 요청을 보내는 일이 많아졌다 (테스트 하기 위해) 조금이나마 fetch를 알고 사용하기 위해 공부차 기록하기! fetch - 서버에 네트워크 요청을 보내고 정보를 받아오는 일을 한다. - fetch는 AJAX(Asynchronous Javascript And XML)이라는 기술로 서버에서 정보를 '비동기적'으로 가져올 수 있게 해주는 방식 - 페이지의 새로고침(유저 입장에서는 깜빡임) 없이 정보를 브라우저에 표시 - XMLHttpRequest라는 오래된 통신 방식에서 비롯되었다. - fetch는 모던 자바스크립트에서 지원되기 시작한 통신 메소드로 구식 브라우저에서는 폴리필을..
2022.11.12 -
[Javascript] DOM의 변화를 감시하는 MutationObserver 사용하기
리액트에서는 useEffect처럼 DOM의 변화를 인식해서 재렌더링을 해주는 기능이 있지만 바닐라 자바스크립트에서는 누가 데이터의 변화를 감지하고 있지 않기 때문에 여러가지 방법으로 DOM에 변화를 일으켜줘야 한다. 그럴때 사용하는게 바로 Observer 기능인데 이번에는 회사에서 일을 하면서 Observer을 이용해서 여러가지 기능을 만들게 되었다. Observer에는 InterSectionObserver와 MutationObserver 두 가지가 있는데 자세한 설명은 링크한 MDN을 살펴보면 된다. InterSectionObserver는 무한 스크롤을 만드는데 사용했는데 MutationObserver로 어떤 Node가 추가되었을 때 다른 Node의 변화를 주는 기능을 구현하여 간단하게 정리해보려고 한..
2022.10.28 -
[React] Recoil 내 Selector 간략 정리
REACT Recoil Selector 공식문서 정의 셀렉터Selector는 아톰atom이나 다른 셀렉터Selector를 입력으로 받아들이는 순수함수다. "A Selector represents a piece of derived state." 셀렉터는 파생된 스테이트derived state의 일부를 저장한다. *순수함수 부수적인 효과가 없는 함수. 즉, 똑같은 입력 값에 대해 항상 똑같은 출력값을 돌려 주는 함수이다. 비동기 통신과 같은 처리는 아톰atom만을 이용해서 하기 어렵다. (별도의 함수에서 비동기 통신으로 data를 받아 atom에 저장해 주어야 한다.) 이런 번거로운 처리를 셀렉터Selector로 한 번에 처리할 수 있다. 셀렉터Selector의 특징 - selector는 read-only ..
2022.07.31 -
[Javascript] 반복문으로 배열 만들고 안에 중복 없애기 (new Set)
카페24 카테고리를 만드려면 아래와 같은 ajax 코드를 사용해야 한다. /** * 카테고리 마우스 오버 이미지 * 카테고리 서브 메뉴 출력 */ $(function(){ var methods = { aCategory : [], aSubCategory : {}, get: function() { $.ajax({ url : '/exec/front/Product/SubCategory', dataType: 'json', success: function(aData) { if (aData == null || aData == 'undefined') return; for (var i=0; i response.json()) .then((data) => { if (data === null || data === 'undef..
2022.06.26 -
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 3
이제 드래그는 되도록 만들었으니 드랍했을때 상태를 고정하는 함수를 만들어야 한다. 우리는 함수를 통해 정보를 전달해야하기는 하나 우선 화면을 바꾸는데 집중해서 함수를 만들어야 한다. 현재 적용하고 있는 함수는 onDragEnd 함수 하나밖에 없다. onDragEnd의 인자로 어떤 것이 전달되는지 확인해보면 아래와 같다. const onDragEnd = (res) => { console.log("목표 드래그") console.log("res", res) } 우선 목표 드래그의 onDragEnd 함수에 res 라는 인자를 전달하고 console.log로 찍어볼 수 있도록 했다. 그랬더니 우리가 이전에 지정한 draggableId를 포함해 combine, destination, draggableId, mode..
2022.04.05 -
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 2
Goal 컴포넌트를 드래그 할 수 있도록 만들었다. 이제 그 내부의 Todo 부분을 드래그 할 수 있도록 해야하는데 내부도 Droppable 영역으로 지정해야 하기 때문에 Droppable 태그를 넣어준다. 위와 같은 순서가 될 것이다. 이번에 리턴해 줄 Todo 는 Goal 안에서 map으로 돌고 있는 컴포넌트다. 아래와 같이 생겼다. return ( {/* Goal 컴포넌트 시작 */} {data.goalTitle} {/* Goal 컴포넌트 종료 */} {/* Todo 컴포넌트 map 시작 */} {data.todos.map((data, idx) => { return ( ); })} {/* Todo 컴포넌트 map 종료 */} ); 현재 Goal 컴포넌트가 드래그 되고 있고 이번에는 이 내부의 Tod..
2022.04.04