일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react
- 플로이드워셜
- 데코레이터
- 싸피
- unionfind
- sqld
- Javascript
- SSAFY
- SSAFYcial
- git
- pwa적용하기
- Django
- SQL
- vitepwa
- 셀프넘버
- PWA
- 리액트
- 백준
- db
- queryset
- 알고리즘
- 싸피10기
- Python
- 머신러닝종류
- 14658
- QuerySetAPI
- js
- 싸피셜
- TypeScript
- VITE
- Today
- Total
목록FrontEnd (64)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TYfN3/btsF3lhN2L3/xAMsI78J6tGKrEavKWi7l1/img.png)
프로젝트를 진행하면서, 그림 심리 검사를 하는 기능을 넣게 되면서 그림그리는 기능이 필요하게 되었다. 하고싶은건 캐치마인드처럼 웹에서도 마우스로 그릴 수 있고, 우리 프로젝트는 웹앱 기반이 될 것이기 때문에 터치로도 그릴 수 있는 기능으로 하고 싶었다. 프로젝트 환경 React + TypeScript 우선, 리액트를 쓰기 때문에 라이브러리가 엄청 많아서 처음에는 라이브러리를 이용해서 그림을 그릴려고 했다. 후보 1. 이 분야에서 제일 많이 쓰는 것 같아 보이던 Fabric.js Introduction to Fabric.js. Part 1. — Fabric.js Javascript Canvas Library Introduction to Fabric.js. Part 1. Today I'd like to in..
우선 설치부터, tailwind npm install -D tailwindcss postcss autoprefixer Next UI npm i @nextui-org/react framer-motion 이제 설정해주자 tailwind.config.js에서 /** @type {import('tailwindcss').Config} */ const {nextui} = require("@nextui-org/react"); export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, da..
기본 세팅 : typescript, react 기본적으로는 input 태그 사용 이런식으로 안보이는 input 태그 생성 그러고 나서 react의 useRef를 이용해서 const fileInput = useRef(null); 이런식으로 다룰 변수를 하나 만들어줌 그리고 file을 저장하기 위해 useState를 써서 const [file, setFile] = useState(null) file 변수도 생성 버튼이 눌리면 → 파일 선택이 되도록하기 위해서 버튼 하나 생성 후 onClick 걸어줌 {fileInput.current?.click()}}> 업로드하기 p태그 스타일은 tailwind CSS라 무시가능 그 다음에 input 태그에 fileInput을 ref로, onChange함수를 만들어서 걸어주..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cajiTa/btsES6zHMvn/8IqeGjguDhXlB1ODoSozek/img.png)
CSS로 화면을 깎으면서 가장 거슬리는건 역시 길이다.. 정답도 없고 그냥 내가 보기에 이쁘면 다 아닌가? 싶은데 이게 은근히 어렵다 얼마전에 집에서 하던 프로젝트의 홈 배너를 열심히 모니터에 맞춰서 만들고 git에 올렸는데 다음날 싸피가서 보니까 사이즈가 엄청 안맞더라.... 왜 그런지 뤼튼과 싸워보니 모니터마다 해상도가 당연히 다르고 이걸 고려안하고 그냥 내꺼에 맞춰서 하니까 당연히 그런 일이 생긴 것.. 그럼 어떻게 해야하나? → 절대단위를 버리고 상대단위를 쓰자 한마디로 화면 비율에 맞추자 우선 맨날 천날 px만 쓰던 나, 단위가 뭐뭐 있는지부터 정리해보자 1. px 매일쓰던 그거 픽셀, 평소에는 cm, m같이 쓰는 그런 단위이다. 얘는 고정적인 값, 즉 절대단위에 속한다 근데 얘를 왜 쓰는게 불..
현재 프로젝트에서 JWT 인증키를 이용해서 로그인을 구현하려고 한다. 이때, 이 인증키를 어디에 저장해야할까? 현재 다른 데이터들은 Redux - persist를 이용해서 session storage에 저장하고 있다. 로컬을 쓰지 않은 이유는 창을 닫으면 정보를 삭제하고 싶었기 때문..(이후 수정할지도..) 여튼, JWT Token을 local storage나 session storage 같은 Web storage에 저장하면 클라이언트에서 자바스크립트에서 요청을 담아 보내기 때문에 XSS 공격에 취약하다고 한다. XSS이란? 더보기 = Cross Site Scripting 공격하려는 사이트에 악의적인 스크립트를 삽입해서 해당 스크립트가 당하는 사람에게 동작하도록 하는 것 이를 통해서 당하는 사람은 개인 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbGbX4/btsDC9EqqbB/hkNAWD25C1LqeUis0R7R5K/img.png)
React 프로젝트는 Vite를 이용해서 만들어보자 Vite는 저번에 Vue를 했을 때 정리해 둔 것이 있으니 그걸 참고해서 설치하면 된다. 2023.11.07 - [Vue] - [Vue] SFC build tool (Vite) [Vue] SFC build tool (Vite) # Vite 프론트엔드 개발 도구 공식 문서 참고, Vue 공식문구에서 설치 방법 확인 npm create vue@latest 뜨는 옵션들은 No로 우선 통일 cd vue-project/ npm install 자동으로 생긴 vue-project 위치로 가서 설치 npm run memezz.tistory.com # 왜 Vite를 사용해서 만들까? 궁금해서 물어보니까 뤼튼님이 이렇게 말하신다... 즉, 빠르고 최신 JS를 쓸 수 있고..
보호되어 있는 글입니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bvQkSv/btsB182JpaJ/KEH4bERBKeZ5K7RmrzYvTk/img.jpg)
# 리액트란? 웹과 네이티브 사용자 인터페이스를 위한 라이브러리 SPA를 쉽고 빠르게 만들 수 있게 도와주는 도구 더보기 SPA란? = Single Page Application 2023.11.01 - [Vue] - [Vue] Front-end 사전지식 참고! # 리액트의 장점 1. 빠른 업데이트와 랜더링 속도 리액트도 Vue와 동일하게 Virtual DOM이라는 것을 사용 → 최소한의 업데이트 부분을 통해 빠르게 랜더링 가능 더보기 2023.11.07 - [Vue] - [Vue] Virtual DOM 2. 컴포넌트 기반 구조 컴포넌트란?? 하나의 페이지에는 여러 구성요소가 있는데, 각각의 요소들을 컴포넌트라고 함 더보기 2023.11.07 - [Vue] - [Vue] Vue Component 사용해보기..