Frontend8 액션, 계산 분리해보기(함수형 프로그래밍) 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. Interface VS Type / TypeScript 1.Why?TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다. 함수의 매개변수를 선언할때는 type, props 객체를 선언할 때는 interface를 사용하는 중이였는데, 둘의 차이점을 대략적으로는 알고있었지만 정확하게는 모르고 사용하고 있었다. 그렇기에 이 기회에 둘의 차이점을 정리해보고, type과 interface를 언제 사용할지에 대해서 명확히 정의해보고자 한다. 2. Interface VS Type둘 다 type을 설정해줄때 사용하고, 대부분의 경우에서 비슷하게 작동한다고 설명한다. 그럼 어떤 차이점이 있을까?1. 객체로만 사용가능한 InterfaceInt.. 2023. 12. 18. 이전 1 2 다음
