react

프론트엔드 개발을 하다보면 흔히 마주할 수 있는 상황이다. Select, Toggle 또는 DatePicker 등의 인풋 컴포넌트들을 설계할 때, 그 컴포넌트들을 핸들링할 커스텀훅도 같이 작성해 사용할 수 있다. 보통은 useToggle, useSelect 등의 이름으로 쓰고 [value, onChange] 같은 배열을 return해 사용한다. 외주 개발을 하면서 초기에 이런 컴포넌트 작업을 해야할 일이 많았다. import useSelect from '~hooks/useSelect'; import Select from '~components/Select'; const App = () => { const [value, handleSelectValue] = useSelect(); return ( ); };..

귀찮은 일은 꽤나 자주 일어난다. 외주 작업 중 테이블 컴포넌트를 구현해야하는 일이 있었고, 기존 코드는 Core UI라는 라이브러리를 사용하고 있었다. 라이브러리가 4.0버전으로 업그레이드 되면서 PRO버전이 새로 생겼고, 그를 위한 급나누기에 테이블 컴포넌트가 걸려버렸다. 기존에 사용하던 onRowClick, scopedSlots등의 기능들이 사라졌고 직접 구현해야 했다. { navigate(`/notices/${data.id}`); }} customCellItem={{ info: data => alert(data.index)}>커스텀cell, date: data => {data.date}, }} />; 추상화된 Table은 상위 컴포넌트는 위와 같이 사용할 수 있다. 컬럼과 data 배열을 넘겨주면..

개발을 할때 새로운 무언가를 맞닥뜨리는 경우가 줄어들어서 그런가, 코드를 이쁘게 짜는 것에 관심이 많아졌다. 두둥을 개발하면서 마주친 고민들을 공유해보려고 한다. 리액트로 개발하다보면 선언적인 코드에 대해서 고민하게 된다. 리액트 자체가 선언형이기 때문일수도. 선언적인 코드 명령형 프로그래밍과 선언형 프로그래밍에 대한 글들에선 흔히 'How'와 'What'의 차이로 설명한다. 반복문을 통해 배열의 원소를 순회하면서 html요소를 생성하고 보여주는 코드이다. 어떤 절차로 이루어지는지가 드러나 있다. const arr = [1, 2, 3, 4, 5]; return ( {arr.map((elem) => ( {elem} ))} ); React에서 jsx 문법을 사용하면 이렇게 표현할 수 있다. 핵심 데이터만 외..

AWS EC2 상에 Nginx로 리액트 프로젝트를 배포했던 경험 정리를 위한 글. 이전에 서브 도메인에 SSL 인증까지 마쳤다. 그걸 그대로 사용할 예정이다. [Nginx] 서브 도메인 설정, HTTPS 적용 참고1 참고2 'dev.9yujin.shop' 그리고 'prod.9yujin.shop' 이렇게 두 개의 서브 도메인을 만들어보자. 1. 가비아 DNS 레코드 수정 가비아에서 먼저 CNAME으로 서버 도메인을 등록해준다. dev와 prod 두개를 생성. 9yujin.tistory.com React 파일 빌드, 서버 업로드 yarn 패키지 매니저를 쓰고 있었다. 프로젝트 파일을 빌드해준다. yarn build 파일질라를 이용해 EC2에 빌드한 파일을 업로드했다. 경로는 /home/ubuntu/test/..

🚨 야매주의 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 세종대왕님 만세. 한글로 된 문서가 새삼 반갑다. 문서에선 카카오 로그인이 진행되는 과정을 이렇게 표현하고 있다. 프론트에서 카카오 서버로 로그인을 요청하면 인가 코드가 발급된다. 그 인가 코드로 카카오 서버에 다시 요청해서 토큰을 받아와 사용한다. 먼저 Kakao Developers 에서 애플리케이션을 생성한다. 카카오 로그인 동의 항목, 도메인, 리다이렉트 URI 등을 설정하고 앱 키를 확인한다. 1트 노드 서버에서는 REST API를, 리액트 프론트에서는 자바스크립트 SDK를 사용..