지난 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코드나 박스를 생성하는 기능을 배웠다고 할수 있는 것 같다.