이번 주차에서는 디자인 연습 대신, Type Script 학습이 주 내용이었어서 기존 코드를 타입스크립트로 변형하는 연습, 들은 강의 내용 정리 정도만 있을 예정이다.

과제: 코드 포팅(자바스크립트 -> 타입스크립트)

<기존코드. TIL컴포넌트 변수,함수 부분>
import React, { useState, useEffect } from 'react';

export default function TilSection() {
  const [tils, setTils] = useState(() => {
    const saved = localStorage.getItem('study_tils');
    return saved ? JSON.parse(saved) : [
      { 
        id: 1, 
        title: 'React useState로 상태 관리하기', 
        code: 'const [count, setCount] = useState(0);', 
        date: '2026-09-14', 
        category: 'React' 
      },
      { 
        id: 2, 
        title: '(더미)Tailwind CSS v4 flex 레이아웃', 
        code: 'className="flex items-center justify-between gap-4"', 
        date: '2026-09-13', 
        category: 'CSS' 
      }
    ];
  });

  const [newTitle, setNewTitle] = useState('');
  const [newCode, setNewCode] = useState('');
  const [newCategory, setNewCategory] = useState('React');
  const [openCodeId, setOpenCodeId] = useState(null);

  useEffect(() => {
    localStorage.setItem('study_tils', JSON.stringify(tils));
  }, [tils]);
const handleAddTil = (e) => {
  e.preventDefault(); // 폼 제출 시 페이지가 새로고침되는 기본 동작을 막음
  if (!newTitle.trim()) return; // 제목이 빈칸이거나 공백뿐이면 추가하지 않고 함수 종료

  const newItem = {
    id: Date.now(), // 현재 시각(밀리초)을 고유 id로 사용 (중복 방지)
    title: newTitle,
    code: newCode || '// 작성된 코드가 없습니다.', // 코드를 안 적었다면 기본 안내 문구 삽입
    date: new Date().toISOString().split('T')[0], // 오늘 날짜를 'YYYY-MM-DD' 형식으로 추출
    category: newCategory,
  };

  setTils([newItem, ...tils]); // 기존 목록(...tils) 맨 앞에 새 아이템을 쏙 집어넣어 최신순 정렬 유지
  setNewTitle(''); // 입력창 초기화
  setNewCode('');  // 코드창 초기화
};

  // 특정 ID의 TIL을 삭제하는 함수
  const handleDeleteTil = (id, e) => {
    e.stopPropagation(); // 카드 펼치기/접기 이벤트와 충돌하는 것 방지
    setTils(tils.filter(item => item.id !== id));
  };

  const toggleCode = (id) => {
    setOpenCodeId(openCodeId === id ? null : id);
  };

변형

import React, { useState, useEffect } from 'react';

export default function TilSection() {

    interface Til {
        id: number;
        title: string;
        code: string;
        date: string;
        category: string;
    }


  const [tils, setTils] = useState<Til[]>(() => {
    const saved = localStorage.getItem('study_tils');
    return saved ? JSON.parse(saved) : [
      { 
        id: 1, 
        title: 'React useState로 상태 관리하기', 
        code: 'const [count, setCount] = useState(0);', 
        date: '2026-09-14', 
        category: 'React' 
      },
      { 
        id: 2, 
        title: '(더미)Tailwind CSS v4 flex 레이아웃', 
        code: 'className="flex items-center justify-between gap-4"', 
        date: '2026-09-13', 
        category: 'CSS' 
      }
    ];
  });

  const [newTitle, setNewTitle] = useState<string>('');
  const [newCode, setNewCode] = useState<string>('');
  const [newCategory, setNewCategory] = useState<string>('React');
  const [openCodeId, setOpenCodeId] = useState<number | null>(null);

  useEffect(() => {
    localStorage.setItem('study_tils', JSON.stringify(tils));
  }, [tils]);
const handleAddTil = (e:React.FormEvent) => {
    //number, string 같은 값이 아니라 이벤트 객체라서. 저런 이상한 타입이 붙음. 여기선 폼 제출
  e.preventDefault(); // 폼 제출 시 페이지가 새로고침되는 기본 동작을 막음
  if (!newTitle.trim()) return; // 제목이 빈칸이거나 공백뿐이면 추가하지 않고 함수 종료

  const newItem = {
    id: Date.now(), // 현재 시각(밀리초)을 고유 id로 사용 (중복 방지)
    title: newTitle,
    code: newCode || '// 작성된 코드가 없습니다.', // 코드를 안 적었다면 기본 안내 문구 삽입
    date: new Date().toISOString().split('T')[0], // 오늘 날짜를 'YYYY-MM-DD' 형식으로 추출
    category: newCategory,
  };

  setTils([newItem, ...tils]); // 기존 목록(...tils) 맨 앞에 새 아이템을 쏙 집어넣어 최신순 정렬 유지
  setNewTitle(''); // 입력창 초기화
  setNewCode('');  // 코드창 초기화
};

  // 특정 ID의 TIL을 삭제하는 함수
  const handleDeleteTil = (id: number, e:React.MouseEvent) => { //여기선 코드 짤렸지만, onclick으로 작동해서 마우스 이벤트 튀급
    e.stopPropagation(); // 카드 펼치기/접기 이벤트와 충돌하는 것 방지
    setTils(tils.filter(item => item.id !== id));
  };

  const toggleCode = (id:number) => {
    setOpenCodeId(openCodeId === id ? null : id);
  };
}

Type Script 강의 메모 내용

아직 정리 안해서 드러움(내용 게속 추가 중)

변수타입 숫자형으로 하려면 int가 아니라 number로 설정해야 함! 참/거짓은 boolean

보통 변수에 타입을 지정하는 방식은 c언어랑 다르게 아래처럼 다르면서 좀 나눠져 있음

let (변수): (타입)

function (변수) (조건들): (함수 값 반환 타입) { 함수내용 }

[배열] let (배열명):(타입)[] = [배열내용] 또는 let (배열명):Array<타입> = [배열내용]

[튜플] let (튜플명): [타입1, 타입2...]; 예) let b: [number, string]; b = [10, 'f']

[enum] 서로 관련된 값들을 하나의 이름으로 묶어 정의하는 형식

enum Day { Monday, Tuesday, Wednesday, Thursday, Friday } let today: Day = Day.Monday; 또한 순서대로 값이 매핑 됨. 여기선 따로 값을 안건드렸으니 월요일부터 0,1,2,3,4...이런 식,

문자열도 매핑 가능한데 그럼 자동 매핑이 안됨

[null / undefined]

let (변수명): null = null let (변수명): undefined = undefined

[interface]

c언어의 구조체와 비슷하게 객체의 구조를 정의하는 형식
interface User{ ->명칭은 대문자로 시작
    name: string -> 필수속성
    age: number
    char? : string -> 물음표 붙이면 비필수 속성
    readonly birth: number -> 읽기 전용 속성. 수정불가(c언어의 const 느낌)

    [grade:number]: sring; -> 어디서 많이 본 키: 벨류 형식 느낌(인덱스 시그니쳐 형식이라 부른다고 함)
}

let sheet : User = {
    name: 'sfsdf'
    age: 20
}(필수 속성 안 넣은건 넘어가도록 하자)
sheet.age = 10; -> 이런식으로 변경가능

[implements]

class Person implements User {
    name: string;
    age: number;

    constructor(name: string, age: number) { -> 파이썬 init 처럼 클래스 생성시 초기화 해주는 함수
        this.name = name; ->파이썬 self.~~ 와 다르게 this.~~임
        this.age = age;
    }
}

멋사 2학기 스터디로 오래만에 다시 써보는 회고록. 오랜만이지만 별로 할 말은 많지않아서 인사글에 뭘 써야하는지 모르겠다.

별로 생각나지는 않으니 방학 동안 한 일을 따로 적어보자면, 방학 동안 약 1달정도를 멋사본사가 주최하는 애니멀 리그 해컨톤에 참가하였다. 간단하게 말해서, 비록 1차 심사에도 못오르고 떨어지긴 했지만. 결과물 제출, 따로 여기선 언급하지 않은 미니 해커톤 떄 제대로 못끝내고 마무리 했던 백엔드 서버와의 연동을, 본선 해커톤 떈 완벽하게 했다는 점에 의의를 두고 싶다. 그리고는....별로 딱히 뭘 안했다. 해커톤 전에 2주는 방학 시작쯔음이라 쉬었는데.... 해커톤 끝나고 나니 방학이 5일 밖에 없었던 것으로 기억한다. ㅠㅠ

사실 이 회고록은 원래 8주차 때 작성 시작함 근데 귀차니즘 이슈터짐

이렇게 벨로그 조작법 다시 복구하는 겸 취소선으로 밝히고 싶지 않은 것도 밝히면서 진짜로 본문 내용을 시작하겠다.

8주차 개요

우선 이 프로젝트 파일은 자바스크립트 + VITE + TailWind css를 사용하였다.

1. 웹페이지 제목,파비콘 수정
2. 프로필 컴포넌트
3. 목록 카드 컴포넌트
4. 로컬 스토리지를 이용한 메모장 컴포넌트
5. 헤더,푸터
   5.1. 메뉴창 시스템 수정하기
6. 8주차 결과물 완성

9주차 개요

1. 시간대에 따른 창문 배경 변화
2. 플레이 리스트 페이지

1.(8주차) 웹페이지 제목, 파비콘 수정

이것만큼은 진짜 이제 AI도움 필요 없을 정도로 익숙해졌다. 그렇다고 눈감고 해보라하면 못한다.

우선 이것이 파비콘 이미지이다. Chat GPT를 이용해서 내 이름 이니셜인 TR울 락스타 로고 처럼 비슷하게 뽑아달라는 식으로 말하여 생성하였다.

그리고 png로 생성이 되었으니 https://www.freeconvert.com/ko/png-to-ico 해당 사이트를 이용하여 ico 형식으로 파일 변환을 한 후

<Index.html 파일>


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temporary_page</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

이렇게 파일명이 favicon.svg가 아닌 기존 기본 파비콘을 대체할 favicon.ico로 작성한뒤 겸사겸사 title 태그 내부를........

딱히 작명센스가 그리 좋지 않아서 임시 페이지라고 영어로 작성 하였다.

2. 프로필 컴포넌트

(8주차 당시 사진인데 상단 부분은 실명 이슈로 사진에서 짤림)

8주차 당시 딱히 소개글 넣을 내용이 없어서 그냥 만든 내용을 요약해서 작성한 상태이다.

export default function ProfileCard() {
  return (
    <section id="profile" className="bg-white rounded-2xl p-8 md:p-12 border border-gray-200 
    shadow-sm flex flex-col md:flex-row items-center gap-8"> 
     {/*컴포넌트 구역 설정, 박스 둥글게, 기본적으로 세로 배치지만 창 크기에 따라 가로 배치로 전환*/}
     {/*md:~~ 는 @media (min-width: 768px) 를 의미. 반응형 디자인용으로 사용됨*/}
     {/*id는 헤더 컴포넌트에서 href자리에 들어갈 id값, 해당 태그로 자동스크롤 기능 구현 가능*/}


 {/*프로필 사진 공간*/}
      <div className="w-32 h-32 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-600 flex items-center justify-center text-white text-4xl font-bold shadow-md">
        TR
      </div>
      {/*그라데이션 태그에 to-tr 은 오른쪽 위 방향을 의미 deg를 지정하는 대신 사용하는 듯 | shadow-md은 그림자가 살짝 입체감 있게 주어지게 함*/}

      {/*작은 소속 태그*/}
      <div className="space-y-3 text-center md:text-left">
        <div className="inline-block px-3 py-1 bg-blue-50 text-blue-700 text-xs font-semibold rounded-full">
          정보통신공학과
        </div>
        {/*이름, 소속*/}
        <h1 className="text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight">
          이멋사 <span className="text-gray-400 font-normal text-xl">| 대학생</span>
        </h1>
         {/*텍스트*/}
        <p className="text-gray-600 leading-relaxed max-w-xl">
          (소개글 들어갈 자리)
          넣을게 없어서 대충 지금 웹페이지 기능정리
          <br/><br/>1. 이름 이니셜로 파비콘 이미지 변경
          <br/>2. 현재 컴퓨터시간 우상단에 출력(갱신은 10초단위)
          <br/>3. 우측 메뉴창(≡)
          <br/>4. 제미나이가 지멋대로 만들어준 로컬스토리지 이용하는 메모장?
          <br/> <br/><h3>NEW</h3>
          5. 시간대별로 변하는 창문 기능(밝기 조정하느라 3시간 날려먹음)
          <br/>6. 노래 플레이 리스트(제작중.... 아직 순수 ai만 사용한 상태)
        </p>

      </div>
    </section>
  );
}

코드 전문은 이렇다 아 그리고 이번에 <setion> 태그라는 것을 알게 되었는데

