Chunho’s DevLife

selectBox를 사용하기 위해 기존에 제공되는 select 태그를 사용해도 되지만, selectBox 클릭 시 나타나는 options를 커스텀하기 힘들다는 단점이 있다. ul과 li를 사용하여 selectBox를 직접 구현 할 시 options를 li로 나타내기 때문에 css를 사용하여 자유롭게 커스텀 할 수 있다. css를 제외하고, selectBox는 const CustomSelect = ({ handleChangeOption, isShowOptions }) => { return ( { handleChangeOption() }} className="sbc_label" > 카테고리를 선택해주세요. option1 option2 option3 ) } 위와 같이 컴포넌트로 만들 수 있다. options가..

모달창을 생성하기 위해 먼저 modals 폴더에 Modal jsx 파일을 생성해준다. import React, { Component } from 'react' class Modal extends Component { constructor(props) { super(props) } render() { const { open, close } = this.props return ( {open ? ( 모달창입니다. ) : ( )} ) } } export default Modal 위와 같이 props로 모달창을 제어하기 위한 toggle인 open과 open을 false로 바꿔 모달창을 사라지게 할 close 함수를 받아온다. open이 참일 경우에만 모달창이 나타난다. this.state = { modalOpe..

css 작업 중 margin이 안먹는 문제가 발생하였다.. margin이 겹쳐져 있을 때 주로 발생하며, 이를 해결하기 위해서는 border, padding, inline을 적절하게 사용하면 된다.

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하여 컴포넌트를 감싸주면 적용된다.