profile
무엇이든 될 수 있는 멋쟁이 토마토🍅 프론트 꿈나무💙

history.push() 로 이전 검색 결과 구현하기

취업하고 처음 쓰는 첫 글이다!회사 코드를 작성하면서 '이전 검색 결과' 기능을 구현해야 했다.간단하게 history.goBack() 으로 이전페이지로 돌아감으로써 이전 검색 결과를 구현할 수도 있지만 그렇게 간단하지만은 않았다.예를 들어 '토마토'로 검색해서 관련 검

2022년 5월 17일
·
1개의 댓글
post-thumbnail

자바스크립트 변수 선언에 관련된 팁들

이번 글에서는 자바스크립트 관련해서 변수 선언과 관련된 팁들을 글로 적어 공유하고자 한다.ES6 에서 등장한 const 로 변수를 선언하는 방법은, 기존의 var 키워드와 달리 재할당을 금지한다.때문에 일반적으로 코드를 작성할 때는 const 를 우선으로 쓰는 것이 좋

2022년 5월 6일
·
0개의 댓글

[퍼온 글] redux-saga 가 해결하는 문제

redux-saga 가 해결하는 문제 출처: https://min9nim.github.io/2020/04/redux-saga/

2022년 4월 9일
·
0개의 댓글
post-thumbnail

리액트 Hooks 복습!

클래스 컴포넌트를 대체하기 위해 함수형 컴포넌트에서 클래스 컴포넌트가 수행하던 역할을 수행하기 위해 나타난 개념최상위(at the top level)에서만 Hook 을 호출해야 한다반복문, 조건문, 중첩된 함수 내에서 Hook 을 실행하지 않는게 좋음React 함수 컴

2022년 4월 8일
·
1개의 댓글
post-thumbnail

Next 배포시 Dynamic Route 에서 404 가 뜨던 문제 해결

Next 로 배포를 하던 중 아주 치명적인 에러가 발생했다.사용자의 프로필 페이지로 들어갈 때 404 에러가 뜨던 것이 원인이었다.특별한 원인을 찾을 수 없던 발을 동동주처럼 구르던 중 해결책을 찾게 되었다.여러 다방면으로 시도를 하던 중 vs코드의 터미널 콘솔에서 힌

2022년 4월 5일
·
0개의 댓글
post-thumbnail

Next 프로젝트 Vercel 에 배포하기

프로젝트를 완성했다.물론 버그 투성이고 리팩토링할 부분도 많지만 리팩토링은 꾸준히 하고 먼저 배포를 하기로 결정했다.아주 예전에 강의를 보고 따라하면서 Heroku 를 통해서 배포를 한 적이 있었다.그런데 이번에 Next 로 진행한 프로젝트는 Vercel 에 배포하기로

2022년 4월 5일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] 넥스트 프로젝트에 카카오맵 연동하기

현재 진행하고 있는 프로젝트에 카카오맵을 연동하게 되었다.그런데 찾아보다보니, 카카오맵 공식 홈페이지에서 보여주고 있는 예시는 ES5 문법으로 된 바닐라 자바스크립트로 되어 있는 것 같았다.이걸 넥스트와 타입스크립트로 적용하는 과정에서 다양한 블로그와 글들을 참고했고

2022년 4월 1일
·
0개의 댓글

FileReader 로 여러 이미지 파일 동시에 첨부하기 ( + Next/React, TypeScript )

이전 프로젝트에서 FileReader 로 이미지 파일 여러개를 첨부하는 코드를 그대로 현재 프로젝트에 적용했는데 문제가 발생했다동시에 여러개, 2~3개의 사진을 첨부하면 FileReader 로 읽어서 readAsDataURL 메서드가 돌아서 사진을 데이터URL 로 돌려

2022년 4월 1일
·
1개의 댓글
post-thumbnail

[react-hook-form + TypeScript] 리액트 훅 폼 사용법과 타입 주기

