Front-End
-
[Redux] React-ReduxFront-End(Web)/React - 라이브러리들 2021. 2. 16. 18:58
이전 포스팅에서 React+Redux 조합을 했듯이, Container 와 Presentational 기능분리의 번거로움이 있었다. 아마, 이를 Context API의 Provider, Consumer 개념처럼 Global State를 공급하는 역할을 이 react-redux가 해줄 것 같다. 💜 React? Redux? React-Redux? React는 자바스크립트 기반 SPA 라이브러리, Redux는 React 뿐만 아니라 JS환경의 상태관리를 개선하기 위해 등장한 라이브러리다. 그렇다면, React 프로젝트 시 설치하는 Redux 말고, React-Redux 라이브러리의 의의는 무엇일까? - 의의 Redux 자체는 React, Angular, Vue 및 vanila JS 를 포함한 모든 UI 레이..
-
[Redux] React + Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 16. 16:16
이번엔, React 컴포넌트와 Redux의 조합을 공부하려고 한다. (생활코딩 react-redux 과제와 함께) Global State를 Redux 문법을 통해서 다루는 것 뿐만 아니라, 디렉토리와 파일구조(store, reducer 등)를 배우는 것에도 중점을 둬야겠다. 💜 React Without Redux 💀 이번엔, 아래와 같이 숫자를 수정하고 표시하는데 있어 각각 두 번의 Depth를 거치는 컴포넌트를 React로 만들었다. // 1. AddNumber.js const AddNumber = ({ plusNum }) => { const [size, setSize] = useState(1); return ( Add Number { setSize(Number(e.target.value)); }} /..
-
[Redux] 순수 Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 15. 23:05
🧐 서론 앞서 Redux는 리액트뿐만 아니라 모든 환경에서 (심지어 vanila JS에서도) 사용가능한 상태관리 툴이라고 했다. 먼저, Redux의 기본개념들과 활용법을 HTML scriipt 환경에 적용하면서 공부해보고, 추후 react-redux 를 활용해 리액트에서의 활용법을 공부하려고 한다. 💜 Without Redux 💀 이처럼, 버튼을 누르면 박스들의 색깔이 바뀌는 앱을 만든다고 가정하자. 이처럼, 색깔(박스)들이 추가될 때 마다 색깔함수와, 모든 함수의 onclick 인자로 각각 추가를 해줘야한다. 지금은 HTML 안에 모두 들어있지만, 박스 하나하나가 컴포넌트라면 그만큼 수정소요와 props Drilling 추가가 필요할 것이다. 💜 With Redux 😍 - 설치 우선, Redux 라이브..
-
[Redux] Redux 기본개념Front-End(Web)/React - 라이브러리들 2021. 2. 15. 17:36
🧐 서론 드디어, React 세계에서 한 걸음(어떻게 보면 큰 보폭)을 내딛는 리덕스를 공부하기 시작했다! 중앙 상태관리를 통해 props Drilling의 복잡성을 줄이기 위한 라이브러리 라는 정도로만 알고 있었다. 물론 현재는, Context API 나 함수형의 useContext, useReducer Hooks 들로 일부 대체가 가능하고, graphQL, Apollo 와 같은 차선책들이 등장하고 있다고 알고 있다. 하지만, 상태관리의 '근본'이자 그만큼 아직까지도 많은 기업에서 사용중인 Redux를 공부해보고 다음 프로젝트에 적용시키면서, 상태관리 학습을 위한 기반을 다지고자 한다!! 💜 Redux(리덕스) 란? Redux is a predictable state container for JavaS..
-
[Javascript] 비동기 - #3. Async & AwaitFront-End(Web)/Javascript 2021. 2. 14. 19:09
프로젝트를 마무리하고, 이제서야 비동기 3탄이자 꽃인 async/await 에 대해 포스팅을 한다. async/await 은 JS의 비동기 처리를 개선하기 위해(콜백지옥), Promise 처럼 ES6 이후 문법에서 등장했으며 가장 최신의 문법이다. Promise를 다루는 .then() 에 비해 어떠한 점이 더 나아진건지 한 번 확인해보도록 하겠다! 📒 Async & Await 해당 함수를 비동기로 실행하기 위해 사용되는 함수가 바로 이 'Async Function' 이다. 당연히, 결과값은 Promise를 반환한다. Async Function의 장점 중 하나는, 코드의 구조가 일반 동기함수와 매우 유사하게 사용할 수 있다는 것이다. // Promise const getItem = () => { fetch..
-
[Express.js] Query String, Semantic URLBack-End/Express.js 2021. 2. 7. 04:56
😲 서론 이전에, 동적 라우팅에 대해서 공부한 적이 있다. 그 때, fetch() 를 하는 URL에 추가적으로 내용을 첨부했던 것 같았다. 또, Pagination 을 2차원 배열로 받으려고 했는데, 이때도 URL에 파라미터를 추가함으로서 필요한 길이만 가져올 수 있었다. 이번 내 프로젝트에서도, Pagination부터 Searching, Filtering 구현을 위해 URL에 갖가지 조건을 추가해야 한다. 이를, 좀 더 개발자스러운 용어들로 정립하고, Express에서 어떻게 이 구문들을 인식할 수 있는지 알아보았다. 📗 Query String 0. URL의 구성요소 쿼리스트링 공부에 앞서, 우리가 작성할 URL의 기본적인 구성에 대해 알 필요가 있다. (출처: victorydntmd.tistory.c..
-
[Javascript] 2차원 배열 만들기(Array.from())Front-End(Web)/Javascript 2021. 1. 3. 16:56
미니 프로젝트를 진행하며, 100개의 정보를 10개씩 2차원 배열의 형태로 가공해야하는 문제가 있었다. 물론 이중 for문을 돌리면 심플하게 구현할 순 있지만, state로 활용했을 때 [] => 2차원 배열 업로드 전 초기화에서 문제가 있었다. (0번째 인덱스 배열을 초기값으로 쓰려고 했으나, default는 [] 1차원 배열이기에 에러 처리가 되었다.) 정답과 비교해보니, Array.from() 이라는 메서드를 활용하기도 해서 2차원 배열에 대한 고찰을 적어내려 가보고자 한다. 🧑💻 2차원 배열 만들기 1. 2중 for문 : 가장 직시적인 형태, row 및 columns 길이만큼 각각 반복하며 요소들을 push 한다. function get2DArray(r, c) { const result = []..
-
[Day 13] UX(User Experience), React(State, Props)카테고리 없음 2020. 12. 31. 12:11
🤔 서론 오늘은 세션들과 시험이 많이 구성되어 있지만, UX와 더불어 React의 핵심이라 할 수 있는 State, Props 세션에선 특히 집중해야겠다. 🥋 CodeKata : Day 03 3주차 코드카타 리뷰 : abangpa1ace.tistory.com/47 [CodeKata] wecode 3주차 코드카타 🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 abangpa1ace.tistory.com 🧑💻 Session : UX와 웹 개발 1. 웹사이트의 발전 정보량 과다, 문서 이상의 매체 다양한 디바이스들의 등장 복잡해진 화면, 정보를 보다 빠..