React
-
Redux Thunk & SagaIT 지식 2021. 11. 23. 10:34
프론트엔드 개발을 React로 하다보면 다양한 이유로 Redux를 만나게 되고 활용하게 됩니다. 그리고 Redux를 접해서 사용하다보면 자연스레 Redux Thunk와 Redux Saga 역시 접하게 됩니다. 이 두 리덕스 미들웨어들은 프로젝트에서 비동기처리를 담당하는 역할을 하는 걸로 알려져 있습니다. 비슷하게 비동기 로직을 처리하는 이 도구들은 어떤 차이점이 있길래 서로 다른 이름으로, 다르게 쓰이고 있는 것일까요? 이번 포스팅에서는 두 가지 미들웨어의 간단한 사용법과 어떤 상황에서 어떤 미들웨어를 사용하는 것이 조금 더 나을지에 대해 소개해드리도록 하겠습니다. 1. Redux의 미들웨어 우선 이 두 툴들의 이름이 미들웨어라는 것을 짚고 넘어가야할 것 같습니다. 리덕스의 미들웨어는 리덕스가 다른 상태..
-
React-Quill을 활용하여 게시판 만들기(with TypeScript)IT 지식 2021. 7. 21. 22:37
이번 포스팅은 위지윅(WYSIWIG) 게시판 중의 하나인 React-Quill을 활용한 게시판 만드는 방법 입니다. Quill quill은 rich text editor의 일종으로 마이크로소프트 등의 기업에서 후원하고 있는 텍스트 에디터입니다. https://quilljs.com/ 퀼 공식 페이지 주소 https://www.npmjs.com/package/react-quill npm링크 에디터 자체는 사용하기 쉬운 편이었는데, 여기에 이미지를 업로드 하는 기능을 붙이는 것이 어려워 꽤나 애를 먹었던 에디터입니다. 사용법(with TypeScript) 사용법은 정말 간단합니다. import { useRef, useState, useMemo } from "react"; //이렇게 라이브러리를 불러와서 사용하..
-
[React] uesRef 사용법IT 지식 2021. 3. 28. 15:41
useRef 란 리액트 Hooks 중의 하나로 useState나 useEffect 만큼 자주 사용되는 훅은 아니지만, 보다 심도 있는 react 코딩을 위해서는 알아두는 것이 좋은 hooks 입니다. useRef의 주 기능은 기존 바닐라 자바스크립트에서 특정 DOM을 사용하던 것처럼 특정 엘리먼트의 속성을 활용하는 것입니다. function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( Focus the input ); } //출처:..
-
새해 맞이 2020 개발 트렌드 돌아보기 - 가장 많이 사랑받은 기술들IT 지식 2021. 1. 6. 12:46
지난 포스팅에 이어 가장 많이 사랑받은 / 기피하는 / 관심있는 언어들에 대해 알아보도록 하겠습니다. 오늘 포스팅의 자료는 Nomad Coders의 니꼬쌤 영상과 stackoverflow, npm trends의 자료를 참고하였습니다. (스택오버플로우의 통계는 20년 2월 자료로, 추후 새로운 자료가 업데이트 되면 해당 내용에 대한 내용으로 재포스팅 하도록 하겠습니다.) 1. 가장 많이 사랑받은 / 기피하는 / 관심있는 언어 Rust는 무려 5년 연속 가장 많이 사랑받은 언어 1위를 차지했습니다. TypeScript는 Python을 제치고 2위의 자리를 차지했습니다. 작년에 비해 5계단 성장한 Go의 성장세가 눈에 띄고 있습니다. Android 개발 언어인 Kotlin과 Flutter의 언어인 Dart가 ..
-
새해 맞이 2020 개발 트렌드 돌아보기 - 가장 많이 사용한 기술들IT 지식 2021. 1. 6. 12:42
오늘 포스팅은 새해를 맞이한 기념으로 지난 한 해의 개발 트렌드가 어떠했는지를 돌아보는 시간을 가져보도록 하겠습니다. 작년의 흐름을 살펴보고 올해 새로 시작하는 프로젝트에 이러한 흐름들을 반영할 수 있다면 너무나 좋을 것 같습니다. 오늘 포스팅의 자료는 Nomad Coders의 니꼬쌤 영상과 stackoverflow, npm trends의 자료를 참고하였습니다. (스택오버플로우의 통계는 20년 2월 자료로, 추후 새로운 자료가 업데이트 되면 해당 내용에 대한 내용으로 재포스팅 하도록 하겠습니다.) 1. 가장 많이 사용한 웹 프레임 워크 지난 해 가장 많이 사용한 웹 프레임 워크는 jQuery가 꼽혔습니다. 하지만 그 지위를 서서히 React와 Angular에게 빼앗기고 있는 모습입니다. 또한 ASP.ne..
-
[TIL] 동적 라우팅IT 지식 2020. 12. 6. 18:02
저는 지금까지 프로젝트를 진행하면서 동적라우팅을 직접 사용해 본 적이 없습니다. 좀 더 구체적으로 말하자면 다른 팀원분들이 해당 부분을 코딩해주셔서 저는 따라가기만 했던 것인데요, 앞으로의 프로젝트에서는 분명 동적 라우팅을 해야하는 경우가 생길 것이기에 오늘 포스팅을 정리하면서 동적 라우팅을 좀 더 익혀보는 시간을 가져보도록 하겠습니다. 1. 동적 라우팅이 뭔가요? 동적 라우팅이란 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 말합니다. 보통 react에서는 해당 기능이 없기 때문에 react-router라는 라이브러리를 통해 이 기능을 구현하곤 합니다. react router에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있는데, Query parameters UR..
-
[TIL] Timer 만들기IT 지식 2020. 12. 6. 15:49
이번 프로젝트를 진행하면서 제가 직접 타이머를 만들어야 했습니다. 라이브러리를 쓰지 않고 직접 만들어보려고 하니, 너무 오래 걸리고 쉽지 않았습니다. 지금 현재도 완벽하게는 작동하지 않지만, 그래도 그럭저럭 움직이는 타이머를 만들어보고 나니 저처럼 직접 타이머를 만들어야 하는 분들이 있을 것 같아, 제가 타이머를 만들던 과정을 남겨놓고 코드를 남겨 놓으면 다른 분들에게 도움이 될 것 같아 이번 포스팅을 작성하게 되었습니다. 해당 타이머는 React를 활용해서 만들었습니다. 1. 초기 타이머 맨 처음 만든 타이머는 setTimeOut 함수를 통해 만들었습니다. Date 객체를 활용하여 현재 시각이 매 초 찍히게 만들었고, 시작시간을 state로 기록하여 현재 시각에서 시작 시간을 빼주는 방식으로 로직을 생..
-
[TIL] Day 32. export default의 의미에 대해IT 지식 2020. 11. 17. 11:36
우리가 react로 코딩을 하다보면 많은 경우에 우리가 쓴 코드를 다른 코드에서 활용하기 위해 import 해오는 경우가 많습니다. 우리가 다른 파일을 import 해오기 위해선 해당 js 파일에서 export를 해주는 것이 중요합니다. 그때 코드의 마지줄에 'export default' 라는 단어를 붙이는 경우가 많습니다. 지금까지는 그냥 아무생각 없이 써왔지만, 오늘 문득 왜 그런 단어를 붙이는지 궁금해졌습니다. 그래서 오늘 포스팅은 이에 대한 얘기를 해보려고 합니다. 1. export 우리는 꼭 default 라는 단어를 export 앞에 붙이지 않아도 코드를 다른 곳으로 보내 활용할 수 있습니다. const hello = "Hello World!" export {hello}; 이런 식으로 코드를 ..