전체 글

기존 프로젝트의 디자인 시스템 컴포넌트들을 스토리북으로 문서화하고 있었다. 기존 컴포넌트에서 @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'],});하지만 여전히 오류가 발생하고 있었다.태그 이름이 부적절하다는 것이다. 자세히 보니 로 쓰고 있었는데 OpenEye의 자..

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

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

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

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

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

우리가 React나 Next 앱을 만들 때 보통 세가지 방법을 씁니다. create-react-app (React)Vite (React)create-next-app (Next.js)위의 것들로 프로젝트를 만들면 npm build 혹은 npm run build 명령어 한번으로 빌드가 완료됩니다. 빌드를 위해 필요한 모든 설정과 과정이 하나의 명령어로 압축되어 있기 때문입니다.  개발할 때는 CRA나 CNA로 프로젝트를 시작하면 해당 프레임워크에 최적화된 옵션으로 빌드 설정을 해주기 때문에 보통은 해당 명령어로 프로젝트를 시작하는 것이 좋습니다. 하지만 빠르게 변하는 프론트엔드 생태계에서 현재 널리 사용되고 있는 도구가 언제 또 바뀔지 모르기 때문에, 도구를 사용할 줄 아는 것을 넘어서 그 내부 작동 원리를..

브라우저에 "www.google.com"을 입력하면 구글 웹 사이트에 접속할 수 있습니다. 브라우저는 어떻게 "www.google.com" 이라는 문자열을 통해 구글 웹 사이트에 접속할 수 있는 것일까요?  1. DNS 조회DNS는 Domain Name System입니다. 여기서 도메인(Domain)이란 우리가 평소에 쓰는 google.com, youtube.com, naver.com 이런 문자를 말합니다. DNS는 전화번호부에 비유할 수 있습니다. 우리가 누군가에게 전화하려면 전화번호가 필요합니다. 하지만 전화번호를 외우지 않는 이상 우리는 전화번호를 직접 입력하지 않고 전화번호부에서 이름을 검색해서 해당 전화번호로 전화합니다. DNS도 똑같습니다. 도메인, 즉 google.com, youtube.co..