멋사 프론트엔드 3주차 과제

26 정통·2026년 4월 6일

이번주차는 시간분배 실패로 결과물과 배운점만 중점적으로 소개

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로 변형하는 과정에

div1,div2 태그등을 className을 이용해서 시각적,시스템적으로 구별하는 방식으로 변경
ㄴ 첫 주차 때는 class 같은걸 모르고 안 썻다가 의미없는 태그 여러개를 생성하는 방식으로 했었는데 지금은 보다 통용적인 방식으로 바꾸었다.

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

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

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를 만든뒤 에를 들어... 내 기수 옆에 좋아요 버튼을 만든다고 치면

<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을 사용했다.

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. 오류를 검사하는 시간 부족: 이게 뭔말이냐면 평소엔 오류를 직접 한 10~30분정도 찾다가 못찾으면 그제서야 ai를 돌렸는데 이번주는 5~10분 만에 못찾으면 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(
  <함수명>함수 내용</함수명>
  )

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