분류 전체보기
-
[nestjs] nest new 오류 (ts-jest)etc. 2023. 2. 28. 21:18
nest new 키워드로 nest 프로젝트를 만드려고 하는데 아래의 문구가 뜨면서 패키지 설치가 실패되었다고 한다. ▸▹▹▹▹ Installation in progress... ☕ Failed to execute command: yarn install --silent ✖ Installation in progress... ☕ 🙀 Packages installation failed! In case you don't see any errors above, consider manually running the failed command yarn install to see more details on why it errored out 찾아보니 설치하는 라이브러리 중 ts-jest가 KT와 관련하여 문제가 있다고 ..
-
MOVIE ROOM 회고Project 2023. 2. 12. 18:25
MOVIE ROOM이라는 영화 웹 서비스를 만들었다. 프론트엔드 개발 강의를 수강하면서 영화 웹 서비스를 만드는 강의가 많았고 나도 클론 코딩을 하면서 많이 배웠다. 하지만 코드를 똑같이 작성하는 것이 아닌 내가 처음부터 스스로 만들어 보고 싶은 마음이 컸다. 그래서 기존의 사용했었던 영화 API(The Movie Database (TMDB) API)를 바탕으로 영화 목록을 보여주는 기능 외의 로그인 기능과 영화의 짧은 리뷰를 쓸 수 있는 기능도 추가해보자는 생각이 들었다. - 영화의 최근 개봉작, 인기 상영작, 최고 평점, 개봉 예정작을 보여주기 - 개별 영화 상세정보 보여주기 - 영화 자동 검색 기능 - 영화 검색 결과 목록 보여주기 - 영화 리뷰 쓰기/수정/삭제 기능 - 로그인/ 로그아웃/회원탈퇴 ..
-
[JavaScript] 배열 숫자 채우기JavaScript 2023. 2. 10. 15:06
0 to N const array = Array.from(Array(N).keys()); const array = [...Array(10).keys()] 1 to N const array = [ ...Array(N).keys() ].map( i => i+1); const array = Array.from(Array(N), (_, i) => i+1); const array = Array.from({ length: N }, (_, i) => i+1);
-
인터랙티브 웹툰 Turn Off 회고Project 2023. 2. 6. 15:46
졸업작품 뭐하지? 4학년 1학기를 종강한 후 머리에 스친 생각... 사실 1년도 넘게 하던 걱정이었는데 진짜 시작해야겠다는 자각이 현실로 닥쳐와 버렸다. 1학년 때 같았으면 모션그래픽이나 그래픽 디자인 아니면 웹툰을 그려서 낼 생각이었지만, 그사이에 코딩을 접해버린 나에게 졸업작품은 무조건 그와 연관시켜버리고 싶다는 의욕이 생겼다. 그럼 다시 돌아와서 "졸업작품 뭐하지?"라는 질문을 던졌을 때 나온 결론은 '디자인 or 그림 그리고 웹 개발을 접목할 수 있는 콘텐츠를 만들어야겠다!'였다. 다음 단계는 구체적으로 무슨 콘텐츠를 만들까였다. 스크롤에 따라 움직이는 애니메이션, 온라인 방 탈출, 등등... 생각나는 콘텐츠들은 많이 있었다. 그중에서도 가장 현실적으로 완성할 수 있는 콘텐츠는 웹툰이었다. 웹툰은..
-
[React] vite + ts에서 svg component 사용하기React 2023. 1. 30. 14:34
vite-plugin-svgr 라이브러리를 사용하여 svg 파일을 리액트 컴포넌트로 변환할 수 있다. npm i -D vite-plugin-svgr yarn add -D vite-plugin-svgr // vite.config.js import svgr from 'vite-plugin-svgr' export default { // ... plugins: [svgr()], } import { ReactComponent as Logo } from './logo.svg' ts에서 사용하려면 추가적으로 설정을 해야한다. // vite-env.d.ts /// // svg.d.ts declare module "*.svg" { const content: React.FC; export default content; }..
-
[Test] 테스트 코드 작성?etc. 2023. 1. 29. 17:03
테스트 코드를 작성하자는 마음을 굳힌 후 구글 검색을 통하여 관련한 여러 글을 읽어보았지만 왜인지 감을 잡지 못하였다. 내가 알고싶은 건 테스트 라이브러리들의 사용법이 아니라 대체 "무엇을 테스트 하는가?"에 대해 궁금하였기 때문이었다. 이를 중점으로 다시 구글 검색을 통하여 여러 글을 살폈다. 테스트 코드를 작성하는 이유는 애플리케이션의 기능이 우리가 의도한대로 동작하는지 확인을 위해서이다. 프론트엔드 쪽에서는 '사용자의 관점'에서 테스트 코드를 작성이 되어야 한다. 내부 코드가 리팩토링으로 바뀌더라도 사용자의 입장에서 해당 기능은 동일해야하기 때문이다. 그러면 테스트 코드도 리팩토링의 영향에 상관없이 유지할 수 있다. 예를들어 만약 사용자가 버튼을 클릭하게 되면 클릭함으로써 발생되는 효과들을 검증할 ..
-
[React] useCallback으로 useEffect 무한루프 방지React 2023. 1. 12. 14:37
useEffect 무한루프 상황 문제 발생 const 부모컴포넌트 () => { const 부모함수 = () => { setState(...); }; return { } } const 자식컴포넌트 = ({함수}) => { useEffect(() => { 함수(); }, [함수]) ] 부모 컴포넌트에서 생성한 함수를 props로 받고 useEffect에서 사용했더니 무한루프를 하는 상황이 발생하였다. 부모 컴포넌트가 리렌더링 되는 경우 함수도 재생성되기 때문에 당연히 자식 컴포넌트도 리렌더링된다. useEffect에 의존성 배열을 넣었음에도 불구하고 전달된 함수는 다른 참조값을 가지기 때문에 (함수는 참조에 의한 전달) useEffect 콜백함수는 실행되어 state가 바뀌고 또 state가 바뀌면 컴포넌..
-
[JavaScript] RTK Query: Automated Re-fetchingJavaScript 2023. 1. 6. 18:43
Automated Re-fetching | Redux Toolkit RTK Query > Usage > Automated Refetching: cache invalidation management redux-toolkit.js.org query 엔드포인트에 구독을 추가하게 되면, 캐시 데이터가 존재하지 않는 경우에만 요청이 전송되고 존재하는 경우 기존의 데이터가 제공된다. RTK Query는 "cache tag" 시스템을 사용하여 mutation 엔드포인트에 영향을 받는 데이터가 있는 query 엔드포인트에 대해 re-fetching을 자동화한다. 각 엔드포인트 + 파라미터의 조합은 'queryCacheKey'를 제공한다. "cache tag"시스템을 사용하면 RTK Query에 특정 쿼리 캐시가 특정 ..