본문 바로가기

캡스톤 설계 [건물별 소통 플랫폼 BBC]

유효성 체크를 위한 react-hook-form react-Hook-Form npm install react-hook-form 각 속성마다 register 함수를 붙여 유효성 체크를 해준다. 또한 유효성 체크에서 걸린 경우 하단에 빨간 관련 에러 문구가 나온다. 더보기
Next13 및redux-toolkit 세팅으로 인한 변경사항 우선 간단하게 Next13에 Redux-toolkit을 붙이기 위해 RegisterPage 컴포넌트의 로직을 꽤나 바꾸었었다. . 우선 첫번째로 커스텀 Hook인 InputGrop를 사용하지 않고 개발을 진행할 것이다. 그 이유로 아직 한 컴포넌트당 200줄이 넘어가는 파일이 없기도 하고 프론트 개발이 미숙해 새로운 기술을 금방 금방 커스텀하는것에서 시간상의 문제를 느꼈다. . . . 그로인해 InputGroup을 대신 기본 html 태그인 input의 속성들을 최대한 활용해서 코딩을 진행..! + 아래와 같이 section 태그로 입력한 값도 제출되도록 추가 우선 현재의 UI 이다. 학교 이름을 포함한 회원가입 로직도 잘 작동하여 데이터베이스에 저장됨을 확인 더보기
next13-redux-toolkit,redux-wrapper 세팅 및 회원가입 기능 구현 어우 next13으로 업데이트 된 이후 app directory에서 redux-toolkit을 어떻게 끼워야 하는지 next와 redux 두곳 모두의 공식문서에 없어서 이틀을 꼬박 삽질하며 한참을 구글링 했다... 공식문서에는 언제 업데이트 될랑가.. https://codevoweb.com/setup-redux-toolkit-in-nextjs-13-app-directory/ 기본적으로 위 링크의 정리 자료를 보고 참조 하였다. src폴더 하위에 app폴더와 redux폴더를 두었으며 리듀서 및 thunk함수와 스토어는 redux폴더에서 관리할것이다. 1. Redux-toolkit 설치 npm install @reduxjs/toolkit react-redux next-redux-wrapper npm i ax.. 더보기
회원가입 및 가입 축하 페이지 "use client"; import React, { useState } from "react"; import InputGroup from "../components/InputGroup"; import Link from "next/link"; export default function SignUp() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [nickname, setNickname] = useState(""); const [passwordCheck, setPasswordCheck] = useState(""); const [errors, setErrors] = useState({}.. 더보기
회원가입 약관 동의 페이지 import Link from "next/link"; import React from "react"; export default function Agreement() { return ( 약관동의 아래 약관에 모두 동의 합니다 서비스 이용약관 동의(필수) 최영철의 말을 잘 따를 것을 동의합니다. 최영철의 말을 잘 따를 것을 동의합니다. 최영철의 말을 잘 따를 것을 동의합니다. 최영철의 말을 잘 따를 것을 동의합니다. 서비스 이용약관 동의(필수) 최영철의 인품이 대단 하다고 동의합니다. 최영철의 인품이 대단 하다고 동의합니다. 최영철의 인품이 대단 하다고 동의합니다. 최영철의 인품이 대단 하다고 동의합니다. 서비스 이용약관 동의(필수) bbc는 국내 대학생들을 위한 서비스이며, 본인인증을 통해 만 14세 이.. 더보기
로그인 시작 페이지 우선은 기능 생각 없이 UI 만 화면에 각 라우트 별로 띄워보려 한다. 기능을 추가 하며 많은 수정이 있을 것으로 예상 된다. 로그인 페이지 UI npm install classnames --save 위 코드는 입력 폼을 위해 컴포넌트를 분리해서 따로 만들었다. 왼쪽이 피그마 디자인 오른쪽이 현재 프론트 단에서 코딩한 결과이다. 우선 UI/UX가 엉망이지만 기본적인 골격을 다잡은 후에 UI/UX를 가다듬고 차후 기능을 추가 해야겠다. . . . 회원가입 UI을 누르면 우선 /signup/agreement url로 라우팅 된다. 더보기
프론트엔드 개발 시작 npx create-next-app@13.2.4 --experimental-app next 프로젝트를 우선 위와 같은 초기 세팅으로 시작 13.2.4 버전으로 내가 주로보는 레퍼런스들과 버전을 맞추었다. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p NextJs 에서tailwind를 사용하기 위해 설치 전반적인 폰트, 골격, seo 관련 코드는 layout.tsx에 작성 위와 같이 폰트와 tailwind가 적용됨을 확인 더보기
프론트 개발 이전 데이터베이스 데이터 수정 및 저장 가상의 사용자 2명과 가상의 게시물 5개 와 각 게시물당 평균 3개의 댓글로 세팅 위는 현재 개발하며 테스트를 통해 저장된 데이터들이다. 위와 같이 데이터 정제 후 이제 프론트 개발 시작 !! 훅훅 드가자잇 ! 더보기

티스토리툴바