Chunho’s DevLife

nextJS는 SSR 기반이기 때문에 CSR와 달리 window에 접근할 수 없다. 따라서 일반적인 방식으로 사용한다면 에러가 난다. nextJS에서 localStorage 또는 sessionStorage를 사용할 땐 랜더링이 이루어 진 후 사용할 수 있다. 함수형 컴포넌트일 경우 useEffect, 클래스형 컴포넌트일 경우 componentDidMount 함수 안에서 사용해주면 된다. componentDidMount(){ if(this.state.path==="/businessMain"){ this.setState({ companyName:localStorage.getItem("companyName") }) } } 위와 같이 사용해주면 된다. 기본적으로 ["key", "value"]의 쌍으로 이루어져 ..

먼저 여러장의 이미지를 업로드하고 미리보기 위해 images: { detailImageFile: [], detailImageUrl: [], }, 위와 같은 state를 생성한다. 사진 선택 { if (files.length) { setImageFromFile({ file: files[0], setImageUrl: ({ result }) => this.setState({ ...this.state, detailImageFile: this.state.images.detailImageFile.push( files[0] ), detailImageUrl: this.state.images.detailImageUrl.push( result ), }), }) } }} /> 이후 위와 같이 file type의 input ..

checkBox 기능을 구현할 때, 체크박스의 onChange함수에서 호출한 checkHandler 함수에서 boolean type의 isChecked 상태를 setState 함수를 사용하여 변경해주고 이후 checkItemHandler 함수를 호출하여 isChecked의 값에 따라 적절하게 checked된 Item을 집합에 삽입하고 삭제하는 코드를 작성하였다. 문제는 chexkHandler 함수에서 setState가 동작하지 않는 것이였다. 원인을 찾아본 결과 setState 함수가 비동기적으로 처리되기 때문에 setState보다 checkItemHandler함수가 먼저 실행되어 기능이 정상적으로 동작하지 않았던 것이다. 따라서 setState 함수를 동기적으로 처리 할 수 있는 방법이 필요했다. ch..

next를 사용하는 프로젝트 진행 중 채널톡을 다는데 ReferenceError: window is not defined 다음과 같은 에러가 났다. React 가이드를 따라 채널톡을 붙히면 CSR이 진행 될 시 window에 접근할 수 있지만, next는 SSR이 진행되어 서버측에서 DOM에 접근할수 없기에 생기는 오류였다. pages의 _document.js 파일에 다음과 같은 스크립트를 삽입하여 간단하게 채널톡 기능을 이용할 수 있었다.

API에서 데이터를 받아와 콘솔에 찍어본 결과 위와 같이 출력되는 문제가 발생했다. JSON.stringify 함수를 이용하여 문자열로 변경한 뒤 출력해봤지만 단순히 문자열로 많은 정보들이 출력돼서 가독성이 상당히 떨어지고 색조차 입혀져있지 않았다. JSON.parse()를 사용하여 다시 객체로 변경해주면 또다시 [object Object]가 출력.. 딜레마에 빠졌다. 원인은 객체 자체만 출력한 것이 아닌 문자열과 같이 console에 출력했기 때문이다. 문자열이 아닌 객체 그 자체를 console.log 안에 넣어주어야 객체가 잘 출력되는 것을 확인할 수 있었다.

먼저 npm install --save @types/navermaps 명령어를 사용하여 패키치를 설치해준다. 이후 Client ID를 발급받기 위해 https://www.ncloud.com/product/applicationService/maps NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 해당 사이트에 접속하여 결제수단 등록 후 Application 등록을 해준다. 이후 public의 index.html에 위 코드를 넣어준다. 네이버 지도를 첨부 할 컴포넌트로 이동한다. co..

Header, Footer, Nav 등의 컴포넌트를 한번에 적용하기 위해 Layout을 만들어두면 편리하게 사용할 수 있다. components 폴더안에 Layout 폴더를 만들고, Layout.tsx를 생성한 뒤에 import React from "react" const Layout = (props:{ children:React.ReactNode }) =>{ return ( {/* */} {props.children} {/* */} ) } export default Layout 한 뒤에 위와 같이 children을 props로 받아 레이아웃을 만들어준다. 이후 Layout을 import하여 컴포넌트를 감싸주면 적용된다.

본 게시물은 https://pinokio0702.tistory.com/373 [Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법 안녕하세요. 회사에서 베트남 시니어 개발자 코드를 통해 학습한 내용을 일부 기록한 글입니다. axios를 잘 정리해서 사용한 것 같아서 따라서 사용하고 있습니다. 이 코드를 보고 개발하는 프로 pinokio0702.tistory.com 블로그를 바탕으로 작성했으며, 추후 다시 확인후 사용하기 위함임. 디렉토리 구조는 위와 같다. api 폴더를 만들어준 뒤 그 안에 axios instance를 생성 할 core->index.ts를 생성해주고 이를 바탕으로 request를 보내는 hooks들이 있는 main.ts를 생성해준다. ..

타입스크립트에서 styled-components를 사용할 때 styled-components를 설치해준 뒤 npm i -D @types/styled-components 명령어를 사용하여 타입을 정의받은 후 사용한다. 위와 같이 디렉터리 구조를 잡고, GlobalStyles를 사용하여 전역적인 css를 지정해줄 수 있다. probs를 받을 땐 이처럼 타입을 지정해서 사용한다.

프로젝트를 clone한 뒤 실행시킬 때, 필요한 라이브러리와 모듈을 모두 설치해주어야 한다. 위와 같이 package.json에서 사용된 라이브러리를 모두 확인할 수 있고, 한번에 설치하고자 할 때 npm init npm install 위 명령어를 순서대로 입력해주면 된다.