그래서 vercel 로 배포해야지 했다. 예전에 깃허브와 내 자기소개 페이지 폴더를 연결했어서 바로 vercel로 가서 Add New -> Project를 클릭하고 내 자기소개 불러와서 deploy 를 했다. ㅎㅎ 이후에 Congratulations 이라고 떠서 잘 됐나보다 하고 링크에 들어갔는데..

이렇게 떴다... vercel 에서는 성공했다 했는데 에러나서... 와 뭐지... 하면서 하지 말까 하다가 깃허브랑 vs코드랑 이것저것 보다가 문제점을 하나 찾았다..

깃허브에 main브랜치에 Readme 말고 아무 파일도 없었다...
아직도 이유는 모름 그래서 VS코드에서 다시 보내려 했는데 서로 브랜치 이름도 달랐다... vs코드에는master라 되있고 깃허브는 main이라고 되있었다. 여튼 그래서 브랜치 이름 바꾸고 이것 저것 해서 어찌 해결을 했다....

많은 일이 있었다.. 브랜치 이름 바꾸고 다시 연결하니까 코드에서 에러 터져서...

https://a-hyun.vercel.app/ ㅎㅎ 결과물

한 학기 동안 느낀점

일단 멋사에 들어오길 잘 한 것 같다!!
처음에는 내가 여기 있는게 맞는건지 잘 할 수 있을지 걱정도 되고.. 좀 힘들었는데 스터디를 하면서 내가 발전하고 있는게 느껴져서 뿌듯했다. 확실히 처음 시작할때 보다 실력이 많이 늘은 것 같다. 그리고 좋은 사람들과 많이 친해져서 좋다!! 막연하게 코딩을 해보고 싶다는 생각이 있었는데 이 동아리에 들어와서 나의 로망을 실현해 볼 수 있어서 즐거웠다. 새로운 경험을 많이 해 볼 수 있어서 좋았다. ㅎㅎ

자기소개 페이지 수정

1. 파비콘 변경

일단 축제 준비 하면서 넣었던 파비콘이 계속 남아있어서 이 파비콘을 먼저 교체하려 한다. 일단 사진을 찾아보자

결과물 ㅎㅎ

2. 애니메이션 추가

약간 내가 하고 싶은건 intro 화면으로 가면 f1차가 부웅하고 나오는 그런 효과를 하고 싶어서 하는 방법을 찾아보았다. 몇가지 방법이 있었는데 나는 keyframes 라는 도구를 사용하기로 했다. 우선 이 도구를 사용하려면 가장 먼저 이것을 불러와야한다. 그래서
import styled, {keyframes} from "styled-components" 라는 명령어를 쓰면 된다고 해서 넣었는데 에러가 나서 확인해보니 빌드가 안된다라고 했다. 왤까 하고 보니까 같은 styled-components를 두번 써서 에러가 났다. 이후 명령어를 확인해보니 원래 쓰는 import styled from "styled-components" 에 {keyframes} 만 추가된 형태였다.. 이게 어떤 명령언지 어떤 역할을 하는지 확인하는 습관을 들여야할 것 같다.. 아무생각없이 넣었다가 이 사태가 발생했다.. 앞으로는 잘 확인하고 넣어야겠다.. 여튼 그런 실수가 있었다....

다시 본래 이야기로 돌아오면 keyframes 이 도구를 불러왔고 이제 사용을 해주면 된다. 일단 설명할게 많아 우선 코드를 보고 이후 하나하나 설명을 해보겠다.

const dash = keyframes`
    0%{
        transform: translate(100%, -100%) scale(0.1);
        filter: blur(10px);
    }
    70%
    {

        scale: (0.6);
        filter: blur(0);
    }
    100%{
        transform: translate(-50%, -50%) scale(1) ;
    }
`;

export const F1Car = styled.span`
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;

    & img {
        width: 600px;
        max-width: 80%;
        height: auto;
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4));
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    & img:hover {
        transform: translateY(-10px) scale(1.2);
    }
`;

