멋사 프론트엔드 2주차 회고록

26 정통·2026년 3월 29일

멋사 과제 시리즈

목록 보기

2/4

리엑트를 쓰는 이유

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차시 때 배운 문법을 총동원해서 명부를 완성해 보세요.

map을 써서 배열을 순회하세요.
매개변수 자리에서 구조 분해 할당으로 name, track, isMaster를 바로 뽑아내세요.
삼항 연산자를 써서 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을 안써서 값 반환이 안되고 딱 연산 만 진행되었던게 문제 같음

새로 알게 된 점

div className="App" 같이 옆에 class나 className 같은걸 쓰는 이유를 몰랐는데
이는 일종의 주석으로 작용하기도 하고, css나 자바스크립트 파일을 html과 연결할 수 있는
식별 코드 느낌(몇가지 기능이 있는 전자식 코드 주석 느낌?)
리액트 구조의 return 내부에서 삼항연산자를 어떻게 이용하는지 알게 됨
강의를 통한 jsx관련 내용(하단)

jsx 문법

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

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

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

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

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 내부로 이송 가능

스타일 지정하는 법
이것도 마찬가지로 중괄호 내부에 씀(중괄호 2개)

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>
  );
}