[조혜진] Week13 #422

MEGUMMY1 · 2024-05-12T17:32:49Z

요구사항

기본

React 프로젝트에서 진행했던 작업물을 Next.js 프로젝트에 맞게 변경 및 이전해 주세요.
팀내 2 ~ 3명이 짝을 지어 페어프로그래밍으로 로그인, 회원가입 페이지에 사용하는 Input 컴포넌트를 만들어 주세요.
Vercel로 Github 레포지토리를 연결해 Next.js 프로젝트를 배포해 주세요.
Github에 위클리 미션 PR을 만들어 주세요.
React, Next.js를 사용해 진행합니다.

주요 변경사항

React 프로젝트 -> Next.js 마이그레이션

스크린샷

멘토에게

https://5-weekly-mission-r94f4dzjd-hyejeans-projects.vercel.app/
배포를 했다고 하기엔... 스타일이 적용이 안됩니다... 배포 과정에서 이것저것 해보다가 빌드 폴더에 많은 양의 캐시들이 프로젝트에 다 포함되었습니다... 원래는 빌드 폴더 자체가 프로젝트에 포함되면 안 되는 거 같은데 섣불리 지웠다가 돌이킬 수 없을까 봐 이 상태로 PR 올립니다.. 그리고 충돌도 해결법을 모르겠습니다... 왜 충돌이 날까요 ㅜㅜ

[Fix] delete merged branch github action

Part3 조혜진 week13

Fix: build error

…ly-Mission into part3-조혜진-week13

choinashil

혜진님 파트3 첫번째 과제 수고하셨습니다 👍🏽
아직 타입스크립트나 next.js 가 익숙하지 않아 어려우셨을텐데 그래도 곧잘 적용해주신 것 같아요
코멘트 참고하셔서 적용 가능한 부분들 시간날 때 수정해보시면 좋을 것 같습니다!

choinashil · 2024-05-14T14:04:18Z

pages/_app.tsx

@@ -0,0 +1,17 @@
+// _app.tsx


의미없는 주석은 삭제 부탁드려요!

choinashil · 2024-05-14T14:06:22Z

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200


현재도 필요한 코드인지 확인해보세요!

choinashil · 2024-05-14T14:08:02Z

public/styles/notFound.module.css

