본문 바로가기

분류 전체보기

 (65)
Axios 📌 Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 📌 Axios의 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 📌 Axios 설치하기 > npm install axios 📌 Axios의 문법 구성 axios({ url: 'https://test/api/cafe/list/today', // 통신할 웹문서 method: 'get', // 통신할 방식 data: { // 인자로..
JSON 📌 JSON이란? JavaScript Object Notation 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식을 의미한다. 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. 자바스크립트 객체 형태와 완전히 같진 않다. 작은 따옴표'' 가 아닌 ""만 허용된다. 📌 메서드 1. JS 객체를 JSON 형태로 전송 2. JSON 형태를 JS 객체 형태로 사용 stringify() : 스트링화시킨다. 자바스크립트 객체를 문자열로 바꾼다. console.log(JSON.stringify({ x: 5, y: 6 })); // Expected output: "{"x":5..
React_action creators, action values Refactoring - Action createors와 Action values로 기존 Redux 프로젝트를 재구성 할 수 있다. 📌 Action Creator 란? 액션 객체를 한 곳에서 관리할 수 있도록 "함수"와 액션 value를 상수로 만든다. 액션을 만드는 생성자 counter.js // src/modules/counter.js // 추가된 코드 - 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다. const PLUS_ONE = "PLUS_ONE"; const MINUS_ONE = "MINUS_ONE"; // 추가된 코드 - Action Creator를 만들어 줍니다. export const plusOne = () => { return { type: PLUS_ONE,..
React_Life Cycle 📌 Life cycle React 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다. 📌 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장한다. 그 후에 componentWillMount 메소드를 호출하고, render로 컴포넌트를 DOM에 부착한 후 Mount가 완료되면 componentDidMount가 호출된다. 주의할 점 : componentWillMount에서는 props나 state를 바꾸면 안 된다. Mount 중이기 때문. 그리고 아직 DOM에 render하지 않..
React_useDispatch, useSelector 📌 리덕스의 흐름 UI : 컴포넌트 (App.jsx) UI에서 어떤 이벤트가 일어난다. (예를 들어 클릭 이벤트) 중앙 데이터 관리소(Store)에 있는 State 값을 바꿔야 한다 라는 요청이 들어온다. Dispatch가 요청을 수행해준다. action 객체를 가지고 store에 방문한다. 중앙 데이터 관리소에 action을 요청하는, action을 던져주는 놈이 Dispatch다. action은 type과 payload를 가지는 객체이다. store는 action객체에 있는 type에 따라 state를 변경해주는 작업을 한다. 📌 리듀서에게 보낼 명령 만들기 리듀서에서 내가 어떤 Action을 하길 원한다 라고 표현한다. 행동을 코드로 나타내면 객체로 만든다. = 액션 객체 액션 객체는 반드시 Typ..
React_counter 만들기 리덕스를 이용해 counter 프로그램을 만들어 보겠다. 📌 파일 구조 redux (리덕스 관련 코드) -modules (state의 그룹. ex : todos.js) -counter.js -config (리덕스 설정 관련 파일) -configStore.js (중앙 state 데이터 관리소 -> 설정 코드) 📌 counter.js //초기 상태값 const initialState = { number : 0 }; //useState로 아래처럼 작성할 경우 0에 해당하는 초기값이 위 initialState이다. //const [number, setNumber] = useNumber(0) //리듀서 : state에 변화를 일으키는 함수 //(1)state를 action의 type에 따라 변경하는 함수 // i..
React_redux 설정 📌 리덕스란? 중앙 state관리소를 사용할 수 있게 도와주는 패키지(라이브러리) 이다. 접근 및 제어를 할 수 있다. State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. 📌 리덕스 설치 yarn add redux react-redux 📌 파일 구조 redux (리덕스 관련 코드) -modules (state의 그룹. ex : todos.js) -config (리덕스 설정 관련 파일) -configStore.js (중앙 state 데이터 관리소 -> 설정 코드) 사용법만 숙지하자. 이해하려고 스트레스 받지 말자! 아래 기본적인 설정에 대해 설명한다. 📌 config..
React_State, Props React State 📌 State란? 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다. 📌 State를 변경하기 State 값을 변경하기 위해서는 반드시 setState 함수를 이용한다. setState 함수를 호출할 때 다시 렌더링 해달라는 명령을 내린다. const App = () => { const [value, setValue] = useState(초기값); return ~ } 📌 State를 변경하는 방법 // 1. setState 내에 변경할 값을 넣는다. con..
React _ ToDoList React _ 1주차 ToDoList Github : https://github.com/minnjeong/todo 코드를 작성 후 컴포넌트 분리에 대해 어려움을 겪었고, 기술매니저님께 이에 대한 질문을 했다. 질의응답 시간 후 리팩토링 한 코드를 작성해보겠다. 수정 전 Working.. 🔥 {todo .filter((todo) => todo.isDone === false) .map((todo) => { return ( ); })} Done..! 🎉 {todo .filter((todo) => todo.isDone === true) .map((todo) => { return ( ); })} 크게 보면 lists 아래에 완료 전 list, 완료 후 list 로 같은 내용이 반복되고 있다. 수정 후 app.js..
DOM과 Virtual DOM, props와 state React 1주차 학습 내용을 바탕으로 정리해본다. DOM이란? Document Object Mode 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. 웹 개발자가 javascript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 도움이 된다. DOM의 문제점 트리구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. // Simple getElementById() method document.getElementById('some-id').innerValue = 'updated value'; 위 코..

티스토리툴바