이게 애니메이션을 넣기 위해 추가한 코드이다. const dash = keyframes 는 내가 넣고 싶은 애니메이션의 대본을 만들어 주는 코드이다. dash는 그냥 내가 정한 이름이다. 선언을 해주고 이후 하고 싶은 것들을 명령어를 써주었다. 내가 하고 싶은 애니메이선은 아무래도 자동차가 있고 뒤에는 트랙 배경이라 f1차가 뒤에서 부웅 하고 나오는 그런 효과를 주고 싶었다. 그래서 그를 토대로 대본 역할을 하는 코드를 짜보았다. 0% 70% 100% 각각 나눠서 효과를 넣어주었다.

     transform: translate(100%, -100%) scale(0.1);
     filter: blur(10px);

0% 에는 시작지점이라 화면 오른쪽에 위치하도록 그리고 위쪽에 위치할 수 있도록 transform: translate(100%, -100%) 를 넣어줬고 멀리 있는 느낌을 주기 위해 크기를 0.1로 설정해 주었다. 약간 형태를 흐릿하게 하기 위해 filter: blur(10px); 를 넣어주었다 여기에 있는 (10px) 은 주변 10px 거리까지 블러 처리하겠다는 뜻이다.

70%
     scale: (0.6);
     filter: blur(0);

70% 에는 크기를 조금 더 키워주고 블러 처리는 빼주는 코드를 넣었다.

100%
      transform: translate(-50%, -50%) scale(1) ;

100% 에는 위치를 원래 위치에 넣어주고 크기도 원래 크기로 돌아오도록 해주었다.

지금까지의 코드는 대본 역할을 하기 때문에 실제로 수행할 코드를 짜야한다. 전에 span 태그로 만들어둔 f1차 버튼을 스타일 컴포넌트를 만들어준다.

