[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 2주차 회고 및 배운 것

🙋‍♀️배운것들supabase + Next.js에 대해서 새로 배웠다..!  📌 Next.js 프로젝트 생성 우선, shadcn ui와 함께 Next.js를 시작하기 위해서 Shadcn ui의 getting started를 따라서 프로젝트를 생성해준다.npx shadcn@latest init이후 실행은 react와 동일하게 해주면된다.(npm install해주고, npm run dev로 확인하기)  📌 supabase 연결우선 supabase에서 계정과 프로젝트를 만들어주자 next.js에서도 supabase를 사용하기 위해서 설치를 해주자npm install @supabase/supabase-js 그리고 연결하기 위해서 env를 설정해주자 그리고, next.js에 supabase.ts파일을 lib..

• format_list_bulleted 교육/프론트엔드 프로젝트 캠프
• · 2024. 11. 26.
• textsms

[React] VitePWA 를 이용해 Vite기반 React프로젝트에 PWA적용하기

이번 프로젝트에서는 알림 기능이 중요하기 때문에PWA를 이용해서 프로젝트를 진행하기로 했다. 그래서 본격적인 프로젝트를 시작하기 전에,VitePWA 플러그인을 이용해서 적용해보고 Vercel을 이용해서 간단하게 배포 후 잘되나 확인해보려고 한다.고고 1. Vite기반 React프로젝트 만들기사실 react가 아니어도 크게 상관없을 것 같다.vite만 기반으로 된다면 괜찮음 npm create vite@latest 프로젝트명명령어를 통해 프로젝트를 만들어주고  2. Vite PWA 설치 및 설정https://vite-pwa-org.netlify.app/ Vite Plugin PWAZero-config PWA Framework-agnostic Plugin for Vite and Integrationsvite..

• format_list_bulleted FrontEnd/React
• · 2024. 4. 17.
• textsms

[TypeScript] 타입을 한 곳에 모아보자~~

배경 consult라는 type이 상당히 긴데, 자주쓰임 아이고 불편해…그래서 따로 빼서 import 하려고 함 해 보 자 고 src/types/DataTypes.ts 라는 파일을 만들어 주고, // DataTypes.ts // 고민 타입 export type consultType = { consultId : number, memberId : number, title : string, content : string, categoryId : number } 이런식으로 export를 바로 하면서 넣어주자 만약 여러개가 되어도 // DataTypes.ts // 고민 타입 export type consultType = { consultId : number, memberId : number, title : str..

• format_list_bulleted FrontEnd/TypeScript
• · 2024. 3. 22.
• textsms

[React] 마우스로 그림을 그려보자

프로젝트를 진행하면서, 그림 심리 검사를 하는 기능을 넣게 되면서 그림그리는 기능이 필요하게 되었다. 하고싶은건 캐치마인드처럼 웹에서도 마우스로 그릴 수 있고, 우리 프로젝트는 웹앱 기반이 될 것이기 때문에 터치로도 그릴 수 있는 기능으로 하고 싶었다. 프로젝트 환경 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..

• format_list_bulleted FrontEnd/React
• · 2024. 3. 22.
• textsms

[React] Vite에 Tailwind CSS와 Next UI 세팅하기

우선 설치부터, 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..

• format_list_bulleted FrontEnd/React
• · 2024. 3. 12.
• textsms

[React] 파일 업로드 버튼 만들기(+ typescript)

기본 세팅 : 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함수를 만들어서 걸어주..

• format_list_bulleted FrontEnd/React
• · 2024. 3. 12.
• textsms