전체 글

전문가를 위한 리액트(Fluent-React)를 읽고 서버 사이드 리액트에 대해 정리합니다.리액트는 클라이언트 사이드 라이브러리로 시작했습니다. 이 방식은 웹 생태계에 성능이 뛰어나고 반응이 빠른 사용자 경험을 구현했습니다. 하지만 웹이 발전함에 따라 클라이언트 사이드 렌더링의 한계가 명확해졌습니다.1. CSR의 한계1-1. SEOCSR의 가장 큰 한계 중 하나는 검색 엔진의 크롤러가 JS를 실행하지 않아 콘텐츠를 색인하기 어렵다는 점이었습니다. 실행되더라도 예상대로 실행되지 않을 수 있어 콘텐츠를 올바르게 색인할 수 못할 수 있습니다.이는 검색 엔진의 크롤러의 구현 방식이 다양하고, 상당수가 폐쇄적이며 공개되지 않아 더욱 명확하지 않은 부분이 되었습니다.2015년 검색 엔진 랜드가 기사를 통해 다양한 ..

김창준 저자의 "함께 자라기"라는 책을 읽었습니다."애자일로 가는 길"이 부제로 적혀있는데, 막상 책의 내용은 성장 방법론, 일하는 방식 등의 내용이 주를 이루고 있습니다. 책의 핵심적인 내용은 "어떻게 다같이(함께) 성장(자라기)할 것인가?" 입니다.책의 목차는 다음과 같습니다.자라기함께애자일저는 1챕터인 "자라기" 챕터를 인상깊게 읽었습니다. 이 부분을 기록합니다.1. 자라기"자라기" 챕터는 어떻게 성장을 할 수 있는지, 성장에 대한 오해들을 깨는 것에 집중합니다.대표적인 오해인 "경력은 실력과 비례한다"는 주장을 반박하며 챕터를 시작합니다. 실제 업무 퍼포먼스를 통계적으로 나타냈을 때, 경력이 실력과 그리 비례하지 않으며 실력을 키우기 위해선 경력이 아닌 "의도적 수련"이 동반되어야 한다고 주장합니..

6개월간의 인턴십이 끝을 고했습니다.첫 회사였고, 그만큼 제가 잘 할 수 있을지 걱정부터 앞섰던 기억이 있는데요.많은 것을 겪었고, 그 이상의 값진 것들을 배운 멋진 시간이었습니다.좋았던 점, 겪었던 문제, 개선점을 회고하겠습니다.Keep - 좋았던 점1. 일지 작성매일 일지를 썼던 것입니다.일종의 TIL이었는데, 인턴십 중반부터 동기의 권유로 같이 쓰게되었어요. 하루의 업무를 마무리할 때 오늘은 어떤 문제가 있었는지, 문제를 어떻게 해결했는지, 느낀 점들을 적었습니다. 일지는 모두에게 공개되는 사내 위키에 작성했는데, 사측에서도 인턴들이 스스로 일지를 작성하는 걸 굉장히 좋게 봤어요. 심지어 저희의 일지를 보시고 본인도 일지를 쓰기 시작하신 직원분도 계셨습니다. 이렇게 작성한 일지는 추후 본인 평가서를..

1. 코드 생성 자동화의 필요성리액트 컴포넌트를 개발한다고 합시다. 컴포넌트의 이름을 정하고, index.tsx, index.module.scss, stories.tsx를 만듭니다.그리고 항상 똑같은 코드를 작성합니다.컴포넌트의 이름만 바뀌고, 같은 코드가 반복됩니다.// index.tsximport classNames from 'classnames/bind';import styles from './styles.module.scss';const cx = classNames.bind(styles);interface Props {}export const Component = ({}: Props) => { return };// index.stories.tsximport type { Meta, StoryObj..

들어가기에 앞서.. 패키지 매니저란?개발에서 외부 라이브러리, 프레임워크 및 도구를 관리하는 도구다.의존성 관리, 버전 관리, 패키지 업데이트 등을 수행한다.1. npm(Node Package Manager)Node.js의 기본 패키지 매니저다. 가장 오래되었고 널리 쓰인다.package.json 파일을 통해 의존성을 관리한다. node_modules 폴더에 중첩 구조로 의존성을 설치한다.설치 속도가 yarn, pnpm에 비해 느리다. 이는 중첩 구조로 인한 중복 패키지 설치 때문이다.중첩 구조로 설치한다는 것이 단점인데, 중첩 구조란?각 패키지가 자신의 의존성을 자신의 node_modules 폴더 내에 설치하는 방식이다. 예를 들어,프로젝트/├── node_modules/│ ├── A/│ │ ..

2.2 가상 DOM과 리액트 파이버DOM의 모든 변경 사항을 추적하는 것은 너무 수고스럽다.대부분의 경우 모든 DOM의 변경사항보다는 최종 DOM 결과물 하나만 알고 싶을 것이다.이를 위한 것이 가상 DOM이다. 가상 DOM은 웹페이지가 표시할 DOM을 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 끝나면 브라우저 DOM에 반영한다.이런 방식으로 DOM 계산을 메모리에서 계산하는 과정을 거치면 여러 번 발생했을 렌더링 과정을 최소화한다.다만 리액트의 가상 DOM 방식이 일반적인 DOM을 관리하는 브라우저보다 빠르다는 것은 오해다.가상 DOM이 실제 DOM보다 빠르지도 않다면, 왜 사용하는건가?브라우저의 리플로우, 리페인트를 최적화한다. 즉, CPU 사용률, 메모리 사용량, 렌더링 성능을 최적화한다...

들어가기에 앞서, 프론트엔드에 많은 양의 이미지를 저장하는 것은 유지보수가 어렵고, 권장되지 않습니다.많은 이미지를 수반한다면 CDN 서비스를 사용하는 것이 좋습니다.이 포스팅은 프론트엔드 서버를 사용하지 않는 정적 배포를 기준으로 작성합니다 !!1. 이미지 파일을 어떻게 관리할까?NextJS 환경에서 이미지 저장 경로는 크게 2종류로 나눌 수 있습니다.public 폴더src 폴더 하위 경로You can store static files, like images and fonts, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the b..

리액트의 조건부 렌더링 방식에는 여러가지가 있습니다.가장 많이 쓰이는 얼리 리턴, 삼항 연산자, 논리 AND 연산자(&&) 패턴을 정리했습니다.얼리 리턴 (Early Return)조건에 만족하면 즉시 컴포넌트를 반환합니다.export default function SingleSeat({ clusterUser, seatNumber,}: { clusterUser?: ActiveClusterUser; seatNumber: number;}) { const { user } = useUserStore(); if (!clusterUser) // 해당 Seat 컴포넌트에 전달받은 유저가 없다면 빈 자리를 리턴합니다. return ( {seatNumber} ..