어쩌다 블로그

Toast UI Editor 이미지 업로드 샘플들을 깃허브 레파지토리에 올렸습니다. 올라온 질문들 구현소스도 있고, 깃허브로 공유하는 게 나을 것 같아서요. (그런데 버전 문제가 좀 있더라고요. 리액트버전 npm 버전 등... 난감했지만 리액트 버전 낮춰서 했는데 요즘 보통 리액트 버전 뭘쓰나요?) 백엔드는 따로 구현하지 않았는데 필요하신 분들 계시면 다듬어서 올려볼게요. (또 제가 백엔드 개발자거든요..소근소근ㅎ) https://github.com/gareen9342/TUIEditorSamples GitHub - gareen9342/TUIEditorSamples Contribute to gareen9342/TUIEditorSamples development by creating an account on..

코드를 최대한 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 만들게 해주는 기술들의 모음 개념 : 재사용을 원하는 어느 곳이든, 코드 충돌에 대한 걱정이 없는 캡슐화 된 기능을 갖춘 다용도의 커스텀 엘리먼트를 생성하기 위해 사용됨 커스텀 엘리먼트란 ? 커스텀 엘리먼트와 그 동작을 정의할 수 있도록 해주는 Javascript API의 집합. 세 가지 주요 기술로 구성된다 Custom Element : Custom element에 대한 정의는 DOM element의 새로운 타입을 사용하고 디자인하기 위한 토대를 마련한다. browser API 중에 customElements.define("HTML name", 정의될이름) 등을 사용하여 돔에 해당 엘리먼트를 붙이고 커스텀 할 수 있도록 해준다. 내부에는 라이프 ..

Toast UI Editor는 이미지 업로드 시 이미지가 base64의 형태로 자동 변환되어 업로드된다. base64는 엄청 긴 문자열이기 때문에 이를 데이터 베이스에 업로드시 여러분의 데이터 베이스는 살아남지 못할 것 그래서 이미지 업로드시 콜백 함수로 서버의 어떤 위치에 저장을 한 후에 해당 사진의 url을 리턴 값으로 받아서 에디터에 출력시켜주어야 한다. TUI Editor가 요즘 뜨는 신흥강자라고 해서 나도 이번 프로젝트에 적용하며 사용해보다가 저 부분을 개선하기 위해 인터넷을 서칭해보고 addImageBlobHook을 이용하면 된다는 걸 보고 적용하려 했는데 base64랑 url이 두 개 다 삽입이 되는 것이다...ㅠㅠㅠㅠ 개선하기 위해 해당 깃 헙의 이슈를 뒤졌는데 해결한 분이 있긴 했다. h..

