슬랙을 쓸 때 저 멘션이 뭔가 참 너낌 있었는데 의외로 되게 쉽게 만들 수 있었다. 당연히 라이브러리를 썼고, React-mentions라는 라이브러리다. https://www.npmjs.com/package/react-mentions react-mentions React mentions input. Latest version: 4.4.7, last published: 2 months ago. Start using react-mentions in your project by running `npm i react-mentions`. There are 101 other projects in the npm registry using react-mentions. www.npmjs.com DT 패키지이니, Typ..

NavLink라는게 있는지도 몰랐는데 이런 유용한게 있었다니... 그냥 Link와 같은데 NavLink는 active라는 기능을 지원한다. 구현이 그렇게 어려운 건 아니지만, 매번 params나 location을 가져온 다음에 파싱해서 bold처리 하는게 여간 귀찮은게 아니다. (styled-component를 사용한다면 props도 넘겨줘야한다. 아니면 뭐 인라인으로 toggle하거나) NavLink를 사용한다면 그냥 이렇게 해주면 된다. isActive ? "selected" : ""} to={`/workspace/${workspace}/dm/${member.id}`}> {children} 패키지를 뜯어보면 이렇게 되어있는데, className, style, children에 각각 isActive가 ..

그냥 무심결에 콘솔을 뙇 켰는데, 이게 왠걸.. swr이 막 GET 요청을 뿜어내고 있었다. 왜이래... 먼저 바로 channels/일반/... 이게 문제가 아닐까? 생각을 해봤다. 구글링을 해봤더니, 브라우저에서는 ASCII문자만 전송을 할 수 있기 때문에, 전송시에 저절로 인코딩이 되어서 보내지고, 백엔드 쪽에서 decodeURIComponent(params.value)를 통해 풀어줘야한다고 한다. 출처: https://it-eldorado.tistory.com/143 [Web] URL 인코딩/디코딩 (URL Encoding/Decoding) 이번 포스팅에서는 URL의 인코딩/디코딩에 대해 간단히 알아볼 것이다. 그런데 이것을 이해하려면 먼저 문자열 인코딩에 대한 배경지식이 있어야 한다. 만약 ASC..

웹을 만든다면 동적으로 URI를 만들어줘야하는 경우가 종종 생긴다. React에서도 URI에 있는 특정 params나 id를 읽어와서 그에 맞는 적절한 컴포넌트를 보여주는게 가능하다! 라우터 구조 설계로 같은 레이아웃에 보내고, 그 레이아웃 안에서 다른 컴포넌트를 보여주는 건 생각지도 못한 방법이었는데 되게 효율적인 것 같아서 공유해볼까 한다. 1. 라우터 설계 먼저, 라우터 구조를 설계해야한다. react-router-dom이 작년 11월에 v6가 되었는데 아직도 블로그나 강의 자료들이 v5기준으로 되어있는 곳들이 많다. React Router | Tutorial Declarative routing for React apps at any scale reactrouter.com 아무리봐도 그냥 공식문서가..

안녕하세요. redux의 시대가 끝났으면 좋겠습니다. 이번 sleact에서는 redux 대신 swr을 사용하는데요. 강의 기준일이 작년 초 정도여서 여러 라이브러리가 많이 바뀌었더라구요...홍홍 import React from 'react'; import useSWR from 'swr'; import axios from "axios"; const LogIn = () => { //옛날엔 이런 꼴이었는데요. // const { data, error, revalidate, mutate } = useSWR("YOUR_API_ADDRESS", fetcher); //요즘엔 이렇게 씁니다. const { data, error, isValidating, mutate } = useSWR("YOUR_API_ADDRESS"..

내가 맡았던 프로젝트가 그렇게 규모가 컸던 적이 많이 없었어서 여태까지 전역 저장소를 써본 적이 없다. 처음으로 SWR을 써봤는데 이거 상당히 히트다. https://swr.vercel.app/ko/docs/getting-started 시작하기 – SWR 시작하기 React 프로젝트 폴더 안에서 다음을 실행하세요. npm을 사용한다면 JSON 데이터를 사용하는 일반적인 RESTful API라면 먼저 네이티브 fetch의 단순한 래퍼인 fetcher 함수를 생성해야 합니다. cons swr.vercel.app 0. 기본적인 사용법 import useSWR form "swr" ... const { data, error, mutate } = useSWR("YOURKEY", fetcher); key에는 보통 a..