![]()
● Next, TypeScript 프로젝트 생성 npx create-next-app@latest 저는 타입스크립트 적용하고 tailwind는 적용하지 않고 프로젝트를 생성하였습니다. eslint도 적용햇읍니다. ● ESLint npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-simple-import-sort @typescript-eslint/eslint-plugin : typescript 코드에 규칙들을 제공하는 플러그인 (recommended) @typescript-eslint/parser : eslint가 typescript 코드를 lint 할 수 있도록 typescript es..
리액트 공식문서에서 생소한 Hook인 useIntersectionEffect에 대해서 공부하다가 CSS-in-JS 라이브러리를 활용 시에만 사용하는 훅임을 알게 되었습니다. 공식문서를 읽으면서 CSS-in-JS이 어떻게 구동되는지에 대해서 알아야 했는데, 생각해보니 저는 styled-components, emotion과 같은 라이브러리를 활용만 하고 있었을 뿐, 제대로된 등장배경이나 구동원리에 대해서 제대로 파악하고 있지 않은 것 같아 블로그 글로 남기게 되었습니다. 여러 블로그를 찾아본 후, 가장 쉽게 설명을 적어보자 합니다. ● CSS-in-JS 이전 SCSS, SASS 전처리기 이전에 저는 styled-components, emotion을 사용해보기 전에 SCSS를 사용해본적이 있었는데요, css와..
![]()
요즘 다시 공식문서를 하나씩 읽어가고 있는데, 오늘 읽으면서 이전에 헷갈렸던 걸 다시 공부하는.. 느낌으로 포스팅을 해봅니다. 오늘 공부한 공식문서 Render and Commit – React The library for web and native user interfaces react.dev 렌더링 그리고 커밋 – React The library for web and native user interfaces ko.react.dev Triggering (렌더링 트리거) Rendering (렌더링) Commit (커밋) 공식문서에서는 트리거 -> 렌더 -> 커밋 의 단계를 음식을 주문하고 주문을 받고 음식을 내오는 예시를 들어 설명하고 있습니다. ● Trigger 트리거 렌더링을 촉발시키는 이유는 2가지..
![]()
프로젝트가 끝난 이후, 이제서야 제 현생을 살아가는 느낌이 들어요. 머리도 자르고.. 수선을 맡겨야했던 옷들도 맡기고.. 프로젝트 내내 타이트하게 코드를 짜느라 정신이 없었습니다.. 약 한달이라는 시간동안 메인프로젝트에 많은 것을 정말 집중해서 쏟았던 만큼, 블로그를 많이 적지못했었는데요, 이제서야 자세히 회고록을 써보려합니다. ● 프리 프로젝트에서 적용하고 싶었던 것 -> 메인프로젝트에 적용 프리프로젝트 때, 프로젝트를 진행하면서 많이 느낀 것이 '기획 및 준비단계를 탄탄하게' 해야한다는 점이었습니다. 프리프로젝트에서는 깃컨벤션 및 브렌치 명정도 정하고 시작했었는데요, 시간이 많이 없었던터라 백엔드분들과는 PR컨벤션, 이슈컨벤션, 브렌치 컨벤션, 커밋 컨벤션만 정하게 되었고 프론트엔드분들과는 코드컨벤션..
![]()
이전에 react-observer-intersection로 무한스크롤을 구현한적이 있었는데요, 메인 프로젝트에서도 무한스크롤을 구현해야했기 때문에 적용예시 코드를 찾아보았습니다. 인피니티 쿼리로 무한스크롤 구현하려고 하니, 막상 막막했습니다. https://codesandbox.io/p/sandbox/github/tanstack/query/tree/main/examples/react/load-more-infinite-scroll?embed=1 @tanstack/query-example-react-load-more-infinite-scroll Synced template from GitHub @tanstack/query at /examples/react/load-more-infinite-scroll cod..
![]()
현업에서 styled-components 아니면 emotion을 많이 쓴다고 해서 emtion 쓰는 법을 정리 해보려고 합니다.. styled-components는 너무 많이 써봤기 때문에 emotion을 써보려합니당당구리 ● css 모듈만 사용하기 npm create vite@latest vite 프로젝트를 만든 후, npm i @emotion/react 이모션을 설치해줍니다. 이후, tsconfig.json 파일에 아래 코드를 추가해 설정해줍니다. "jsxImportSource": "@emotion/react", 그럼 끝 !! import { css } from '@emotion/react' export default function App() { return ( Hover to change colo..
