Front-End(Web)
-
[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..
-
[Javascript] 비동기 - #2. PromiseFront-End(Web)/Javascript 2021. 2. 1. 19:30
나도 그렇고, fetch()-then 이나 async/await 을 사용하면 최초에 Promise 라는 결과값이 반환되는 것을 볼 수 있었을 것이다. 또한, 자세히 보면 이 Promise는 객체(Object) 형태를 하고 있으며, 아래와 같이 어떠한 값들을 포함하고 있었다. 이 Promise는 저번에 알아본 콜백지옥을 대체한다고 했는데, 이에 대해 좀 더 자세히 공부해보았다. 📒 Promise 란? - Promise가 필요한 이유 1) 콜백지옥 저번 비동기 시간에 얘기한 콜백지옥이다. 보시다시피 가독성도 나쁠 뿐더러, 에러 발생 가능성이 높기 때문에 대안이 필요했던 것이다. 2) 에러 처리의 한계 try { setTimeout(() => { throw new Error('Error!'); }, 1000)..
-
[Javascript] 비동기 - #1. 비동기 개념과 Callback FunctionFront-End(Web)/Javascript 2021. 1. 30. 07:37
Javascript 메서드를 사용하면 인자로 받는 함수를 '콜백함수' 라고 명명하는 것을 보았을 것이다. React 작업을 하면서, fetch() 함수의 .then 혹은 async/await 등 '비동기 프로그래밍'을 자주 적용했다. 위 내용들 모두, 해당 코드를 진행함과 동시에 다음 코드로 넘어가기 위한 '비동기'의 목적이라 막연하게 알고 있었다. (컴퓨터 언어 특성상 코드는 위에서 아래로 순차적으로 실행되기 때문! - 싱글 스레드) 그렇지만, 그래서 비동기가 뭔데? 라는 질문에 저 이상으로 답을 할 수 없었고, 이번 기회에 Javascript의 비동기 관련된 동작원리를 시리즈로 정리하면서 공부하고자 포스팅을 시작하였다. 📒 비동기(Asynchronous) vs 동기(Synchronous) - 동기(S..
-
[CSS/Side Lib.] Styled ComponentsFront-End(Web)/HTML, CSS 2021. 1. 24. 21:53
2차 개인 프로젝트에서 디자인을 위해 Sass(SCSS) 외에 다른 라이브러리를 사용하려고 한다. 바로 'Styled-Components'!! 초기 세팅에 앞서, Styled-Components 개념공부, 설치 및 사용법을 간단히 학습하고자 포스팅을 시작했다.🧐🧐 📘 CSS-in-JS 란? Styled-Components 는 스타일을 가진 컴포넌트를 만들도록 도와주는 React의 대표적인 CSS-in-JS 라이브러리이다. CSS-in-JS 의 개념을 먼저 정리한다면, 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹 개발은 HTML - CSS - JS 각각 별도 파일로 분리하는 것이 기본적인 컨셉이었다. 하지만, React, Vue 등 모던..
-
[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 = []..
-
[CSS/Side Lib.] SASS, SCSSFront-End(Web)/HTML, CSS 2020. 12. 29. 15:40
오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다. 🧑💻 Session : Sass - Sass 란? Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다. Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss) 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다. 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다. * CSS 전처리기 3대장 :..
-
[React.js/Side Lib.] React-RouterFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 29. 00:52
미니 프로젝트에서 네비게이션 메뉴에 React-Router를 적용해서 페이지를 변경해보았다. 범용적인 라이브러리기에 기술 포스팅을 하였다. 🧑💻 Routing - SPA(Single Page Application) React-Router 에 대해 공부하기 전에, 그 사용목적에 대해 얘기하려면 SPA 방식의 학습이 선행되어야 한다. SPA는 말 그대로, 페이지가 1개인 어플리케이션을 의미한다. 여기에서 페이지라 함은 HTML 파일을 의미한다. 그래서, 리액트같은 라이브러리(혹은 프레임워크)가 브라우저에서 뷰 렌더링을 담당하게 하고, 필요한 데이터만 전달받아 표현하게 된다. 기존의 MPA 와 가장 큰 차이는, 각 주소가 HTML 페이지가 아닌 JS파일(컴포넌트)을 불러와서 뷰를 수정하는 'Routing' ..