Redux Middleware and Redux Thunk 리덕스의 미들웨어는 액션이 디스패치되어서 리듀서에서 이를 처리하기 전에 사용할 수 있는 것들을 사전에 설정해서 사용할 수 있게 해줍니다. applyMiddleware 를 이용해 등록하여 사용할 수 있습니다. 리덕스 미들웨어의 기본 템플릿 const middleware = (store) => (next) => (action) => { //do something }; 위의 템플릿은 하단의 예제와 같습니다 . 함수를 연달아 리턴해주는 함수를 화살표 함수로 나타낸 것입니다. function middleware(store) { return function (next) { return function (action) { // 하고 싶은 작업... }; };..

Constate Context를 사용하고 싶은데 다루어야 하는 상태가 많아진 상황에서 성능도 챙기고 개발도 편리하게 하고 싶을 때 Context는 리덕스보다 쓰기 쉽다는 장점이 있지만 Context 상태 중 의존하지 않는 다른 값이 바뀌게 될 때에도 컴포넌트가 렌더링 된다는 단점이 있었음 그렇기 떄문에 ContextAPI를 이용할 때 Context 를 구독하는 값마다 적절히 쪼개줘야하는 작업이 필요했다. constate 함수에 넣는 selector들을 기반으로 Context들이 자동으로 만들어지고 Context를 사용하는 Hook도 자동으로 만들어진다. useState, useReducer를 그냥 사용하면 되기 때문에 추가적으로 배울 것이 없다. 사용법 npm install constate constat..

01. API Fetching & Context API 데이터 패칭시 Reducer 와 Context를 함께 써보자 데이터 패칭 시 Reducer와 Context를 함께 쓰면 더 좋을 때가 있다. 외부 데이터들 같은 경우는 그 때 그 때 외부 API를 요청하면 되지만, 사이트 전역적으로 쓰일 데이터 ( 예를 들면 유저 데이터) 와 같은 것들은 Context와 함께 연동해서 쓰면 더욱 좋다. Context 코드를 따로 분리하여 Provider, State, dispatch를 가져다 쓸 수 있는 함수와 Reducer함수, state등을 따로 분리한다. UsersContext.js → getUsers, getUser ( data fetching ) → reducer, initial state, loading ..

CSS Module CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 CSS Module을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 안하도 되게 합니다. 기본적으로 css파일을 만들 때 [컴포넌트 이름].module.css 라는 네이밍 컨벤션을 갖습니다. 사용하기 위해선 webpack에서 사용하는 css-loader 가 필요합니다. CRA로 만든 프로젝트에서는 자동으로 세팅이 되어있어서 자유롭게 가져다 쓸 수 있습니다. 사용법 먼저 [컴포넌트 이름].module.css 라는 이름의 css 를 만들어 줍니다. 컴포넌트 상단에 해당 css를 import ..

Context API 란? React 애플리케이션에서 명시적인 부모-자식간의 Props 전달 과정 없이 어떤 트리의 컴포넌트 에서든 이 값을 공유해서 쓸 수 있도록 해주는 API 언제, 왜 쓰는 걸까 값을 Root ⇒ A ⇒ B ⇒ F 이렇게 내려주는 과정이 실제 프로젝트에서는 상당히 많이 필요한 과정. ( 전역적으로 다루는 css테마, 유저 정보, 언어정보 등...) 실제 프로젝트에서는 컴포넌트의 깊이가 굉장히 깊을 수도 있고, 다루게 되는 데이터들도 훨씬 많아질 수도 있어 유지보수성을 고려하여 전역으로 사용할 수 있는 값들을 저장하기 위해 만들어진 API입니다. 원래는 Redux, MobX와 같은 라이브러리를 사용하게 됬었는데 현재는 ContextAPI를 이용하여 글로벌 상태 관리를 쉽게 가능하게 합..

useCallback useCallback 이란? useCallback이란 리렌더링이 될 시에 콜백함수도 불필요하게 다시 만들어지는 상황을 방지하여 성능 최적화를 하기 위해서 생긴 hook입니다. useMemo 와 같이 이전에 만들어진 값을 재사용하기 위해 메모이제이션을 하여 이전에 만들어 놓은 콜백함수를 그대로 재사용합니다. (정확히는 값이 아닌 함수를 재사용한다.) useCallback을 사용하게 될 경우에 함수 재생성을 방지할 수는 있지만 이용하고 있는 state값이나 props값이 있을 경우 그 값이 변경되었을 시에 함수를 재생성하기 위해 의존성 배열 (deps) 내부에 값을 넣어 줘야 합니다. useCallback의 기본적인 형태는 이렇습니다. const memoizedCallback = use..

List and Key React의 List 렌더링은 어떻게 이루어질까? (map 메서드) React에서의 List의 렌더링은 Javascript의 map 메서드를 이용하여 이루어집니다. map 함수는 배열의 각 요소를 하나씩 일대일 연산을 통해 새로운 배열로 리턴하게 되는 함수인데요. 이를 이용해서 React는 배열값을 순회하며 React Element 리스트로 리턴하게 됩니다. 리스트를 view 로 렌더링 한다는 것은 결국 반복되는 데이터를 프로그래밍적으로 하나씩 가져와 데이터 만큼의 UI를 생성(리턴)하기에 리액트에서 map 함수를 쓰는 것이 의미가 잘 맞는다고 할 수 있겠습니다. Array.prototype.map() - JavaScript | MDN 여러 개의 컴포넌트 렌더링 하기 예시로 리액트..