export const F1Car = styled.span`
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1.2);

position: absolute; 는 배경에서 내가 원하는 곳에 자유롭게 배치하기 위해 넣어주었고 원래 위치를 정해주었고 z-index:10; 은 배경보다 앞에 오게 하기 위해 넣어주었다. 그 후 animation: ${dash} 2.2s cubic-bezier(0.25, 1, 0.5, 1.2); 애니메이션을 넣어주었다. animation: ${dash} 2.2s 아까 만들어둔 dash 대본을 2.2 초간 실행 한다는 의미이고 cubic-bezier(0.25, 1, 0.5, 1.2) 이거는 타이밍 함수로 애니메이션의 가속과 감속을 정교하게 제어할 수 있게 해준다. 숫자는 (x1, y1, x2, y2) 이런 의미인데 x가 시간이고 y가 진행도 즉 움직임이다. 나는 0.25일때 진행도를 1 만큼 진행하도록 설정을 했기에 몹시 빨라보이고 0.5일때 1.2 만큼 진행되도록 했기 때문에 내 의도보다 조금더 앞으로 간다. 여튼 그렇다.. https://cubic-bezier.com/#.17,.67,.83,.67 여기서 속도를 확인하고 움직여서 속도를 건들여볼 수 있다. 사실.. 숫자를 다르게 해서 영상을 넣고 싶은데.. 잘 안되서....

복습 문제 풀이

1번

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

1. vsCode 열기
2. 터미널 열기 
3. npx create-react-app 폴더명 
4. cd 파일명
5. 터미널 종료 누르기 

2번

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

import { useState } from "react";

const Counter = () => {
  const [count,setCount] = useState(0);

  return <div>현재 수량: {count}</div>;
};

3번

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

export default const HelloBtn = () => {
  const sayHello = () => {
    alert("Hello!");
  };
  return (
    <button onClick={sayHello()}>인사하기</button> 
  );
}
`onClick={sayHello}` 이렇게 써야한다. 왜냐 소괄호가 있으면 클릭했을때 실행되는게 아니라 당장 실행이 된다. 
`export default` 한 파일당 한 번만 사용할 수 있다. 하나만 내보낼 수 있는 문법 

4번

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

// 넘겨주는 쪽 (부모)
const App = () => {
  return (
    // MenuBox에 price라는 이름으로 숫자 15000을 넘기기
    <MenuBox price={15000}/>
  );
};
// 받는 쪽 (자식 : MenuBox.js)
// 부모가 넘겨준 데이터를 받아오기
const MenuBox = ( {price} ) => { 
  return <div>가격: { price}원</div>;
};

5번

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

const App = () => {
  const stock = 0; // 재고 수량

  return (
    <div>
      {stock >0 ? "주문 가능" : "품절"}
    </div>
  );
};

폴더 구조 정리

음 내가 저번시간에 왜 그렇게 만든건지는 모르겠는데 작업을 App.js에 하는 불상사가 있어서 이것 저것 고치게 되었다... 글로 모든걸 설명하기 보다는 사진을 보는게 이해가 빨라서 ㅎㅎㅎ 일단 src라는 폴더 안에 components pages style 이라는 폴더를 만들었다 과제에 이렇게 만들라고 해서 한 것 도 있기는 한데 일단 이름이 직관적이라서 이렇게 폴더를 만들어 나누었다. 그 pages 폴더 안에 있는 사진 파일들은 흐린 눈 좀... 아니 경로 설정을 하다가 계속 꼬여서 그냥 같은 폴더에 넣어서 간단하게 만드느라ㅏ ㅎㅎ

그리고 style 파일을 intro랑 profile을 따로 따로 만들까 했는데 2개 만들 정도는 아닌거 같아서..ㅎㅎㅎ 뭐 하나로도 충분해서 1개로 했다.

그래서 지난번에 사고친 작업물들을 옯기니 App.js에 아무것도 없어서... 뭐 제미나이랑 좀 토론하고 지난번 수업 자료 참고해서 다시 페이지를 만들어 왔다. 일단 라우터 세팅을 해야했다.

App.js 구성

import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Intro from "./pages/Intro";
import Profile from "./pages/Profile";
import Header from "./components/Header";

function App() {
    return (
        <BrowserRouter>
            <Header />
            <Routes>
                <Route path="/" element={<Intro />} />
                <Route path="/profile" element={<Profile />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

먼저 리엑트와 react-router-dom이라는 패키지 설치하고 불러와주고 만든 페이지들도 연결해주었다. 만든 페이지들도 경로를 불러와 주었다. 각 페이지의 주소 설정도 해주었고 Header 부분은 모든 페이지에서 쓸거라 Routes 위에 넣어주었다. 각각 페이지도 다 연결을 해주었다.

나머지 페이지 라우츠 연결

각 페이지 상단에도 import { useNavigate } from "react-router-dom";를 모두 넣어주었다.

인트로 페이지 만들기

인트로 페이지를 뭐 만들지 고민을 해봤는데 아무리 생각해도 아이디어가 없었다.... 뭐하지 뭐하지 하다가 그냥 내가 좋아하는거 만들자 라는 생각에 자동차를 넣고 트랙을 깔아 볼까 해서 일단 자동차를 주제로 잡았다. 그래서 따로 보이는 프로필로 이동하기 같은 버튼은 없었으면 해서 자동차 사진을 버튼으로 만들 생각을 했고 배경은 하늘색을 그라데이션으로 넣을 생각을 하고 있었는데 제미나이랑 상의하다가 아래 트랙을 넣고 하늘색 그라데이션을 밑부분은 투명도를 주면 된다고 하길래 그렇게 만들었다.

import React from "react";
import * as S from "../style/style.style";
import redbull from "./redbull.png";
import track from "./track.png";
import { useNavigate } from "react-router-dom";

const Intro = () => {
    const navigate = useNavigate();

    return (
        <S.Background bgImg={track}>
            <span onClick={() => navigate("/profile")}>
                <img src={redbull} />
            </span>
        </S.Background>
    );
};

export default Intro;

인트로 페이지 코드는 뭐가 없긴 하다. 딱히 요소가 많은게 아니라 없는데
그 스타일이 좀..

export const Background = styled.article`
    background:
        linear-gradient(
            to bottom,
            #87ceeb 0%,
            #87ceeb 30%,
            rgba(135, 206, 235, 0.5) 70%,
            transparent 100%
        ),
        url(${(props) => props.bgImg});

    background-size:
        100% auto, 
        100% 45%; // 그라데이션은 전체, 트랙은 하단 45% 크기 
    background-position: center top, center bottom; // 트랙 사진을 화면 바닥에 고정
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    padding-bottom: 80px; // 이거는 차 위치 조절할려고 넣음
    box-sizing: border-box;
    margin: 0;

    //이건 차 사진 
    & img {
        width: 600px;
        max-width: 80%;
        height: auto;
        filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4)); 
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    & img:hover {
        transform: translateY(-10px) scale(1.2);
    }
