Today 요약

1. 넘블 프로젝트 구현하기
2. 리액트의 JSX 문법

1. What I did?

1. 1 넘블 프로젝트 구현하기

이번에 넘블에서 주어진 프로젝트는 Next로 최대한 CSR을 사용하지 않고 포트폴리오 웹사이트를 구현하는 것이다. 그동안 포트폴리오 사이트를 어떻게 구현했으면 좋겠다는 생각은 어렴풋하게 가지고 있었고, 다른 개발자들의 여러 포트폴리오를 북마크 해두었던 게 있었기 때문에 그 부분을 참고해서 이번 프로젝트를 완성해보려고 한다.

오늘은 일단 섹션을 구분하고 전체적으로 적용될 네비게이션을 구성했다.

2. What I Learned?

2.1 리액트의 JSX 문법

• JSX는 React에서 UI를 작성하는 데 사용되며, JavaScript와 함께 사용할 수 있다.
• JSX 문법의 특징 및 준수사항
  • 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 함
  • 자바스크립의 값을 JSX 안에서 렌더링할 수 있다.
  • JSX 내부의 자바스크립트 표현식 내에서는 if문 대신 조건부 연산자(삼항 연산자)를 사용
  • JSX에서는 스타일을 지정할 때 카멜 표기법으로 작성
  • class라는 속성을 JSX에서는 className으로 표시