본문 바로가기

전체 글153

[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.
반응형 CSS, 뷰포트, 여러 단위(%, vw, em, rem), 미디어 쿼리 반응형 css를 처음 접하고 공부를 할 때, 뷰포트나 여러 단위(%, vw, em, rem) 등이 많아 되게 헷갈렸었는데, 개발 시에 어떤 식으로 적용이 가능한지 그리고 애매한 개념들에 대해 정리해 보겠습니다. 뷰포트(viewport) 뷰포트란 사용자가 브라우저에서 웹 페이지를 볼 수 있는 영역을 의미합니다. 일반적으로, 데스크탑에서는 브라우저의 크기에 따라 뷰포트의 크기가 변합니다. 웹 개발을 할 때 개발자 도구에서 확인해 보면 브라우저의 크기에 따라 html 태그의 크기가 변하는데, html 태그의 width 기본값이 100%라서 그렇습니다. html 태그의 넓이가 뷰포트 영역의 넓이와 같냐고 한다면, 꼭 그렇지는 않습니다. 스크롤바 또한 뷰포트 영역에 포함되기 때문에, 스크롤바가 있다면 html 태.. 2022. 4. 2.
[Spring] Spring Data JPA PageRquest 관련 에러 Page findAllPostByCategory(PageRequest pageRequest); Page findAllPostByCategory(Long categoryId, PageRequest pageRequest); 위처럼 파라미터가 PageRquest 하나였을 땐, 잘 실행되다가 Long categoryId가 파라미터로 추가되면서, but parameter 'Optional[pageRequest]' not found in annotated query ~ java.lang.IllegalStateException: Using named parameters for method public abstract ~ 같은 에러들이 발생했습니다.. 아래쪽 Illegal 에러로 검색해본 결과, @Param 어노테이션.. 2021. 12. 30.

티스토리툴바