-
코드잇 6주차 위클리 과제 회고코드잇 2024. 1. 3. 12:07
저번 주 까지는 dom을 이용해서 페이지를 구현했다. 이번 주 부터는 리액트를 이용해서 과제를 진행했다.
주요 변경사항
- PC, Tablet, Mobile 디자인에 해당하는 링크 공유 페이지를 만들었다.
배포 링크
Linkbrary
astounding-belekoy-b9c33e.netlify.app
피드백
- StrictMode는 뭐고 없앤 이유는 뭔가요?
리액트 강의에서 Strict Mode 사용하지 않고 지워버려서 나도 중요한게 아니라고 생각하고 지워버렸다. 리액트 공식문서를 찾아보니 Strice Mode로 버그를 찾을 수 있다고 해서 다시 추가했다.
import { StrictMode } from "react"; root.render( <> <StrictMode> <App /> </StrictMode> </> );Strict Mode는 개발 중에 컴포넌트에서 발생하는 오류를 발견할 수 있게 해줍니다.
- 개발 환경에서 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링합니다.
- 개발 환경에서 Effect를 재실행하여 버그를 찾을 수 있습니다.
- 컴포넌트가 더 이상 지원되지 않는 API중 하나를 사용하는 경우 경고를 표시합니다.
참고 문서
<StrictMode> – React
The library for web and native user interfaces
react-ko.dev
- 상수의 경우는 UPPER_SNAKE_CASE를 적는게 좋습니다.
기존코드
const api = "https://bootcamp-api.codeit.kr/api";api를 상수화 시킨거는 좋았는데 UPPER_SNAKE_CASE로 적지 못했다. 상수는 UPPER_SNAKE_CASE 적는 것을 기억하자.
수정 코드
const API_BASE_URL = "https://bootcamp-api.codeit.kr/api";
- html lang을 ko로 바꿔주세요
기존 코드
<html lang="en">수정코드
<!DOCTYPE html> <html lang="ko"> <head>lang을 en으로 설정했었다.
lang 특성에 신경을 안썼는데, html 요소의 lang 특성에 언어 식별 태그를 설정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 된다고 한다. 잘못된 언어를 선택하면 잘못된 발음이 나올 수 있다.
맥북에서는 command + F5 누르면 스크린 리더가 실행된다.
참고 문서
<html>: HTML 문서 / 루트 요소 - HTML: Hypertext Markup Language | MDN
HTML <html> 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.
developer.mozilla.org
이 함수(handleLinkClick)는 FolderLinks안에 종속된 것 처럼 보이는데 컴포넌트 밖으로 뺀 이유가 있을까요?
기존 코드
const handleLinkClick = (event, url) => { event.preventDefault(); window.open(url); }; const FolderLinkCard = ({ link }) => { const { createdAt, url, title, description, imageSource = noImage } = link; return ( <div className="folder-link-box" onClick={handleLinkClick}> <div className="link-image-box"> <img className="link-image" src={imageSource} alt={title} /> </div> <div className="link-description-box"> <div className="written-date">{afterTimeDate(createdAt)}</div> <div className="description">{description}</div> <div className="format-date">{formatDate(createdAt)}</div> </div> </div> ); };현재 코드
const FolderLinkCard = ({ link }) => { const { createdAt, url, title, description, imageSource = noImage } = link; const handleLinkClick = (event) => { event.preventDefault(); window.open(url); }; return ( <a href={url} className="folder-link-box" onClick={handleLinkClick}> <div className="link-image-box"> <img className="link-image" src={imageSource} alt={title} /> </div> <div className="link-description-box"> <div className="written-date">{afterTimeDate(createdAt)}</div> <div className="description">{description}</div> <div className="format-date">{formatDate(createdAt)}</div> </div> </a> ); };피드백 받은 부분 중에서 제일 헷갈렸던 부분이다. 리액트에서 함수를 컴포넌트 파일에 넣는 기준을 잘 몰랐다.
피드백을 받고 처음에는 handleLinkClick 함수가 다른 컴포넌트에서 재사용 될 수 있다고 생각해서 utils.js(재사용 가능한 함수들 모음)에 넣고 import로 가져왔었다.
하지만 utils.js 함수로 빼면 가독성 측면에서 좋지 않다고 생각했고 컴포넌트 안에서 event 객체와 url을 사용하기 때문에 컴포넌트 안에 함수를 넣었다. 불필요한 리렌더링이 발생하게 되지만 이 정도의 리렌더링을 방지하는 것 보다는 파일 가독성을 챙기는게 더 중요하다고 생각했다.
정리하자면,
set 함수는 컴포넌트 안에 종속되어 있으니 컴포넌트 안에서 함수를 작성하는게 맞다.
그리고 공통으로 사용되는 함수는 컴포넌트 밖으로 빼야 불필요한 리렌더링을 방지 할 수 있다.
컴포넌트 밖으로 뺄 때 두가지 경우가 있는데,
공통으로 사용 되는 로직은 함수를 컴포넌트 파일 밖으로 다른 파일로 뺀다.
공통으로 사용 될 수는 있지만 컴포넌트마다 리턴하는 값이 다른 경우에는 컴포넌트 파일에 따로 정의한다.
하지만 set 함수처럼 문법적으로 문제가 있는것을 제외하면 무조건 지켜야 하는 규칙은 없다.
상수를 이용해서 코드를 간결하게 작성하는게 중요하다는 것을 이번 과제를 통해 알게 되었다. 그리고 상수에 UPPER_SNAKE_CASE도 잊지말고 작성해야 할 것 같다.
'코드잇' 카테고리의 다른 글
[오픈마인드] eslint jsx 이슈, 헤더 스타일링 (0) 2024.01.20 [오픈마인드] eslint 문법 이슈 (0) 2024.01.20 git에서 branch merge, git flow (0) 2023.12.08 git 커맨드 (0) 2023.12.05 z-index: 9999로도 해결이 안되는 이유 (1) 2023.12.03