Front-End Dev.
-
[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..
-
[CodeKata] 위클리 프로그래머스(2월 3주차)Algorithm 2021. 2. 15. 15:22
🥋 Ooooth!! (Level 2) 코드카타에 들이는 시간이 많아졌지만, 그만큼 풀었을 때 쾌감도 정말 짜릿하다! 당분간 3차 프로젝트를 위한 공부의 기간이기 떄문에, 바이오리듬 유지하면서 오전에 알고리즘에 몰두하도록 해야겠다. 👊 2.15(월) / 멀쩡한 사각형 📜 문제 🧮 풀이 풀이를 설계하는 과정을 먼저 설명해야 코드풀이가 가능할 것 같다. 위 예시는, 8 * 12 박스의 대각선 경우이다. 대각선은 2 * 3 박스를 기준으로 총 4회 반복되었다. 이 4의 의미를 고민했고, 이것이 너비(8)와 높이(12)의 최대공약수 임을 확인했다. (다른 경우로, 5 * 3 이라면 1이 되야겠다.) 대각선 최소단위(너비, 높이를 최대공약수로 나눈)에서 빠진 박스 개수를, 최대공약수 만큼 곱해주면 전체 빠진 박스개..
-
[Express.js] 미들웨어(Middleware)Back-End/Express.js 2021. 2. 15. 01:17
마지막으로, Express의 기본개념인 미들웨어에 대해 공부한 내용을 정리하려고 한다. 프로젝트 서버를 구축하기 위해 Express를 공부하면서, 미들웨어라는 단어를 접할수록 혼란스러웠다. Router에서 app.use() 내 함수도 미들웨어, body-parser 나 cors 들도 미들웨어(Third-Party) 라고 명명하는 것이었다. 애써 무시하고 기능들을 구현했었지만, Express 기본학습을 마무리하기 전에 미들웨어의 개념을 한 번 정리할 필요성을 느꼈다. 📗 미들웨어(Middleware) 란? Express 공식문서에서는 미들웨어를 아래와 같이 정의한다. Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어..
-
[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] CORS(Cross-Origin Resource Sharing)Back-End/Express.js 2021. 2. 13. 00:46
😵 서론 2차 프로젝트 중반부, 로그인/회원가입 모달창도 만들고 Express도 어느정도 공부해서 로컬서버를 구축했다. 드디어, 프론트와 백을 연결한다는 기대감에 차있던 순간! 아래와 같은 에러창과의 첫만남을 가졌다~ 🚨 Access to fetch at ‘http://localhost:5000/users/signin’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-..