코딩이 모래?

이제 tailwind없이는 css 구성을 못 해버리는 지경에 와버린 나...storybook을 사용하면서도 tailwind를 사용하고 싶었는데 버튼 자체의 className에 tailwind를 적용하니 아래와 같이 적용되지 않았다 반면 일반 컴포넌트에 버튼을 불러와 사용해보니 아래와 같이 잘 적용된 모습! 참고로 이때 코드는 아래와 같다// App.tsximport { Button } from "./components/Button"function App() { return ( )}export default App//components/Button.tsximport React from 'react';export interface ButtonProps { primary?: bo..

React 2024. 10. 8. 14:29

기존 NEXT에선 react-hook-form을 사용했었는데현재는 서버 액션으로 쉽게 바꿀 수 있다 ! 어떻게 하는지 살펴보자 Server Action사실 너무너무너무 간단하다 기존 form 태그에 action으로 함수를 전달해주면 된다import Button from "@/components/Button";import Input from "@/components/Input";const Login = () => { const handleForm = async (formData: FormData) => { "use server" console.log(formData) } return ( 안녕하세요! ..

React/Next 2024. 7. 10. 18:16

NEXT.js 14버전에서는 hook을 사용하기 위해 상단에 use client를 사용해 주어야 한다.왜 이런 사용이 필요할까? 이것을 이해하려면 next가 컴포넌트를 렌더링 하는 방식을 알아야 한다.그전에 기본 리액트에서 사용하는 CSR에 대해 알아보자 CSR (Client Side Rendering)CSR은 말 그대로 렌더링이 클라이언트에서 일어난다는 뜻이다CSR의 동작 방식은 위 사진과 같다 유저가 웹사이트에 요청을 보냄CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 보냄 (CDN이란 쉽게 말해 웹사이트를 방문할때 그 사이트의 콘텐츠를 빠르게 받을 수 있도록 하는 시스템이다)브라우저가 HTML과 JS 다운, 이 동안 유저는 사이트를 보지 못 함다운로드JS 실행, 데이터를 위한 API 호출, ..

React/Next 2024. 7. 8. 15:15

구글 솔루션 챌린지에 참여했을 때 팀 구성원 중에 프론트엔드 담당이 나 혼자여서 오랜만에 NEXT를 써봤다 근데!! 내가 배웠을 당시와 다르게 업데이트 된 부분이 너무 많아서 얼레벌레 문서를 찾아가며 프로젝트를 마무리 했다... 아무래도 업데이트 된 내용을 다시 공부해야 할 것 같아서 오랜만에 강의를 들어본다 시작하기 npx create-next-app@latest --typescript 시작 설치는 이전과 똑같다 생성하는 과정에서 아래의 질문들이 뜰것이다 EsLint 적용해? => EsLint는 자바스크립트 문법에서 에러를 표시해주는 도구이다. 이왕이면 적용하는 것이 좋다. src 폴더 만들어? => src폴더를 만들게 되면 안에 app폴더가 필수적으로 들어가있고 components와 같은 폴더들을 사..

React/Next 2024. 3. 18. 21:19

ver1부터 계속 고민했던 오류인데 ver2만들면서 제ㅐㄷ로 해결이 됐다 하고자 하는 것은 추가하기 버튼을 눌렀을 때 새 form태그가 생기면 안에 있는 input에 자동 포커스를 주고자 하였다 기존 코드 const addRef = useRef(null) const [addState, setAddState] = useState(false) const onClickAdd = () => { setAddState(prev=>!prev) setTimeout(() => { addRef.current.focus() }, 100); } ... return ( {addState ? :null} ) 원래는 위와 같은 방식으로 add버튼을 눌렀을 때 새div가 생겨나고 그 안 input태그에 focus를 주는 방식을 사용..

React 2023. 5. 27. 21:29

시작하기 앞서 이 과정은 pscale이 연결되어야 가능함 따라서 콘솔에서 pscale connect - [프로젝트명]을 입력해주자 로그인 로직은 다음과 같은 과정을 거친다 1. email이나 phone을 백엔드에 넘기기 --있음?--> login, --없음?-->sign in 2. 토큰 생성 -- 랜덤숫자를 생성하여 유저와 연결 3. Twillo를 사용해 유저에게 토큰(랜덤숫자)를 문자 or 메일보내기 4. 토큰을 입력하여 백엔드로 보내고 일치하다면 로그인하기 1️⃣ 로그인 화면에서 DB에 유저정보 있는지 확인하기 위의 창 에서 유저정보를 로그인하거나 생성할 것이다. email이나 phone 정보를 입력했을 때 그 정보를 통해 유저가 있는지 확인하고 없다면 새로운 유저 정보를 만들어 줄 것이다. // /..

React/당근마켓 클론 2023. 2. 10. 19:59

1️⃣ useForm 사용하여 데이터 생성 pages/enter.tsx에 들어가서 useForm을 사용해주자 //pages/enter.tsx interface EnterForm { email?: string; phone?: string; } ... const [submitting, setSubmitting] = useState(false); const {register, handleSubmit, reset} = useForm(); ... const onEmailClick = () => { reset(); // email을 눌러서 데이터를 전송하고 또 phone을 눌러서 데이터를 전송하면 // 두 가지 데이터가 동시에 전송되므로 reset사용하여 하나만 전송시켜준다 setMethod("email") }; ..

React/당근마켓 클론 2023. 2. 9. 18:13

백엔드 접근을 처음 해보지만.. 강의내용을 토대로 정리해보자 어려웡 ㅜㅜ Prisma란? nodejs, typesciprt의 ORM(Object Relational Mapping) js or ts와 데이터베이스 사이에 다리를 놓아주는 역할을 한다 (번역기라고 생각하면 됨) Prisma를 사용하기 위해서 먼저 Prisma에 DB가 어떻게 생겼는지 데이터의 모양을 설명해줘야 하는데 이 때 schema.prisma를 사용한다. Prisma가 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있는데client를 이용하면 TS로 DB와 직접 상호작용 가능하다. Prisma Studio : Visual Database Browser, DB를 위한 관리자 패널같은 것. 설치방법 npm install pri..

React/당근마켓 클론 2023. 2. 8. 19:35