`;

스타일이 길어서 보기 힘들기 때문에 간단히 설명을 해보자면

background:linear-gradient(to bottom, #87ceeb 0%, #87ceeb 30%, rgba(135, 206, 235, 0.5) 65%, transparent 100%), 이거는 그라데이션을 만들기 위해 넣은 코드이고 65%부분 부터는 사진이 잘 보디기 위해 투명하게 보인다. url(${(props) => props.bgImg}); 이거는 props로 전달 받은 사진이다

filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4)); 이거는 제가 생각하고 넣은건 아니고 제미나이가 추천을 해줬는데 괜찮길래 ㅎㅎ 이게 box-shadow와는 다르게 이미지의 '형태'를 따라 그림자를 생성 해준다고 함 뭐 큰 차이 있겠어 하면서 코드 빼 봤는데 차이가 많이 나서 놀람 ㅎㅎ

화면 전체에서 보면 그림자 없는 자동차는 진짜 동동 떠있는거 같고 이상함..

만들었는데 너무 별로라 약간의 모션을 넣어보고자 마우스를 올리면 크기가 커지게 만들어 보았다.
& img:hover {transform: translateY(-10px) scale(1.05);} 이 명령언데 이게 마우스를 올리면 Y축으로 10px 만큼 위로 이동시키고 크기는 1.2배 만들어주는 명령어이다. -방향이 위쪽이고 +는 아래쪽이라고 한다.

&img 코드에 대해 설명을 좀 하자면 & 기호는 현재 자기자신을 카리키는 기호 이다. 여기서 &img는 <Backgroud> 컴포넌트 안에 들어있는 <img>태그를 선택하겠다는 '뜻'이다.

그리고 그 트랙 사진은 괜찮은게 없길래 여기서 맥라렌 차 지워서 가져왔고 차도 이쁜게 없어서 여기서 가져옴 ㅎㅎ

선택 과제 헤더 만들기

특히 인트로가 많이 비어보여서 헤더바를 만들기로 했다. ㅎ...

const Header = () => {
    const navigate = useNavigate();
    return (
        <HContainer>
            <HeaderTitle>ahyun's Profile</HeaderTitle>
            <HButtons>
                <HeaderBtn onClick={() => navigate("/")}>Intro</HeaderBtn>
                <HeaderBtn onClick={() => navigate("/profile")}>
                    Profile
                </HeaderBtn>
            </HButtons>
        </HContainer>
    );
};
export default Header;

헤더에는 크게 들어가는게 없긴해서 뭘 설명할게 크게 없긴 한데 버튼같은 티가 나는 버튼말고 그냥 글자를 누르면 페이지 이동이 됬으면 해서
span 태그에 onClick을 넣었다. 모든페이지에 넣을건데 스타일따로 문법따로 만들기는 굳이? 라는 생각이 들어서 그냥 한 파일에 다 넣었다 스타일은

const HContainer = styled.nav`
    width: 100%;
    height: 70px;
    background-color: #13111189;
    display: flex;
    align-items: center;
    padding: 0 40px;
    position: fixed; // 상단 고정 
    top: 0;
    left: 0;
    z-index: 1000; // 다른 요소보다 위에 있게
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
`;

const HeaderTitle = styled.h1`
    font-size: 24px;
    margin: 0;
    position: absolute; // 부모(Header) 기준 절대 위치 
    left: 50%;
    transform: translateX(-50%); // 정확히 정중앙으로
    color: #fdfdfd;
    cursor: pointer;
`;

const HButtons = styled.div`
    margin-left: auto; // 오른쪽 끝으로 밀기 
    display: flex;
    gap: 20px;
`;

const HeaderBtn = styled.span`
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #fdfdfd;
    cursor: pointer;
    &:hover {
        color: #000; //마우스 올리면 진해짐 
    }
