일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- .env
- leetcode
- commitlint
- toast-ui-editor
- Weekly Contest
- LV. 2
- tailwindcss
- 컴포넌트 최적화
- sql
- Vite
- React Private Routes
- 모던 자바스크립티 Deep Dive
- Sanity.io
- react-dom
- React
- medinum
- Medium
- Biweekly Contest 79
- 호이스팅
- React Router dom v6
- next.js
- engines locking
- javascript
- eslintrc
- 모던 자바스크립트 Deep Dive
- 프로그래머스
- React Public Routes
- React.memo
- BFS
- next-auth
- Today
- Total
목록전체 글 (55)
뚜벅
이번에 프로젝트를 진행하면서 글 작성 markdown이 필요했습니다. 그래서 찾아본 결과 toast ui editor이 문서화도 잘되어 있고, 커스텀을 할수 있는 점, 디자인이 예쁜 점을 고려해서 toast ui editor 라이브러리를 사용하게 되었습니다. 하지만 아래와 같이 설치하니깐 버전에러가 발생했습니다. 자세히 살펴보면 toast-ui-editor라이브러리가 리액트 17.0.1까지 지원한다고 되어 있습니다. 그래서 터미널에 다음과 같이 입력 해줍니다. npm install react@^17.0.1 react-dom@17.0.1 하지만 버전을 다운 그레이드 하면 또 다른 에러가 발생합니다. 리액트 버전 18에서는 위와 같이 ReactDOM을 import 하지만 버전 17에서는 client를 제거해..
React Router dom을 이용해서 프로젝트를 진행 중 로그인 여부에 따라 보이는 경로를 다르게 할 방법이 없을까! 고민하다 공부한 내용을 정리 해봅니다. 예를 들어 다음과 같은 경로가 있고, 1. 로그인하지 않은 유저는 "/todo" 경로로 이동할 경우 "/" 경로로 리다이렉트 한다.라는 조건이 있는 경우 아래와 같이 utils 폴더에 PrivateRoutes.jsx 파일을 생성하여 아래와 같이 작성해줍니다. Context API를 사용해서 로그인 여부를 관리해줬는데, 이때 로그인되지 않은 경우, "/" 경로로 리다이렉트 해줍니다. 그리고 로그인된 경우 Outlet를 사용해서 자식 경로 요소를 렌더링 해줍니다. 그리고 App 컴포넌트에서 Private 경로의 라우트에 생성한 PrivateRoute..
텍스트 영역에서 줄 바꿈 표시하는 법! 리액트 프로젝트 진행 중 textarea에서 엔터 처리한 글이 줄 바꿈 없이 일렬로 보인 부분을 수정하면서 알게 된 것입니다. CSS의 white-space 속성에 pre-line을 추가해주면 textarea에서 엔터 처리한 부분이 줄 바꿈 되어 정상적으로 보입니다. p { font-size: 1rem; white-space: pre-line; } 참조 https://thewebdev.info/2021/09/21/how-to-display-line-breaks-from-saved-text-area-in-a-react-component/
리액트 프로젝트 진행 중 select 태그를 사용하던 중 생긴 경고입니다. 서울특별시 부산광역시 대구광역시 경고 내용은! 위의 코드처럼 option 안에서 selected를 사용하지 말고, 대신 select태그 안에서 defaultValue 또는 value를 사용하라고 말해 줍니다. 리액트 공식 문서에는 value를 사용하라고 나와 있습니다. https://reactjs.org/docs/forms.html#the-select-tag Forms – React A JavaScript library for building user interfaces reactjs.org 대신 value만 사용하게 될 경우 아래와 같은 경고문을 받습니다. Warning: You provided a `value` prop to ..
tailwindcss!! 유튜브에서 어떤 외국인 분이 사용하시는 거 보고 너무 편해보여서 이번에 사용하는 김에 글 작성합니다.! 우선! tailwindcss 와 postcss를 설치해줍니다. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init 그리고 postcss.config.js 파일을 생성하여 다음을 추가 해줍니다. 생성된 tailwind.config.js의 content에 다음을 추가해줍니다. 추가로 screens와 colors 등 추가하고 싶은 것들을 추가할 수 있습니다. https://tailwindcss.com/docs/screens tailwind.css 파일을 생성하여 tailwind 지시문을 추가해줍니다. @tailw..
sourcetree에서 작업 경로 추가하기 위해 wsl2에서 현재 폴더 위치를 찾는법 입니다. echo 'alias explorer="explorer.exe ."' >> ~/.bashrc source ~/.bashrc 👇 explorer 👇 아래와 같이 해당 파일 위치의 폴더가 열립니다! \\wsl$\Ubuntu-20.04\home\lsh\typescript 참조 링크: https://superuser.com/questions/1338991/how-to-open-windows-explorer-from-current-working-directory-of-wsl-shell