안녕하세요! 제가 알고 있는 얼마 없는 Web 3.0 지식을 모두에게 나누고자 새로운 웹을 기획했습니다. 제목은 바로 Mintty 하루만에 대충 웹 기획이 끝났네요. 폰트랑 스타일 정의도 대충 끝났구요. 일단 요런 느낌이고 개발하면서 새로 써보는 기술들을 조금씩 정리해보려고 합니다. 각설하고 클론코딩하면서 css 걱정은 없었는데, 혼자 하니 css부터 뭔가 심상치 않습니다.. 이번에 새로 찍먹해볼 기술은 @emotion/sytled로 해보는 Theme만들어주기! 아래 블로그에서 보고 영감을 받아서 Typescript로 한번 바꿔봤습니다. ts에서는 tsconfig라던가 더 설정해줘야하는게 몇몇 개 있더라구요. 또 interface가 업데이트되면서 몇 개 바뀌기도 했구요. styled-components ..

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 아무리봐도 그냥 공식문서가..

안녕하세요. 뭐 질질 끌어야 되나요? 그냥 바로 해보죠. 1. useCallback에 대해서 Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); useCallback은 메모이제이션 된 콜백을 반환합니다. 엥? 그러면 그냥 함수랑 무슨 차인가요? useCallback을 사용하면 불필요한 렌더링을 방지할 수 있습니다. 특히 onChangeEvent와 결합했을 때 더 심한데요. e.target.value값이 변할 때 마다 state가 바뀌기 대문에 그 sta..

안녕하세요. 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"..