분류 전체보기

❗️ 문제 yarn start를 했을 때는 theme이 적용된 컴포넌트가 잘 보이는데 storybook에서는 오류가 나면서 프리뷰가 나오지 않는 문제가 있었다. ${({ theme }) => css` color: ${theme.COLOR.TEXT.WHITE}; 처음엔 theme을 잘못 설정한 줄 알고 style 쪽 코드를 계속 수정했지만 해결되지 않았다. 🔎 원인 생각해 보니 dev server에서는 잘 나오기 때문에 style 쪽 문제는 아니었다. App.tsx에서는 ThemeProvider가 사용되고 있어서 dev server에서는 문제가 없었지만, storybook에 ThemeProvider를 따로 적용해 주지 않아서 발생한 오류였다. 컴포넌트만 공유하고 번들링부터 아예 따로 동작하기 때문에 필요한..

개인 프로젝트는 CRA 없이 웹팩을 직접 설정해서 진행하기로 했습니다. 📍웹팩의 핵심 개념 Entry: 웹팩을 실행할 대상 파일. 진입점 Output: 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의 Loader: CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가한다. 로더는 오른쪽에서 왼쪽 순으로 적용 Plugin: 웹팩의 기본적인 동작에 추가적인 기능을 제공한다. 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다. Resolve: 웹팩에서 모듈을 해석할 때 어떤 확장자를 사용할지를 설정한다. resolve 옵션을 설정하면, import나 require 등으로 모듈을 불러올 때 해..

❗️ 문제 로그인과 회원가입 페이지의 뷰 컴포넌트를 하나로 사용하고 있었기 때문에 폼이 submit 됐을 때 어떤 페이지에서 렌더링 된 건지에 따라서 서로 다른 API 전송 함수를 서로 다른 props로 보내서 트리거했었다. // submit 되면 실행되는 함수. const onValid = (data) => { if (signUp) { handleSignUp(data); } else { handleLogIn(data); } }; 하지만 하나의 props로 통일해도 된다고 판단했다. // submit 되면 실행되는 함수. const onValid = (data: AuthFormValues) => { handleSubmitForm(data); }; 인자에 대한 타입은 다음과 같다. export interf..

❗️ 문제 로그인, 회원가입 폼에 애니메이션을 트리거하기 위해서 만든 useRef에 타입을 줘야 했다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다. 처음엔 이런 형태로 타입을 부여했었다. const inputRef = useRef(null); 그런데 인풋의 ref 속성으로 부여된 useRef 값의 current에 접근할 수 없는 문제가 생겨서 그 이유를 살펴보았다. 🔎 원인 useRef 훅은 3개의 정의가 오버로딩되어 있다. 1. useRef(initialValue: T): MutableRefObject; 인자의 타입과 제네릭의 타입이 T로 일치하는 경우, MutableRefObject를 반환한다. MutableRefObject의 경우, 이름에서도 볼..

프로젝트 소개 영양제를 손쉽게 받아볼 수 있는 영양제 정기 구독 웹 서비스 프로젝트 선정 이유 평소에 자주 이용하는 제품이고 남녀노소 누구나 관심을 가질만한 분야인 영양제를 주제로 선정했다. 평범한 쇼핑몰과 차별성을 만들고 싶어서 최근 관심 있는 비즈니스 모델인 구독 기능을 도입했다. 링크 배포 링크: http://pillivery.s3-website.ap-northeast-2.amazonaws.com/ 깃허브 링크: https://github.com/codestates-seb/seb40_main_033/tree/main 개발 기간 2022.11.08 - 2022.12.07 팀 구성 Front-end 4명 Back-end 3명 기술 스택 Front-end: JavaScript, TypeScript, Re..

솔로 프로젝트로 투두 리스트를 만들었다. api 통신을 통해 완전한 CRUD를 구현해보는 경험을 했다. https://github.com/kihyeoon/mini-todolist 📍상세 내용 리랜더링 그전엔 더미 데이터 파일을 따로 만들어서 직접 이벤트에 따라서 데이터를 가공했는데, 이번엔 json-server를 통해 받아온 데이터를 각 컴포넌트에 뿌려주는데만 집중할 수 있어서 좋았다. 그런데 데이터 자체를 useState를 통해 상태로 저장하고 조작하면 리렌더링이 자연스럽게 됐었던 전과 달리 컴포넌트에 변경이 생기면 patch나 delete와 같은 메서드를 통해 요청을 보내기만 해서는 리랜더링이 일어나지 않아서 당황했었다. 데이터를 fetch 받아오는 getData 함수를 만들고 patch, delet..

📍목표 설정 💡 목표: 핀테크 기업 목표로 내년 상반기에 취업하기 부트캠프에서 꼭 얻고 싶은 것 탄탄한 프런트엔드 기초 배운 건 읽고 끝내지 말고 바로 코드로 쳐서 활용해보기 면접에서 자주 나오는 중요한 키워드들은 말로 설명해보고 녹화 피드백(두괄식 요약→설명) 알고리즘 스터디 진도 맞춰서 문제 풀기 즐겁게 공부하는 습관 익히기 잘 안될 결과를 두려워하지 말고 눈앞에 있는 과정을 즐기면서 공부하자 남과 비교하지 말고, 내 회고를 보면서 과거의 나와 비교하자 꾸준히 공부하는 습관 → 주 6회 이상 잔디심기 도전! 매끄럽게 협업할 수 있는 커뮤니케이션 능력 이해한 개념을 1차로 블로그에 글로 작성하고 2차로 말로 설명해보는 연습 나의 다짐 정규 수업 시간 이후 3시간 이상 추가 학습하기 추가 학습 시간이 길..

📍Proxy 를 쓰는 이유 리액트는 프론트엔드 개발 서버를 열어서 코드의 수정사항을 감지하고 바로바로 브라우저에 렌더링해준다. 이때 프론트엔드 개발 서버와 백엔드 서버의 출처(origin)이 다르기 때문에 CORS정책에 위배되어 데이터를 받아오지 못하게된다. CORS: 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 백엔드 개발자에게 프론트엔드 개발 서버의 도메인을 허용해달라고 요청하고 백엔드에서 CORS 설정을 해주어 응답헤더를 전달 받는 것이 정석적인 해결방법이지만 Proxy를 설정하면 CORS 정책을..

📍GitHub Action 이란? GitHub Actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작업 워크플로(Workflow)를 구성할 수 있다. 워크플로는 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 머신 또는 컨테이너 내부에서 실행되며 테스트, 배포 등 기능에 따라 여러 개의 워크플로도 만들 수 있다. 생성된 워크플로는 .github/workflows 디렉터리에 yml (혹은. yaml ) 파일로 저장된다. 📍YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 ..

📍LightHouse란? LightHouse는 웹페이지의 성능을 측정해주고 개선책을 제공해주는 자동화 도구입니다. 개발자는 Lighthouse의 검사 결과를 기반으로 웹페이지의 품질을 개선 할 수 있습니다. Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있습니다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행합니다. 📍Lighthouse 사용 2020년 5월 19일 Lighthouse 버전 6.0 배포 이후 Chrome 개발자 도구에서 Lighthouse가 들어왔습니다. 검사하고 싶은 페이지에서 개발자 도구를 엽니다. Lighthouse 탭으로 들어옵니다. Analyze pag..