전체 글 검색 결과
157 개의 검색 결과가 있습니다.
Self-Study/React

[React] Redux Vs. Recoil

References https://recoiljs.org/ko/ https://velog.io/@katanazero86/redux-recoil-내용-정리 Recoil이란? React 기반 전역 상태관리 라이브러리로 기존 Context API의 기능적 한계를 보완하기 위한 목적으로 생겼다. Recoil과 Redux의 차이점 Redux Redux의 경우 Flux 아키텍쳐 기반으로 데이터 흐름을 가진다. 가장 먼저 Type과 Payload를 가진 Action을 생성하여 이를 Dispatcher에게 전달하고 여러 Action들의 상태 값을 가진 Store에게 전달한 뒤, Store 내부의 상태 값이 변경되면 View 단에게 업데이트 상황을 알려주어 이를 리 렌더링하는 구조를 가진다. 따라서, 중앙 집중식으로 S..

2022. 12. 8. 13:20
Self-Study/계란으로 바위치기

[Javascript] Base64 이미지 최적화

References https://ko.wikipedia.org/wiki/베이스64 https://blue-boy.tistory.com/227 https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f/38935990 서론 💡 핵심만 보고 싶으신 분은 하단의 “그래서 어떻게 최적화 할 것인가?” 파트만 보시면 됩니다. 글과 사진을 다채롭게 표현 하고자 할 때 위지윅(WYSIWYG, What You See Is What You Get) 기능이 담긴 텍스트 에디터가 필요한 순간이 있다. 그러나 어느 순간 이미지와 같은 데이터가 포함 된 글을 포..

2022. 12. 1. 19:46
Self-Study/계란으로 바위치기

[React] Next.js 레이아웃 설정

References https://logfetch.com/nextjs-multiple-layouts/ 개요 Next.js의 경우 기존 React와 달리 별다른 라우터 사전 설정이 필요 없는 장점이 있다. 그로 인해, 레이아웃을 설정하는 방법이 달라지는데 어떻게 해야 하는지 알아보자. 레이아웃 기본 설정 레이아웃 파일 만들기 레이아웃 파일을 생성한 뒤 다음과 같이 구현한다. /** DefaultLayout.js */ /** 레이아웃 파일 명칭은 자유! */ import { NavigationBar } from '../components/Header/NavigationBar'; import { Footer } from '../components/Footer/Footer'; // children : 해당 레이..

2022. 10. 19. 23:14
Self-Study/React

[React] React의 라이프사이클

References https://kyun2da.dev/react/리액트-라이프사이클의-이해/ https://velog.io/@minbr0ther/React.js-리액트-라이프사이클life-cycle-순서-역할 https://react.vlpt.us/basic 서론 React에서 데이터가 업데이트 되는 상황은 기본적으로 4가지이다. props가 바뀌는 경우 state가 바뀌는 경우 부모 Component가 다시 렌더링 되는 경우 Force Update 기능으로 인해 강제로 다시 렌더링 되는 경우 이러한 이벤트를 원활하게 처리하기 위해선 라이프사이클(Life-Cycle)이 필요한데 React에서는 어떤 방식으로 흘러가는지 기술한다. React의 라이프사이클 (Hooks) React의 라이프사이클은 크게 M..

2022. 10. 13. 15:19
Self-Study/Javascript

[Javascript] 데이터 바인딩의 이해

References https://sungjk.github.io/2015/11/22/AngularJS(2).html https://velog.io/@sunaaank/data-binding https://medium.datadriveninvestor.com/implementing-two-way-data-binding-without-using-any-framework-703963d00a94 데이터 바인딩이란? 데이터 바인딩(Data Binding)은 제공자(개발자)와 사용자가 접하는 데이터를 동일하게 묶는 기법으로, 자바스크립트 상에서 선언 및 반환한 데이터를 HTML 상에서도 동일하게 보일 수 있게 끔 하는 것이다. ... 변경 전 데이터 바인딩의 종류 단방향 데이터 바인딩 사용자의 입력에 따른 변경 이벤..

2022. 10. 13. 15:16