`;

뭐 크게 특별한거는 없는거 같다.... 다 만들었는데 화면이 스크롤이 되다보니까 배경이 끊기는 느낌도 들고
흰 배경이 나오길래 맘에 안들어서 페이지들 스크롤 안되게 막아놨다.
그거는 어케 했더라.. ㅎ 코드 보고 알아옴
그 높이를 height: 100vh 이걸로 고정하고 튀어나오면 잘라주는 overflow: hidden 이거 써서 스크롤 안되게 막았다.ㅎㅎ

배운 점

일단 가장 신기했던거는 filter: drop-shadow 이 코드 물체에 맞춰서 그림자 만들어주는거 신기했다. 앞으로 잘 쓸듯 ㅎㅎ 그리고 또 Header 쓰는 위치 처음알았다 !! 그 자동차에 마우스 올리면 확대되고 위로 이동하는 코드도 이 과제하면서 알게 되었다.!!
transform: translateY(-10px) scale(1.2);

느낀 점

일단 확실히 과제는 미리 해야된다....
미리 안했다고는 하지만 나름 바빴.. 축제하고 시험도 어제 끝났는데.. 뭐 여튼 미리 안했더니 새벽에 인트로를 만드는 참사가 일어났다.. 진짜 내가 축제 프로젝트를 하지 않았더라면 절대 과제를 완성하지는 못 했을 것 같다.. 축제하면서 그래도 이것저것 해봤고 계속 vs code를 만져서 그나마 어찌어찌 한거 같은데.. 다신 이렇게 안할거다.. 진짜
새벽에 해서 재정신이었다면 하지 않았을 실수를 너무 많이 했다.. 일단 뭐 jsx 파일 만드는데 제목을 소문자로 만들어서 안되고 그래서 파일 이름 바꾸니까 다른데서 소문자로 만들어둔 것도 바꿔야되서 막 계속 바꾸고 App.js 에 몇번이나 들어간건지... 그것도 그렇고 사진경로도 계속 잘못 설정해서 몇번이나 수정하고 스타일 컴포넌트 안 할려고 전에 그냥
<h2> <div> 처럼 만들어둔 태그를 급 스타일 컴포넌트화 시켰다가 다시 수정하고 수정 덜 해서 에러나고... 여튼 앞으로는 미리 과제를 할거다...

HTML 자기소개 카드 리엑트에 재현

리엑트 연결법

1. vs코드에서 폴더를 연다
2. npx-create-react-app 프로젝트명 입력해 설치
3. 경로가 바꿔있는지 확인한 후 npm start 를 치고 시작 경로 확인을 안하고 npm start 하면 오류 뜰 수 있음...ㅎ....

재현

1. App.js return 안에 html 코드 붙여넣기

scr 안에 App.js 에서 하면 됨 일단 원래 있던거 지우고 html 코드에서 body 파트를 가져옴

Jsx 에서는 return 안에 하나의 최상위 태그를 가지고 있어야 함 (가장 큰 태그가 하나여야 함)

그래서 나는 <> </> 로 감싸줌

왜냐

• JSX는 HTML이 아니라 JavaScript로 변환된다
• JavaScript의 return은 하나의 값만 반환 가능하다
• 따라서 JSX도 하나의 최상위 요소로 감싸야 한다

그렇다고 한다 결론은

** JSX는 결국 JavaScript 라서 return은 하나만 된다 → 그래서 하나로 묶어야 한다 **

2. class 교체

html에서 <div class="title"> 같은 형식으로 쓴 이 친구들을 바꿔줘야 함

왜냐

class 라는 예약어가 존재하기 때문 '즉' 사용할 수 없다 그래서 -> <div className="title"> 이라는 형식으로 쓴다

class 를 대문자 N 이 들어간 className 으로 쓰면 된다

3. styled-components 로 꾸미기

가 과제 조건이므로 이 방식으로 만들어보자

우선 styled-components란 CSS를 JavaScript 안에서 작성할 수 있게 해주는 라이브러리이다.

👉 쉽게 말하면 '컴포넌트에 스타일을 같이 묶어서 관리하는 방식' 이라고 한다

일단 가장 위에 import styled from "styled-components"; 를 넣어 주고 const 컴포넌트 이름 (변수명) = styled.HTML 태그 형식으로 쓴다

이렇게보면 이해가 안되니까 예시를 보면 이런 식으로 쓰면 된다

4. 좋아요 버튼 만들기

좋아요 버튼은 상태 변화를 관리할 수 있는 useState 를 이용해 구현할 수 있다

useState를 사용하면 클릭 여부나 좋아요 개수와 같은 값을 저장하고, 변경될 때마다 화면을 자동으로 업데이트할 수 있다

useState 를 사용하기 위해서는 상단에 다음과 같이 import 해주어야 한다

import { useState } from "react"; 
// react에서 useState 기능 불러오기 

하고 const [데이터명, 데이터를 변경해주는 함수명] = useState(초기값); 를 입력해 컴포넌트에서 사용할 상태(state)를 생성한다

그리고 onClick 을 사용해서 클릭 시 좋아요가 1 증가하도록 설정해준다

<span onClick={()=> {좋아요변경(좋아요 + 1)}}> 🩶 </span>

button 대신 span을 사용한 이유는 좀 더 예쁘게 만들고 싶어서 ㅎ.. 기본 스타일 안 쓰려고 ㅎ...

이렇게 만들면 된다!!

최종 코드

import styled from "styled-components";
import { useState } from "react";

const Container = styled.article`
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: lightgray;
    padding: 30px; 
    border-radius: 20px;
    width: 600px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 30px;
