Sohn SooKyoung

💛💚

2 분 소요

드디어 React를 사용해서 내 컴에서 실행했다. !! 이미 npm install -g create-react-app을 하였으므로 앞으로 다른 react폴더를 만들고 싶다면 이렇게 하면 된다.

  1. cmd 창에서 cd 경로 -> react 폴더를 넣고 싶은 경로로 이동
  2. 위 상태에서 create-react-app (react 폴더 이름)
  3. cd (react 폴더 이름)
  4. npm start

리액트의 기능

public 폴더에 파일들을 추가해서 사용할 수 있다. src > App.js를 사용해서 사용자 지정 태그를 만들 수 있다. 이를 사용하면 좀더 가독성이 좋은 코드를 작성할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
//src > App.js 수정본
import logo from './logo.svg';
import './App.css';
import { Component } from 'react/cjs/react.production.min';
import { render } from '@testing-library/react';
 
class Subject extends Component {
    render() {
        return (
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>
        );
    }
}
 
class TOC extends Component {
  render() {
    return(
      <nav>
            <ul>
                <li>
                    <a href="1.html">HTML</a>
                </li>
                <li>
                    <a href="2.html">CSS</a>
                </li>
                <li>
                    <a href="3.html">JavaScript</a >
                </li>
            </ul>
        </nav>
    );
  }
}
 
class Content extends Component {
  render() {
    return (
      <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
      </article>
    );
  }
}
class App extends Component {
    render() {
        return (
        <div className="App">
            <Subject></Subject>
            <TOC></TOC>
            <Content></Content>
        </div>
        );
    }
}
 
export default App;
cs


그럼 alcoholic에 적용시켜 보도록 하기 전에!! 일단 전에 header 작성법에 대해서 공부하였다. 이 내용은 https://www.youtube.com/watch?v=X91jsJyZofw을 통해서 공부를 하였다.

See the Pen Untitled by sohnsookyoung (@sohnsookyoung) on CodePen.

이 코드를 분석 & 적용할 예정

html 파일

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 뷰포트의 너비가 웹 사이트를 보고 있는 장치와 동일하다고 정의할 수 있는 태그이다. width=device-width 라는 것은 사용 중인 장치의 뷰포트의 너비를 동일하게 설정해준다. initial-scale=1은 뭐,,초기 값을 1로 설정???🤔

  2. src="https://kit.fontawesome.com/2d323a629b.js" : 토글과 같은 이미지 관련 js로 이에 해당하는 코드를 제공해 준다. 여기서 저 링크를 넣기만 하면 fontawesome에 나와 있는 태그들을 사용할 수 있다.

  3. crossorigin="anonymous" : audio, img, link, script, video 요소에서 유효하게 적용되며 element의 CORS 요청의 credential flag 가 same-origin으로 지정…(뭔소린지 모르겠지만 일단 적어놈) === 위와 동일하게 이 분의 fontawesome 코드에 해당된다. 내 코드는 <script src="https://kit.fontawesome.com/7ca999eb17.js" crossorigin="anonymous"></script> 이거다.

  4. css 파일과 연결하는 태그 link 태그
  5. js 파일과 연결하는 태그 script 태그 (원래 script를 사용했지만, 이렇게 사용될 줄은 몰랐음,,ㅎ)

css 파일

  1. .navbar의 아이템들은 로고, ul태그, 사진 이렇게 크게 3가지고 나뉜다. 얘네들을 justify-content: space-between; 을 사용해서 3가지 아이템들 사이의 간격이 균일해지도록 만들었다. justify-content 는 아이템들의 가로를 설정한다고 생각하면 될 것 같다. align-items: center를 사용해서 아이템들을 컨테이너 중간에 위치할 수 있도록 하였다. align-items 는 각 아이템들의 위치를 컨테이너 기준 세로를 설정한다고 생각하면 될 것 같다. padding: 8px 12px; 라고 나와있는 것은 top/bottom은 8px, right/left는 12px로 설정한다는 의미이다.
  2. .navbar_menu의 아이템들은 ul태그 안에 있는 리스트들이다. list-style: none;이라는 것은 ul태그라서 생기는 그 앞의 점이 없어짐!!!!!
  3. .navbar_toogleBtn에서의 display: none; 은 일단 @media 조건이 아니면 없다가 조건에 해당된다면 다시 나타남. 다시 나타나는 것도 none의 기능의 아니라 display: block; 처리를 해준다면 @media 조건에 해당 되었을 때, 나타남

js 파일

addEventListener() 라는 메서드를 봤는데,,,지금 만들면서 어떻게 적용시킬지를 보는 중.

alcoHeader 만들어보기

  1. 폰트어썸 불러오기: <script src="https://kit.fontawesome.com/7ca999eb17.js" crossorigin="anonymous"></script>를 적었는데도, 일부 아이콘이 불러지지 않아서 css파일에
1
2
3
4
5
*::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}
cs


이와 같이 추가해주었더니 성공!

See the Pen alcoHeader by sohnsookyoung (@sohnsookyoung) on CodePen.

css, html 관련은 많이 알았지만 js관련해서 아직 적용이 어려웠다. 왜나하면 addEventListener도 뭔지 잘 모르겠고, classList.toggle(‘클래스명’) 이것도 뭔지 잘 모르겠다. 하지만 classList.add, classList.remove와 같은 기능이 있고, add는 클래스(css 이름)의 기능을 추가하고, remove는 클래스의 기능을 지운다. toggle은 add와 remove의 중간인 on/off의 기능을 한다. 그래서 토글 버튼을 눌렀을 때, 메뉴창이 나왔다가 다시 클릭하면 지워지는 것이다.

헤더에서의 추가사항

  • 토글에 대해서 좀 더 공부해 볼 것. active?
  • HIT THE 메뉴를 눌렀을 때, 밑에 또다른 메뉴를 나오게 하기

See the Pen intro ver1 by sohnsookyoung (@sohnsookyoung) on CodePen.

수정사항

  1. 헤더
  2. grid -> flex
  3. @media 적용될 때, 화면 모습

문제점

  1. 헤더 js 문제
  2. @media 적용될 때, .main 아이템 중앙 정렬 적용 X

다음 진행 예정

  1. 제이쿼리 공부를 통해서 사진 추가와 관련된 기능 있나 보기
  2. 제이쿼리 + Node.js 이용해서 폴더에 이미지만 추가하면 알아서 적용이 되도록 해보기

댓글남기기

참고