14일차

14일차는 열심히 리액트를 예습했다. 12일차 때, 내준 과제를 미리 다 해서 여유가 있어서 예습과 함께 내 자기소개 페이지도 만들었다. css작업 같은 게 아직은 어려웠고, 일단 큰 컴포넌트를 만든 다음에 하나하나 컴포넌트를 줄여나갈 계획이다.

그래도 만들어보면서 조금씩 어떻게 만들면 되겠다라는 감이 잡혔다. 아직 react의 제대로 된 기능을 쓰지는 않았지만, 나중에 됐을 때는 이를 잘 활용한 페이지를 제대로 만들려 한다.

과제

우선 과제는 지난 번에 몰아서 다 했다. 아래는 과제의 깃허브다. 여기서 practice4.html과 practice4.js를 참고하면 된다.

git : https://github.com/leeyulgok/3-Day-1/tree/main/%EC%8B%A4%EC%8A%B5

이번 주는 날씨 API와 실시간 시계를 설정하는 게 과제였다. API는 더 나은 개발자가 되기 위해서라면 꼭 다뤄야 하는 것이기 때문에 이번 과제뿐만 아니라 스스로 찾아서 해보는 노력이 필요하다.

과제는 지난 12일차를 참고하면 되고 14일차는 개인공부 부분에 좀 더 치중해서 포스팅을 해야겠다.

개인공부

개인공부를 적기 앞서 내가 참고하는 홈페이지 링크다.

https://ko.wix.com/website-template/view/html/2846?originUrl=https%3A%2F%2Fko.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2Fpersonal%2F2&tpClick=view_button&esi=8887c3d0-bc0e-45e5-8a8d-9657f94b8e30

위의 홈페이지를 참고하여 만들고 있고, 최대한 느낌을 비슷하게 살려 만들려한다.

git: https://github.com/leeyulgok/yulgok-page

우선 react를 활용하여 간단하게 만들기 시작한 웹 페이지고, 위는 깃허브, 아래는 사진이다.

위는 메인이고 아래는 Contact 부분이다. 페이지를 useState를 활용하여 동적 페이지를 만들 예정이지만 아직은 만들지 못해 완벽한 것은 아니다.

코드

이번 공부를 하면서 배운 코드다.

import { Fragment } from "react";

import Header from "./components/layouts/header/Header";
import Footer from "./components/layouts/footer/Footer";
// import Main from "./components/main/Main";
import Contact from "./components/Contact/Contact";

const App = () => {
  return (
    <Fragment>
      <Header />
      {/* <Main /> */}
      <Contact />
      <Footer />
    </Fragment>
  );
}

export default App;

이번에 공부한 부분은 Fragment다. 원래 JSX 문법을 사용하게 되면 코드를 하나의 뭉탱이로 보내된다. html 코드가 아니기 때문에 header / main / footer 이렇게 있으면 안되고 하나의 div로 묶어야 한다.

그러나 Fragment를 사용하면 div가 아닌 Fragment로 묶어서 활용이 가능하다. 이러면 불필요한 div를 사용하지 않고도 그룹화할 수가 있다. 브라우저에 렌더링되지 않는 투명한 래퍼이기 때문에 불필요한 div를 사용하는 대신 Fragment를 사용하여 렌더링할 때 보다 깔끔한 코드 사용이 가능하다.

결과

크롬에서 검사할 때 나타는 코드다. 이를 보면 header 이전에 div가 보이지 않는다. 원래라면 App을 렌더링 하기 위해서 div를 감싸야 됐는데, Fragment를 사용했기 때문에 투명한 랩으로 감싸져 있어서 불필요한 div가 사용되지 않았다.

정리하기

14일 차는 React를 예습하는 시간을 가졌다. react의 진도가 빨라지고 있기 때문에 react 복습 및 예습을 통해 뒤쳐지지 않고 함께 나아갈 수 있도록 노력해야 한다.

내일이면 3주차도 마무리고, 4주차부터는 더 어려워지기 때문에 이번 주는 확실히 내실을 다질 필요가 있다. 배운 내용을 잘 응용하여 나만의 멋진 자기소개 페이지를 만들어야겠다. 그리고 베포까지 하도록 하는 걸 최종 목표로 해야겠다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프