@@ -0,0 +1,31 @@
+.notFound {


클래스명을 .index_container 와 같이 snake_case 로 작성한 곳도 있고 지금처럼 camelCase 로 작성한 곳도 있네요
작성 방식을 한가지로 통일해주세요!

choinashil · 2024-05-14T14:12:17Z

src/Components/Cards/Cards.tsx

+import React from "react";
+import { useState, useRef, useEffect } from "react";


아래처럼 한 줄로 작성할 수도 있습니다!

Suggested change

import React from "react";

import { useState, useRef, useEffect } from "react";

import React, { useState, useRef, useEffect } from "react";

choinashil · 2024-05-14T14:15:45Z

src/Components/Cards/Cards.tsx

+        }
+    };
+
+    const openModal = (type: "DELETE_LINK" | "ADD") => {


"DELETE_LINK" | "ADD" 와 같이 타입 정의하는 부분이 여러군데 보이네요

별도 공용 파일에

type ModelType = "DELETE_LINK" | "ADD";

같은 식으로 타입 분리해두고 참조하면 유지보수가 편할 것 같습니다!

보통 공통 타입은 types 라는 폴더 내에서 관리합니다

choinashil · 2024-05-14T14:33:17Z

src/Components/FolderMain/FolderMain.tsx

+            <Article />
+            <section className={styles.section}>
+                <div className={styles.search_div}>
+                    <Image src='/assets/Search.svg' width='15' height='15' alt='search_icon' />


다른 곳들에서는 width, height 를 number 로 전달하셨던데 여기는 string 으로 전달하고 있네요

choinashil · 2024-05-14T14:33:59Z

src/Components/FolderMain/FolderMain.tsx

+                <div className={styles.search_div}>
+                    <Image src='/assets/Search.svg' width='15' height='15' alt='search_icon' />
+                    <input
+                        className={`${styles.search_input} input`}


반복적으로 태그명을 className 에 같이 작성하고 계신데 이유가 궁금합니다!

nextjs로 마이그레이션 이후 reset.css와 global.css에서 태그를 안 쓰고 전역 스타일을 지정하면 오류가 나서 input, button 등의 요소의 초기화 설정을 못 하여서 저렇게 지정해주었습니다...

choinashil · 2024-05-14T14:37:59Z

src/Components/Modal/Modal.tsx

+        if (inputValue.trim() !== "") {
+            setIsError(false);
+        } else setIsError(true);


else 후 중괄호 정확하게 작성해주세요!

Suggested change

if (inputValue.trim() !== "") {

setIsError(false);

} else setIsError(true);

if (inputValue.trim() !== "") {

setIsError(false);

} else {

setIsError(true);

}

choinashil · 2024-05-14T14:41:21Z

src/Components/Modal/Modal.tsx

+                    <span className={`${styles.subtitle} span`}>{subtitle}</span>
+                </div>
+                <div className={styles.submit_container}>
+                    {input && (


현재와 같은 구조에서는 프로젝트의 규모가 커지고 모달을 사용하는 곳이 많아질수록 모달 컴포넌트가 담당하는 역할도 같이 늘어나게 됩니다
모달 컴포넌트는 화면 위에 떠있는 껍데기 역할만 하도록 하고
사용처에 따라 모달 내 영역만 다르게 그려서 활용할 수 있도록 하면 모달을 사용하는 곳이 많아지더라도 모달은 본인의 역할을 유지할 수 있을 거에요

당장 코드 개선은 어렵더라도 장기적으로 기능이 계속 늘어날 때에도 괜찮은 구조인가? 에 대해 고민해보시면 좋을 것 같습니다

choinashil · 2024-05-14T14:42:58Z

src/api/parseData.tsx

+    };
+}
+
+export function SharedData() {


아까 다른 코멘트에서 함수는 소문자로 시작하는 camelCase 로 작성하라고 말씀드렸는데,
이 부분은 커스텀훅이라고 봐야겠네요.

커스텀훅은 보통 useXX 과 같이 작성합니다 네이밍 변경하는게 좋을 것 같아요!

choinashil · 2024-05-14T14:49:46Z

배포를 했다고 하기엔... 스타일이 적용이 안됩니다...

첨부해주신 링크 (https://5-weekly-mission-r94f4dzjd-hyejeans-projects.vercel.app/) 로 접속이 되지 않아 확인이 불가했습니다 ㅜㅜ
링크 확인해주셔야 볼 수 있을 것 같아요

배포 과정에서 이것저것 해보다가 빌드 폴더에 많은 양의 캐시들이 프로젝트에 다 포함되었습니다... 원래는 빌드 폴더 자체가 프로젝트에 포함되면 안 되는 거 같은데 섣불리 지웠다가 돌이킬 수 없을까 봐 이 상태로 PR 올립니다.. 그리고 충돌도 해결법을 모르겠습니다... 왜 충돌이 날까요 ㅜㅜ

처음 미션 시작할 때는 없던 파일들일까요??
처음 미션 시작하실 때 어떤 브랜치에서 시작하셨는지 궁금해요. 파트2 브랜치에서 파트3 브랜치로 머지하거나 그런 과정이 혹시 있었을까요??

충돌 해결이 안되면 머지가 안되서,, 확인하시고 답변부탁드릴게요!

withyj-codeit and others added 23 commits September 3, 2023 21:57

chore: 머지 후 브랜치 삭제 github action 추가

93a0e93

reset

b2e37bd

Merge branch 'codeit-bootcamp-frontend:main' into main

6f8bbb0

fix: 머지 후 브랜치 삭제 github action 수정

e11e25f

env: workflows 폴더로 이동

212e864

Merge pull request #237 from hanseulhee/fix-github-actions

4dc5dd0

[Fix] delete merged branch github action

Refactor: TypeScript(Vite) 마이그레이션

0b67193

Fix: 마이그레이션 오류 수정

97e4f15

Fix: 마이그레이션 오류 수정

b4c020e

Feat: 키워드 검색기능

c860949

Feat: 키워드 검색기능

6d6d836

Fix: 마이그레이션 오류 수정

ae046d0

Fix: 마이그레이션 오류 수정

f8dbdda

Refactor(mentor): 타입 지정 추가 및 상수처리

cea98de

Refactor: Next.js 마이그레이션

693e6af

Merge branch 'codeit-bootcamp-frontend:main' into part3-조혜진-week13

a819bc0

Merge pull request #1 from MEGUMMY1/part3-조혜진-week13

5dab663

Part3 조혜진 week13

Fix: build error

bc292dd

Merge branch 'codeit-bootcamp-frontend:main' into part3-조혜진-week13

03805ad

Merge pull request #2 from MEGUMMY1/part3-조혜진-week13

22def6f

Part3 조혜진 week13

Fix: build error

e1492dc

Merge pull request #3 from MEGUMMY1/part3-조혜진-week13

a9b8aa6

Fix: build error

Merge branch 'codeit-bootcamp-frontend:main' into part3-조혜진-week13

2414675

MEGUMMY1 requested a review from choinashil May 12, 2024 17:34

MEGUMMY1 added 5 commits May 13, 2024 02:38

Fix: Resolved conflicts

8ff0031

Merge branch 'part3-조혜진-week13' of https://github.com/MEGUMMY1/5-Week…

1c8624b

…ly-Mission into part3-조혜진-week13

Feat: Input components

ff3258b

Feat: NotFound page

2cb7294

Chore: build error

349ed48

choinashil approved these changes May 14, 2024

View reviewed changes

MEGUMMY1 added 3 commits May 15, 2024 10:51

Fix: Conflict

991b882

Resolve conflicts with upstream

8a0bf10

Refactor(mentor): 코드리뷰

531da22

choinashil merged commit 6d16496 into codeit-bootcamp-frontend:part3-조혜진 May 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[조혜진] Week13 #422

[조혜진] Week13 #422

MEGUMMY1 commented May 12, 2024 •

edited

Loading

choinashil left a comment

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

MEGUMMY1 May 15, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil May 14, 2024

choinashil commented May 14, 2024 •

edited

Loading

		import React from "react";
		import { useState, useRef, useEffect } from "react";

	import React from "react";
	import { useState, useRef, useEffect } from "react";
	import React, { useState, useRef, useEffect } from "react";

[조혜진] Week13 #422

[조혜진] Week13 #422

Conversation

MEGUMMY1 commented May 12, 2024 • edited Loading

요구사항

기본

주요 변경사항

스크린샷

멘토에게

choinashil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choinashil commented May 14, 2024 • edited Loading

MEGUMMY1 commented May 12, 2024 •

edited

Loading

choinashil commented May 14, 2024 •

edited

Loading