Frontend/Etc4 액션, 계산 분리해보기(함수형 프로그래밍) 1. Why?함수형 프로그래밍은 오래동안 도전해보고 싶은 영역이였다.특히 테오님의 블로그에서 함수형 프로그래밍을 소개한 글을 읽고서는 '나도 코드를 저렇게 써봐야지'라고 맘먹고 "쏙쏙 들어오는 함수형 코딩" 책도 구매했었다.내가 쓴 코드를 리팩토링하려다 너무 복잡해서 때려친 적도 있었고, 다른 팀원이 질문을 했을 때, 로직을 살펴보다가 한시간 넘게 잡아먹은 적도 있었다. 이런 상황을 겪으며 함수를 나누고 복잡성을 낮추는것의 필요성을 느꼈기 때문이다. 하지만, 싸피의 타이트한 일정(7주간 프로젝트 X 3번 + 쉬는 기간 없음 + 남는 시간에는 자소서 쓰고 코테 준비) + 프로덕트에 대한 욕심(실제로 사용 가능한 프로덕트를 만들고 싶어!) 때문에 구현을 마치기에도 늘 벅차서 미뤄두고 있었다.그런데 마침! 원.. 2024. 1. 8. Vite를 사용하면서 svg 컴포넌트로 만들기 1. Why?과제 테스트를 위해 React + Vite 환경에서 setting 진행중이다. svg파일을 React Component로 만들어 쓰려고 했지만 계속해서 정상적으로 랜더링이 이뤄지지 않았다. 결론부터 말하면 Vite 4.0 이후로 문법이 달라져서 생긴 이슈였다. 2. How?순서vite-plugin-svgr 라이브러리 설치svg.d.ts 파일 생성(이름 달라도 상관 X)vite.config.ts 수정tsconfig.json 수정svg.d.tsdeclare module '*.svg' { const content: React.FC>; export default content;} vite.config.tsimport svgr from 'vite-plugin-svgr';export default.. 2024. 1. 1. Eslint와 Prettier 설정하기(React + Ts 사용) 1. Why?과제 테스트를 React와 TypeScript로 진행하는 중이다. 간만에 Eslint와 Prettier를 설정하다보니 기억도 가물가물한데, 그 김에 Eslint와 Prettier를 어떻게 설정했는지를 설명하고 왜 이렇게 설정했는지에 대해서 적어보고자 한다. 아래의 설정은 React + TypeScript + pnpm 기준이다. 2. Eslint init잠깐!일단 설명하기 전에, 나는 실수로 eslint를 정상적으로 적용시키지않고 과제를 제출했다...eslint를 설치하고 나서 .eslintrc.json 파일도 정상적으로 설정해줬으니 알아서 잘 돌아가겠거니~ 했는데과제 제출 후 글을 작성하는 도중에 혹시나 하고 var를 코드에 입력해봤는데 에러가 출력되지 않았다...뒤늦게 eslint init.. 2023. 12. 31. npm VS yarn Vs pnpm Vs yarn berry 뭘 써야 해??? 1. Why?삼성청년SW아카데미에서 첫 프로젝트인 공통 프로젝트를 시작했다. 본격적으로 개발을 하기 전에 우선 어떤 기술을 사용할지부터 결정해야 하는데, 팀원 중 Package Manager에 대한 지식이 있는 사람이 없기에 어떤 Package Manager를 사용할지 찾아보고 팀원들에게 공유하고자 한다.1. Package Manager가 뭔데,, 어디 쓰는건데,,1) 모듈? 패키지?모듈 → js에서 require라는 node.js의 도구를 사용해서 가져올 수 있는 것패키지 → 그런 모듈을 모아놓은 것2 ) Package Manager란?Package Manager가 없다면?사용하고 싶은 Package를 직접 다운로드 받아서 설치해야함의존성 처리? 그건 알아서..만약 사용하던 라이브러리가 업데이트 된다면.. 2023. 7. 7. 이전 1 다음