`;

const Profiles = styled.section`
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
`;

const Role = styled.p`
    color: blue;
    font-weight: bold;
    margin: 5px 0;
`;

const Img = styled.img`
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
`;

const Details = styled.section`
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
`;
const Text = styled.p`
    margin: 5px 0;
`;
const Title = styled.h2`
    margin: 0 0 5px;
`;

const SubTitle = styled.h3`
    margin-top: 20px;
`;

const List = styled.ul`
    padding-left: 20px;
`;

const Item = styled.li`
    margin-bottom: 5px;
`;

const LinkText = styled.a` 
    color: blue;
    &:hover {
        text-decoration: underline;
    }
`;

function App() {

    let [좋아요, 좋아요변경] = useState(0);

    return (
    <> 
        <Container>
            <Profiles>
                <img src="p.jpg" width="200" height="200" />
                <span onClick ={()=>{좋아요변경(좋아요+1)}}>🩶</span>{좋아요}
                <div>
                    <Title>김아기사자</Title>
                    <Role>Frontend</Role>
                    <Text>열심히 배우는 프론트엔드입니다.</Text>
                </div>
            </Profiles>
            <Details>
                <Title>김아기사자</Title>
                <Role>Frontend</Role>
                <Text>멋쟁이사자처럼</Text>

                <SubTitle>자기소개</SubTitle>
                <Text>인천대 아기사자 14기 프론트엔드 개발자입니다. 저는 F1이랑 웹툰보는거 좋아합니다. 친해지면 말도 많아져요!</Text>

                <SubTitle>연락처</SubTitle>
                <List>
                    <Item>이메일: kah@gmail.com</Item>
                    <Item>전화: 010-0000-0000</Item>
                    <Item>웹사이트:<LinkText href="https://velog.io/@_zn_/posts" target="_blank">https://velog.io/@_zn_/posts</LinkText></Item>
                </List>
                <SubTitle>관심기술</SubTitle>
                <List>
                    <Item>HTML</Item>
                    <Item>CSS</Item>
                    <Item>JavaScript</Item>
                </List>
                <SubTitle>한마디</SubTitle>
                <Text>기초를 탄탄하게 다져서 더 나은 개발자 되겠습니다!</Text>
            </Details>
        </Container>
    </>   
    );
}

export default App;

그래서 이런 결과물을 만들었는데 뭐가 문젠지 사진이 안뜬다.... 이렇게 보인다.......

일단 문제점은 사진 파일을 같은 폴더에 넣어두지 않았고 태그 안에 <img>라고 써둬서 아마 안된 것 같다 ㅎ...

진짜 결과물 ㅎ..

이걸 다 만들고 생각이 들었는데 왜 이렇게 컴포넌트를 많이 넣었는지 모르겠다... <h2 style={{margin:"10px 0 5px"}}> 처럼 짧은 건 굳이 만들이유가 없는 거 같은데... 흠... 아무 생각 없이 css파일 그대로 따오다가... 불상사가 발생한거 같다......... 아무리 생각해도 읽기가 힘든 것 같다... 앞으로는 만들기 전에 구조 생각을 잘 하고 만들기 시작해야될 것 같다....

1번문제

1번 답

const welcomeLion = (name){{
return “환영합니다.”+ name +”사자님!”;
}

return을 써야하는 경우가 있고 쓰지 않는 경우가 있던데.. 뭔지 잘 모르겠다..

사실 처음에 ""를 빼먹었다... 몰랐는데 Replit에 실행해 봤다가 잘못 되었다고 알려줘서 알았다..

2번문제

2번 답

const status = true;
const isPaid = status ? “납부완료” : “미납”;

3번문제

3번 답

const member = { name: “임상현”,age: ”20”, 
track: “프론트엔드”, role: “아기사자” };
const {name, track} = member;
console.log(name);
console.log(track);

4번문제

const attendance = [“상현”,”지인”,”태민”];
const list = attendance.map((name) => {
return <li>{name}</li>;
});

5번문제

5번 답

const ProfileCard = ({name,track}) => {
  console.log("이름: " + name);
  console.log("파트: " + track);
}

실행이 안되길래 잘못된 줄 알았으나 이 코드는 React환경에서만 실행이 된다고 한다...
Replit가 key속성을 넣으면 좋다고 하는데 이거는 잘 모르겠다....

6번문제

6번 답

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

이거는 어떻게 하는지 모르겠어서 ai의 도움을 받았다..

7번문제

7번 답

const numbers = [1, 2, 3];
const doubleNumbers = numbers.map((num) =>{
return num*2;
})

처음에는 num이라고 써서 잘못 된건가 했는데 그건 아니었다.. 이후에 뭐가 잘 못 된건지 모르겠어서 ai의 도움을 받았는데 return이 빠져서 그런거였다..

일단 문제를 이해하기 위해서 잘 모르겠는 단어는 쳇 지피티에게 물어보며 과제를 했다. 구글 개발자 모드를 열어서 코드를 짜보다가 잘 모르겠어서 지피티한테 추천 받은 Replit 라는 ai에게 코드를 실행해 달라고 요청하며 과제를 했다. 친절하게 설명해주고 실행이 되는지 안되는지 왜 안되는지 다 설명을 해준다 그래서 좋긴하나 난 실행만 해보고 싶었는데 뭐가 틀렸는지 다 알려줘서 당황하기도 했다.

폴더 만들어서 파일 열기 파일 이름에 .확장자 붙이기!! ctrl+s 하면서 계속 저장하기

HTML 기초

기본구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <h1> 내용 </h1>
  <p> 내용 내용 </p>
</body>
</html>

<!DOCTYPE html> : HTML5 문서 선언 <html> : 전체 문서 감싸는 태그 <head> : 설정(제목, css연결 등) <body> : 실제 화면에 보이는 내용

주요태그

<title> : 브라우저 탭 제목 설정 <h1>~<h6> : 제목 태그 (1이 가장 크고 점점 작아짐) <strong> : 굵게 표시 <u> : 밑줄 표시 <p> : 문단 구분 <br> : 줄바꿈 <li><ul> : 순서 없는 리스트 <li><ol> : 순서 있는 리스트 <a href="링크"> : 링크 생성 <img src="이미지 경로"> : 이미지 삽입 <>

css 기초

css 연결

html 파일 <head> 부분 안에 <link rel="stylesheet" href="____.css" />를 넣어 연결한다

주요태그

선택자 body : 전체 페이지 main : 메인 콘텐츠 영역 .profile : class="profile"인 요소 .details : class="details"인 요소 .profile img : profile 안에 있는 img만 선택 (자식 선택) h2 : 모든 h2 태그 p : 모든 p 태그 li : 모든 li 태그 a : 모든 a 태그 a:hover : 마우스 올렸을 때 a 태그 상태

body {
    margin: 0;
    background-color: white;
    font-family: Arial, sans-serif;
}

a:hover {
    text-decoration: underline;
}

이런식으로 하면 된다

속성 margin : 바깥 여백 padding : 안쪽 여백 background-color : 배경색 color : 글자 색 font-family : 글꼴 설정 font-weight : 글자 굵기 width : 가로 길이 height : 세로 길이 border-radius : 모서리 둥글게 box-shadow : 그림자 효과 display : 요소 배치 방식 설정 (flex 정렬 시스템) flex-direction : flex 정렬 방향 (row 가로 / column 세로) justify-content : 가로 정렬 align-items : 세로 정렬 gap : 요소 사이 간격 min-height : 최소 높이 object-fit : 이미지 비율 유지 방식 (cover 이미지 꽉 채우기) text-decoration : 밑줄 등 텍스트 꾸미기

이 코드들을 활용해서 결과물을 만들었다.

결과물

HTML코드는

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아기사자 자기소개</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <main>
        <article>
            <section class="profile">
                <img src="p.jpg" width="200" height="200" />
                <div>
                    <h2>김아현</h2>
                    <p class="role">Frontend</p>
                    <p>열심히 배우는 프론트엔드입니다.</p>
                </div>
            </section>
            <section class="details">
                <h2>김아현</h2>
                <p class="role">Frontend</p>
                <p>멋쟁이사자처럼</p>

                <h3>자기소개</h3>
                <p>인천대 아기사자 14기 프론트엔드 개발자입니다. 저는 F1이랑 웹툰보는거 좋아합니다. 친해지면 말도 많아져요!</p>

                <h3>연락처</h3>
                <ul>
                    <li>이메일: kah@gmail.com</li>
                    <li>전화: 010-0000-0000</li>
                    <li>웹사이트:<a href="https://velog.io/@_zn_/posts" target="_blank">https://velog.io/@_zn_/posts</a></li>
                </ul>
                <h3>관심기술</h3>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
                <h3>한마디</h3>
                <p>기초를 탄탄하게 다져서 더 나은 개발자 되겠습니다!</p>
            </section>
        </article>
    </main>    
</body>
</html>

이렇게 만들었다.

<head> 이 부분은 !enter치면 나오는 기본 툴에 <link rel="stylesheet ="href="style.css"/> 만 추가해 만들었고 title만 바꿔주었다.

<body>안에 <main>을 쓰고 코드를 짰는데 css만들면서 구조가 마음에 들지않아서 <article>을 나중에 추가로 넣게 되었다. 원래는 <div>로 나눌까 했는데 <div>를 많이 쓰는건 추천하지 않는다길래 <section>으로 나누게 되었다. 큰 카드안에 작은 카드 두개가 들어있는 그림이었기때문에 class를 사용해 plofile과 details로 나누었다. plofile에서 사진과 글은 따로 움직이려고 사진은 그냥 넣고 글들은 <div>로 묶어주었다. 이름은 나름 중요한 정보이기 때문에 <h2>를 사용해 써주었고 나머지 내용은 <p>를 사용해 써주었다. frontend는 따로 색을 넣고 볼드처리를 해줄 예정이었기에 class로 role이라는 이름을 붙여었다. details도 비슷한 구조로 만들어주었다. 이름이 가장 컸으면 해서 소제목들은 <h3>로 써주었다. 연락처와 관심기술 부분은 불릿기호를 써주기위해 <ul>안에 <li>를 써서 내용을 썼다. 웹페이지를 새로 열기 위해서 <target="_blank">써서 링크를 걸었다.

CSS코드는

body {
    margin: 0;
    background-color: white;
    font-family: Arial, sans-serif;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

article {
    background-color: lightgray;
    padding: 30px;
    border-radius: 20px;
    width: 600px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

    display: flex;
    flex-direction: column;
    gap: 30px;
}

.profile, .details {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.profile {
    background-color: white;
    padding: 20px;
    border-radius: 15px;

    display: flex;
    flex-direction: column; 

    width: 300px;
    height: 300px;
 } 


.profile img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}


.role {
    color: blue;
    font-weight: bold;
    margin: 5px 0;
}

h2 {
    margin: 0 0 5px;
}

h3 {
    margin-top: 20px;
}

p {
    margin: 5px 0;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}

a {
    color: blue;
}

a:hover {
    text-decoration: underline;
}

이렇게 만들었다.

결과물은 이렇게 나온다

느낀점

다 어려웠다.. 일단 아무것도 할 줄 모르던 내가 점점 무언가를 할 수 있게 되어가고 있다..!! 모르는 부분은 지피티 도움을 받아가면서 했는데.. 그래도 모르는게 많다.... 과제를 하다가 뭘 잘 못 눌러서 코드를 날려먹었다.... 일단 만들긴 했지만 아직도 모르는게 많아서 더 공부해야될 것 같다..