미션 9 중간 점검

1. 띄어쓰기

예전 html 코드를 가져와서 next.js로 마이그레이션 하는 과정에서 띄어쓰기 부분이 글자 그대로 출력되는 부분을 발견했다.

원래는잘 활용했는데...

&nbsp

next.js에서는 아래처럼 사용해야한다. 유니코드 문자라고 한다.

{"\u00A0"}

---

2. 제출 버튼

<button

            type="submit"

            className={`${styles.login_btn} ${

              isButtonDisabled ? styles.btn_disabled : styles.btn_active

            }`}

          >

 

type을 항상 button으로 줬는데, submit으로 하면 클릭을 하든 "엔터"를 하든 post가 가능해진다! 엔터는 처음 알았네...ㅎ key 이벤트로 enter 주려고 했는데ㅎㅎ

 

---

3. GNB

Global Navigation Bar의 줄임말이라고 한다. 항상 위에 고정적으로 있는 네이게이션 바이다. 원래는 알고 있었는데, 줄임말로 보니까 갑자기 생각이 안났다 ㅎ

 

추가적으로 알아둬야할 웹사이트 용어이다.

 

LNB(Local Navagation Bar) : GNB를 클릭하거나 마우스를 갖다댔 때 나오는 네이게이션 바, 하위 메뉴라고도 불린다.

FNB(Foot Navigation Bar): Footer에 존재하는 네비게이션 바

SNB(Side Navigation Bar) : 사이드 메뉴가 보이는 네비게이션 바

 

---

4. 천원 단위로 ,(콤마) 붙이기

첫 번째 방식은 정규표현식을 사용하는 방법이 있지만... 효율을 중요하게 생각하면 그냥 함수 쓰는 게 낫다 ㅎ

 

number.toLocaleString(locales, options)

locales나 options를 붙이지 않고 () 만 사용하게 된다면, 로컬 환경의 locale을 default로 사용하게 된답니다.

 

---

5. 날짜 변환하기

createdAt이 아래와 같은 형식으로 나타난다.

 

2024-10-03T08:35:00.158Z

 

2024. 11. 04 이렇게 이쁘게 보이고 싶으면 커스텀을 해야한다. GPT 이용했다..

 

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const options = { year: "numeric", month: "2-digit", day: "2-digit" };
  const formattedDate = date.toLocaleDateString("ko-KR", options);

  return formattedDate
    .replace(/\//g, " .")
    .replace(/\s/g, " ")
    .replace(/\.$/, "");
};

 

year: 'numeric'은 연도를 4자리 숫자로 표시하고

month: '2-digit'은 월과 일을 2자리 숫자로 표시합니다 (예: 01, 02)

 

('ko-KR', options) 한국 로케일을 사용한다는 의미이다. 이건 4번에서 단위별로 했을 때, locales에도 사용할 수 있다..

 

 

• replace(/\//g, "."): 날짜 문자열에서 슬래시(/)를 점(.)으로 변경합니다. 예: "2024/01/02" -> "2024.01.02".
• replace(/\s/g, "  "): 모든 공백 문자를 제거합니다. 예를 들어, "2024. 01. 02"에서 공백을 없애면 "2024.01.02"가 됩니다.
• replace(/\.$/, "  "): 만약 문자열의 끝에 점(.)이 남아있다면 이를 제거합니다. 예를 들어, "2024.01.02."에서 마지막의 점을 없애 "2024.01.02"가 됩니다.

---

6. 밑줄 없애기

<div className={styles.return_button_container}>
        <Link href="/items">
          <button className={styles.return_list}>
            목록으로 돌아가기
            <Image src={back_img} alt="목록으로 돌아가기" />
          </button>
        </Link>
      </div>

 

 

왜 밑줄이 생기는건지 모르겠다...

text-decoration: none;을 부모나 자식이나 새로운 div에 감싸서 none해보고 별 난리를 다 쳐봤다... 안돼요... 구글링도 왜 다 text-decoration: none; 밖에 없는건데요... 새로운 text-decoration-line: none;도 있었는데 안돼요... 절대 안돼요...

GPT야 도와줘!!!!
legacyBehavior 넣어봐 ㅇㅇ

 

 

Link에 legacyBehavior 속성을 추가하면 <a> 태그와 별도로 동작하도록 설정할 수 있다. 그러면 <Link>가 직접 <a> 태그를 감싸지 않게 되어 불필요한 밑줄이 사라질 수 있다. 근데 display:flex를 지워도 똑같이 없어지긴 했다. 근데 이미지를 가운데에 놓아야해서 legacyBehavior 넣을 수 밖에 ㅎ

---

7. env 설정하기

next.js로 하니까... env 주소 설정도.. 다르게 해줘야한다...

React.js에서는 REACT_APP_~~~였는데...

Next.js에서는 NEXT_PUBLIC_로 prefix해줘야한다..