함수형 프로그래밍 이란? 함수형 프로그래밍은 도대체 무엇일까? 위키피디아에 나오는것을 보면 수학 함수를 사용하고 side effect를 피하는 것이 특징인 프로그래밍 패터다임이라고 나와 있고 side effect 없이 순수 함수만 사용하는 프로그래밍 스타일 이라고 보면 됩니다. Side Effect란? 함수나 표현식이 자신의 스코프 외부에 ...

유틸리티 타입? 기초의 타입스크립트만 배우다보면 타입정리가 하나도 되어있지 않거나 지저분한것을 많이 느낄수 있을겁니다. 이러면 나중에 타입을 확인하기 어렵고 까다로우며 에러만 사라지면 되는 느낌으로 타입을 작성하는 자신을 볼 수 있습니다. 이러한 고충을 해결하기 위해서 나온것이 타입스크립트의 유틸리티 타입 입니다. 오늘은 여러 많은 유틸리티 타입중...

개요 약 퍼블리셔로 3년간 일하고 프론트엔드로 전향하고 싶다는 목표가 생겼습니다. 퍼블리셔로 외주를 받아서 일을 하여 프론트엔드 공부를 약 6개월 정도 하고 난뒤 여러 개인 프로젝트를 만들어 취업시장에 들어갔으나 원하는 회사에 들어가는건 어려웠습니다. 제가 부족한건 뭔지 공부를 제대로 진행하는건지에 대한 의구심이 들었고 부트캠프를 한번 다녀봐야겠다 ...

문제 정의 Next.js에서 Jest를 사용할때 RSC에 async를 붙일경우 에러가 발생하는 오류를 발견하였습니다. async를 붙이기전 export default function Page() { return <h1>App Router</h1>; } async 붙인후 export default async functio...

개요 커스텀모달이 필요할 것 같아 모달 관련 라이브러리를 사용하지 않고 Redux-toolkit을 이용해서 직접 만들려고 하니 오류가 저를 기쁘게 반겨주었습니다. A non-serializable value was detected in an action, in the path: `payload.Component`. Value: ƒ Login(par...

개요 React일 경우 저는 http-middleware-proxy을 이용한 방법을 자주 사용했습니다. Next.js에서는 다른 방식을 사용해야 했습니다. 해결방안 next.js에서는 next.config.mjs에서 rewrites을 추가해서 해당 주소로 요청을 보낼 때 cors 우회를 할 수 있었습니다. /** @type {import('...

개요 Next.js를 사용하다보면 React 라이브러리를 설치해서 해당 컴포넌트를 사용하게 될때 SSR를 지원하지 않는다면 오류가 발생합니다. 이것은 Next.js가 SSR 기반으로 각 페이지들을 pre-rendering 하기 때문에 발생하는 것 입니다. 저 같은 @toast-ui/react-editor를 사용할때 발생했습니다. 해당 문제를 해결...

개요 Next.js 가장 최신인 14 버전을 사용했고 Toast ui는 @toast-ui/react-editor 3.2.3 버전을 사용했습니다. Toast ui 설치하기 Next.js로 모든 세팅이 끝난다는것을 가정하고 Toast ui를 설치하겠습니다. https://www.npmjs.com/package/@toast-ui/react-edito...

개요 최근 팀프로젝트를 진행하던 도중 카카오맵을 이용하다 현재위치를 가져와야 하는 상황이 발생했고 Geolocation API을 통해 React에서 현재 위치를 가져올수 있었습니다. Geolocation API는 브라우저에서 지원해주는 웹 애플리케이션 위치 정보 API입니다. 개념 navigator라는 프로퍼티 안에 geolocation을...

참여하게 된 계기 퍼블리셔로 일하고 프론트엔드 공부를 한지 약 1년이 다 되어가는데 아직 실무 경험은 없었기 때문에 실무에서 어떤 것을 쓰는 것이 좋을지 지금 내 이력서에는 부족한 것이 무엇인지 내가 잘 배우고 있는지 궁금해서 프리온보딩을 신청해서 듣기로 정했습니다. 사전과제 사전과제는 그렇게 어렵지 않았습니다 간단 todolist 만드는것과 질...