오늘은 react-hook-form 의 기본적인 사용법과 타입 주는 방법을 작성해보고자 한다.바로 본론으로!!회원가입을 하는 SignupForm.tsx 을 작성한다고 쳤을 때 타입스크립트에서는 먼저 회원가입 양식에 들어갈 각 데이터의 타입을 먼저 정의해주어야 한다.그

2022년 4월 1일
·
1개의 댓글
post-thumbnail

Mock Service Worker 기본적 사용법 및 TypeScript 적용하기

Mock Servie Worker (이하 MSW) 를 사용하기 위해서 기본적으로 작성해야 할 코드에 대해서는 이전 포스팅에서 작성했다.이번에는 실제로 MSW 핸들러 코드를 작성하는 법을 작성해보고자 한다.또 MSW 를 적용하는 것은 쉽지만, 타입스크립트를 적용하는 부분

2022년 3월 29일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] 넥스트(리액트)에 Mock Service Worker 등록하기

프론트엔드 개발을 하다보면, 서버와 DB 의 부재를 절실히 느낄 때가 있다.당장 서버와 DB 를 개발할 수 없는 환경 또는 능력이 없는데 그게 있다고 가정하고서 개발을 해야 한다.현재는 파이어베이스를 쓰고서 개인 프로젝트를 진행 중이지만, 이전에 애용했던 것이 바로 이

2022년 3월 29일
·
0개의 댓글
post-thumbnail

[Next + TypeScript] 넥스트 프로젝트에 Material UI + styled-components 적용하기 (emotion 씁시다)

나는 개인적으로 여러 UI 라이브러리 중에 Material UI (이하 MUI)를 선호하고 있다. 개인적으로 ant design 이나 부트스트랩보다 디자인이 깔끔하고 사용하기도 편한 것 같다그리고 MUI 와 함께 사용하는 것이 styled-components다.먼저 N

2022년 3월 29일
·
0개의 댓글
post-thumbnail

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 해결하기

Material UI 를 사용하면서 생각보다 이런 warning 을 종종 마주한다.코드 자체가 동작하지 않는 심각한 에러는 아니지만 콘솔창에 이 경고로 범벅이 되면 굉장히 거슬린다.처음에는 분명 애를 먹었지만 혹여나 이 경고에 헤매시는 분이 계실까봐 내가 해결한 팁을

2022년 3월 26일
·
0개의 댓글
post-thumbnail

NextJS + TypeScript 프로젝트 시작하고 절대경로 설정하기

NextTypeScriptNext 로 프로젝트를 시작하고 절대경로를 설정하는 법을 포스팅해보기로 했다.항상 이렇게 프로젝트를 열고서 설정해주는 것은 딱 처음에 한번 설정하고 새 프로젝트 전에는 쓰지 않기 때문에 까먹게 되서 이렇게 블로그에 적어서 기록해보고자 한다.넥스

2022년 3월 26일
·
0개의 댓글
post-thumbnail

event.stopPropagation() 의 쓸모 (ft. 이벤트 버블링)

개인 프로젝트를 작업하다가 존재 유무는 알고 있었지만 한번도 써보지 못 했던 event.stopPropagation() 의 필요성을 느끼고 접목하게 되었다.event.stopPropagation() 을 이해하려면 먼저 이벤트 캡처링 과 이벤트 버블링에 대해 이해할 필요

2022년 3월 25일
·
0개의 댓글
post-thumbnail

NextJS + next-redux-wrapper 로 서버사이드 환경에서 전역상태 꺼내먹기 (ft. 리덕스툴킷, 타입스크립트)

리덕스와 씨름한 고난의 행군길의 여정.. 개인 프로젝트를 만들어 나가면서 리덕스로 전역상태를 관리할 필요성을 절실히 느꼈고 리덕스툴킷으로 전역상태를 관리하고 있었다. 각 숙소의 상세페이지를 만들면서 컴포넌트를 세분화해서 만들수록 props 를 자식 컴포넌트로 내려주고

2022년 3월 24일
·
0개의 댓글