[박상우] 과제 제출 by coolfin · Pull Request #7 · SSA-FE/ssafe_signup

coolfin · 2024-02-27T07:18:57Z

👻 주요 기능

배포 링크

form을 이용한 회원가입 form 구성
react-router-dom을 이용한 라우팅
tailwindCSS를 활용한 동적 스타일링

🏳️ 새로 알게 된 점 / 어려웠던 점

react-router-dom v6
- createBrowserRouter을 활용해 루트(최상위) 컴포넌트에서 어떻게 이동할지 정의해 놓을 수 있다.
- 해당 프로젝트에서는 사용되지 않았으나 path에서 dynamic routing을 path: 'user/:userId' 처럼 사용할 수 있다.
react-hook-form
- form을 편리하게 관리, 사용할 수 있었다.
- useForm()의 다양한 옵션에서 어떤 것을 선택할지 공부하는 것에 시간이 꽤 걸렸다.
- watch와 getValues의 차이에 대해 알게되었다. (값 변화에 대한 리렌더링 여부)
vercel
- 한 번 프로덕트로 올리고 새로 redeploy를 할 때 페이지 폴더의 대소문자가 변경되면 캐싱돼있던 페이지와 충돌이 일어난다.
- 서버를 닫았다 열어서 이를 해결했다.

INIT

- import font Inter - Nav 구현

- react-router-dom v6.4+ - createBrowserRouter에 정보 정의 - App.jsx 삭제

DEV

- main태그 layout 컴포넌트 정의하여 변경 - style 비율 변경 - router 최상단으로 구조 변경

- Nav 로고 클릭 시 메인화면으로 라우팅 - router 구조 변경

REFACTOR

-적용 안되던 font 수정 -css 순서 변경 -main page style ratio로 변경

- 기능을 제외한 회원가입 페이지 구현

- input 모은 뒤 form 이용해서 react-hook-form 적용 - refactor 진행해야 함(*) - error message field 확보해야 함(*)

FEAT: register page

- label, errormessage 컴포넌트화 - input type 별 정규식 설정 - navigate로 페이지 이동

FEAT: register

- input field 컴포넌트화 - 쓰지 않는 디렉토리 및 파일 정리

REFACTOR

- 회원가입 버튼 색상 조건 변경 - 특수문자 범위 제한(입력값의 예외 걸러내기 위함)

FIX: confirm button

kwakseongjae

훌륭하다 녀석아 ,,
Next에 익숙해진다고 React를 아예 놔도 되는건 아니니까 React에서 사용하는 컨벤션이나 구조 등에도 계속 익숙해지려 노력해보자 !!

kwakseongjae · 2024-02-28T00:46:05Z

오호 여기까지 ..!
👍👍

kwakseongjae · 2024-02-28T01:11:37Z

