[트러블 슈팅] Storybook에서 @svgr/webpack 사용하기

문제 상황기존 프로젝트의 디자인 시스템 컴포넌트들을 스토리북으로 문서화하고 있었다.기존 컴포넌트에서 @svgr/webpack을 사용하여 SVG를 리액트 컴포넌트처럼 쓰고 있었다. import ClosedEye from '../../assets/closed-eye.svg';처음에 컴포넌트를 그대로 TextField.stories.ts로 만들어서 실행했더니 svg가 로드되지 않았다. 따라서 storybook의 main.ts에도 @svgr/webpack 설정을 추가해주었다.config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'],});하지만 여전히 오류가 발생하고 있었다.태그 이름이 부적절하다는 것이다. 자세히 보니 로 쓰고 있었는데 OpenEy..

• format_list_bulleted 트러블 슈팅
• · 2025. 6. 10.

[CS] 리액트 프로젝트 배포하기(with AWS CloudFront + S3)

보통의 사이드 프로젝트 수준에서 프론트엔드 배포를 하게되면 vercel이나 netlify, 간혹 firebase를 사용해서 배포했을 것이다. 왜냐하면 이런 호스팅 서비스들은 Git 저장소를 연동하면 매우 간단한 설정만으로 프레임워크에 맞게 프로젝트를 알아서 배포해주고, CI/CD 파이프라인도 알아서 구축해주기 때문이다. 따라서 초보자들도 정말 쉽게 웹 사이트를 호스팅할 수 있다! 하지만 대부분의 실제 기업 사이트들은 AWS로 배포된다. AWS는 수동으로 설정해야할게 많고 복잡하지만, 그만큼 보안, 트래픽 처리, 캐시, 로드밸런싱 같은 인프라를 세밀하게 제어할 수 있기 때문이다. 또한 트래픽이 많아질수록 비용을 효율적으로 관리할 수 있는 구조이기 때문에 기업 환경에 잘 맞는다. 게다가 가장 큰 클라우드 ..

• format_list_bulleted CS
• · 2025. 5. 18.

[JS] CommonJS와 ESM을 모두 지원하는 라이브러리 만들기 (Feat. Vite)

모듈 시스템의 역사JavaScript 모듈 시스템은 크게 CommonJS와 ES Module(ESM)로 나뉩니다. 이 중 먼저 등장한 것은 CommonJS입니다. CommonJS원래 JavaScript는 모듈 시스템을 지원하지 않았습니다. 여러개의 script 태그를 이용하여 라이브러리들을 가져온다고 하더라도 모두 하나의 전역에서 객체를 정의하는 방식이었습니다. 이 방식은 당연히 변수명이 겹치는 등 많은 문제점이 있었습니다. 그래서 등장한 것이 CommonJS 모듈 시스템입니다. CommonJS는 다음과 같은 방식으로 모듈을 불러오고 내보냅니다.// add.jsmodule.exports.add = (x, y) => x + y;// index.jsconst { add } = require('./add')..

• format_list_bulleted JS
• · 2025. 3. 28.

[수상 후기] 2024 공개 SW 개발자 대회 후기

대회가 끝난 지는 좀 지났지만 이제서야 후기를 써본다.팀원 구성동아리 디스코드의 팀원 모집 게시판에 올라온 글을 보고 지원하게 되었다. 프로젝트 기획은 이미 되어있는 상태였고, BE와 디자이너도 모두 기존 팀원이 있고 FE만 새로 모집하고 있었다.일단 "청각 장애인 대학생들을 위한 실시간 음성인식 및 전공과목 문제생성 대학 강의 보조 서비스" 라는 기획이 마음에 들었다. 또 리액트를 사용하는 FE가 필요하다고 해서 나에게 딱 맞다고 생각해서 팀에 합류했다. 그리고 참가 신청이 하루밖에 남지 않은 상황에서 FE를 한명 더 모집했고, 그 분은 학생이 아니었다. 따라서 학생부로 지원하지 못하고 일반부로 지원하게 되었고, 프로젝트의 주제에 맞게 지정과제의 사회문제형의 교육 파트로 참가했다. 최종적으로 팀원은 B..

• format_list_bulleted 후기
• · 2025. 3. 3.

[여기어때컴퍼니] 2025년 1학기 여기어때 현장실습 합격 후기

웬만하면 회사 채용 프로세스 후기는 작성하지 않지만, 매우 특이하고 특별한 경험이었어서 후기로 남겨본다. 결론부터 말하면 최종 합격이 되었으나 입사하지는 못하게 되었다. 1. 서류 서류는 채용 사이트에 이력서 또는 포트폴리오를 제출하는 형식이었다. 미리 작성해둔 이력서만 pdf로 제출했다. 금요일 오전 11시에 제출했는데, 당일 오후 3시에 바로 합격 메일이 왔고, 코딩테스트를 안내받았다. 3일 이내로 코딩테스트 응시를 완료해야했다. 2. 코딩 테스트금요일에는 원래 하기로 계획했던 일이 있어서 그 일을 마저 하고, 토요일에는 약속이 있어서 응시하지 못하고 일요일 오후 4시쯤에 응시했다. 코딩테스트는 3문제가 출제되었고, 제한시간은 180분이었다. 현장실습이라 그런지 알고리즘이 필요없는 구현 문제였고, 난..

• format_list_bulleted 후기
• · 2025. 2. 2.

[트러블 슈팅] useEffect 의존성 배열 관리로 리렌더링 무한 루프 방지하기

문제 상황영화 상세페이지에서 관련 콘텐츠 포스터를 클릭하면 URL상으로 id만 바뀌는 다른 영화 상세 페이지로 이동하는 링크를 만들었다. 하지만 링크를 눌러도 화면은 전혀 바뀌지 않았으며 브라우저 상단에 표시되는 URL에서 id만 잠깐 바뀌고 곧바로 다시 원래대로 돌아오는 것이었다. 링크를 여러번 계속 눌러야 겨우 다른 영화 상세 페이지로 바뀌었다. 컴포넌트에 history.state.idx를 찍었더니 1초에 2번꼴로 지속적으로 history가 쌓이고 있었다. const { movieId } = useParams();const [{ data: DETAIL }, ...] = useAllMovieDetail(movieId); // useSuspenseQueries 가져오는 hookconsole.log('re..

• format_list_bulleted 트러블 슈팅
• · 2025. 1. 14.