코딩이 모래?

거의 한달동안 고치지 못한 오류를 드디어 고친 기념! 블로그 포스팅으로 남겨두려고 한다 코드에서 recoil을 사용하여 전역으로 사용하는 변수인 change가 있다. 이 change의 초기값은 false이며 어떤 값들이 post, delete, put되면 prev=>!prev로 설정해서 이전과 다른 값이 되도록 설정한다 useEffect는 이 값을 감지하여 데이터를 다시 가져오는데 여기서!!!! 데이터가 바로 가져와지지 않는 오류가 발생했었다 즉 change가 바뀌는 것을 useEffect가 알아차리지 못 하는 것... 이걸 거의 한달 동안 끙끙거리며 고치지 못했었다 처음 생각한 방법은 값이 변경될 때는 현 컴포넌트에서 하위 컴포넌트에서 변경되므로 그 밑으로 함수를 넘기고 이것을 상위 컴포넌트가 감지하는..

프로젝트 정리/대충 2023. 5. 12. 22:38

Web은 HTML, CSS, JavaScript와 같은 기술을 사용하여 웹 페이지, 웹 애플리케이션, 웹 서비스 등을 제작하고 제공할 수 있으며, 사용자들은 이를 이용하여 정보를 공유하고 소통하며, 다양한 서비스와 컨텐츠를 이용할 수 있습니다. Web은 인터넷의 핵심 기술 중 하나로, 현재는 거의 모든 분야에서 사용되고 있습니다. Web 기술의 발전으로 인해, 사용자 경험의 개선, 소셜 미디어, 전자상거래, 빅데이터, 클라우드 컴퓨팅 등 다양한 분야에서 혁신적인 변화가 이루어지고 있습니다.

카테고리 없음 2023. 4. 1. 22:05

시작하기 앞서 이 과정은 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

원래는 npm 관련 모듈을 사용하려고 했으나... css적용하기도 까다롭기도 해서 그냥 내가 만들려고 한다 도전! ✳️기본 달력 형태 만들기 일단 과정은 다음과 같다 1. 오늘이 속하는 달의 첫날은 1년 52주 중 몇번째 주? 2. 오늘이 속하는 달의 마지막 날은 1년 52주 중 몇번째 주? 3. 첫 주부터 마지막 주를 +1 씩 돌아가며 날짜를 7일씩 달력에 뿌린다 moment 라이브러리를 사용해줄것이다. const [date, setDate] = useState(moment()); const today = date.clone().format("YYYY-MM-DD") // 오늘 날짜 미리 저장 builddCalendar함수로 달력이 출력될 때 필요한 array들을 관리해준다. const buildCale..

프로젝트 정리/대충 2023. 2. 4. 13:05

대충 사용언어 및 개발환경 프론트 백 언어: Javascript 프레임워크: NEXT.js ? 프로그램 방향 대학생활을 하면서 느꼈던 점, 배웠던 점을 기록하고 자료들을 모을 수 있는 사이트 기능 소개 ✳️ 교과 비교과 등 카테고리 분리화 교과는 해당 학기에 들었던 수업에 대해서 정리하고 비교과는 자신의 대외활동 같은 것들을 정리할 수 있도록 카테고리를 분리화시켰다. ✳️기록 기능(파일, 글) 하위 카테고리에 들어가서 자신이 해당 활동에서 기억하고 싶거나 인상깊었던 부분을 간략하게 적을 수 있도록 한다. 비교과에 한하여 작성할 때 기간을 추가적으로 기제할 수 있고 캘린더 하단에 활동했던 활동들이 뜬다 ✳️ 검색 글과 파일을 찾을 때 선택적으로 하위카테고리 내에서 검색을 할 수도 있다. 향후 포스팅들은 해..

프로젝트 정리/대충 2023. 2. 4. 13:04

참고 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 설치방법 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm i -D tailwind-styled-components 이후에 //global.css @tailwind base; @tailwind components; @tailwind utilities; //tailwind.config.js module.exports = { co..

React 2023. 2. 1. 22:21