+            )}>
+                <LabelInfo children={'비밀번호'} />
+                <div className='relative'>
+                    <input type={isPasswordVisible ? "text" : "password"} className={classNames(


kwakseongjae · 2024-02-28T01:19:53Z

+                            required: true,
+                            pattern: {
+                                value: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!])[A-Za-z\d@$!%*#?&]{8,16}$/,
+                                message: "비밀번호는 8자 이상 16자 이하, 하나 이상의 영문자와 숫자, @, #, ! 중 하나 이상의 특수문자로 구성되어야 합니다."


message를 일일이 입력하기보단
나는 파일을 따로 만들어서 관리하는 편이야

다음 아티클을 보면 조금 도움이 될거야 !
https://semaphoreci.com/blog/constants-layer-javascript

kwakseongjae · 2024-02-28T01:23:54Z

+import classNames from 'classnames';
+
+export const SignupButton = () => {
+    return (<div


너는 왜 포매터가 없니 ,,

kwakseongjae · 2024-02-28T01:26:08Z

+const router = createBrowserRouter(routerInfo);
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+<Fragment>
+    <RouterProvider router={router} />
+</Fragment>
+);


👍👍
나도 이렇게 적용하려 했는데 App 파일은 경유해보고 싶어서 다른 방식으로 작업했었거든 !
어느 방식이 좋다 나쁘다는 없겠지만 한번 두개를 비교해서 너한테 맞는걸로 가져가봐 !

우리 프로젝트 리포지토리 ! dev 브랜치에서 보면돼 !
https://github.com/SSA-FE/formssafe-fe

kwakseongjae · 2024-02-28T01:34:24Z

+    marginLeft: 'auto',
+    marginRight: 'auto',


이렇게 작성한거랑
margin: 0 auto
랑 결과가 다르진 않을거같은데 ??

kwakseongjae · 2024-02-28T01:35:38Z

+
+  const onSubmit = (data) => {
+    const { email, password } = data;
+    console.log(errors)


콘솔에 찍어보셨으면 이제 빼셔야죠 !

kwakseongjae · 2024-02-28T01:41:35Z

+
+          'rounded-full',
+
+          watch('email') && watch('password') && watch('passwordConfirm') && !errors.email && !errors.password && !errors.passwordConfirm ? 'bg-theme cursor-pointer hover:bg-opacity-80' : 'bg-[#d4d4d4]',


가독성이 심상치 않네 ..
다른 방법으로 구현할 순 없을까 ?

kwakseongjae · 2024-02-28T02:16:02Z

이 아티클 한번 읽어봐 !!
https://www.daleseo.com/tailwind-preflight/

- styled-components 삭제 - tailwindCSS layer utility로 변경 - tailwindCSS preflight 적용에 따른 reset.css 삭제 - 이미지 png -> svg로 변경 후 fill로 색상 조정 - 재사용성이 떨어지는 컴포넌트 삭제 후 포맷팅 - 메시지, 정규표현식 constant 폴더에 변수로 저장 후 import

REFACTOR

coolfin · 2024-02-28T07:32:16Z

어제 나온 내용들이랑 위에 성재형이 리뷰해 준 내용 확인하고 리팩토링 했습니다!! 리뷰할 때 참고해주세용👻

coolfin added 23 commits February 22, 2024 21:35

DOCS

b146031

INIT

e979405

Merge pull request #1 from coolfin/devlope

af7317e

INIT

FEAT: glboal nav

8b0e74a

- import font Inter - Nav 구현

FEAT: main container

bac723a

FEAT: Router

a818ef0

- react-router-dom v6.4+ - createBrowserRouter에 정보 정의 - App.jsx 삭제

Merge pull request #2 from coolfin/develope

7acb55f

DEV

REFACTOR

27c4e9f

- main태그 layout 컴포넌트 정의하여 변경 - style 비율 변경 - router 최상단으로 구조 변경

REFACTOR:

8b6d064

- Nav 로고 클릭 시 메인화면으로 라우팅 - router 구조 변경

Merge pull request #3 from coolfin/develope

eb63144

REFACTOR

FIX: font

9ee41aa

-적용 안되던 font 수정 -css 순서 변경 -main page style ratio로 변경

FEAT: register page

cd08c96

- 기능을 제외한 회원가입 페이지 구현

FEAT: react-hook-form 적용

9aae220

- input 모은 뒤 form 이용해서 react-hook-form 적용 - refactor 진행해야 함(*) - error message field 확보해야 함(*)

Merge pull request #4 from coolfin/develope

c749add

FEAT: register page

FEAT: validate 구현

e04fd82

- label, errormessage 컴포넌트화 - input type 별 정규식 설정 - navigate로 페이지 이동

FEAT: password visibility

2e2f2c5

Merge pull request #5 from coolfin/develope

0d1a996

FEAT: register

REFACTOR

e271195

- input field 컴포넌트화 - 쓰지 않는 디렉토리 및 파일 정리

DOCS

df3707f

FIX: router

f675473

Merge pull request #6 from coolfin/develope

2fb539b

REFACTOR

FIX: confirm button

b9fc588

- 회원가입 버튼 색상 조건 변경 - 특수문자 범위 제한(입력값의 예외 걸러내기 위함)

Merge pull request #7 from coolfin/develope

6dc411e

FIX: confirm button

kwakseongjae reviewed Feb 28, 2024

View reviewed changes

coolfin added 3 commits February 28, 2024 16:27

FIX: import error

ba9f681

Merge pull request #8 from coolfin/develope

5980fb9

REFACTOR

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[박상우] 과제 제출#7

[박상우] 과제 제출#7
coolfin wants to merge 26 commits into
SSA-FE:mainfrom
coolfin:main

coolfin commented Feb 27, 2024

Uh oh!

kwakseongjae left a comment

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

kwakseongjae Feb 28, 2024

Uh oh!

coolfin commented Feb 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		'rounded-full',

		watch('email') && watch('password') && watch('passwordConfirm') && !errors.email && !errors.password && !errors.passwordConfirm ? 'bg-theme cursor-pointer hover:bg-opacity-80' : 'bg-[#d4d4d4]',

Uh oh!

Conversation

coolfin commented Feb 27, 2024

👻 주요 기능

🏳️ 새로 알게 된 점 / 어려웠던 점

Uh oh!

kwakseongjae left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coolfin commented Feb 28, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants