import { Link } from "react-router-dom";
function Header() {
  return;
  <header>
    <ul>
      <li>
        <Link to={"/"}>Home</Link>
      </li>
      <li>
        <Link to={"/about"}>About</Link>
      </li>
    </ul>
    ;
  </header>;
}
export default Header;

[header.tsx]

return (
  <header>
    <ul>
      <li>
        <Link to={"/"}>Home</Link>
      </li>
      <li>
        <Link to={"/about"}>About</Link>
      </li>
    </ul>
  </header>
)

[solution.tsx]

• 2022 CSS Layout MasterClass
• 2.1Life Before Flexbox ~ 2.4 Rows and Columns

• React JS 마스터클래스
• 3.6Theme ~ 3.7 Recap
• 5.0 Setup

• 타입스크립트에서는 JS 에처럼styles.css를 import 하는 대신에 styled.d.ts 를 props 로 타입을 정해준 다음에 속성을 전달해준다
  • @types/react-router-dom 처럼 리액트에서 다운받아지지 않는 라이브러리는 @types 를 붙여서 npm i 하면 된다.
  • 버전 붙여서 다운받을 때 5.3.0에서 맨 뒤에 0일 때는 붙여서 다운로드 받는거 아니다
• flexbox 세계에는 2가지가 있다. (row, column) : 기본값은 row

→ main axis 위의 flex childern 위치를 변경하려면 justify-comtent 를 사용하면 된다.

→ cross axis 위의 flex item 위치를 변경하려면 align-item 을 사용하면 된다.

• display:flex; flexbox이전에는 inline-block 이 있어서 너비와 높이가 있는 객체가 옆으로 나란히 있을 수 있었지만 요상한 빈 공간이 있었다. 그러나 바로 객체에 적용하는 것이 아니라 그 객체(요소)의 바로 붙어있는 부모 요소에 적용하는 것이다.

타입스크립트에서 styled component 를 이용한 CSS 스타일링 하는 법

• interface 라는 object shape 를 변수 타입을 설명해줘야 props 로 전달이 가능하다.

• interface 를 선언해준 다음에 왜 styled component 를 선언해주는 형식을 또 만들어주고, 왜 Circle.tsx 를 만들어서 App.tsx 에 전달되는지에 대한 원리가 이해되지 않았다
• 왜 Circle.tsx 에는 interface 가 있는데, App.tsx 에는 interface 가 없는걸까??
• → 이미 완성되어있는 interface 를 갖다 쓰는거라서?

• 무언가 막힐 때는 노마드 댓글과 슬랙을 보면서 진행하는 습관을 기르자

1. 시작 코드 다운로드(선택 사항)

이전 단원에서 계속 진행하지 않는 경우 아래에서 이 단원의 시작 코드를 다운로드, 설치 및 실행할 수 있습니다. nextjs-blog이것은 이전 레슨의 결과와 동일하도록 디렉토리를 설정합니다 .

다시 말하지만, 이전 단원을 방금 마친 경우에는 필요하지 않습니다.

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"

시작하기 코드

// 파일 접근
$ cd nextj-blog

// 시작코드
$ npm run dev

// build
$ npm run build

2. 페이지 간 탐색

Next.js에서 쓸 수 있는 페이지의 종류
: .js, .jsx,.ts,.tsx, pages

pages/about.js => 이렇게 쓰면 /about 이라는 페이지로 접근할 수 있습니다.

{/* /about 페이지 */}

function About() {
  return <div>About</div>
}

export default About

동적 경로가 있는 페이지

Next.js 는 동적 경로가 있는 페이지를 지원합니다.

`pages/post/[id].js` 라는 파일을 호출하면,  `pages/1` `pages/2` 같은 파일을 부를 수 있습니다. 

3 .새 페이지 만들기

페이지는 파일 이름에 따라 경로와 연결됩니다.
pages/index.js 는 / 루트 경로와 연결됩니다.
pages/posts/first-post.js 파일을 생성하게 되면, /posts/first-post.js 루트와 연결이 됩니다
npx create-next-app 을 통해 이미 만들어진 pages/index.js 파일이 있으니,
pages/posts/first-post.js 을 만들어서 어떻게 동작하는지 확인해 봅니다.

// 아래에 새 디렉토리를 만듭니다. 
`post` `pages`

// `posts` 디렉토리 내부에 `first-post.js` 파일을 만들고, 다음 콘텐츠를 넣어봅시다.

export default function FirstPost() {
  return <h1>First Post</h1>;
}

http://localhosl:3000/posts/first-post 를 실행했을 때 이와 같은 페이지가 보여야 합니다.

이것이 Next.js에서 다른 페이지를 만드는 방법입니다.
디렉토리 아래에 JS파일을 생성하기만 하면 파일의 경로가 URL경로가 됩니다.
어떻게 보면 HTML이나 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷합니다.
HTML을 작성하는 대신 JSX를 작성하고 React 구성 요소를 사용합니다.

왜 Node JS를 사용하는가?

<aside> ✍🏻 Node JS는 브라우저 밖에서 돌아가는 자바스크립트를
사용하는 이점을 사용하고 싶어서 만들어진 프로그램입니다. 자바스크립트는
브라우저없이는 돌아가지 않거든요. 이제는 Node JS 덕분에 브라우저 없이도
자바스크립트를 프로그래밍 할 수 있게 되었습니다.

</aside>

요구사항

<aside> ✍🏻 Homebrew (macOS용 패키지 관리자) 설치

</aside>

Homebrew

/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"

Node Js 설치하기

다운로드 | Node.js

저는 Mac Os 사용자여서 LTS 버전을 다운로드 받았습니다.

1. 터미널을 실행합니다

2. brew를 실행합니다

$ brew install node

3. 노드 버전을 확인하여. path 지정할 버전을 기억해두어야 합니다.

$ node -v

4. bash 파일이 있으면 수정하고 없으면 추가하여 path를 설정해줍니다.

cd ~
vi .bash_profile

5. 간단히 알아보는 vi 컨트롤법

• 아래 코드를 입력합니다.

<aside> ✍🏻
파일의 끝으로 이동할 때 : G
한글자 삭제 : x
단어 삭제 : dw
실행 취소 : u
줄의 맨 앞 : o
줄의 맨 뒤 : $
현재 커서에 삽입 :i
현재 커서 바로 다음에 삽입 :
a ——————— (esc 종료 모드 )
저장만 : w 종료만 : q 저장 후 종료 :wq

</aside>

export NODE_PATH="/usr/local/lib/node_modules"
export PATH="/usr/local/Cellar/node/13.5.0/bin:$PATH"

Express 설치

7.터미널에 입력합니다.

$ npm init
$ npm install express 

여기까지 하시면 express 설치까지는 된 것입니다.

유튜브 클론코딩 강의를 보고 StackOverflow 클론을 진행해보려고 합니다.

pre-prj 과제로 주어진 겸

• Mongo DB
• Node JS
• Pug
• WEBPACK
• API
• AWS

풀스택으로 클론코딩을 진행해보면서 웹에 대한 이해를 해보는 것에 의미를 두려고 합니다. 진행해보면서 부딪히는 많은 오류와 애로사항들을 블로깅하면서, 다른 분들에게도 많은 도움이 되면 좋겠습니다.

함수에 인수를 전달하려면 ? ⇒ 함수를 호출할 때 전달해야 한다.

이벤트 핸들러 어트리뷰트 방식은 함수 호출문 방식을 사용할 수 있기 때문에 인수를 전달할 수 있지만 이벤트 핸들러 프로퍼티 방식과 addEvenetListener 메서드 방식의 경우 이벤트 핸들러 브라우저가 호출하기 때문에 함수 호출문이 아닌 함수 자체를 등록해야한다. 따라서 인수를 전달할 수 없다.

<!DOCTYPE html>
<html>

<body>
    <label>User Name</label>
    <em class="message"></em>
    <script>
        const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
        const $input = document.querySelector('input[type=text]');
        const $msg = document.querySelector('.message');

        const checkUserNameLenght = min => {
            $msg.textContent
                = $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
        }
        //이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다. 

        $input.onblur = () => {
            checkUserNameLenght(MIN_USER_NAME_LENGTH);
        };
    </script>
</body>

</html>

또는 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달할 수도 잇ㅆ다.

<!DOCTYPE html>
<html>

<body>
    <label>User Name</label>
    <em class="message"></em>
    <script>
        const MIN_USER_NAME_LENGTH = 5; //이름 최소 길이
        const $input = document.querySelector('input[type=text]');
        const $msg = document.querySelector('.message');

        //이벤트 핸들러를 반환하는 함수
        const checkUserNameLenght = min => e => {
            $msg.textContent
                = $input.value.length < Min ? `이름은 ${min}자 이상 입력해 주세요 ` : '';
        };
        //이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달한다. 

        $input.onblur = checkUserNameLenght(MIN_USER_NAME_LENGTH)

    </script>
</body>

</html>

checkUserNameLenght 함수는 함수를 반환한다. 따라서, $input.onblur 에는 결국 checkUserNameLenght 함수가 반환하는 함수가 바인딩한다.

//HTML
<div id='user' data-id='1' data-user='xyz' data-age='19'>user1</div>
<div id='bevarage' data-id='coffee' data-category='hot-brewed' data-isCaffein='non-caffeine'>Decaffeine Hot Americano</div>

//JavaScript
const person = document.querySelector('#user')
//person.dataset.id = 1
//person.dataset.user = 'xyz'

console.log(person.dataset.user)
console.log(person.dataset.age)

const cafe = documemnt.quuerySecector('#category')
//cafe.dataset.id = coffee
//cafe.dataset.category = 'hot-brewed'

console.log(cafe.dataset.id)
console.log(cdafe.dataset.iscaffin)

=== xyz
===19

=== coffee
=== non-caffein