본문 바로가기

전체 글153

[React/Typescript] CSS Property를 Props로 사용하는 법 컴포넌트를 만들 때, CSS Property 값을 Props로 받고 싶을 때가 있다. style 자체를 넘겨받고 싶을 땐, React에서 제공해주는 React.CSSProperties 타입을 사용하면 된다. interface TestProps { style: React.CSSProperties; } const Test = (props: TestProps) => { return ; }; export default Test; 하지만 css property 중 하나의 값을 프롭으로 받고 싶다면 어떻게 해야 할까? csstype 모듈에서 StandardProperties를 import해서 원하는 css property를 키값으로 넣어주면 된다. import type { Properties } from "csst.. 2022. 8. 22.
[React] Jest SyntaxError: Cannot use import statement outside a module TDD를 공부하기 위해 Jest를 설치하고... //jest.setup.js import "@testing-library/jest-dom"; react testing library를 사용하기 위해 jest.setup.js 파일을 생성하고 test를 실행하는데 에러가 발생했다. 공식문서와 스택오버플로우를 돌아다니며 설정 프로퍼티에 대한 설명을 읽고 아래와 같이 다 세팅했음에도 SyntaxError: Cannot use import statement outside a module 에러가 자꾸 발생했는데... //babel.config.js module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/.. 2022. 8. 16.
[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.

티스토리툴바