본문 바로가기

장원익 기술블로그

📺 Front End71

[React-redux] 늘 그렇듯 Todo List 를 만들어보며 배우는 리액트 리덕스 오늘은 React 에서 Redux 를 사용하는 방법에 대해서 알아보도록 하겠다. 그러기 위해서는 우선 2가지 기술이 선행되어야 한다. React와 React-Hooks Redux 의 기본 Concept 위 내용들을 모른다면 조금 힘들어질 수 있으니 위 링크에서 확인하는 것도 좋은 방법인 것 같다. 목차 redux와 react-redux의 차이 redux 의 기본 개념 구성 요소 Provider useDispatch() useSelector() react-redux 로 todo list 만들기 프로젝트 만들기 의존성 추가 styled-components react-redux UI 작업하기 홈 화면 만들기 리덕스 작업하기 action type 만들기 action creator 만들기 reducer 만들기 s.. 2021. 6. 10.

[Javascript] Fetch API로 구현하는 Ajax 비동기 통신 ajax XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주는 프로그래밍 기법 Asynchronouse JavaScript XML 현재 XML을 사용하는건 드물고 JSON을 사용 페이지 새로고침 없이 특정 데이터만 리로드 서버로부터 데이터를 받고 작업을 수행 ajax 구현하기 ajax를 구현하는 기술에는 여러 기술이 존재한다. 그 중에 대표적인 3가지에서 Fetch API에 대해서 알아보자. XMLHttpRequest Fetch API JQuery Fetch API Fetch API는 기본적으로 XMLHttpRequest 보다 더 강력하고 유연하다. 이벤트 기반인 XMLHttpRequest과는 달리 Fetch API는 Promise 기.. 2021. 2. 26.

[Javascript] 자바스크립트에서 HTML Element의 이벤트를 다루는 방법 이번 시간은 자바스크립트에서 HTML 요소의 이벤트를 다루는 방법과 Todolist를 만들어보며 학습하는 시간을 갖도록 하겠다. 학습 순서 이벤트 객체란? 이벤트 등록, 삭제하기 addEventListener() removeEventListner() 지금까지 배운 내용으로 Todo 리스트 만들어보기 이벤트 등록, 삭제하기 우리는 지난 시간 까지 HTML Element를 등록, 수정, 삭제하는 방법에 대해 학습하였다. 이번 시간에는 우리가 지난번에 만든 Element에 이벤트들 등록시켜보는 일을 할 것이다. 이벤트 등록하기 이벤트를 등록하기 위해서는 addEventListener() 메서드를 사용한다. target.addEventListener(type, listener, useCapture); targe.. 2021. 2. 20.

[Javascript] 자바스크립트에서 HTML DOM을 다루는 방법 오늘은 JS 에서 HTML DOM 객체를 가져와 조작하는 방법에 대해서 알아볼 것이다. 오늘 배울 내용들이 모든 상황에서 사용되는 것은 아니고 대충 JS 에서도 이렇게 할 수 있구나 하는 생각이 목적이다. 더 자세한 내용은 많이 있으니 이번 글을 보고 방향을 잡아가길 바란다. 학습 순서 엘리먼트 가져오기 getElementById() getElementByName() getElementByClassName() getElementByTagName() 엘리먼트에 원하는 텍스트 추가하기 innerHTML innerText 엘리먼트 생성, 삭제, 수정하기 createElement() appendChild() removeChild() 엘리먼트 가져오기 HTML 요소 (Elements)를 제어하려면 우선 HTML .. 2021. 2. 20.

[Javascript] 자바스크립트에서 JSON 을 다루는 방법 JSON Json 은 JavaScript Object Notation 이라는 의미의 축약어로 데이터를 전송하거나 저장할 때 사용되는 경량 데이터 형식이다. 보통 JSON을 REST API 통신할 때 주고받는 Request, Response Body 에 사용한다. 즉 서버와 클라이언트간의 교류에서 많이 사용된다. 클라이언트는 서버에게 처리해야할 내용을 JSON 데이터로 변환하고 전송한다. 그럼 서버는 클라이언트로부터 온 JSON 데이터를 서버의 스펙에 맞게 재변환한다. 여기서 말 하는 서버의 서펙이란 Java로 구성된 서버인지, Python으로 구성된 서버인지를 뜻한다. 원래 JSON이라는 것은 JavaScript에서 탄생한 형식이라 Js의 객체와 매우 비슷하다. Javascript Object VS JS.. 2021. 2. 20.

[Next.js] Next.js 프로젝트에서 Storybook으로 TDD 하기 (Feat. Atomic Design Pattern) Storybook이란? Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구이다. React나 Vue를 비롯한 컴포넌트 기반 UI 라이브러리들이 많아진 현대의 웹 Front개발 생태계에서는 컴포넌트 하나 하나의 역할이 매우 중요해졌다. 여기서 컴포넌트는 외부에 영향을 받지 않게 Isolated 되어야 한다. 그러기 위해서 Atomic Design Pattern이라는 것이 등장하였고 그에 따라서 UI 자체의 렌더링에도 테스트를 신경쓸 수 있게 되었다. Storybook은 사실 테스트에만 국한된 라이브러리는 아니고 개발과 이해관계자들 사이에서의 소통과 Docs 및 Props Test를 진행해주는 컴포넌트 기반 오픈 소스 라이브러리이다. 우리는 이 Storybook을 통해서 TDD를 진.. 2021. 1. 18.

이전 1 2 3 4 ··· 12 다음

티스토리툴바