찾아보니 일반인 입장에서는 <div>와 큰 차이가 없는 태그지만, 검색엔진의 입장에선 섹션이라는 태그를 하나의 주제가 담긴 구역으로 인식해 검색엔진 입장에선 도움이 되고, 스크린 리더라는 시각 장애인용 음성 안내 프로그램을 사용하는 사용자 입장에서도 구역 이동을 도우는 기능이라고 한다.

또한 해당 페이지에서 기존에도 알고있었지만 tailwind 문법으로 바뀐 기존 css코드를 제외하고 새롭게 알게 된 기능은 id="profile"이라는 기능이다.

후술 할 헤더관련에서 자세히 이야기하겠지만, href속성에서 같은페이지 내에 있는 태그의 위치를 #(id)형식으로 전달해주면 자동으로 스크롤이 해당 구역으로 내려가는 기능이다.

3. 목록 카드 컴포넌트

export default function SkillSection() {
  const skills = ['C / C#', 'Python', 'React & JavaScript', 'Tailwind CSS'];

  return (
    <section id="skills" className="space-y-6">
      <h2 className="text-2xl font-bold text-gray-900 tracking-tight">기술 스택</h2>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        {/*map함수로 skils 리스트에 있는거 차례로 배당*/}
        {skills.map((skill, idx) => (
          <div key={idx} className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex flex-col justify-between hover:border-blue-300 transition">
            <span className="text-sm font-medium text-gray-400">스택 0{idx + 1}</span>
            <span className="mt-4 font-semibold text-gray-800 text-lg">{skill}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

(hover:border-blue-300로 마우스 올렸을시 파란테두리로 변경 + transition로 자연스럽게까지)

우선 목록 카드 컴포넌트의 주요 기능에선 배열과 map함수를 이용하였다. array에 지금것 배운 컴퓨터 언어들을 입력해주었고

아래의 맵함수에서

        {skills.map((skill, idx) => (
          <div key={idx} className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex flex-col justify-between hover:border-blue-300 transition">
            <span className="text-sm font-medium text-gray-400">스택 0{idx + 1}</span>
            <span className="mt-4 font-semibold text-gray-800 text-lg">{skill}</span>

array에 넣어진 순서대로 값 할당을 해주었다. key값(idx)이 각 자료에 부여되고 또한, span 태그를 이용해서 순서(key값을 이용함), 각 인덱스에 있는 값을 보여주는 표를 만든다.

결과물! map함수의 장점을 복습하는 겸 작성해보자면, map함수로 이렇게 작성해두면 나중에 새 언어를 배워 카드를 추가하게 되어도 skills 배열에 한 단어만 추가하면 자동으로 해결된다.

4. 로컬 스토리지를 이용한 메모장 컴포넌트

우선 어떻게 만들게 되었냐면...간단히 말해서 제미나이가 멋대로 만들어준건데 나름 잘만들어서 조금 수정 후 채택하게 되었다!

이번 컴포넌트는 우선 작동하는 사진들 후 기능을 소개하는 방식으로 하려한다. 이렇게 제목 작성 후 코드 박스에 아무 내용 그대로 적어두면...

이렇게 저장되고, 로컬스토리지에 기록이 남아서 새로고침 + 심지어 노트북을 껏다켜도 브라우저 캐시를 날리지 않는 이상 기록이 계속 존재하게 된다

import React, { useState, useEffect } from 'react';

export default function TilSection() {
  const [tils, setTils] = useState(() => {
    const saved = localStorage.getItem('study_tils');
    return saved ? JSON.parse(saved) : [
      { 
        id: 1, 
        title: 'React useState로 상태 관리하기', 
        code: 'const [count, setCount] = useState(0);', 
        date: '2026-09-14', 
        category: 'React' 
      },
      { 
        id: 2, 
        title: '(더미)Tailwind CSS v4 flex 레이아웃', 
        code: 'className="flex items-center justify-between gap-4"', 
        date: '2026-09-13', 
        category: 'CSS' 
      }
    ];
  });

  const [newTitle, setNewTitle] = useState('');
  const [newCode, setNewCode] = useState('');
  const [newCategory, setNewCategory] = useState('React');
  const [openCodeId, setOpenCodeId] = useState(null);

  useEffect(() => {
    localStorage.setItem('study_tils', JSON.stringify(tils));
  }, [tils]);

  const handleAddTil = (e) => {
    e.preventDefault();
    if (!newTitle.trim()) return;
    const newItem = {
      id: Date.now(),
      title: newTitle,
      code: newCode || '// 작성된 코드가 없습니다.',
      date: new Date().toISOString().split('T')[0],
      category: newCategory,
    };
    setTils([newItem, ...tils]);
    setNewTitle('');
    setNewCode('');
  };

  // 특정 ID의 TIL을 삭제하는 함수
  const handleDeleteTil = (id, e) => {
    e.stopPropagation(); // 카드 펼치기/접기 이벤트와 충돌하는 것 방지
    setTils(tils.filter(item => item.id !== id));
  };

  const toggleCode = (id) => {
    setOpenCodeId(openCodeId === id ? null : id);
  };

  return (
    <section id="tils" className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-gray-900 tracking-tight">Today I Learned (TIL)</h2>
        <span className="text-xs text-gray-500 bg-gray-200 px-2.5 py-1 rounded-md">Code Snippet Archive</span>
      </div>

      {/* TIL 입력 폼 */}
      <form onSubmit={handleAddTil} className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-4">
        <div className="flex flex-col sm:flex-row gap-3">
          <input 
            type="text" 
            placeholder="오늘 배운 내용 요약 (예: React Hook 활용법)" 
            value={newTitle}
            onChange={(e) => setNewTitle(e.target.value)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
          />
          <select 
            value={newCategory} 
            onChange={(e) => setNewCategory(e.target.value)}
            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-white"
          >
            <option value="React">React</option>
            <option value="C/C++">C/C++</option>
            <option value="Python">Python</option>
            <option value="CSS">CSS</option>
          </select>
        </div>

        <textarea 
          placeholder="오늘 작성한 핵심 코드 스니펫을 입력하세요..." 
          value={newCode}
          onChange={(e) => setNewCode(e.target.value)}
          rows="3"
          className="w-full px-4 py-2 font-mono text-xs bg-gray-900 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
        />

        <div className="flex justify-end">
          <button 
            type="submit"
            className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition text-sm shadow-sm"
          >
            코드 기록 추가
          </button>
        </div>
      </form>

      {/* TIL 목록 카드 리스트 */}
      <div className="grid gap-4">
        {tils.map((item) => {
          const isOpen = openCodeId === item.id;
          return (
            <div key={item.id} className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm transition space-y-3">
              <div className="flex items-center justify-between">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <span className="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs font-semibold rounded">
                      {item.category}
                    </span>
                    <span className="text-xs text-gray-400">{item.date}</span>
                  </div>
                  <h3 className="font-medium text-gray-900">{item.title}</h3>
                </div>

                {/* 우측 버튼 그룹 (코드 보기 + 삭제 버튼) */}
                <div className="flex items-center gap-2">
                  <button 
                    onClick={() => toggleCode(item.id)}
                    className="px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition"
                  >
                    {isOpen ? '코드 숨기기 ▲' : '코드 보기 ▼'}
                  </button>
                  <button 
                    onClick={(e) => handleDeleteTil(item.id, e)}
                    className="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition"
                  >
                    삭제
                  </button>
                </div>
              </div>

              {isOpen && (
                <div className="mt-3 p-4 bg-gray-900 text-gray-100 rounded-lg font-mono text-xs overflow-x-auto shadow-inner">
                  <pre>{item.code}</pre>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

여러가지 기능이 있지만 이번에 아예 새롭게 알게 된 로컬스토리지라는 기능을 중점으로 분석해보고자 한다.

const [tils, setTils] = useState(() => {
  const saved = localStorage.getItem('study_tils');
  return saved ? JSON.parse(saved) : [ /* 값이 없을 시 기본 더미 데이터 모록*/ ];
});

로컬스토리지 특징: 문자열 형태의 데이터만 저장 가능, 브라우저 캐시 삭제를 하지 않거나 삭제시간을 정해두지 않는 이상 쿠키와는 다르게 무기한 저장. 도메인당 5mb라는 적은 저장공간만 사용가능

localStorage.getItem('분류태그명'): 로컬스토리지에서 [분류태그명]이라는 것으로 분류된 데이터들을 가져오게 한다. JSON.parse(saved): 문자열로 저장된 saved라는 데이터를 객체 배열 형태로 복원(역직렬화라고 하기도 함)

useEffect(() => {
  localStorage.setItem('study_tils', JSON.stringify(tils));
}, [tils]);

localStorage.setItem(): 로컬 스토리지에 저장 [tils]: 참고(지금은 임의로 작성한 변수가 들어간 상태), tils의 상태가 바뀔 때 마다. 즉, 새로운 기록이나 삭제를 할때 마다 해당 코드가 실행됨 JSON.stringify(tils): parse와 반대로 저장하기 위해 객체 배열 형태의 데이터를 문자열 식으로 변환 해줌

5. 헤더,푸터

그냥 기분삼아 만들어본 푸터. (논 카피라이트)

간단해서 먼저 설명하자면.

      <footer className="border-t border-gray-200 bg-white mt-20 py-8 text-center text-sm text-gray-500">
        <p>© 무단전재 및 재배포 환영</p>
      </footer>

디자인, 글 이게 전부. 그냥 코드에서 페이지 맨 아래에 깔리도록 조정만 잘 해주면 된다.

그리고 상단의 헤더 컴포넌트. 주요기능을 먼저 말하자면 2갱;다. 첫번째는

사진에 보이는 대로 오른쪽 끝에는 페이지 이름, 오른쪽엔 시계와 메뉴창 버튼

그리고 2번째가 위에 보이는 대로 메뉴창 내부(여기가 만드는데 복잡 했음)

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; // Link 컴포넌트 추가 임포트

export default function Header() {
  const [isOpen, setIsOpen] = useState(false); // 모바일/사이드 메뉴 열림/닫힘 상태
  const [currentTime, setCurrentTime] = useState(''); // 실시간 시계 상태


  // 실시간으로 시:분 계산해서 업데이트하는 로직
  useEffect(() => {
    const updateTime = () => {
      const now = new Date(); // 현재 컴퓨터 시간 가져오기
      // 시와 분만 가져와서 2자리 형식으로 맞춤 (예: 15:04)
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      setCurrentTime(`${hours}:${minutes}`);
    };

    updateTime(); // 컴포넌트 마운트 시 처음에 바로 실행
    const timer = setInterval(updateTime, 1000 * 10); // 10초마다 시간 갱신

    return () => clearInterval(timer); // 메모리 누수 방지 (언마운트 시 타이머 해제)
  }, []);

  // 메뉴 아이템 목록 (내부 스크롤 앵커와 다른 페이지 이동 라우트를 구분)
  const menuItems = [
    { name: '프로필', href: '#profile', move: false },
    { name: '기술 스택', href: '#skills', move: false },
    { name: 'TIL 아카이브', href: '#tils', move: false },
    { name: '플레이 리스트(테스트페이지,시험 상태)', to: '/test', move: true }, // 다른 페이지로 이동하는 라우트
  ];

  return (
    <>
      {/* 상단 고정 헤더 */}
      <header className="sticky top-0 z-50 bg-white border-b-[1.9px] border-black">
        <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">

          {/* 로고 및 브랜드 영역 */}
          <div className="font-bold text-lg text-gray-900 tracking-tight flex items-center gap-2">
            <span className="w-3 h-3 bg-blue-600 rounded-full"></span>
            Temporary Archive
          </div>

          {/* 우측 영역: 실시간 시계 표시 + 햄버거 메뉴 버튼 */}
          <div className="flex items-center gap-4">
            {/* 간략한 시간 표시 (분까지만 모노 폰트로 깔끔하게) */}
            <span className="text-xs font-mono text-gray-500 bg-gray-100 px-2.5 py-1 rounded-md">
              {currentTime}
            </span>

            {/* 햄버거 버튼 (클릭 시 사이드 메뉴 열림) */}
            <button 
              onClick={() => setIsOpen(true)}
              className="p-2 text-gray-700 hover:text-blue-600 focus:outline-none transition text-xl font-bold"
              aria-label="메뉴 열기"
            >
              ≡
            </button>
          </div>
        </div>
      </header>

우선 첫 번째 기능을 만드는데 쓴 코드. 시계부분은 복잡해서 기초를 ai에게 맡기고 세부조정만 하는 식으로 만들게 되었다.

new Date(): 현재 컴퓨터의 시간을 가져옴 String(now.getHours()).padStart(2, '0'): 시간 값을 가져와서 글자길이는 항상 2자리, 빈자리는 0으로 채우게 하는 기능을 구현하는데 사용됨 setInterval(실행시킬 함수, 주기): 시계 변경용으로 사용함. 일정 간격마다 함수를 작동시키게 하는 코드 return () => clearInterval(timer): 페이지 화면에서 이 코드가 있는 컴포넌트가 사라진다면 timer 작동 중지. 이를 통해 메모리 누수 현상을 방지할 수 있음

5.1. 메뉴창 시스템 수정하기

   {/* 사이드 메뉴가 열렸을 때 배경을 어둡게 처리하는 오버레이 */}
      {isOpen && (
        <div 
          onClick={() => setIsOpen(false)}
          className="fixed inset-0 bg-black/40 z-50 transition-opacity"
        />
      )}

      {/* 우측에서 스르륵 튀어나오는 슬라이드 메뉴 창 */}
      <div className={`fixed top-0 right-0 h-full w-72 bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>

        {/* 메뉴창 상단 타이틀 및 닫기 버튼 */}
        <div className="p-6 flex items-center justify-between border-b border-gray-100">
          <span className="font-bold text-gray-900">메뉴창</span>
          <button 
            onClick={() => setIsOpen(false)}
            className="text-gray-400 hover:text-gray-700 text-lg font-bold p-1"
            aria-label="메뉴 닫기"
          >
            ✕
          </button>
        </div>

        {/* 네비게이션 링크 목록 (isAnchor 값에 따라 내부 스크롤 vs 페이지 이동 분기) */}
        <nav className="p-6 flex flex-col gap-4">
          {menuItems.map((item, index) => (
            item.move ? (
              // 1. 다른 페이지(라우트)로 안전하게 이동하는 React Router Link 컴포넌트
              <Link 
                key={index}
                to={item.to}
                onClick={() => setIsOpen(false)}
                className="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-3 rounded-xl font-medium transition text-base"
              >
                {item.name}
              </Link>
            ) : (
              // 2. 같은 페이지 내 특정 섹션으로 스크롤 이동하는 앵커 태그
              <a 
                key={index}
                href={item.href}
                onClick={() => setIsOpen(false)}
                className="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-3 rounded-xl font-medium transition text-base"
              >
                {item.name}
              </a>
            )
          ))}
        </nav>
      </div>

마지막으로, 좀 마지막에 수정 할 떄 애를 먹은 메뉴창 기능을 분석하겠다. 아 그리고 이건 8,9주차 내용이 섞여있는데 우선 기능 자첸 8주차에 만들어져서 8주차 항목에 배치하게 되었다.

우선 메뉴창을 눌렀을 시 transition-transform duration-300 ease-in-out 을 통해 0.3초 동안 메뉴창이 자연스런게 나오게 된다

또한 ${isOpen ? 'translate-x-0' : 'translate-x-full'}를 통해 메뉴창의 이동을 조정한다. (평소엔 false라 화면 밖으로 숨겨져 있음)

그리고

{isOpen && (
  <div 
    onClick={() => setIsOpen(false)}
    className="fixed inset-0 bg-black/40 z-50 transition-opacity"
  />
)}

를 통해 isOpen 값이 참이면 화면 전체를 덮는 반투명한 검은색 도형을 생성해 이런 식으로 기존 화면이 비활성화 된 느낌을 준다

그리고 여기가 골치 아팠는데

        {/* 네비게이션 링크 목록 (isAnchor 값에 따라 내부 스크롤 vs 페이지 이동 분기) */}
        <nav className="p-6 flex flex-col gap-4">
          {menuItems.map((item, index) => (
            item.move ? (
              // 1. 다른 페이지(라우트)로 안전하게 이동하는 React Router Link 컴포넌트
              <Link 
                key={index}
                to={item.to}
                onClick={() => setIsOpen(false)}
                className="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-3 rounded-xl font-medium transition text-base"
              >
                {item.name}
              </Link>
            ) : (
              // 2. 같은 페이지 내 특정 섹션으로 스크롤 이동하는 앵커 태그
              <a 
                key={index}
                href={item.href}
                onClick={() => setIsOpen(false)}
                className="text-gray-700 hover:text-blue-600 hover:bg-blue-50 px-4 py-3 rounded-xl font-medium transition text-base"
              >
                {item.name}
              </a>
            )
          ))}

우선 간단하게 정리하자면 삼항 연산자를 통해 move값이 true라면 다른 페이지 경로로 이동하는 버전, false 라면 같은 페이지 내에서 아까전에 언급한 태그라는 방식으로 이동하는 방식을 쓰게 하였다.

  const menuItems = [
    { name: '프로필', href: '#profile', move: false },
    { name: '기술 스택', href: '#skills', move: false },
    { name: 'TIL 아카이브', href: '#tils', move: false },
    { name: '플레이 리스트(테스트페이지,시험 상태)', to: '/test', move: true }, // 다른 페이지로 이동하는 라우트
  ];

프로필,기술스택,아카이브 같은경우는 후자의 방식으로, 플레이 리스트는 다른 페이지(정확히 말하자면 move 값이 true기 때문에)기 때문에 전자의 방식대로 작동하게 된다

우선 전자의 방식의 코드를 분석해보자면 <link>태그 내에서 map함수로 키 값을 생성하고 to라는 속성으로 페이지를 이동하게 된다

• 여기서 <link to = ...> 태그와 <a herf = ...>의 차이점을 집고 넘어가자면 a태그 와 달리 link 태그는 페이지를 이동할 때 새로고침을 안하고 주소창만 바꾸는 방식으로 이동해 a태그 보다 매끄럽게 페이지를 이동할 수 있다.

이어서 후자의 방식은 href={item.href}라는 속성에 아까 각 컴포넌트에 부여한 id ='#profile', id = '#skills', id ='#tils' 라는 아이디를 인식하여서 페이지가 해당 하는 아이디를 가진 컴포넌트가 있는곳으로 자동으로 스크롤해준다.

그리고 별거는 아니지만 골치 아팠다고 한 이유는 8주차에는 전자의 방식이 없었기 때문에 9주차 때 삼항연산자를 넣어 2가지의 분기를 만드는 과정에서 수정에 좀 시간이 소요되었기 때문이다.

8주차 결과물 완성

사진은 따로 없지만, 위에서 만든 컴포넌트를 기본 경로로 설정된 MainPage.jsx에서 조합하면 메인 페이지가 완료된다.

1.(9주차)시간대에 따른 창문 배경 변화

import React, { useState } from 'react';
import Header from '../components/Header';
import ProfileCard from '../components/ProfileCard';
import SkillSection from '../components/SkillSection';
import TilSection from '../components/TilSection';

export default function MainPage() {
  // 현재 시간에 따른 시간대별 창밖 풍경 상태 (테스트용 조작 가능)
  const [hour, setHour] = useState(new Date().getHours());

  const getTimeTheme = (h) => {
    if (h >= 5 && h < 8) {
      return {
        name: 'DAWN',
        windowBg: 'from-slate-900 via-indigo-950 to-blue-900',
      };
    } else if (h >= 0 && h < 12) {
      return {
        name: 'DAY',
        windowBg: 'from-sky-400 via-amber-100 to-amber-200',
      };
    } else if (h >= 15 && h < 20) {
      return {
        name: 'DUSK',
        windowBg: 'from-rose-600 via-orange-500 to-amber-900',
      };
    } else {
      return {
        name: 'NIGHT',
        windowBg: 'from-stone-950 via-slate-900 to-black',
      };
    }
  };

  const currentTheme = getTimeTheme(hour);

  return (
    <div className="min-h-screen bg-[#F2F4F7] text-gray-800 font-sans antialiased">

      <Header />

      <main className="max-w-5xl mx-auto px-6 py-12 space-y-16">

        {/* 창문 영역과 시간 조절 버튼을 감싸는 컨테이너 */}
        <div className="space-y-3">

          {/* 대형 창문 위젯 */}
          <div className="w-full h-56 md:h-72 rounded-2xl border-4 border-gray-200 overflow-hidden relative shadow-sm group">
            {/* 시간대별 그라데이션 하늘 (부드러운 전환) */}
            <div className={`absolute inset-0 bg-gradient-to-b ${currentTheme.windowBg} transition-all duration-1000 ease-in-out`} />

            {/* 유리 질감 빛 번짐 효과 */}
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-white/20 via-transparent to-black/30 pointer-events-none" />

            {/* 십자 창틀 프레임 */}
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
              <div className="w-full h-[4px] bg-gray-900/80 shadow" />
            </div>
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
              <div className="h-full w-[4px] bg-gray-900/80 shadow" />
            </div>

            {/* 하단 모서리 인포 뱃지 */}
            <div className="absolute bottom-3 right-3 text-[10px] font-mono text-white/80 bg-black/50 backdrop-blur px-2 py-1 rounded">
              시간: {currentTheme.name}
            </div>
          </div>

          {/* 창문 바로 아래 왼쪽 구석에 몰아넣은 시간 조절 미니 바 */}
          <div className="flex items-center gap-2 px-1">
            <span className="text-xs font-mono text-gray-400">TIME:</span>
            <div className="flex items-center gap-1.5 bg-gray-100 p-1 rounded-lg border border-gray-200 text-xs">
              {[6, 12, 18, 23].map((testHour) => (
                <button
                  key={testHour}
                  onClick={() => setHour(testHour)}
                  className={`px-2 py-0.5 rounded font-mono transition-colors ${hour === testHour ? 'bg-gray-900 text-white shadow-sm' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'}`}
                >
                  {testHour}시
                </button>
              ))}
            </div>
          </div>

        </div>

        <ProfileCard />
        <SkillSection />
        <TilSection />
      </main>

이 기능 같은 경우엔 컴포넌트 대신 메인 페이지에 같이 넣어주었다. 아까전 시계를 만들던 로직을 가져와 시간대 별로 디자인을 바꾸는 시기이다. 어....여기선 시계로직만 있으면 거의 절반 해결한거고, 솔직히 디자인이 제일 어려웠어서 설명하는말을 달기가 어렵다.

<새벽 시간대 사진>

2. 플레이 리스트 페이지

일단 이 페이지는 내가 생각하던게 될지 ai를 통해 임시로 대충 만든 페이지이다. 그래서 아직 코드 분석을 못함

여튼 그래도 대략적인 기능은 인지하고 만들었으니 설명하자면 노란색의 재생 버튼을 누르면 음반이 돌아가는 애니메이션, 축음기의 저...침(?) 부분이 음반위로 올라가 진짜 축음기 느낌이 나게 하였다.

또한 축음기이니 유튜브 동영상 재생api를 활용해서 음악 동영상의 속성을 넣으면 음악이 재생되도록 하였다.

그리고 우측 하단의 입력창 같은 부분은 코드를 써놓는 곳으로 특정 코드 입력시 숨겨진 url의 음악 동영상이 재생되도록 하게 할 예정이다.(아직 제대로 구현은 안됨)

여튼 아마 10주차 떄 완성이 제대로 되지 않을까 싶다. 우선 그래도 만들고 싶은 기능은

축음기 데코레이션, 입력창을 통한 검색또는 히든곡,

화면 우측에 음반처럼 돌아가면서 음악 선택하게 하는 방식.

좌측에는 음악이 많아질 경우를 대비해 음악을 토픽별로 분류해놓는 음반집 형태의 세부 필터 기능?(클래식,오페라 꼭 장르별로는 아님)

개인용 개발 관련 단어 정리

• IDE: 통합 개발 환경. 디버깅, 개발, 빌드를 한 프로그램만으로 할 수 있게 해주는 소프트웨어 애플리케이션

• 백엔드: 프론트엔드와 반대로 서버관련 로직 처리, api작성, DB관리 등을 함

• API: 서로 다른 프로그램이 서로 데이터를 통신하게 할수 있게하는 일련의 규칙또는 약속(이런 전송,전달 형식이 정리된게 api명세서)

• Html: 웹페이지 개발 언어

• CSS: html 웹페이지에 디자인을 적용하는 언어

• 인터프리터: 소스코드를 한줄 씩 실시간으로 변환후 곧바로 실행하는 방식(파이썬, 자바 스크립트 등이 속함)

• const: 절대로 값이 바뀌지 않는 변수

• let: 내용물의 값이 언제든지 바뀔수 있는 변수

• 객체: 속성, 메서드를 하나의 공간에 담아둔 단위. 코드의 재사용성, 구조화 면에서 이점이 존재

• props: 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달할 때 사용하는 객체형 변수, 자식 컴포넌트내부에선 직접 수정불가함

• 컴포넌트: 화면(UI)을 독립적이고 재사용 가능한 작은 조각으로 쪼개어 관리하는 단위

• 빌드: 배포 전 코드를 실제 서비스 가능하게끔 경량화를 위해 압축, 최적화 하는 작업을 의미

• 모듈: 프로그램에서 독립적인 기능을 하는 함수,클래스,파일 등을 의미

• 번들러: 프로젝트 파일에서 여러개로 분산되어 있는 파일(모듈)을 하나로 묶어서 배포할 수 있게 해주는 프로그램 (여기에 VITE가 포함됨)

• 프레임 워크: 라이브러리와 비슷하지만 다름, 프레임 워크는 라이브러리와 달리 호출이 불필요하며, 함수로 작동되는 것이 아닌 그냥 프레임워크에 지정된 방식으로 코딩을 하면 빌드나 테스트 시 프레임워크가 미리 지정된 방식으로 코드를 해석후 변환하여 프로그램이 작동되게 해줌(Styled css가 라이브러리와 비슷하고, TailWind css가 프레임 워크 쪽에 해당 됨)

이번에 만들면서 알게된 코드 정리

mx: margin-x, px:padding-left/right, py:padding-top/bottom, border-t: border-top 같은 반복적인건 일부 생략

• grid-cols-2: 한 줄에 2개의 열을 배치
• sm:grid-cols-4: 반응형 변환, 화면이 일정 크기 이상으로 넓어졌을시 한 줄에 4개의 열을 배치

• min-h-screen: 최소 높이(min-height)를 화면 전체 높이(100vh)로 설정.
• (bg 또는 text)-{색상}-{명도/투명도}: 배경색이나 텍스트 색을 변경
• opacity-(숫자): 이것도 투명도 조절
• font-{폰트 명}: 폰트 적용
• antialiased: 글자 안티앨리어싱(계단화 현상 방지)
• flex flex-col: flex-direction: column;을 의미
• tracking-tight: 글자간의 간격을 축소함
• leading-relaxed: 글자 줄의 간격을 늘림
• max-w-사이즈: 박스의 최대 넓이 제한 xs,sm,md,lg,xl,2xl~7xl 까지 순서대로 존재.

지난 2주동안 협업 프로젝트 하느라 딱히 변경점은 없지만, 일단 좀 개판인 상태를 수습해보기 위해 노력하였다. 우선 제일 처음 페이지가 좀 많이 휑한데 이건 좀 나중으로 미루고,

축제 프로젝트에 들어갈 스크립트를 여기서 시험장(?) 처럼 사용해서 그것부터 원상 복구하기로 하였다. 여긴 원래 자기소개 페이지인데 페이지 입장 애니메이션 테스트 해보느라고 아에 가려졌다. 여기서 Scroll 만 지워주면.. 원래 버전으로 해결되었다. (일단 메인페이지 수정중... 스터디 전까지 될지 미지수)

2. 배포

어... 일단 수정하기 전 먼저 배포를 해버려서 순서가 어긋난 감은 있지만 vercel을 통해 배포해서 딱히 문제는 없다고 판단한다.

우선 개인용 프라이빗 깃허브 저장소 개설 후, 협업 프로젝트 동안 수십번은 한 브랜치 개설, 브랜치 변경 후 git add .하고 커밋을 하여 만든 코드를 깃허브에 올렸다.

이후 vercel 웹페이지에서 깃허브 저장소를 선택하고 vercel을 해당 저장소에 설치하겠냐 묻는것에 예 버튼을 누른뒤

웹페이지 생성을 했던 것으로 기억한다. 거기서 Build Command에 CI=false npm run build를 미리 적어주었다.

가동시간은 미리 배포를 해버려서 벌써 13시간이지만 결과화면은 이렇게 되었다. 있는게 없어서 오류가 안 떴다

배포 링크: https://mutsa-web-test.vercel.app/

3.이번 1학기 스터디 동안 느낀점

음.. 아마 대학교 1학년 1학기임과 동시에 멋쟁이 사자라는 좋은 학술 동아리에 운 좋게 프론트엔드로 가입해서 이것저것 배우다가 막바지에 축제일정 2~3개(부스 운영, 아이디어 톤, 협업 프로젝트) 겹치고 일정 관리 실패해서 페를 좀 끼치게 되었는데 그러한 점에서 참 지금도 자신에 대한 아쉬움과 도와주신 분들에게 감사함을 느끼고 있다.

또한, html, css(요건 좀 잘 못함ㅎㅎ), java (가끔 c언어로 짤수 있는거 같을 걸 자바로 못짜서 기분이 오묘함)

그리고 최종적으로 다 합치고 리엑트에서 쓰는 jsx를 정말 짧은 3개월도 안되는 시간동안 배우고 코딩 프로젝트도 ai 도움을 받긴 했어도 2개나 진행한 것이 아직도 실감이 안나고 뭐랄까 고등학교 때 생각하던? 1학년의 삶과 정반대...까진 좀 놀 때도 있긴해서 아니고 한 150도 차이가 나는 삶을 산 것 같다.

앞으로도 이제 해커톤이 2~3개 남은걸로 기억하는데 그 때까지 또 스터디가 없어도 열심히 공부해야지 사고 안날 것 같다는 위기감도 들고, 뭔가 운좋다는 생각도 들고 느끼는 감정은 실뭉치처럼 엮여있는 것 같다.

이번에 협업하면서 다른 프론트 조원분들과 친분도 쌓고, 혼자 또는 같이 밤샘작업도 해보고 개발자로써 필요한 경험을 정말로 1학년이라는 이른 시기에 운 좋게 겪게 되었다고 생각한다.

한 학기가 이렇게 마무리 지어졌지만, 방학기간 첫번째 해커톤(무박 2일)도 다가오고 2학기도 남았지만 앞으로도 조원들분과 사이좋고 나머지 해커톤도 잘 끝낸 뒤 이번 년도 마지막 멋사 프론트엔드 수료를 잘 끝냈으면 좋겠다.

요약은 위와 같고 느낀 썰 풀거는 무진장 많긴하다. 아무래도 최근의 기억이 제일 강렬하기에 요약은 막바지 내용이 주요적이기 한데, 요 아래에선 면접 썰부터 풀어보려고 한다.

썰풀이

경고 사항으로는 만약 멋사 동아리 회원이나 부장님이 보시기엔 다소 충격적인 내용이 있을 수도 있음을 경고합니다.

1. 면접 당시 썰

아마 정식입학 전 겨울 방학 시점으로 올라간다, 당시 정보대 카톡에 아마 이동로봇 특강 인가? 공지를 보고 인천대를 그렇게 거의 처음오게 되었는데 당시 버스시간 감각이 없기도 하고 지각하면 사고라는 느낌을 받아 너무 이르게. 한 1시간 정도 일찍? 도착하였다.

근데 너무 일찍 와서 세팅 중이었고, 거기서 이제 4학년 선배 분들 8명쯤 정도를 먼저 뵈게 되었고(처음엔 대학원생 분들인줄 착각 함ㅎㅎ) 어쩌다보니 어느 교수님하고 잠시 대기실에 수업 시작전까지 대화 몇마디도 나누게 되었다.(근데 내가 듣는 수업이 안 겹치는지 아직도 다시 못 뵘;;)

여튼이제 강의 전인가 끝난 후에 지금 멋사 백엔드에 계신 분?이 멋사들어오라고 홍보를 해서 그렇게 처음 알게 되었다.

이후 2월 마지막 주였나? 에타에 멋사 14기 모집공고 뜬 걸 보고 신청을 하려 했다. 당시 마음가짐은 겜 개발자가 꿈이긴 한데 웹개발도 배우고, 협업 한다고? 안 할 이유가 없지 였다고 할 수 있다.

좀 더 무의식의 흐름을 자세히 말하면 "지금 취업 불경기라 개인 능력의 다양성과 대체 불가한 인력 뭐시기 뭐시기~" 라는 너무 T같고 실속적인 이유가 따라 붙겠지만, 자의식 수준에서는 저런 마음가짐이었다고 할 수 있다.

일단 그럼 마음으로 구글폼을 작성 시작하는데, 백엔드랑 프론트엔드 고민 중 구글폼에 백엔드 지원자가 많다 고 안내가 써져있었다. 그래서 그냥 단순히, 어 그럼 떨어질 확률이 높네 프론트 해야징~ 이란 마음으로 프론트 지원서 작성을 시작했다.

이걸 좀 가볍게 장난식으로 보일 수 있는데 변명거리가 있다. 진짜로 이 때 당시, "동아리? 고등학교 동아리랑 비슷하겠지"라는 생각으로 지원하고 게다가 무지에서 비롯된 야수의 심장느낌으로 동아리 신청도 멋사 1개만 신청했다. (동아리 1개 제한이 고등학교 때랑 같은 줄 알았음) ** ** 게다가 학술 동아리 인것도 모르고 뭔지는 모르겠지만 전국적인 연합 동아리구나~ 라는 지식수준에서 신청을 해, 지금 와보면 자신이 봐도 뭔 깡이지 라고 생각이 들 정도 ** _여튼 지원서 작성 시작**_

300자 500자 였나 그런 질문 한 2개가 끝인 줄 알았는데 안끝났다. 솔직히 말하면 그 위에 볼드체로 된 당시의 생각을 가지고 있기에 좀 부적절하게 보일순 있지만;; 동아리가 뭐이리 깐깐해, 형식적인 질문인가? 꽉 안채워도 되려나? 같은 생각이 만연했다. 마지막에 포트폴리오 ppt였나? 까지 제출하라는 거 보고 속마음으로 욕은 나오긴 했지만 정성 껏 고등학교 3년간의 코딩 동아리 이력과 작품 같은걸 설명하는 내용으로 최종 제출을 하였다.

그리고 1차 합격 발표일 그때 발표 시간이 오후 6시였나 7시였나 그랬을 텐데 몇분이 지나도 안오길래 에타에 멋사 프론트 앤드 경쟁 빡센가?라는 내용이 담긴 글도 써보고 기다렸다. 아 탈락이구나 하는 심정이 든 순간 바로 1차 합격 문자가 늦게 발송되어 김이랑 힘이 빠진 기억이 아직도 난다.

여튼 좀 시간이 흘러 2차 면접일, 멋사 동아리 방을 처음 오게 되었는데 앞에 사람이 하는걸 동아리 방앞에서 순서 대기타고 있다가 소리가 새서 엿들었는데 너무 웹개발에 전문적인 경험얘기가 들려서 진짜 "아 ㅈ됐다 포트폴리오에 작성한 경험이 끝인데 탈락하려나, 아닌간 초보환영이라 했으니 되려나? 아닌가? 그래도 경력직 선호겠지?"

라는 만감이 교차하는 심정으로 대기실에 들어갔다. 근데 포트폴리오에 있던 내용과 달리 협업 자세랑 배우려는 의지만 물어보길래. 분위기도 거의 대학 면접 느낌 그대로였고 그래서 "아 탈락이네 음~" 라는 생각만 면접이 끝나고 들었다. + 인천대 주변에 비둘기 대신 제비가 많네라는 생각(멘탈 털림)

딩시 면접 전에 찍은 제비 사진

근데 또 1주일 뒤. 그래도 기대는 하고 있었는데 요약하자면 1차 합격 때와 같이 기대 -> 절망 -> 멘붕 -> 합격??? 이란 똑같은 레파톨리로 멋사 프론트엔드 부원이 되었다.

2. 학술 동아리 취급 보고 놀란 썰

요 썰이 이제 좀 지금의 인식 마인드로 바뀌게 되는 썰내용인데

어떻게 인지를 시작했냐, 갑자기 아무래도 멋사 방문기록을 유튜브 알고리즘이 캐치를 한건지 멋사 광고가 자꾸 뜨길래, "뭐여 기업 운영 동아리인가?" 라는 생각으로 멋사 정보를 좀 더 찾아보았다. 여기서 이제 학술 동아리라는 것을 보고 꽤 취급이 좋았구나 정도로 생각 1차개선

이후로는 계기가 뭔지 잘 기억이 안나는데 학술동아리 수료증이 이력서에 들어갈 수 있다고??? + 들어가기 빡센데 그걸 들어갔다고??? + 걍 진짜 배우고 협업 경험만 쌓으려고 들어온건데 뭐지?? 라는 심정으로 지금의 생각으로 개선이 된것으로 기억한다.

뭔가 썰 풀게 많다고 했는데 나머지를 막상 써보려니 타인의 입장에선 공감이 힘들 (개인적인 감정 느낌 포인트 등이 다름 등) 것 같아서 이 2개의 썰만 풀어본다.

나같은 경우는 그..문제였던 웹페이지 주소상 이름과 디자인 쪽을 축제 프로젝트를 위해 연습할 겸, 좀 보강하면 될 것 같다.

1. 문제 풀이

1. 바탕 화면에 새로운 리액트 프로젝트를 생성하고, 해당 폴더로 이동해 프로젝트를 실행하는 방법을 순서대로 쓰세요. 또 이미 열려있는 서버를 끄는 방법도 설명해보세요.

1\. vsCode 열기

2\. 터미널 창 오픈 후, cd ~/Desktop으로 경로를 바탕화면으로 이동 이후 npx create-react-app (파일명) 입력
이후 cd (생성 후 복사한 파일의 경로) 입력으로 터미널창의 경로 조정

3\. npm start로 로컬 서버 열기

4\. npx kill-port 3000(해당 주소는 주소창의 로컬서버 번호에 따라 변경될 수 있음) 입력

이번에 좀 솔직히 말하자면, 4번 말고, 맨날 바탕화면에서 파워셸 창 띄우고 리엑트 프로젝트 생성후 들어가서, 2번 과정을 설명을 못해서 검색을 했는데 검색중 바탕화면 주소를 경로 복사할 필요 없이 mac과 윈도우 환경 둘다에서 호환이 되는 cd ~/Desktop 이라는 즉시 바탕화면으로 경로를 이동하는 커맨드를 발견했다.

그리고 4번은 해본적이 없어서 새롭게 검색을 통해 알게 되었다.

2. State를 이용해 빈칸을 채워보세요.

import { useState } from "react";



const Counter = () => {
    const[count, count_change] = useState(0);  //초기값 없길래 그냥 0으로 설정
    return <div>현재 수량: {count}</div>;

};

그냥 useState 이용 문제? 근데 좀 최근에 멋사 과제말고 프로그래밍 과목에서 C언어 과제들하다가 좀 리엑트 문법을 까먹어서 예전에 했던 것들 좀 살펴보고 인터넷도 한 두 페이지 뒤져서 풀었다.

그러다가 참고한 좋은 벨로그 글이 있어서 여기에도 남겨본다. [리액트] state를 사용하는 이유 (비얌)

3. 틀린 부분을 찾고 올바르게 고쳐보세요. 또 export default가 무슨 뜻인지 설명해보세요.

export default const HelloBtn = () => { 
    const sayHello = () => {
      alert("Hello!");
};

    return (
    <button onClick={sayHello()}>인사하기</button> 
    );

}

// 올바르게 고친것

const HelloBtn = () => {
    const sayHello = () => {
        alert("Hello!");
    };

    return (
<button onClick={ () => sayHello()}>인사하기</button> <= 화살표 함수 형식으로 바꾸어 클릭시 동작하려는 의도에 맞게 고침
    );
}; <= 여기 세미콜론 빠짐

export default HelloBtn; <= 여기 추측은 되지만 명확한 이유를 모르겠는데 리엑트 파일에 문제그대로 작성시 오류줄이 뜨는것으로 보아 이렇게 고쳐야 함 

export default의 뜻은 우선 이게 있으면 다른 파일에서 import 'HelloBtn'; 만 해주면 또 같은 로직을 그 파일에 따로 적을 필요 없는데, 비유하자면

함수의 수출명칭(?)을 export default 뒤에 있는 명칭으로 정하고 내보낸다는 뜻.

그리고 마지막줄에 명확한 이유를 모르겠다고 한건 함수를 그대로 내보내면 당연히 안될걸 직감적으로 알겠는데 명확한 오류 명은 모르는 느낌적인 느낌 정도.

4. App 컴포넌트에서 MenuBox 컴포넌트로 price 데이터를 넘겨주려고 합니다. 넘겨주는 쪽과 받는 쪽의 빈칸을 각각 채워주세요.

// 넘겨주는 쪽 (부모)

const App = () => {

    return (
   <MenuBox price = {15000}>// MenuBox에 price라는 이름으로 숫자 15000을 넘기기
     );

};



// 받는 쪽 (자식)

// 부모가 넘겨준 데이터를 받아오기

const MenuBox = (menu) => { 
return <div>가격: { menu.price }원</div>;
};

답 작성후 작성한 답을 제미나이에 넣어서 오류가 있는지 검증하는 과정 중 마지막 부분에

const MenuBox = ({price}) => {
return <div>가격: { price }원</div>;
};

{price} 를 그냥 화살표 함수에 내다 넣어버리면 그냥 price만 입력해도 의도한 값이 뜬다고 한다.

개인적으로 리엑트가 생각보다 유하다고 느끼는 부분 중 하나였음.

5. 삼항 연산자를 이용해 재고가 0개면 품절, 1개 이상이면 주문 가능이라고 띄우는 코드를 완성해보세요.

   const App = () => {
   const stock = 0; // 재고 수량
   
   return (
    <div>
      {stock > 0 ? 주문 가능 : 품절}
    </div>
   );
   };

   그냥 삼항연산자 문제였음. 근데 너무 간단하게 끝나서 이게 정답이 맞는지 작성하는 지금도 모르겠음. 제미나이한테도 물어봤는데 문제없는 코드고, 요즘 하는 c언어 과제 난이도때문에 생기는 심리적인 이유라고 한다.

(일정 변경으로 인해 6주차 스킵 후 7주차 게시물에서 계속)

- 브랜치 관리 
 git fetch origin: 새로 만든 브랜치 확인(브랜치 목록 새로고침)
 git branch: 현재 있는 브랜치 위치 확인
 git switch (브랜치명) : 해당 브랜치로 이동
 git checkout -b (새로만들 브랜치 명): 브랜치 생성
git checkout -d (삭제할 브랜치 명): 브랜치 삭제(내쪽에서만)

- PS(풀 리퀘스트 요청 하는법): 깃허브에서 해당 브랜치명의 리퀘스트 버튼 누른뒤 설명 쓰고, create pull request버튼 클릭 이후 커밋할 브랜치경로(메인인지 다른곳인지) 확인

• 머지하는법: 충돌 잘확인후 허용 버튼 누르기?(여튼 팀장 역할 임)

  • 새롭게 변경하는 거 끌어오는 방법 git switch main git pull origin main() (안전상의 이유로 다시 브랜치 변경) git switch (자기 브랜치)

• 충돌 해결 리솔브 프라블럼 버튼이 깃허브에 뜨는데 이후 셋중 하나 고르면 됨(내꺼/남의꺼/다 살릴거)

이번에는 뼈대만 만든느낌이긴 하지만, 중요한건 다 했으니 괜찮다. 아마도

이번 주차 과제

1. 폴더 구조 정리하기 및 라우터 세팅
2. 인트로 페이지(Home.jsx) 만들기, 경로는 / 로 들어왔을 때
3. 페이지 왔다 갔다 연결하기
4. {선택사항} 공통 헤더 부분 만들기

1. 폴더 구조 정리하기 및 라우터 세팅

이번 단계는 그다지 어렵지 않다. 폴더구조를 꽤나 보편적이고 보기 쉬운 구조로 설정하고 만들면 해결되는 일이다. src 라는 기본적으로 있느 폴더 안에 components, pages, styles 폴더를 생성후

컴포넌트 폴더에는 말그대로 구성요소. 선택 과제인 공통헤더로 보여질 파일 등이 들어가고 페이지엔 Home,Profile 등이 웹 페이지들 스타일엔 css 파일들이 들어간다.

요렇게

1-1. 라우터 설치

app.js에 이동한뒤 오늘도 어김없이 vscode의 터미널 창을 연 다음 npm install react-router-dom 을 입력한다.

그럼 맨 윗줄에 import { BrowserRouter, Routes, Route } from 'react-router-dom'; 이 생긴다.

이러면 라우터 설치가 끝나긴 하는데 조금더 몇가지 앞서 말하자면

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Self from './pages/Self';
import Common_Header from "./components/Header"

/*
만약 공통 헤더를 넣을것이라면 
import Common_Header from "./components/Header"
와
<Common_Header />
처럼 호출하는 이름이 같아야 함
<Routes> 안쪽: 주소가 바뀔 때마다 그 주소에 맞는 컴포넌트 하나만 골라서 보여주는 곳

<Routes> 바깥쪽: 주소가 아무리 바뀌어도 리액트가 갈아끼우지 않고 그대로 유지하는 영역
*/


function App() {
  return (

  <BrowserRouter>
    <Common_Header /> 
    <h1>App.js 영역</h1>

      <Routes>
        {/* 기본 경로로 들어오면 Home 다른 함수에서 홈 호출하려면 / 만 써야 됨*/}
        <Route path="/" element={<Home />} />

        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />



      </Routes>
  </BrowserRouter>

  );
}

export default App;

주석 같은거 달때 이번 주차 예제 복붙하거나 ai로 팩트체크 한게있긴 한데

지금 살펴볼것은 import ~ from~ 이라는 제일 상단쪽 줄이다.

가령 import Home from './pages/Home'; 이라는 것은

import 바로 뒤의 Home 이라는 건 Home이라는 다른 파일에서 export default Home;으로 내보낸 것을 받아오는것이다.

어디서? 바로 './pages/Home' 이라는 곳에서, 개인적으로 상대경로 복습할 겸 써보자면. 같은 검색깊이에 있는 pages라는 폴더에서 Home.jsx를 찾게 하는것이다. 편하게도 jsx 까지 안써도 파일 확장자까지는 자동으로 처리해준다.

그다음. 아까 라우터를 받아오며 BrowserRouter, Routes, Route 태그를 받아왔다

<BrowserRouter>
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />
      </Routes>
  </BrowserRouter>

브라우저 라우터 태그 안에 라우트와 공통 헤더를 넣을수있다.

이미지가 안그려진다면 요런 느낌

App.js 영역 이란 글자 밑에 내가 Home 파일에 써둔 내용이 나온다 (조금 글자 내용이 다른건 과거 사진이라 그렇다)

<Routes>에는 <Route path="/" element={<Home />} /> 같이 넣을 구 있는데 여기서 루트 패스의 / 는 기본주소로써 npm start를 치면 바로뜨는 그 창이다. (http://localhost:3000/) 여기 주소

그 뒤의 element는 Home이라는 파일내용(컴포넌트)을 보여주겠다~ 란 의미 솔직히 나중에 Route path와 element는 기억할 것 같은데 쓰는 방식이 조금 헷갈릴 것 같긴하다

2. 인트로 페이지(Home.jsx) 만들기

만약 여기까지 라우트 관련한게 잘 이해 갔다면 이 뒤로는 일사천리기 때문에 그다지 걱정 안해도 된다. 다만! Navigate 내용이 새로 있다.

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();
  return (
    <div>
      <h2>웹페이지 홈구역에 오신걸 환영합니다!</h2>
        <button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button>
        <button onClick={() => navigate("/Self")}>내 소개 보러 가기</button>

    </div>
  );
}

export default Home;

이건 실제로 내가 쓴 이번 주차의 Home.jsx에 있는 내용인데

조금 분석을 해보자 음..우선 1.useNavigate 란 것을'react-router-dom'에서 가져왔다.

2. 이후로 밑에 const navigate = useNavigate(); 로 설정해서 useNavigate()를 다 칠 필요 없이 navigate라는 변수에 할당해서 사용하게 만들었다.(줄여쓰기 쯤으로 생각해도 무리없다.)

3. 맨 끝에 export default Home;을 함으로써 Home이라는 이름으로 파일내용을 내보내 App.js 에서 import Home from './pages/Home';을 통해 수신할 수 있게 만들었다.

2-1. navigate 관련

지금 <button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button> 와 같이 버튼 태그 안에 넣어서 onClick 즉,클릭할시

그 안에 있는 함수인 navigate가 동작해서 Profile 이라는 주소로 이동해 아까 App.js에 쓴것 <Route path="/Profile" element={<Profile />} /> 처럼 그 주소에 지정된 Profile.jsx 파일 내용(컴포넌트)을 보여주는 것이다.

아 혹시 조금 이상한 점이 보일수도 있는데 주소명이 Profile인데 왜 블로그 페이지로 이동이 적혀있냐면 이게 복붙을 잘못해서 그렇다. 주로 작업 시작시 잠결에 한게 문제.

그래서 진짜 프로필은 Self.jsx라는 파일 안에 있다.

사진을 보여주자면 주소명과 제목이 조금 꼬여있다. 제목은 진짜 어떻게하다 저렇게 수정까지 하고 꼬였는지 기억이 안남

2-2. navigate 팁

만약에 만약에. 페이지 이동 기능까지 만들고 페이지를 이동후. 복귀 시 오류가 뜬다면

복귀하려는 컴포넌트에 있는 리턴위에 const navigate = useNavigate();가 안적혀있는 걸수도 있다.

그리고 만약에 만약에 웹페이지 이동했는데 아무것도 안뜨고 백색화면이다. 그럼 내용은 잘썼는데 그 내용을 return()안에 안넣었거나, 이동 주소가 잘못된 것일수도 있다.

이 때 추가적인 팁은 아까 공용헤더를 잠시 언급한것 처럼 이게 내용이 그냥 안뜨는건지, 아니면 모종의 사유로 모든 글자가 안뜨는 것인지 알기 위해

에를 들어 App.js에

<BrowserRouter>
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />
      </Routes>
  </BrowserRouter>

처럼 <Routes>위에 모든 웹페이지에서

<h1>App.js 영역</h1>

처럼 공통으로 보여질 내용을 간단히 써서 어디서 오류가 나는지 시각적으로 체크해보자.

3. 페이지 왔다 갔다 연결하기

이건 쉽다.

import { useNavigate } from 'react-router-dom';

를 먼저 모든페이지 상단에 적어준뒤

아까 만든 버튼 태그

<button onClick={() => navigate("(이동할 path명)")}>(버튼에 뜨는 텍스트 내용)</button>

이런 형식으로 버튼을 모든 페이지에 시각적으로 적절한 위치(이게 제일 중점) 에 넣어주면 된다.

아. navigate를 썼으니 나 같은 경우엔 함수 안쪽 리턴문 바깥에다가 const navigate = useNavigate();를 추가적으로 적어줘야 한다.

function Home() {
  const navigate = useNavigate(); //여기 삽입함
  return (
    <div>
      <h2>웹페이지 홈구역에 오신걸 환영합니다!</h2>
        <button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button>
        <button onClick={() => navigate("/Self")}>내 소개 보러 가기</button>

    </div>
  );
}

삽입 위치 헷갈리면 참고

4. {선택사항} 공통 헤더 부분 만들기

이건 조금 쉬울수도 있고 헷갈릴수도 있는데. 우선 컴포넌트 파일에 Header.jsx 파일을 만들고

이런 내용

import React from 'react';

function Common_Header() {
  return (
    <header style={{ padding: '20px', background: '#eee' }}>
      <h2>헤더 영역</h2>
    </header>
  );
}

export default Common_Header;

이후 App.js에서 import Common_Header from "./components/Header" 로 불러와준다.

function App() {
  return (

  <BrowserRouter>
    <Common_Header /> {/*여기 넣음!*/}
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />



      </Routes>
  </BrowserRouter>

조금 김 샐수도 있지만 라우트 바깥. 브라우저 라우터 태그 안쪽에 넣으면 그냥 Header파일 내용이 뜬다.

태그가 왜 냐면 그렇게 내보내기 명을 정하고 그대로 받아왔기 때문이다.(정 헷갈린다면, 만들때 파일명 = 내보내기명(export default ~) 로 일치 시킨 뒤 불러오는 걸 추천한다.)

추측이긴한데, 아마 파일명 = 내보내기명으로 안하면 팀플에서 욕먹을수도 있을 것 같긴하다. 지금은 개인이라. 기능 설명을 용이하게 하기위해 좀 이름을 다르게 했긴 한데.... 생각해보니 그냥 파일명 = 내보내기명 을 하자

여튼 만든다면 저 헤더영역이라고 적힌 박스가 모든 페이지에서 공통적으로 뜨게 된다.

4-1. funtion 명과 내보내기 명이 같아야 한다.(안 지키면 오류 발생)

function Common_Header() { (중간 코드들) } export default Common_Header; 같이

여긴 별 내용 없고 실수로 안적은 중요한 내용이라 이렇게 제목으로 슈퍼 강조했다.

5. 어려웠던 점

이번 주차가 c언어 + 타과목들 시험대비하다 온거라 2~3주차만에 다시 리엑트를 해서 조금 처음엔 감다뒤 상태여서 복귀에 시간이 조금 걸려 힘든점이 있었다.

그리고 이번에 라우트 하면서 별별 오류를 다 겪은것 같은데 본문 내용에 적힌 팁의 가정 상황 등이 직접 겪은 수난이다.

이외엔 아쉬운점? 빼고는 해결안된 오류는 없어서 그렇게 치명적인 어려운점은 없던 편.

아쉬운 점은 코드 파일 복붙 잘못해서 경로명 살짝 막장 된것? 과 디자인을 조금 넣고 싶었는데 그냥 시간 때문에 포기한 점 등이 있다.

6. 새로 배운 점

전반적으로 꼽자면 라우트의 모든 것이 새로 배운점이긴 한데 요약 형태로 적어보겠다.

1. 공통 컴포넌트 구역 만들기(Header.jsx 등)
2. useNavigate() 써서 페이지 이동 및 + 어떤 식으로 오류나는지
3. 다른 파일 내용 받아오는 방법 import Home from './pages/Home'; 와 export default Home; 같이
4. 그리고 경로 및 해당 경로의 내용 요소 설정 <Route path="/" element={<Home />} />

이번 주 벨로그 끝!

• 미처 못보고 지나친 댓글 과제 추가

1.요구사항 나열

1차시 때 만들었던 블로그를 리액트에서 그대로 재현하기 1. 새 프로젝트 생성 후, App.js 한 파일에 모두 작성할 것 2. 최소 3개 이상의 컴포넌트로 구조를 나눌 것 3. useState 기능을 이용해 좋아요 버튼을 추가할 것 (클릭 시 좋아요 개수가 증가해야 함) 4. styled-components 로 스타일을 재현할 것

2. 1주차 과제파일 변경

• 1주차게시글 보러 가기

  <h1>멋사 1주차 과제 자기소개 페이지</h1>
  
          <MiniCard> 
            <div className='minicaed'>
                <img src="/kiwi.webp" width="250px" height="250px" alt="키위 이미지" />
  
  
  

                <h2 style = {{color: "red"}}>{personal_info [0]} </h2>
            <ol>
                <Part><li>분야: {personal_info [1]}</li></Part>
                <li>멋사 14기생 <span onClick = { () => {좋아요_변경(좋아요+1)}}> 👍{좋아요}</span> </li>


            </ol>
        </div>
      </MiniCard>



  <MainCard>
    <div className='maincard'>
        <p>
            <li><h1>{personal_info[0]}</h1></li>
            <div className = 'main_track'><li>분야: {personal_info[1]}</li></div>
            <li>동아리: 멋진 사자들처럼[14기]</li>
        </p>

         <p>
            <li><h2>자기 소개</h2></li>
            <li> 자기소개임.</li>
        </p>

        <p>
            <li><h2>연락처</h2></li>
            <ul>

            <li>Email: <a href ="https://mail.google.com" target="_blank" title="이메일 페이지로 이동">{personal_info[2]}</a></li>
            <li>핸드폰: {personal_info[3]}</li>

            </ul>
        </p>


        <p>
            <li><h2>관심 기술</h2></li>
            <ul>
            <li>c#(초보)</li>
            <li>HTML/CSS(배우는 중)</li>
            <li>Java Script(배울 것)</li>

            </ul>
        </p>

        <p>
            <li><h2>한 마디</h2></li>
            <li><strong>목표는 풀스택 개발자!</strong></li>
        </p>
    </div>
  </MainCard>

급한대로 최종본을 코드박스에 넣게되었긴하지만, 기존 html + css 형태의 파일을 jsx로 변형하는 과정에
<ol>
<li> div1,div2 태그등을 className을 이용해서 시각적,시스템적으로 구별하는 방식으로 변경<br>
  ㄴ 첫 주차 때는 class 같은걸 모르고 안 썻다가 의미없는 태그 여러개를 생성하는 방식으로 했었는데 지금은 보다 통용적인 방식으로 바꾸었다.</li><br>

<li> 이미지 형식 변경: 기존 상대 경로를 이용하는 방식은 똑같지만, 방식이 jsx식으로 변경되었다.</li><br>

  <li>그 외:pesonal_info 리스트로 공통되는 정보 한번에 바꾸기 쉽게 변경, style = {{color: "red"}} 처럼 인라인 스타일 방식도 한번 테스트로 적용</li>
  </ol>

let [personal_info, pesonal_info_change] = useState(['아기사자', '프론트엔드', 'email@email', '010-1234-1234'])

+ 인라인 스타일에서 중괄호가 2번 씌워지는 이유는 겉 중괄호는 
이제부터 자바스크립트 코드를 쓴다라고 하는 jsx 문법의 의미이고, 
속 중괄호는 자바스크립트의 객체임을 의미


## 3. 좋아요 기능
우선 코드 파일 최상단 부분에 
```import { useState } from 'react';```
를 작성한뒤

어느 함수안에(그렇다고 리턴 내부 말고.)
```let [현재 상태 값, 이를 갱신하는 함수] = useState(초기값);```
이런 구조로 작성한다. 

여튼 
```let [좋아요, 좋아요_변경] = useState(0);```
이런 useState를 만든뒤 에를 들어... 내 기수 옆에 좋아요 버튼을 만든다고 치면
```jsx
<MiniCard> 
  {/* 컴포넌트 이름은 무조건 대문자 시작(이거 안지키면 실행되는데 오류나는 상황 발생) */}
  <div className='minicaed'>
    <img src="/kiwi.webp" width="250px" height="250px" alt="키위 이미지" />
    {/* 이미지 퍼블릭 파일에 넣고 상대경로써야 파일 안 깨짐 */}


    <h2 style = {{color: "red"}}>{personal_info [0]} </h2>
    <ol>
      <Part><li>분야: {personal_info [1]}</li></Part>
      <li>멋사 14기생 <span onClick = { () => {좋아요_변경(좋아요+1)}}> 👍{좋아요}</span> </li>
      {/* onClick 함수 쓸 때 {() => {실행할 코드}} 처럼 중괄호 쓴뒤 화살표 함수 방식으로 쓰는것 유의*/}

    </ol>
  </div>
</MiniCard>

이렇게 멋사 14기생 옆에 코드가 작성된걸 볼수 있다. 이것도 기능을 풀어보자면 span 태그는 자바 스크립트 코드를 실행시키는 용도

onClick()은 클릭 감지 => 따라서 클릭시 코드를 실행시켜주게 하는것

{ () => {좋아요_변경(좋아요+1)}} 은 화살표 함수 방식으로 위에서 말했던 것처럼 갱신하는 함수의 소괄호 내부에서 좋아요 값에 1을 더하는 방식.

👍{좋아요}는 보이는 그대로 따봉이모티콘과 현재 좋아요 수를 표시해주는것

• span말고 button 태그를 사용해도 되는데 본인 생각엔 버튼 기본 ui가 조금 후져서 span을 사용했다.

<span 방식>

<button 방식>

4. styled-components 사용

Styled Components를 리액트 프로젝트에 설치하기 위해 터미널에 npm install styled-components 을 입력해준다(install 을 i로 써도 저절로 인식해서 설치한다)

이후 코드 파일 최상단 부위에 import styled from "styled-components"; 을 써준뒤

const(또는 let) 함수명 = styled.(태그, 아직 div밖에 사용 안해봄)`


css 문법



`

이런 형식으로 써주면 된다.

• styled. 뒷부분은 태그라는데 아직 정확히는 아는바가 없으니 다음 스터디 때나, 추후 개인적 검색을 통해 4주차 스터디 회고록에가능하면 작성하겠다.

아래는 최종적인 styled-components 부분이다.

let MiniCard = styled.div`
 display: flex;
 flex-direction: column;
 width: 50%;
 height: 35%;
 border-radius: 10px;
 border: 3px solid gray;
`
const MainCard = styled.div`
margin-top: 40px;
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 70%;
 border-radius: 10px;
 border: 3px solid gray;
`
const Part = styled.p`
  color: blue;
`

5. 아쉬운 점

이번 주는 꽤나 아쉬운 점이 많았는데

1. 오류를 검사하는 시간 부족: 이게 뭔말이냐면 평소엔 오류를 직접 한 1030분정도 찾다가 못찾으면 그제서야 ai를 돌렸는데 이번주는 510분 만에 못찾으면 ai를 사용했다.
2. 보고 따라하기: 이건 좀 애매한데..코드를 작성하는 방식이 좀 헷갈려서 강의를 보면서 작성했던걸 다시 펼쳐보는 일이 좀 많았다.
3. 벨로그 작성 대충: 개인적으로 1,2주차 글보다 이번글의 내용이 혼잡하고 대충인것 같다. 간단히 말하자면 과정이 생략되고 결과본만 작성된 느낌

대충 크게 느껴지는 부족한 점은 이 3가지 였다.

6. 새롭게 알게 된 점 && 배우게 된 유의점들

새롭게 알게 된점

• useState 문법 : 자료 잠깐 저장할때 도 씀, 변수와의 차이점은 새 데이터를 자동으로 변경(state 쓰던 html은 자동으로 재랜더링 됨)

• destructuring 문법 let num = [1,2]; let [a, b] = [1, 2]; 이러면 let a = num [0]; let b = num [1]; 과 동일

• 컴포넌트 만드는 법:

  funtion()만들기
  return() 안에 html 담기
  <함수명></함수명> 짜기

  funtion Blahblah()
  return(
  <함수명>함수 내용</함수명>
  )

  or

  const(또는 let) 함수명 () => {
      (코드들)
  }

• 컴포넌트 쓰기 좋은 때

   - 반복적인 html을 축약
   - 큰 페이지 하나
   - 자주 변경되는 것들(ui요소들)
   ( 항상 그런 건 아니지만 대부분 이럴 때)

• 단점: 다른 함수에 있던 변수(스테이트 등)을 맘대로 못가져가 씀

배운 유의점

• useState는 함수 안에 넣어야 오류 안뜸

• 스테이트로 리스트를 변경할땐 혹시를 대비해 카피본을 만들고 변경된 카피본을 보여주게 하는것이 좋음

  • 기존 스테이트 와 신규스테이트가 같으면 변경안 해줌 (아래는 개인 추측)

    let [글제목, set_post_title] = useState(['한글', '영어', '외계어']); 이런 예시
    
        let copy = [...글제목]; 
    // 그냥 글제목을 써버리면 원본 리스트의 주소를 그대로 가르켜서 수정사항이 안보여짐(내가 이해한바로는 이럼)
    //[...글제목]이건 새로운 주소값 생성, 아마도 전체적으로 포인터랑 비슷한 주소개념을 가지고 있는듯

    핵심 유의점(이번에 많이 헷갈린점)

• 컴포넌트 이름은 무조건 대문자 시작(이거 안지키면 실행되는데 오류나는 상황 발생)

• 이미지 퍼블릭 파일에 넣고 상대경로써야 파일 안 깨짐

• onClick 함수 쓸 때 "onClick = {() => {실행할 코드}}" 처럼 중괄호 쓴뒤 화살표 함수 방식으로 쓰는것 유의

+스터디원 댓글 과제

댓글 단 곳: https://velog.io/@kny337/3%EC%A3%BC%EC%B0%A8-%EA%B3%BC%EC%A0%9C

html에서 다른 프레임워크(라이브러리들 집합)중에 리엑트를 쓰는 이유는 간단히, 사용자 수 1위라서 ㄴ 유추 가능한 점이 있는데 많은 사용자 수라는건 이제 쓰는 기업들이 많다는 걸(유니티 나 언리얼 같이) 의미하기도 하고,
코딩 플랫폼에서 중요한 점이 협업에서의 용이성,유지 보수성, 호환성 등 인데 이용자 수가 많으면 용이성이나 유지보수성이 자연스레 좋은 플랫폼이 됨(서브시장이나, 개발자간에 여러 코드 공유 등?)

• 코딩 언어중 가독성이 안좋은 예시로는 (거의 다 개발 비화가 개그성이긴 하지만) 엄랭이나 랭슝좍 등이 존재 (이를 난해한 프로그래밍 언어 라고 함)

문제 풀이

문제 1. 화살표 함수 연습

아기사자를 환영하는 함수입니다. const 와 화살표 함수 를 사용하는 요즘 스타일로 바꿔주세요.

답

const welcomeLion = (name) =>
{
return "환영합니다, " + name + " 사자님!";
}

문제 2. 삼항 연산자 연습

동아리 회비를 냈는지 확인하는 if-else 문을 삼항 연산자를 써서 딱 한 줄로 줄여주세요.

답

let isPaid = true;
const status = isPaid ?  "납부 완료" :  "미납";

아래는 실수로 기존에 썼던 답

let isPaid = true;
let status = "";

isPaid ? status = "납부 완료" : status = "미납"; 

문제 3. 구조 분해 할당 연습

14기 멤버의 정보가 담긴 객체입니다. member.name , member.track 이라고 매번 쓰기 귀찮으니, 구조 분해 할당으로 name 과 track만 쏙 뽑아내는 코드를 작성해 주세요.

(주의: 객체 안에 있는 이름 그대로 꺼내야 합니다!)

답

const member = { name: "상현", age: 20, track: "프론트엔드", role: "아기사자" };

const { name, age, track, role} = member; 

console.log(name); 
console.log(track); 

문제 4. map 함수 연습

스터디 출석부에 이름을 띄워야 합니다. map 을 활용해서 attendance 배열의 이름들에 <li> 태그를 씌워주세요.

참고: JS 안에서 태그를 쓸 때, 변수도 넣고 싶다면 중괄호{} 로 꼭 감싸주셔야 합니다.

답

const attendance = ["상현", "지인", "태민"];
const list = attendance.map((name) =>
{
return <li>{name}</li>
});
//소괄호 위치 주의해야 함

문제 5. 리액트 컴포넌트 맛보기

다음 주에 부모가 자식에게 데이터를 넘겨줄 때 쓸 진짜 실전 방식입니다. 매개변수 자리 ( ) 안에서 바로 구조 분해 할당을 해보세요.

// [바꾸기 전]
const ProfileCard = (props) => {
  console.log("이름: " + props.name);
  console.log("파트: " + props.track);
}

답

const ProfileCard = ({name, track}) => {
  console.log("이름: " + name);
  console.log("파트: " + track);
}
디버그 확인용: ProfileCard({ name: "ms", track: "프엔" });

문제 6. 실제 리액트 구조 눈에 익히기

실제 백엔드 서버에서 데이터를 받아오면 이런 복잡한 배열 형태가 됩니다. 2차시 때 배운 문법을 총동원해서 명부를 완성해 보세요.

1. map을 써서 배열을 순회하세요.
2. 매개변수 자리에서 구조 분해 할당으로 name, track, isMaster를 바로 뽑아내세요.
3. 삼항 연산자를 써서 isMaster가 true면 "운영진", false면 "아기사자"를 출력하세요.

참고: JS 안에서 태그를 쓸 때, 변수도 넣고 싶다면 중괄호{} 로 꼭 감싸주셔야 합니다.

const lions = [
  { id: 1, name: "임상현", track: "프론트엔드", isMaster: true },
  { id: 2, name: "새내기", track: "프론트엔드", isMaster: false }
];

// [정답을 각자 벨로그에 적어주세요]

답

const lionList = lions.map(({name, track, isMaster}) => {
  return (
    <div>
      <h2>이름: {name}</h2>
      <p>파트: {track}</p>
      <p>직책: {isMaster ? "운영진" : "아기사자"}</p>
    </div>
  );
});

AI사용 내역: 답 확인을 하려 코드를 테스트해보려한는데 코드를 어떻게 돌리는지 방식을 잘 몰라서 ai사용 함(). 직책관련 부분에서도 삼항연산자를 위에 처럼 넣어야한다는 걸 아는 과정에서도 ai사용 원래는

isMaster ? tier = "운영진" : tier = "아기사자"
<p>직책:{tier}</p>

이렇게 하려고 함

문제 7. 디버깅 연습

아래 코드는 리액트에서 작성하면 화면에 아무것도 안 뜨는 에러 코드입니다. 틀린 이유와 올바른 정답을 찾아보세요.

const numbers = [1, 2, 3];

// 화면에 숫자가 2배로 나와야 하는데 아무것도 안 나옴!
const doubleNumbers = numbers.map((num) => {
  num * 2;
});

• 20분 이상 고민했는데 도저히 모르겠다면, AI의 도움을 받아도 좋습니다.

답

const numbers = [1, 2, 3];


const doubleNumbers = numbers.map((num) => {
return <p>{num *2 }</p>;
});

문제점 및 AI사용 내역: 답을 맞게 썼는지 미리보기 웹페이지에 뭘해도 안떠서 일단 이게 답이 맞다고 AI 질문을 통해 듣긴 들음. 근데 눈으로 확인을 못해봄

이유: 우선 문제가 된 이유를 가능한 분석하자면, return을 안써서 값 반환이 안되고 딱 연산 만 진행되었던게 문제 같음

새로 알게 된 점

1. div className="App" 같이 옆에 class나 className 같은걸 쓰는 이유를 몰랐는데 이는 일종의 주석으로 작용하기도 하고, css나 자바스크립트 파일을 html과 연결할 수 있는 식별 코드 느낌(몇가지 기능이 있는 전자식 코드 주석 느낌?)

2. 리액트 구조의 return 내부에서 삼항연산자를 어떻게 이용하는지 알게 됨

3. 강의를 통한 jsx관련 내용(하단)

jsx 문법

1. class 대신 className 사용, 이유는 class는 javascript에서 키워드 기 때문에 div 같은거 옆에는 className 쓰고 css파일에서는 그거 옆에 쓰인 제목을 가져옴

<div className = "black-nav">
        <h4>블로그임!</h4>
      </div>

//이경우엔 .black-nav 라고 css에서 불러와주면 됨

2. 변수 넣을 땐 중괄호(데이터 바인딩)

   function App() {
   
   let post = "(서버에서 가져온 데이터)";
   //document.querySelector('h4').innerHTML = post;
   //원래 자바스크립트에서 서버데이터 적용하는 법
   
   return (
    <div className="App">
   
      <div className = "black-nav">
        <h4>블로그임!</h4>
   
      </div>
      <h4>{ post }</h4>
   
      </div>
   );
   }
   

이렇게 let으로 지정한 변수를 중괄호로 덮어씌워 jsx 내부로 이송 가능

3. 스타일 지정하는 법
이것도 마찬가지로 중괄호 내부에 씀(중괄호 2개)
```jsx
function App() {

  let post = "(서버에서 가져온 데이터)";
  let tag_post = "h4에 붙도록 한 아이디"
  //document.querySelector('h4').innerHTML = post;
  //원래 자바스크립트에서 서버데이터 적용하는 법

  return (
    <div className="App">

      <div className = "black-nav">
        <h4 id = {tag_post} style ={ {color : 'red', fontSize : '15px' }} >블로그임!</h4>
// 그래도 css랑 차이점이 있는데 본래 font-size는 fontSize로 써야 작동함
      </div>
      <h4>{ post }</h4>

    </div>
  );
}

tip: 서로 다른 계열의 여러 속성을 붙이게될 경우엔 뛰어쓰기만 해주면 한 번에 들어감 , 에러메세지는 보통 바로 터미널이나 브라우저 등에 뜨는데 안 뜰 경우엔 웹페이지의 개발자 도구의 검사에서 콘솔 버튼 누르면 뜸

어려웠던 점

우선 return 내부에서 삼항 연산자를 쓸 때의 방식이 헷갈렸고 제일 기억에도 남고, 해결도 못한 어려운 점은 문제 7번에서의 상수로 나와야하는 답이 화면에 출력되지 않는 것 이었다.

댓글 과제

댓글 단 포스트: https://velog.io/@goyo88/%EA%B8%B0%EC%B4%88%EC%9D%B4%EB%A1%A0

1. 1주차 학습 내용 요약:

1. CSS은 html을 꾸며주는 역할


2. css를 html에 적용시키는 방법은 총3가지 존재
   ㄴ 배운건 css파일을 따로 만들고 html 파일의 head 부분에
   link rel ="stylesheet" href ="style.css"을 작성해 파일끼리 연동시키기


3. css파일내에서 html 디자인을 적용시키려면 상위태그를 지정하고 적용하면 됨
예를 들어 "가나다라"라는 li가 있고, body태그안에 존재하고 이 글자에 색상을 적용시키려고 한다면.

body
{
  color: (색상);
}

이런식으로 하면 된다





4. css의UI(?)인 레이아웃을 자유롭게 배치하기 위해
   **display: flex;** 라는 것을 거의 필수적으로 사용


5. flexbox froggy
여러 css문법 배움및 활용

justify-content:flex-start: 요소들을 왼쪽 정렬

justify-content:flex-end: 오른쪽 정렬

justify-content:center: 가운데 정렬

justify-content:space-between: 요소들 사이에 동일한 간격 생성

space-around: 요소들 주위에 동일한 간격을 줌 (배울땐 이렇게 써져 있었는데 비트윈 하고 큰 차이를 아직은 모르겠음, 추측하건데 between은 박스내부 요소들 개수만큼 나눠서 동일한 간격 생성하는것 같고, space-around는 박스내부 요소들 개수만큼 나눈뒤 거대한 네모박스를 생성해 요소 하나하나를 그 안에 집어넣는 느낌?)

align-items: flex-start: 요소들을 꼭대기로 정렬 align-items:flex-end: 요소들을 바닥으로 정렬 align-items:center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬 ㄴ 전체적으로 세로를 건드리는 느낌

flex-direction: column: 요소들을 위에서 아래로 정렬 flex-direction: column-reverse: 요소들을 아래에서 위로 정렬 ㄴ 이 외에 다른 것들도 있는데 아직 안 사용해봐서 정리까진 안 함

과제 시작

1.문제(요구사항) 분석 2.html 선제작 3.css로 디자인 시작 4.완성된 디자인을 보고 오류 개선(글자겹침,가독성 등)

• 추가 도전 과제: 미니카드에 마우스 올릴시 카드가 6px만큼 상승하게 만들기 아마 나누자면 이런 과정일 것이다

1.문제(요구사항) 분석

(저작권 문제 있을까봐 멋사대학의 예시는 못 올림)

일단 분석한 디자인에 따르자면

1. 미니 자기소개카드(프로필 사진, 이름, 분야, 자기소개 요약 글)
2. 메인 자기소개카드(미니 칸에있던 내용들,자기소개,연락처관심기수르 한마디)

이렇게 2가지 구역으로 나눠져있고 여러가지 정보를 단순히 쓰면 된다 또한 배경색이 뭔가 연하고, 구역을 나누는 박스에 외곽선이 있고 끝이 둥그랬다

(벨로그에 올리려고 다 만든 후 기껏 쓴 정보같은거 검열하는게 더 고생이었던건 비밀이다)

2. HTML파일 제작

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>자기소개 페이지</title>
        <link rel ="stylesheet" href ="자기소개_페이지_디자인.css" >
    </head>

우선 기본적인 베이스를 짠다 파일 형식(DOCTYPE)을 html-5 (최신)형식으로 인지시키게 만들고 웹페이지 언어 형식은 UTF-8로 웹페이지 제목도 쓰고

마지막으로 css파일과 연동시켜준다.

rel ="stylesheet" 속성이 아직 뭐하는지는 완벽히 모르지만 들은 바와, 안넣을 때 html파일이 css파일 디자인을 적용 안 하는 현상에 보건데

html이 이 파일은 스타일시트다! 라고 인지 시켜줘서 스스로 적용하게 하는 태그 인것으로 보인다

• 이거만들다가 vs코드의 새로운 기능을 알게되었는데 컨트롤+i키를 누르면 ai가 기초를 짜게 만들수 있었다
  
  
  

 <body>

        <h1>멋사 1주차 과제 자기소개 페이지</h1>
            <div1>
                <img >


                    <mini_name><h2>이름칸</h2></mini_name>
                <ol>
                    <mini_track><li>분야: Front-end</li></mini_track>
                    <li>자기소개 요약글</li>

                </ol>
            </div1>

        <div2>

            <p>
                <li><h1>이름칸</h1></li>
                <main_track><li>분야: Front-end</li></main_track>
                <li>동아리: </li>
            </p>

             <p>
                <li><h2>자기 소개</h2></li>

            </p>

            <p>
                <li><h2>연락처</h2></li>
                <ul>


                </ul>
            </p>


            <p>
                <li><h2>관심 기술</h2></li>
                <ul>

                </ul>
            </p>

            <p>
                <li><h2>한 마디</h2></li>

            </p>

        </div2>
    </body>

</html>

• 요약 하자면 앞서 말했듯 크게 두 박스로 나눠져있기에 div1,2로 구별해주고 메인 항목들엔 h2 크기를 적용시켜 일반 텍스트와 구별되게 하였다.

2-1. 이미지 삽입

자, 우선 바탕하면 "WEB"이라는 폴더 내부에 "image"라는 파일을 만들고 그 폴더 내부에 프로필 사진을 넣는다.

굳이 경로를 강조한 이유는 image파일의 상대 경로를 이용할 것이기 때문이다. 파일의 깊이(?)에 따라

예시로 ./이미지명.png ./../이미지명.png ./../../이미지명.png . . 이런 식으로 .. 개수를 늘려줘야 한다. 지금은 큰 폴더 내부의 이미지라는 폴더에서 정보를 가져오는 것이니 ./../ 을 쓰면 된다. 이미지 파일 명은 kiwi.webp이다. 프로필 사진이랄만한게 없어서 키위새 사진을 퍼왔다

여튼 이걸

<img src ="./../image/kiwi.webp" width="250px" height="250px" >

이렇게 써서 알맞은 자리에 적절한 크기로 조절해서 만들어주면.. 이리 귀여운 키위새가 나온다! (글씨 색, 외곽선과 배경색은 밑에서 설명)

2-2. 메인 자기소개 카드

• 딱히 특별할 것 없이 똑같이 글씨를 써주고 하면된다 아. 다만 편의성으로 이메일을 클릭하면 이메일 웹페이지로 이동하게 링크를 넣어주는 작업을 하였다.

  <li>Email: <a href ="https://mail.google.com" target="_blank" title="이메일 페이지로 이동">이메일</a></li>

  요로코롬, 링크를 웹링크를 연결하고 새페이지로 열게끔 했다. 추가로 텍스트 설명도 붙이고

href를 src로 헷갈려 써놓고 왜 안되냐며 궁시렁거리며 고치는 찐빠가 중간에 있었긴 했다

3.CSS

우선 link에 썼던 것처럼 자기소개_패이지_디자인.css 파일을 만든다. 그리고 아까 미리 만든 div1, div2를 C언어의 클래스처럼(제미나이 피셜 공식명칭은 스타일 규칙이라 한다) 나눠준다

아래는 최종 결과물.

div1
{
 display: flex;
 flex-direction: column;
 width: 50%;
 height: 35%;
 border-radius: 10px;
 border: 3px solid gray;

}
div1:hover{
 transform: scale(1.1) translateY(-6px);


}

mini_name
{
    display: flex;
    justify-content: start;
}
/* 900 픽셀 정도로 */
div2{
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 70%;
 border-radius: 10px;
 border: 3px solid gray;
}

3-1. 박스 생성

위의 있는 코드박스에 적힌 것처럼 네모난 박스를 시각적으로 만들고 모서리를 둥글게 그러니까 즉 곡률을 주기 위해 border-radius: 10px; 를 적용시켰다

이는 수업에서 안 배웠기에 이제 처음으로 이번 과제를 하면서 인터넷 검색을 쓴 부분이기도 하다.

border: 3px solid gray; 는 3픽셀만큼의 회색 외곽선
(테스트해보니 solid도 작성해야 한다)
border-radius: 10px; 는 10만큼의 모서리 곡률

 width: 50%;
 height: 35%; 
 는 박스가 차지하는 웹페이지 상의 크기,
 픽셀로 하면 웹페이지 축소 때 
 글자 줄바꿈이 난리나는 등의 문제가 있어 비율로 해주었다.

div2도 동일하게 해준다

px사이즈 맞추느라 고생해놓고 마지막에 그냥 비율로 사이즈를 맞춘 슬픈전설

3-2. 배경색,폰트

이제 페이지 배경색을 맞출 차례이다. 그동안 솔직히 배경색이 너무 하얘서 오래 보면 눈이 쨍해지는 느낌 때문에 불편했다.

참고로 이것또한 자습으로 알게 되었다.

우선 코드는

 background-color: rgba(128, 128, 128, 0.264);

이렇다. 매우 간단하다. 뒤에는 rgb의 색. 0~256까지 있는 그거 맞다. 그리고 맨 뒤에 0.264는 이번에 색 찾다 보니 처음 알게 되었는데 투명도란다.

여튼 색을 일일히 다 치진 않고 vs스튜디오 코드 에만 있는지 모르겠는데 red같은 임의 색을 치면 옆에 박스가 떠서 색을 드래그로 조정할수 있었다.

그 외에도 뭔가 폰트가 좀 구린거 같아서

body
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: rgba(128, 128, 128, 0.264);
    font-size: 24px;
}

이렇게 루산다 산스? 체로 바꿔주고 사이즈는 24픽셀로 하였다.

폰트또한 일일히 안치고 font-familly까지 입력하면 폰트 고르는 창이 뜬다. 그리고, 써보진 않았지만 외부에서 다운받고 파일을 연결해서 기본적으론 없는 폰트도 적용시킬수 있는 듯 보인다.

3-3. 욕심

아까전에 한 마디라는 항목에 목표는 풀스택 개발자 라고 적었다. 다만 심심한 느낌이 좀 들었는데 순간 머릿속을 지나쳐가는 광경이 하나 있어서 적용 시키기로 했다.

음..설명하자면 인터넷 게시글에 가끔 보이는 글자가 무지개색으로 되어있고 폰트 사이즈는 들쭉날쭉인 그런 문장.

솔직히 말하자면 현 상태론 단순 반목 작업이다. 제미나이 한테 외주 작업 맡기다가 알게 된것인데 자바스크립트 배우면 뭐 반복문으로 처리할 수 있다고는 한 것 같다.

요구사항은 아래와 같다. 폰트는 18부터 2씩 증가, 각글자의 색은 아래와 같이.

<!-- 빨 노 파 초 분 주 연 파 분 삘긴 !(폰트 2씩 증가)-->

<li><h2>한 마디</h2></li>
                <li><strong>
                    <dest_1>목</dest_1>
                    <dest_2>표</dest_2>
                    <dest_3>는 </dest_3>
                    <dest_4>풀</dest_4>
                    <dest_5>스</dest_5>
                    <dest_6>택 </dest_6>
                    <dest_7>개</dest_7>
                    <dest_8>발</dest_8>
                    <dest_9>자</dest_9>
                    <dest_10>!</dest_10></strong></li>

우선 html 한글자 한글자를 이리 나눠 준다.

그리고 제미나이한테 하청을 맡기기 위해

dest_1{

  color: red;
  font-size: 16px;

}

이와 같이 기본판을 만들고 조건을 제시하면 10초안에

/* 반복 작업이라 제미나이 사용 */
dest_1{

  color: red;
  font-size: 16px;

}
/* 2. 표 (노랑) */
dest_2 { color: yellow; font-size: 18px; }

/* 3. 는 (파랑) */
dest_3 { color: blue; font-size: 20px; }

/* 4. 풀 (초록) */
dest_4 { color: green; font-size: 22px; }

/* 5. 스 (분홍/보라) */
dest_5 { color: pink; font-size: 24px; }

/* 6. 택 (주황) */
dest_6 { color: orange; font-size: 26px; }

/* 7. 개 (연두) */
dest_7 { color: lightgreen; font-size: 28px; }

/* 8. 발 (진파랑) */
dest_8 { color: darkblue; font-size: 30px; }

/* 9. 자 (분홍) */
dest_9 { color: hotpink; font-size: 32px; }

/* 10. ! (빨강) */
dest_10 { color: red; font-size: 34px; }

이리 써준다. 결과물은....

맘에 든다.

4. 박스 상승

이제 마지막으로 아까 추가 도전 과제 였던 6px 상승을 만들 차례이다. 처음에 기능만 따지고 보면 자바스크립트 인것 같아서 이게 추가 도전 과제라고? 라면서 당황 하긴 했다.

일단 검색한다. 그리고 결과물을 1페이지 만에 찾는다.

_솔직히 요즘에 구글에 사용자 입력에 따라 제일 상단에 ai답변이 나와서 검색 시간이 대폭 감소하긴 했다.

그래서 이걸 찾았다고 해야하는지 ai한테 물어봤다 해야하는지 헷갈리기도 한다.

가끔은 제대로 안나와서 좀 더 찾기도 하지만._

여튼 코드는

div1:hover{
 transform: scale(1.1) translateY(-6px);

}

이렇다. 트랜스 폼을 써주고 translateY(-6px)가 6픽셀 상승 기능을 한다. 스케일은 답변에 같이 나와서 이게 뭐지 하고 봤더니 말 그대로 1.1배로 사이즈를 확장하는 기능이다.

그리고 어려웠던 점이 몇가지 있었는데

첫 번째론, y축이 위에 쓰인것처럼 상승인데 마이너스로 쓰인 점이다. 이게 보니까 웹페이지 에선 통상적인(?) y축 방향이 반대 인것 같았다.

두 번째가 까다로웠는데 :hover 이거다. 이걸 안써주면 박스가 웹페이지 열자마자 상승하면서 커진다. 그러니까 말하자면 일종의 마우스를 감지하는 트리거 역할이다.

솔직히, 이건 버그났을 때 작동도 잘되는데 그냥 바로 상승하고,커져서 "뭐지 이거 원인이 뭐지." 이러면서 원인도 모르다가 제미나이와의 대화로 알게 된 코드이다.

어려웠던 점

웬만하면 오타 같은 셀프트롤이어서 금방 찾고 고쳤지만,

폰트 사이즈 맞추고, 배경색 고르는게 제일 고난이었던 것 같다. 둘다 뭐랄까.. 디자인적 경험치에 기반한 직감 같은 것이기 때문에 시간이 지나면서 해결 될 문제임과 동시에 지금은 어쩔수 없는 문제로 보인다.

새로 배우게 된 점 요약

font-family:  > 폰트 지정,바디에 속해야 함
background-color:  > 배경색 지정, 바디에 속해야 함
:hover  > 마우스 감지 트리거
transform: scale, translateY  > 각각 스케일 변경 및 y축 위치 변경(상승은 -부호!)

font-size: > 폰트 사이즈 지정
border-radius: (곡률,px 단위); > 박스 모서리의 곡률 지정
border: (외곽 두께) solid (색상);  > 웹페이지 상에서 시각적으로 보이는 박스 생성

대체적으로 body 태그(웹페이지 전체 대상) 내부를 건드리는 css코드나 박스를 생성하는 기능을 배웠다고 할수 있는 것 같다.