1. JS 지식

   • 클로저 설명
   • this 설명
   • var, const, let 차이점
   • 프로토타입 설명
   • 원시 값 종류가 무엇이 있나
   • 함수 세 개에 모두 콘솔로그가 있고, 두 번째 함수에 만 settimeout이 선언되어 그 안에 콘솔로그가 있다. 이 때 자바스크립트 엔진이 작동하는 순서 설명...
   • null, undefined 차이점

2. HTML, CSS

   • 웹 접근성이 무엇?
   • 박스 모델 설명

3. react

   • virtual dom 설명
   • 메모이제이션 설명

4. 기타

   • 웹 스토리지, 쿠키 차이
   • 브라우저 랜더링 과정 설명
   • 이벤트 버블링, 캡쳐링, 위임 ⇒ 위임을 하면 좋은점은?
   • CORS 설명 ⇒ CORS 대처한 경험, 백엔드쪽에서 대처하려면 어떻게 해야하나?
   • CSR, SSR 설명
   • SPA 설명
   • 사용자가 무엇을 할 때마다 어떤 동작이 실행되고, 화면이 새로고침 된다면 이 때 무엇을 해서 해결할 수 있는가..? ⇒ 디바운스를 말하시는 것 같아 디바운스 얘기 ⇒ 디바운스를 안다면 쓰로틀링도 아시겠네요? ⇒ 쓰로틀링은 무엇인가?
   • call by reference, call by value의 차이는?
   • 바벨은 무엇인가요?
   • 웹팩은 무엇인가요?
   • package.json에서 dependency, devDependency 차이
   • get, post 차이
   • Http와 Https 의 차이는?
   • 최적화 방법 아는대로 다 말해달라
   • 함수형 프로그래밍은 무엇인가?

리액트가 state 업데이트를 즉각적으로 해주지 않기 때문에 마지막 업데이트가 최신 state 값에 적용되지 않을 수 있다.

안 좋은 코드

import { useState } from "react";

function test () {
  const [data, setData] = useState([]);

  function NewData(newData) {
    setData(data.concat(newData));
  }
}

좋은 코드 : 새 값을 직접 전달하는 것보다 함수를 전달하여 함수를 실행하게 만들자.

import { useState } from "react";

function test () {
  const [data, setData] = useState([]);

  function NewData(newData) {
    setData((prevData)=> {
      return prevData.concat(newData);
    })
  }
}

useHistory => useNavigate

변경 전

import { useHistory } from "react-router-dom";

const history = useHistory();

history.push("/");
history.replace("/");

변경 후

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/");
navigate("/", { replace:true });

이벤트 연결

함수를 바인딩 할 때 () 괄호를 쓰면 자바스크립트가 코드를 계산할 때 같이 실행된다. 버튼을 클릭할 때 함수가 실행되도록 해야하니 () 괄호를 쓰면 안된다.

import { useState } from "react";

function test() {
  const [click, setClick] = useState(false);

  function handler() {
    setClick(true);
  }

  return (
    <button onClick={handler}>이벤트</button>
  )
}

삼항연산자

{ click ? <Modal /> : null }

> 클릭이 true일 때 `<Modal />` 컴포넌트 바인딩, false일 때 null 바인딩
>
> <br />
>

{ click && }

> 컴포넌트 함수는 항상 true이기 때문에 논리곱 연산자에 의해 두 조건이 모두 true일 경우 마지막 조건이 반환
>

```jsx
import { useState } from "react";
import Modal from "./components/Modal";

function test() {
  const [click, setClick] = useState(false);

  function handler() {
    setClick(true);
  }

  return (
    <button onClick={handler}>이벤트</button>
    { click ? <Modal /> : null }
    { click && <Modal /> } 
  )
}

props로 함수 전달

props로 값을 키와 value 형태로 내려주는 것과 같이 사용하면 된다. 부모 컴포넌트에서 설정한 키 이름으로 자식 컴포넌트에서 사용 가능

import { useState } from "react";
import Modal from "./components/Modal";

function test() {
  const [click, setClick] = useState(false);

  function handler() {
    setClick(true);
  }

  function closeModal() {
    setClick(false);
  }

  return (
    <button onClick={handler}>이벤트</button>
    { click && <Modal onClose={closeModal}/> } 
  )
}

Modal 컴포넌트

Modal 컴포넌트 부분을 클릭했을 때 부모 컴포넌트에서 내려온 onClose가 실행

function Modal(props) {
  return <div className="modal" onClick={props.onClose} />;
}

react-router-dom

react-router-dom 버전이 업그레이드 되면서 Switch -> Routes component -> element={<component />} 로 변경되었다.

변경 전

import { Route, Switch } from "react-router-dom";
import MeetUpPage from "./pages/MeetUp";

function App() {
  return (
    <div>
      <Switch>
        <Route path="/">
          <MeetUpPage />
        <Route>
      </Switch>
    </div>
  );
}

export default App;

변경 후

import { Route, Routes } from "react-router-dom";
import MeetUpPage from "./pages/MeetUp";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" exact element={<MeetUpPage />} />
      </Routes>
    </div>
  );
}

export default App;

'Switch' is not exported from 'react-router-dom' 에러가 난다면 버전이 업그레이드 됐으니 위와 같은 형식으로 바꿔야한다.

debounce란?

: 특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술   연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것

data 값이 변경될 때 debounce()에 의해 1초 후에 콘솔에 바뀐 값이 찍힌다. watch를 이용해 score의 값이 바뀌는 것을 인식하고 debounce() 실행!

import debounce from "lodash/debounce";

export default {
 data() {
    return {
      str: "",
    };
  },
  watch: {
    str: debounce(function (newVal) {
      if (newVal.length >= 2) {
        console.log(newVal)
      }
    }, 1000),
  },
}

• str에 "안녕하세요"를 입력해서 넣으면 "요"까지 입력한 후 1초 뒤에 콘솔 창에 "안녕하세요"가 뜬다.

웹 보안

SOP (Same Origin Policy)

: 출처가 다를 경우 리소스 상호작용을 하지 못하도록 막는 보안 방식

• 같은 출처는 리소스 상호작용이 자유롭다. 이때 프로토콜, 호스트, 포트가 같아야 같은 출처라고 할 수 있다.
• 태그로 embedding 하는 것은 외부 리소스(출처가 다른 경우)를 가져와도 상호작용이 가능하다.
• 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 사용한다.

CORS (Cross-Origin Resource Sharing)

: 현재 출처에서 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• SOP 정책을 우회해서 사용할 수 있는 방식이다.
• cross-origin HTTP로 리소스를 요청한다면 SOP 정책에 의해 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단된다. 이 때 Access-Control-Allow-Origin 을 통해 cross-origin HTTP 요청을 허가하는 헤더를 추가해주면 된다.

  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
    res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
  });

  
  

웹 브라우저

브라우저가 웹 페이지를 랜더링하는 과정

사용자가 페이지에 접속하면 HTML을 서버에서 내려받게 되고 브라우저 렌더링 엔진에서 파싱(처리)하며 DOM 트리를 만든다. link 태그를 통해 CSS 파싱을 해서 CSSOM 트리를 만든다. DOM 트리와 CSSOM 트리를 결합한 것이 렌더 트리가 되고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산해서 화면에 뿌려준다. 이 과정을 진행하다가 자바스크립트 런타임 환경에 수행 권한을 넘겨 결과 값을 받으면 DOM 파싱은 중단된다.(때문에 대부분의 script 태그는 body 하단에 존재) 모든 노드 수치를 재계산해서 렌더 트리를 재생성하는 과정을 reflow라 하고, 이후 재생성된 렌더 트리를 다시 그리는 것을 repaint라 한다. 리페인트는 레이아웃 수치에 영향을 끼칠 때만 진행된다.

CSS

CSS Sprite

: css에서 이미지를 사용할 때 여러 개의 이미지를 하나로 합쳐서 각 이미지를 background-position 속성을 통해 잘라서 사용하는 기법

• 페이지의 첫 로딩속도를 줄여 서버로의 요청 횟수를 최소화하는 최적화기법중 하나이다.
• 요청 한번으로 사용할 이미지를 한번에 불러 올 수 있기때문에 로딩이 줄어든다. 즉 성능 최적화가 된다는 장점이 있다.
• 이미지를 합쳐서 사용하기 때문에 이미지가 많아지면 오히려 파일의 용량이 커져 로딩이 오래 걸리는 단점이 있다.
• 수정이 많은 이미지에는 사용하기가 어렵다는 단점이 있다.

: 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미

EX) "클릭" 부분을 클릭하면 console 창에 차례로 div, body, html이 뜬다.

<html>
<body>
  <div>클릭</div>
</body>
</html>

const html = document.documentElement;
const body = document.body;
const div = document.querySelector("div");

body.addEventListener("click", () => {
  console.log("body");
});
html.addEventListener("click", () => {
  console.log("html");
});
div.addEventListener("click", () => {
  console.log("div");
});

가장 하위에 있는 div의 이벤트가 최상위에 있는 요소까지 이벤트가 전달됐다. 이것을 이벤트 버블링이라 한다.

이벤트 캡쳐링

: 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

EX) 이벤트리스너의 마지막 매개변수에 boolean 값을 넣으면 capture 값이 할당된다. default 값은 false로, 캡쳐단계를 거치지 않는다는 것을 뜻함. "클릭" 부분을 클릭하면 html 캡쳐 -> body 캡쳐 -> div 캡쳐 -> div -> body -> html의 순서로 출력된다.

<html>
<body>
  <div>클릭</div>
</body>
</html>

const html = document.documentElement;
const body = document.body;
const div = document.querySelector("div");

body.addEventListener("click", () => {
  console.log("body");
});
html.addEventListener("click", () => {
  console.log("html");
});
div.addEventListener("click", () => {
  console.log("div");
});

body.addEventListener("click", () => {
  console.log("body 캡쳐");
}, true);
html.addEventListener("click", () => {
  console.log("html 캡쳐");
}, true);
div.addEventListener("click", () => {
  console.log("div 캡쳐");
},true);

이벤트 대상을 찾아갈 때 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 이벤트가 전달된다. 이것을 이벤트 캡쳐링 이라 한다.

이벤트 위임

이벤트 버블링과 캡쳐링을 통해 이벤트의 흐름을 알아보았다. 이러한 흐름을 이용해 이벤트 리스너가 없어도 마치 리스너가 있는 것 처럼 사용 할 수 있다.

EX) 부모 요소에만 이벤트 리스너를 주었지만 각 버튼을 누르면 버튼의 내용이 "버튼4"로 바뀐다.

<html>
<body>
  <article class="parent">
    <ol>
      <li><button class="btn-first" type="button">버튼1</button></li>
      <li><button type="button">버튼2</button></li>
      <li><button type="button">버튼3</button></li>
    </ol>
  </article>
</body>
</html>

const parent = document.querySelector('.parent');
parent.addEventListener('click', function (event) {
  if (event.target.nodeName === "BUTTON") {
    event.target.innerText = "버튼4";
  }
})

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다. 이것을 이벤트 위임이라 한다.

: 데이터가 없는 HTML(이외에 static 파일들)만 받아오고, 데이터는 HTML문서와 여러 스테틱 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행된다.

Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS가 동작하면서 데이터만을 주고 받아서 Rendering한다.

장점

1. 첫 로딩에 HTML과 static파일들만 다 받으면, 동적으로 빠르게 Rendering하기 때문에 사용자 UX가 뛰어나다.

2. 필요하고 변경된 데이터만 받아올 수 있어 서버 측에서 전체 페이지를 다시 읽어 들이는 것보다 빠른 인터랙션이 가능하다. 즉 서버 부담이 덜하다.

   단점

3. HTML 다운, JS 파일 등 각 종 자원(Resource)을 다운로드한 후에 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.

4. SEO(검색엔진 최적화) 문제가 발생할 수 있다.

   • View를 생성하기 위해선 반드시 JavaScript를 실행시켜야 한다. 하지만, 대부분 웹 크롤러 봇들은 JavaScript파일을 실행시키지 못하기 때문에 HTML에서만 콘텐츠들을 수집하게 되고 CSR페이지를 빈 페이지로 인식하게 된다.

SSR (Server Side Rendering)

: 사용자가 웹 페이지에 접근할 때, 웹 서버에 각각의 페이지에 대한 요청을 하며 웹 서버에서 html, js 파일 등을 다 다운로드하여 화면에 렌더링하는 방식

웹 서버에 요청할 때마다 웹 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

장점

1. SEO(검색엔진 최적화) 가능
2. 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.

   단점

   1. 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.
   2. 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.

SEO란? Search Engine Optimization의 약어로 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 페이지를 구성하여 *검색 결과의 상위에 나올 수 있도록 하는 작업 *

웹 크롤러란? 방대한 웹 페이지를 두루두루 방문하여, 각종 정보를 자동적으로 수집하는 일을 하는 프로그램

참고 CSR, SSR SSR(Sever Side Rendering)과 CSR(Client Side Rendering)

프로젝트를 진행 시 vue로 시작했으나 메타 이미지와 SEO 최적화를 위해 nuxt 프레임워크를 도입해야했다. vue로 완성했지만 nuxt로 변환해주면서 생긴 문제들이 있었다.

Vue vs Nuxt 디렉토리 구조 차이

가장 큰 차이는 router 파일을 따로 안써도 된다는 점!!

Vue router

vue에서는 라우터 연결을 하려면 router 폴더에 js 파일을 만들어서 직접 연결을 해줘야했다.

Nuxt router

하지만 nuxt에서는 pages 폴더에 파일을 만들면 자동으로 라우터 연결을 시켜준다. .nuxt 폴더에 숨겨진 router.js에 자동으로 만들어준다. pages에 questions.vue, tutorial.vue, index.vue 파일이 있는 것이다.

이 때 발생한 문제점

vue에서는 router.js 파일에 props: true 를 선언해두면 페이지가 넘어갈 때 params 값을 넘겨줄 수 있다.

this.$router.push({ name: "Loading", params: { firstTest: true } } );

// Loading.vue
props: ["firstTest"]

Loading이라는 이름을 가진 페이지로 넘어가면서 변수 firstTest의 값 true가 전달되어 사용 가능하다.

nuxt에서는 router.js가 자동 생성되기 때문에 vue처럼 params 값을 넘겨줄 수 없었다. 그래서 찾은 방법은 쿼리로 넘겨주기!

this.$router.push({path: "Loading?firstTest=true"});

// Loading.vue
data() {
    return {
      firstTest: null,
    }
},
created() {
    if (this.$route.query.firstTest) {
      this.firstTest = this.$route.query.firstTest;
    }
}

쿼리를 이용하면 페이지를 따로 만들지 않아도 Loading과 동일한 페이지지만 데이터를 넘겨받을 수 있다. 생각해보면 간단한데 이걸 이틀이나 서치하고 생각했다.

nuxt.config.js

Nuxt.js의 사용자 정의 설정을 포함하는 파일이다. 전역에서 사용될 head, script, css 태그들을 설정하는 곳이다.

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "nuxt",
    htmlAttrs: {
      lang: "ko",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
        integrity:
          "sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm",
        crossorigin: "anonymous",
      },
    ],
    script: [
      {
        src: "https://developers.kakao.com/sdk/js/kakao.js",
      },
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/css/reset.css", "@/assets/css/styles.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    "@nuxtjs/eslint-module",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

};

오늘의 문제점

head 태그 안에 script 태그가 객체로 선언되었기 때문에 name과 value의 형태로 넣어야 했다.

script: [
  {    
      name : "value"
  }
]

```html
<head>
  <script name="value"></script>
