본문 바로가기

웹30

[React] 재귀적인 구조에서 검색기능 구현하기 프론트엔드 개발을 하면서 컴퓨터의 폴더 구조처럼 재귀적인 구조로 데이터를 렌더링해야 할 때가 있다. 아래 데이터를 보면 Directory 타입은 이름과 하위 Directory들을 가지고 있다. interface Directory { name: string; directory?: Array; } const directory: Array = [ { name: "직박구리", directory: [] }, { name: "가마우지", directory: [ { name: "동고비", directory: [{ name: "곤줄박이" }, { name: "할미새사촌" }], }, { name: "조롱이", directory: [ { name: "말똥박이", directory: [{ name: "오목눈이" }] },.. 2022. 8. 15.
[Next.js] Next.js에서 API Routes + TypeORM 사용하기 저는 회사에서 Next.js로 프론트 개발을 해오고 있는데, 백엔드 개발자가 바빠 일일이 API를 부탁하기 조금 어렵거나, 요구사항이 자주 바뀌는 API의 경우 Next.js의 API Routes 기능을 사용해 직접 API를 만들고 있습니다. Create, Update, Delete의 경우 복잡한 비즈니스 로직이나, 트랜잭션 관리가 필요하고, DB에 락을 걸기 때문에, Select쿼리만을 사용하는 통계 쿼리 정도만 직접 만들어 차트로 시각화하고 있습니다. pages/api 폴더 안에 member.ts라는 파일을 만들고 아래와 같은 코드를 짜게 되면, //pages/api/member.ts export default (req, res) => { return res.status(200).json({ name.. 2022. 7. 17.
[React/Typescript] html 태그의 기본 props를 사용해 컴포넌트를 만드는법 문자열과 onClick 함수를 props로 전달받는 Button 컴포넌트를 만든다고 가정하면 아래와 같은 컴포넌트를 만들어 쓸 수 있습니다. interface ButtonProps { children: string; onClick: () => void; } const Button = ({ children, onClick }: ButtonProps) => { return {children}; }; export default Button; 그리고 아래와 같이 불러다 쓸 수 있겠죠? import Button from "components/Button"; const App = () => { return console.log("Button Clicked")}>Button; }; export default App;.. 2022. 7. 16.
[React/Typescript] 리액트 컴포넌트 npm 라이브러리로 배포하기 개발자라면 한 번쯤 자기의 코드를 오픈소스로 배포해 보고 싶다는 생각을 해보셨을 거라 믿습니다. 저도 다운로드 수는 작지만 직접 만든 리액트 컴포넌트들을 배포 후 꾸준히 업데이트 중에 있습니다. 오늘은 리액트에서 만든 컴포넌트나 훅들을 npm 라이브러리로 배포하는 법을 알아보겠습니다. 저는 먼저 vite에서 지원해 주는 npm create vite로 react-ts 프로젝트를 생성하였습니다. create-react-app 또는 명령어 없이 리액트 환경을 구성하셔도 됩니다. 그런 다음 컴포넌트를 하나 만들어보겠습니다. components/index.ts에서 한번... /index.ts에서 한번 모듈을 내보내 주겠습니다. 그런 다음 ts파일을 빌드하기 위해 tsconfig-cjs.json 파일과 tsconf.. 2022. 7. 3.

티스토리툴바