React & TypeScript/React31

• 

  [React] Context API 정리 (Provider, Consumer, useContext) 개요대략적인 이해를 하고 사용했던 것 같은데, 좀 더 명확하게 정리하고자 글을 작성한다.CRA 기반으로 example 코드를 작성하였다.최적화를 위한 click event hanlder 함수는 일부러 따로 작성하지 않았다. useCallback, useMemo 같은 최적화 함수도 기재하지 않았다. (실전 코드에서는 리렌더링 막기위해서 당연히 써야 한다.) Context API 간단 정의Context객체에는 Provider, Consumer 컴포넌트가 포함되어 있습니다.Provider: Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 컴포넌트Consumer: Context 변화를 구독해 변화시 재 렌더링하는 컴포넌트 Context API ExampleCountPrivder를 만들어서 .. React & TypeScript/React 2025. 1. 10.

• 

  MUI-Stack, Box, sx(스타일링) 적용에 대한 고찰 display : flex 먹힌 Box 라고 보면 된다. Stack 이나 Box나 다 div 로 치환된다. sx 로 style을 먹이면, css는 css module 형태로 적용되어 css 중첩을 방지시킨다. MUI 꽤 좋아진 거 같다. React & TypeScript/React 2024. 2. 22.

• 

  [React] useId 이거 언제쓰지...싶을 때. (사용 예시) React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다. 딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다. 오늘 사용 했었는데, input과 label을 연결해줄 때 사용했다. component 중 일부의 코드다. 아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다. 생각보다 유용했다. const connectionId = useId(); const [isChecked, setIsChecked] = useState(checked); return ( {...} ); 참고 useId – React The library for web and native.. React & TypeScript/React 2023. 11. 15.

• 

  [Next.js] Next.js 13 활용법 Basic 동적 라우팅 생각보다 간단하다. slug 라는 형태로 sub page를 만들어 준다. 예전 회사에서 왜 CRA를 썼던 건지 의문이다. 생각해보면, 에전에 만났던 개발자분들도 막연히 낯서니까 프론트페이지 구축을 CRA에서 멈췄던 것 같다. 그러나, 결국 Next를 익히는 허들이 CRA와 그닥 차이가 없다. ...오늘은 시간이 없어서 나중에 계속쓰자..ㅠ React & TypeScript/React 2023. 6. 2.

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React / Ant Design] Ant Design에서 Calendar Localization 하는 법 Antd ConfigProvider 적용 import React from "react"; import AppLayout from "./components/AppLayout/AppLayout"; import { ConfigProvider } from "antd"; import "dayjs/locale/ko"; // 1번 import koKR from "antd/locale/ko_KR"; // 2번 const App = () => { return ( ); }; export default App; 1번 라인 : Jan~Dec -> 1월 ~ 12월로 표현 바뀜 (세부목록은 json 참고) 2번 라인 : 전체 placeHolder 가 적용되는 것 참고 https://cdn.jsdelivr.net/npm/dayjs.. React & TypeScript/React 2022. 12. 19.

• 

  [React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. React & TypeScript/React 2022. 12. 14.

• 

  [React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. React & TypeScript/React 2022. 11. 28.

• 

  [React / Test] Material UI (mui) + React + Testing Library 적용 간 어려운 점 회고 Render 관련 코드 구조 describe("Application 테스트", () => { it("Application - UI Test ", () => { render( , { wrapper: MemoryRouter } ); // ... material UI 특성상 theme 가 구동되기 때문에 ThemeProvider 를 감싸줘야 한다. (참고 : Custom Render - 아예 test-util을 만들어서 wrapping 하는 방법도 있다.) FetchProvider 도 감싸줘야 하며, Application 내부에서 match.params.id 를 사용하는데, 페이지를 전환하면서 전달한 게 아니라서, 임의로 props로 match 객체처럼 보여지게끔 전달해서 해결했다. Provider들을 감싸는.. React & TypeScript/React 2022. 6. 22.

• 

  React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. React & TypeScript/React 2022. 4. 29.

• 

  Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다. package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.) cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build 그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다. (이렇게 static server.. React & TypeScript/React 2021. 9. 16.

• 

  [React] cypress를 활용한 React 테스트 (feat. 시나리오 테스트, E2E Test) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 개발을 마치자마자 문제라는 녀석이 끼어들기 시작한다 개발 자체가 긴급해서 테스트를 직접해가면서, 개발을 마쳤다. 마치고 나니까, Front-end 테스트가 누락됨에 따라, 컴포넌트를 추가/수정하는 과정에서 에러가 발생하는 경우가 있었다. 꼭 Front문제라기 보담은, Back-end 개발자가 api를 변경한 경우에도 종종 문제가 발생하는 경우가 있었다. 모든 문제를 육안으로 모두 체크할 수는 없다 최소 비즈니스 로직에.. React & TypeScript/React 2021. 8. 25.