본문 바로가기
반응형

Archive188

Redux Toolkit 으로 코드량 줄이기 Redux의 단점 코드가 길다는 것입니다. 리덕스의 원리는 그림과 같이 Action -> Reducer -> store 의과정을 거칩니다. 하지만 이를 구현하기위해서 이전 포스팅에서와같이 많은 양의 코드가 필요했는데, redux toolkit은 이를 확연하게 줄여줍니다. createAction // export const ADD = "ADD"; // export const REMOVE = "REMOVE"; // export const AaddTodo = (text) => ({ type: ADD, text: text }); // export const AremoveTodo = (id) => ({ type: REMOVE, id: id }); import {createAction} from '@reduxjs/.. 2022. 1. 26.
React에서 순수 Redux의 사용과 개념+원리 Redux는 왜 사용하는가? 일반적인 Vanilla Javascript에서는 크게 Redux의 필요성을 못느꼈을 수 있을것입니다. 하지만 리액트를 어느정도 사용해본 사람이라면 컴포넌트간에 state를 props를 통해서 전달하는 것이 익숙할 겁니다. 하지만 App이라는 root 컴포넌트에서 자식컴포넌트들이 10개, 20개만 되어도, state를 한번공유하는것이 번거로워집니다. 리액트는 중요한 state나 로직은 최상위 컴포넌트에서 가지고있고, 하위컴포넌트들은 간단히 props를 받아 display하는것으로 가볍게 동작하는것이 이상적이니깐요 이때 리덕스를 사용하는겁니다. 리액트에선 흔히 depth라고 하는, 컴포넌트의 자식의 자식의 자식.... 에게 도달하기위한 깊이가 생기는데, 그러기위해서 수많은 컴포넌.. 2022. 1. 26.
Vanilla Javascript Redux 사용해보기 와 핵심개념 리덕스에 대한 오해 Redux는 React만을 위한 툴이 아닙니다. 저도 한때는 리액트를 위한 상태관리 라이브러리로 알고있었는데, 필요한 패키지들을 보면 redux, react-redux 이렇게 두가지이상을 설치하는것이 보일겁니다. 이때 redux를 그냥쓸수있는건가? 라는 생각이들었고, 공부하다보니 리덕스는 자바스크립트를 위한 툴이었습니다. 사실 react를 위한 툴이라고생각하는 이유는(vue..등 다른 라이브러리,프레임워크 포함), SPA로 설계하지 않은 웹 사이트는 javascript를 모듈화하지 않고 사용하기 때문이 아닌가라는 생각이 듭니다. 굳이 필요성을 못느낀 것이죠. 하지만 뭐든지 배울땐 최소한의 조건, getting started부터 배워야한다 생각합니다. Vanilla JS 부터 React.. 2022. 1. 26.
React + Youtube API Youtube Clone 코딩 프로젝트 완성본 사용한 기술 스택 React Youtube API postCSS gh-pages 프로젝트 설명 간단히 youtube API 만을 가지고 메인화면에서는 가장 인기있는 한국지역영상 25개를 가져와 display하고 검색을 통해 최대 50개의 영상을 가져와서 영상 리스트를 update 합니다. 모바일,태블릿,pc 환경에 맞춰 반응형 디자인을 해보았습니다. 유튜브처럼 많은 목록을 나열하기에는 grid 레이아웃이 간편하고 좋았고, 상단에 navBar, 영상을 선택했을시 iframe player 이 추가되는데, 이때는 크게 3개의 컴포넌트를 flex로 적용하여서 flex-direction을 바꾸어주며 모바일에 대응했습니다. 상단의 navBar 와 iframe player는 fixed 속성을 주어 .. 2022. 1. 19.
React +Firebase로 Twitter clone 만들기 프로젝트 설명 - 트위터 클론코딩입니다 - 구글 및 이메일(인증필요x) 로그인 후 이름 설정 후 실시간 트윗가능(자동로그인) - 본인 작성 트윗은 수정 및 삭제가능 - 프로필에서 이름변경 및 자신의 트윗 모두 보기 완성본 사용한 기술 스택 React Firebase 중점 초점은 무엇이엇는가? FIrebase Auth, Firestore실시간연동 사용해보기 serverless 프로젝트 배포해보기 디자인 신경쓰기 이프로젝트를 왜했는가? 웹 공부를 한지가 1년이 넘어가는 시점에서, 수많은 반복을 통해서 실제로 외주업무도 해쳐낼 수 있을만큼 성장했고, 학교 수업시간에 잠시했었던 java를 javascript언어에 대한 이해도만을 의지하여 이번달에 온전한 앱을 만들어 출시했습니다. 스스로에게도 대견하다고 생각했.. 2022. 1. 17.
Webpack+SCSS 를 활용한 Momentum clone 앱만들어보기 완성된 화면 앱설명 : 사용자는 이름을 입력하여 로그인하고, todolist를 localStorage에 저장하여 사용하고, 자신의 현재 위치의 날씨를 알수있는 웹앱 이 프로젝트를 통해 얻고자 했던 것 직접 작성한 webpack을 사용해보기 vscode extention으로 쓰던 scss compile 을 webpack으로 처리해보기 functional programming + pure function 사용 지향해보기 사용한 기술 스택 "dependencies": { "css-loader": "^6.5.1", "node-sass": "^7.0.1", "sass-loader": "^12.4.0", "style-loader": "^3.3.1", "webpack": "^5.66.0", "webpack-cli":.. 2022. 1. 17.
반응형

티스토리툴바