코드 캠프 01일차) 14시간 동안 박살나버린 날😇

코캠 입소 전

강의 따라가기 벅찰 것 같아서 공부할 내용 살펴보고 예습하려다가 주변의 유혹(BE, FE 동기분...)에 참지 못하고 실컷 놀았는데...

ㅎr...

유혹해주신 동기님들 정말 감사합니다...🥹 어제가 올해 마지막으로 정말 신나게 놀았던 날이 될 것 같습니다...

코캠 입소 후

설레는 마음을 가지고 동기들과 함께 강의실에 들어오자마자 선물을 받았다! 😊

선물을 받고 처음 보는 동기들 얼굴을 봐서 그런지 좀 들떠 있었던 것 같은데

강의를 듣고,

또 듣고,

또 듣고,

또..

ㄸ
ㅗ
.
.
.

듣다 보니 알아서 진정되더라..

1일차 첫 수업 목차

1. Node.js / npm / yarn
2. Next.js (+React.js)
3. JSX
4. Emotion / Styled-components

Node.js란?

Node.js는 크롬의 V8 Engine으로 빌드되어 브라우저에서 떨어지게된 JavaScript 런타임이다.

런타임(runtime)이란, 프로그램이 실행되고 있는 환경을 말한다.

npm이란?

npm은 Node Package Manager의 약자로 JavaScript의 라이브러리를 다운 받을 수 있게 해주는 도구이다.
node 설치 시, 번들로 같이 설치된다.

npm의 상위버전 yarn

과거 페이스북이 npm을 사용하던 도중 프로젝트의 규모가 커지자 보안 및 성능 문제를 겪고 만들어낸 것이 yarn이다. yarn은 npm에서 여러가지(성능, 보안)가 업그레이드된 패키지 매니저라고 보면 된다.

예를 들어, 프로젝트 진행 도중에 기술 스택의 버전이 바뀌어서 버전 충돌이 일어나는 경우를 방지해주는 yarn.lock 잠금 파일이 있다. (물론 지금은 npm에도 package-lock.json 이 생겼다.)
npm도 yarn이 나온 후 거듭된 발전으로 인해 성능(속도)면에서 유의미한 차이를 보이지는 않는다.

---

Next.js

Next.js는 React.js와 비슷하지만 더 업그레이드 된 버전이다. 자세한 이론에 관해선 아직 잘 모르겠다... 당장은 그저 손으로 직접 치고 몸으로 체득하는 수 밖에 없는 것 같다. 아래는 오늘 배운 Next.js + styled-component 하드 코딩의 결과물이다...ㅋㅋ

JSX

JSX는 JavaScript and XML의 약자로 자바스크립트와 XML이 결합된 언어이다.

XML이란, W3C에서 개발했고 다른 특수한 마크업 언어를 만들 때 사용하도록 권장하는 다목적 마크업 언어이다.

지금은 JS와 결합된 방식으로 만들어진 것을 볼 수 있다. JSX는 React를 위해 JavaScript를 확장시킨 문법을 적용한 언어이다. 쉽게 말하면, React를 위한 언어랄까...?

JSX에서는 아래와 같이 렌더링 로직과 UI로직이 연결되어 있다.

const MyComponent = () => {
  
  // UI Logic...
  
	return (
      <div>
      // Rendering Logic...
      </div>
    )
}

브라우저는 기본적으로 JSX 코드를 읽을 수 없다. React에서는 Babel이라는 코드 변환기 즉, 컴파일러가 개발자들에게 읽고 쓰기 쉬운 JSX 코드를 자동으로 브라우저가 읽을 수 있는 JavaScript 코드로 변환해준다.

위의 코드는 브라우저가 실행되기 전 Babel 이라는 번들러를 통해 아래와 같은 순수 JS 코드로 변환된다.

const MyComponent = () => {
  
  	// UI Logic ...
  
  	return React.createElement('div', {Rendering Logic...});
}

Babel은 정말 고마운 친구인 것 같다.. Babel이 없다면 JSX도 무용지물일 거 아니야..🥲

Babel이란?

바벨은 원래 '6to5' 라는 이름을 가졌다고 한다. 저 숫자는 EcmaScript 버전의 숫자를 의미하고, 그대로 해석해보면 EcmaScript6 에서 Ecmascript5로 컴파일해준다 라고 해석할 수 있다. JavaScript에는 버전이 존재하는데, 사용자의 브라우저 환경이 다양한 것과 같이 JavaScript 또한 최신 버전과 구 버전이 공존하기 위해서 바벨과 같은 도구가 나오게 되었다. 그리고 바벨의 기능 중에는 JSX를 브라우저가 읽기 쉬운 JS로 변환해주는 기능도 존재한다.

위의 코드에서 보면 알 수 있듯이, JSX는 렌더링 로직 부분(return)이 HTML과 문법이 흡사하여 개발자들이 사용하기 편하고 그 안에서 {}를 사용하여 JS 표현식을 사용할 수 있어서 활용도가 매우 높다. 예를 들면, && 연산자를 활용한 조건부 렌더링 방법이 있다.

// 예시

const MyComponent = () => {
	let a = true;	
	
  return { a ? 
          <div>a가 true면 나 렌더링 됨!!</div> :
          <div>a가 false면 나 렌더링 안됨</div>
         }
}

Emotion & Styled-component

대표적인 CSS-in-JS의 두 가지 버전들이다.
CSS-in-JS라는 말 그대로 JS파일 안에서 CSS를 작성할 수 있다.

특징으로 별도의 CSS 파일 없이 JS 파일 하나로 통합 가능하다는 점과 변수나 상수에 CSS가 적용된 html 태그를 지정해서 할당하는 방식이다. ( -> 재사용성 증가 )
예시)

const Title = styled.div`
	width: 966px;
	height: 52px;
`

return (
	<Title>타이틀 입니다.</Title>
)

끝으로

이것들 외에도 Git merge의 4가지 경우에 대해서 라든가 알고리즘 관해서 라든가.. 배운 것들이 많다. 정말 하루만에 탈탈 털린 기분이지만 블로그를 작성하는 것이 왜 중요한지 깨달았다. 블로그를 작성하면 복습도 되고 기억이 안 나는 부분은 다시 찾아보며 기록하니 머리 속에 정리가 되는 기분이다.

ㅋㅋ 지금 이 글도 끝나고 바로 다 정리해서 적은 건 아니고.. 지금은 아침이지만..
그 날 배운 건 그 날 블로깅할 수 있도록 노력해봐야겠다.