</head>

하지만 내가 넣어야하는 것은 스트립트 태그 안에 내용을 넣어야했다. 객체 형태를 유지해야 했기 때문에 이리저리 헤맸는데 알고 보니 엄청 간단한 문제였다. 바로 innerHTML을 이용하는 것!!!

script: [
  {    
      name : "value"
  },
  {
      innerHTML : "텍스트"
  }
]

```html
<head>
  <script name="value"></script>
  <script>텍스트</script>
</head>

간단한 문제 해결 끝~

assets

assets 폴더는 주로 css, style 등 리소스들이 위치한다. 이 디렉토리에 담긴 리소스는 빌드 시 Webpack이 처리한다. 파일 경로를 읽는 것이 아니라 파일을 문자열로 인코딩하여 코드에 삽입하는 방식이다. 파일의 크기가 크다면 인코딩할 때 길이가 길어져 효율성이 떨어지는 단점이 있다.

static

static 폴더는 이미지, 폰트와 같은 정적 리소스들이 위치하게 된다. 이 디렉토리에 담긴 리소스는 Webpack을 거치지 않고 빌드 결과물 디렉터리인 dist 디렉터리로 옮겨진다.

::marker에 margin 값 주기

::marker mdn

marker는 기본 margin 값을 갖고 있다. mdn에서 정의한 6가지 속성만 적용되기 때문에 직접적인 margin 값 조절이 안된다. li를 통해 margin 값을 변경할 수 있다.

<ul>
  <li>
    <span> 참을성이 많고 성실하다. </span>
  </li>
</ul>

li span {
  position : relative;
  margin : -10px;
}

marker의 margin을 직접 조절하는 것이 아니라 span 태그의 margin을 마이너스로 줘서 간격을 줄인 듯한 효과를 나타낸다.

회고

프로젝트 깃 꼬임을 두시간 넘게 풀었다. 간단한 꼬임이었는데 이렇게 오래 걸릴 줄 몰랐다..후 내일은 nuxt.js를 적용해야한다....화이팅...

JavaScript

npm

Node Package Manager의 약자 자바스크립트 패키지 매니저이고 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 패키지를 설치/관리를 수행할 수 있는 CLI를 제공

package.json npm 패키지들을 관리하는 파일 프로젝트의 정보와 프로젝트에서 사용 중인 패키지의 의존성을 관리하게 된다.

• dependency 라이브러리나 프레임워크 같이 실제 프로덕트에서 사용되는 것들이 담긴다.
• devDependency

  개발을 편하게 해주는 도구들이 담긴다.

ETC

단위테스트(unit test)

소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 가장 작은 단위의 테스트 즉, 모든 함수와 메소드에 대한 테스트 케이스(Test case)를 작성하는 절차

단위테스트를 하면 좋은점

1. 연관 컴포넌트가 완성되지 않아도 구현 코드가 정상 작동하는지 알 수 있다. 내가 작성한 구현 코드를 단위테스트를 통해 정확히 작동하는지 검증한다면 연관 컴포넌트가 완성되기 전에 개발이 완료 됐다는 것을 증명할 수 있다.

2. 문제점을 빠르게 발견할 수 있다. 해당 부분만 독립적으로 테스트하기 때문에 빠르게 문제 여부를 확인할 수 있어 코드 리팩토링이 편해지고, 코드 품질을 향상시킬 수 있다.

3. 코드에 대한 문서가 될 수 있다. 배포되는 코드와 일치하므로 항상 최신 상태로 유지되고 코드의 문서라고 볼 수 있다.

** 좋은 단위 테스트 FIRST 규칙** Fast: 테스트는 빠르게 동작하여 자주 돌릴 수 있어야 한다. Independent: 각각의 테스트는 독립적이며 서로 의존해서는 안된다. Repeatable: 어느 환경에서도 반복 가능해야 한다. Self-Validating: 테스트는 성공 또는 실패로 boolean 값으로 결과를 내어 자체적으로 검증되어야 한다. Timely: 적시에 사용해야한다. 테스트하려는 실제 코드를 구현하기 직전에 구현해야 한다.

출처

unit test Clean Code 책

<style scoped>를 사용하면 CSS는 해당 컴포넌트의 엘리먼트에만 적용된다.

soped를 적용하면

<template>
  <div class="example">Hello World</div>
</template>
>
<style scoped>
.example {
  color: blue;
}
</style>

이런 식으로 자동 변환된다.

<template>
  <div class="example" data-v-f123ggf>Hello World</div>
</template>
>
<style scoped>
.example[data-v-f123ggf] {
  color: blue;
}
</style>

부모 컴포넌트에서 scoped를 사용하면 하위 컴포넌트까지 내려간다. 블럭 처리된 부분이 컴포넌트로 삽입된 부분인데 부모인 컨테이너의 scoped가 하위 컴포넌트인 블럭까지 내려간 것을 볼 수 있다. 하위 컴포넌트에서도 style scoped를 사용하였기 때문에 data-v로 시작하는 명이 두개가 되는 것이다.

부모 style에서 태그를 이용해 스타일을 줬다면 하위 컴포넌트에 영향이 갈 가능성이 있으니 class,id를 이용해 스타일을 주는 것을 권장한다.

회고

오늘은 오늘의 집 조은 개발자님의 특강을 들었다. 다른 사람과 차별되는 나만의 무기가 무엇이 있을까 진지하게 고민해야겠다. 지금으로선..전혀 없다.. 그리고 이제부턴 가고 싶은 분야, 회사를 찾아서 분석해봐야겠다. 그 회사에서 무얼 요구하는지, 어떤 사람을 원하는지 지금부터 탐색해야 나중에 기회가 왔을 때 잡을 수 있을 것이다.

구름 IDE로 실습하기

명령어

$ mkdir 폴더이름 : 폴더 생성
$ rmdir 폴더이름 : 폴더 제거
$ pwd : 현재 루트 확인
$ ls : 전체 폴더를 리스트로
$ touch test.txt : test.txt 파일 생성
$ mv 파일명 변경할파일명 : 이름 변경 명령어가 없기 때문에 현재 파일 지우고 다른 파일을 생성
$ cat : 파일 안 내용 읽음
$ more : 대용량 파일 안 내용 읽음(enter 누르면 한 줄씩 읽고, 스페이스는 한 페이지씩, b는 이전페이지, q는 종료)

$ vi test.txt : editing 가능
     i   : 입력모드
        esc : 명령모드
        :wq : 나가기
        dd  : 한 줄 삭제
        yy  : 복사
        p   : 붙여넣기(커서 밑으로)
        i   : 커서 앞으로 텍스트 추가
        a   : 커서 뒤로 텍스트 추가
        o   : 커서 밑 한 줄 추가
          shift + i : 커서를 맨 앞으로
        shift + a : 커서를 맨 뒤로
        shift + v : 여러 줄 선택 가능(이 상태에서 y는 복사, p는 붙여넣기, d는 삭제)
        /찾을 문자열(이 상태에서 n을 누르면 다음 찾은 문자열, N은 이전 문자열)

서버 실행

구름 IDE에서 제공하는 도메인으로 연결되어 서버를 실행할 수 있다.

1. 깃 설치

   $ sudo apt-get install git

   sudo는 Super User Do apt-get은 패키지 매니저! 앱을 다운로드하는 google studio와 같은 역할

2. 원하는 깃 주소 클론

   git clone https://github.com/paullabkorea/10000hour.git

3. 설치되어 있는 패키지들을 최신 버전으로 업데이트

   sudo apt-get update

4. nginx 설치

   sudo apt-get install nginx

5. 해당 경로로 들어가 editing

vi /etc/nginx/sites-available/default

• root /var/www/html; 을 root /workspace/컨테이너이름/web; 으로 변경 (:41 + enter => 변경할 텍스트 위치로 이동)

6. 웹 서버 시작하기

   sudo service nginx start

7. 웹 서버 확인 프로젝트 -> 실행 url과 포트를 들어가서 확인
8. 웹 서버 닫기

   sudo service nginx stop

회고

터미널 명령어는 해도해도 까먹는다. 키보드로만 하는 연습을 해야 나중에 깃도 능숙하게 다룰 수 있을 것 같다. 깃 CLI도 맨날 까먹는...다..ㅎ 더 연습하고 자주 써봐겠다.

Ngrok 홈페이지

Ngrok란?

외부(Public)에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램이다. 도메인을 등록한 척 해주는 프로그램!이라고 이해했다.

Mac에서 Ngrok 실행하기

1. norok에서 맥용 다운받기

2. 다운받은 알집을 풀어서 사용자 폴더에 넣기

맥은 보안상? 바로 실행이 안된다. 터미널을 이용해서 실행해야한다.

3. 터미널을 열어 다음 명령어를 입력

우선 ngrok에 회원가입 후 자신의 고유 토큰을 부여받는다.

./ngrok authtoken 자신 고유의 토큰 입력
./ngrok http 8080

4. Forwarding에 있는 주소로 접속

https://9b07-119~~.ngrk.io 라고 되어 있는 부분이 로컬에 접속할 수 있는 주소! 8시간 유지된다. 이 후에는 다시 주소를 부여받으면 된다. 저 주소를 입력하고 들어가면 외부에서도 나의 로컬주소에 접속이 가능하다.

Ngrok를 언제 사용하나?

사이트를 만들 때 실제 배포 전에 데모를 실행하는 용도로 사용!

회고

프로젝트를 통해 알게되는 새로운 개념들이 많다. 팀원분이 이런거 공부하면 좋아요~하는 것들을 많이 알려주셔서 도움이 많이 된다. 경력있는 분이라 확실히 전문성이 높은게 느껴진다..얼른 취업하고 싶어진다ㅠㅠ

오늘은 멋사 스프린트 회고날! 지난 번에 참여를 못했는데 많은 사람들이 빠지지 않고 참여하는 분위기였다. 잠깐이나마 같이 공부하는 사람들과 대화를 할 수 있어서 좋았다ㅎㅎ 첫 날의 계획이 얼마나 거창했는지 돌아볼 수 있었고, 지킬 수 있는 계획을 짜야겠다고 다짐했다 하하.. 일단 이번 주 목표는 아침 or 저녁에 1시간 달리기 다시 시작하기! 추워도 4일 이상 나가기를 목표로!! 디스크가 도지기 전에 열심히 운동해야겠다..! 또 다른 하나의 목표는 코드 리뷰 받은 것 정리하기! 리뷰 받은 것을 토대로 리팩토링 하기! 두 목표는 꼭 지키리리ㅏ..화이팅팅

라이브러리 vue-clipboard2 이용

vue-clipboard2 가이드

1. vue-clipboard 설치

터미널에 아래와 같이 입력한 후 package.json에 설치되는 것을 확인한다.

npm install --save vue-clipboard2

2. 사용하기 위해 Vue에 올린다.

main.js에 vue-clipboard2를 통해 import 시켜준다. import 해온 것을 Vue.use에 등록해주면 vue에서 사용 가능! index.html에 스크립트 vue.min.js를 추가해준다.

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard)

<script src="vue.min.js"></script>

3. 함수 구현

버튼을 클릭했을 때 현재 주소가 복사되게 함수 구현 window.location.href를 통해 현재 주소를 homeLink 변수에 저장하여 사용

<template>
  <div id="app">
    <button type="button" @click="urlLink">Copy!</button>
  </div>
</template>

<script>
export default { 
 data() {
    return {
      homeLink: window.location.href,
    };
 },
 methods: {
    urlLink() {
      this.$copyText(this.homeLink).then(function () {
        alert("복사되었습니다.");
      });
    },
 }, 
}
</script>

회고

진행 중인 프로젝트에서 사용해 본 기능이다. 라이브러리를 이용하니깐 간단한 코드로도 클립보드 기능을 구현할 수 있어서 편했다. 예전에는 document.execCommand을 이용해 구현했지만 더이상 권장하지 않는 기능이라고 한다. 다음에는 clipboard.js를 이용해서 구현해 봐야겠다.

자식 요소를 가운데 정렬 시키는 법 2가지

<div class="parent">
  <div class="child"></div>
</div>

1. display:flex 이용

부모 요소에 display: flex를 주고, justify-content와 align-items를 center를 주면 자식 요소가 가운데로 정렬된다.

.parent{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:200px;
  height:300px;
  background: #000;
}

.child{
  width:50px;
  height:50px;
  background: pink;
}

2. position 이용

자식 요소에 position:absolute를 주어 부모 요소를 기준으로 top,left를 50%를 준다. 이 때 가운데로 가는 것은 자식 요소의 꼭지점에 해당하는 부분이기 때문에 완전히 가운데로 가게 하려면 translate을 이용해 x축,y축으로 자식의 크기의 반만큼 움직여야 자식 요소가 완전히 가운데로 오게 된다.

.parent{
  position:relative;
  width:200px;
  height:300px;
  background: #000;
}

.child{
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  left:50%;  
  transform:translate(-50%, -50%);
  background: pink;
}

웹 접근성 포커스 처리

버튼이나 링크 태그 안에 들어간 이미지 태그의 위치를 잡을 때 이미지 태그에 하지 않고 버튼이나 링크 태그에 스타일을 줘서 포커스 놓치지 말기! :focus를 이용해 포커스가 없는 곳은 포커스 주기

회고

웹 접근성을 고려하려면 마크업과 css가 생각보다 오래 걸리고 할게 많다. 어제 클론 코딩한 코드 리뷰를 받았는데 웹 접근성을 고려하지 않은 부분도 있어서 아직 확실히 고쳐야할게 너무너무너무 많다. 주말동안 리뷰를 토대로 리팩토링 해서 다시 올려야겠다.

자판기 클론 코딩

새로 배운 부분

1. 스크린 리더가 읽을 수 있게 html에 파트마다 설명을 붙이고, css로 숨겨준다.

헤딩 태그로 각 파트마다 어떤 화면인지 설명을 붙인다.

<h1 class="tit-app ir">cola cola</h1>
<h2 class="ir">자판기 화면</h2>
<h2 class="ir">나의 정보 화면</h2>

.ir {
    display: block;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    font-size: 1px;
    line-height: 0;
    color: transparent;
}

2. 몇 번째 자식부터 ~ li가 끝날 때 까지 선택하는 코드

3번째 자식부터 5번째 자식에게 margin을 줄 때 사용

<ul>
  <li>1번째</li>
  <li>2번째</li>
  <li>3번째</li>
  <li>4번째</li>
  <li>5번째</li>
</ul>

.vending-machine .list-item li:nth-child(3)~li {
    margin-top: 12px;
}

오징어게임 프로젝트

결과 페이지를 모달 창으로 하려다가 재사용성을 고려해서 그냥 라우터로 연결했다. 오늘은 결과 페이지들 html, css 수정하고 라우터 연결해줬다.

회고

아직도 시맨틱 태그 다는게 어렵지만 경험이 쌓이면 금방 늘 수 있을 것이라 생각한다. 오늘은 한 페이지 만드는데 4시간이나 걸렸다.. 익숙하게 사용할 때까지 열심히 연습해야쥐 오징어게임 프로젝트도 거의 다 끝나간다. 완벽하게 끝낼 수 있게 노력하쟈 아자

AddThis

1. 웹이나 앱을 만들 때 공유 기능을 편리하게 만들어주는 사이트

사진처럼 공유 버튼도 만들어주고 기능도 만들어준다. 스크립트를 추가하고, html 태그를 추가해주면 공유 버튼이 완성된다.

<!-- Go to www.addthis.com/dashboard to customize your tools --> 
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6194aec8c8e5e3da"></script>

<!-- Go to www.addthis.com/dashboard to customize your tools --> 
<div class="addthis_inline_share_toolbox_asz1"></div>

가비아

2. 도메인을 저렴하게 살 수 있는 사이트

특정 도메인을 1년에 500원이라는 가격에 살 수 있다.

회고

오늘은 쉬어가는 시간으로 유튜버 조코딩님의 특강을 들었다. 어제 vue로 sns 공유 기능을 만들었는데 이걸 더 쉽게 만들어주는 사이트를 알게 됐다..! 물론 직접 코딩하는 것도 어렵진 않지만 만들어진 걸 사용해도 나쁘지 않을 것 같다.