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가 ..

웹을 만든다면 동적으로 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"..

내가 맡았던 프로젝트가 그렇게 규모가 컸던 적이 많이 없었어서 여태까지 전역 저장소를 써본 적이 없다. 처음으로 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..

않이... 비밀번호 맞는데... mySQL 커맨드도 워크벤치도 정말 잘 들어가지는데 왜 안되는 걸까 했는데 이유가 있었다. 바로 예에에에에전에 깔았던 비트나미 MySQL과 비트나미가 동시에 실행되면 충돌이 일어날 수 있다고 한다. 작업 관리자에서 아파치 프로세스를 다 죽여도 봤는데 그냥 저 Stop Bitnami WAMP Stack service를 실행시켜주는게 인생에 도움이 된다. 진짜 애꿎은 비밀번호만 한 8번 바꾼거 같다. 역시 사람은 배워야돼.. 구글링 하다 발견한 정말 배우신 분의 블로그를 출처로 남겨놓겠다. https://dongdonghello.tistory.com/7 [MySQL, JSP] java.sql.SQLException: Access denied for user 'root'@'lo..