ninanung

5.블럭과 테이블

5-1.블럭

블럭은 이 문법 설명서를 쭉 보면서 가장 많이 본 부분이기도 합니다. 제가 코드를 보여드릴 때 회색 상자에 코드를 넣었던 것을 기억하실 겁니다. 만약 그 회색 상자가 아니라 그냥 깃헙 기스트에 작성했다면 알아서 변환되어 보이기 때문에 코드를 그대로 보여줄 수 없었을 겁니다. 이걸 해결하기 위한 문법이 바로 코드블럭입니다. 코드블럭을 만드는 방법은 여러가지가 있는데 가장 쉬운 방법부터 올라가 보도록 하겠습니다.

먼저 가장 쉬운 방법은 스페이스바를 4번 누르는 방법입니다.

    for(i=0; i<10; i++) {
    	cout << “게임하고싶다” << endl;

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 4탄 - useCallback/useRef

useCallback

React에서 컴포넌트가 다시 렌더링 될 때에는 컴포넌트 안에 선언된 함수들을 새로 생성합니다. 결국 계속해서 렌더링 되면 함수도 계속해서 새로 생성된다는 얘기입니다. 딱 들어봐도 비효율의 냄새가 나지 않습니까? 이런 비효율적인 작태를 React팀이 그냥 보고 넘어갔을 리 없겠죠. 그래서 나온것이 useCallback입니다. 저번 글의 useMemo와 비슷하게 퍼포먼스와 효율성을 위한 개념으로 만들어 졌습니다. 해당 기능을 사용하기 전의 코드를 먼저 보겠습니다.

const UseCallbackExample = () => {
  const [string, setString] = useState('');

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 3탄 - useContext/useMemo

useContext

useContext를 알기 위해서는 먼저 React의 Context기능에 대해서 알아야 합니다. 해당 기능에 대한 설명은 공식 페이지에 자세하게, 심지어 한글로 적혀있으니 모르겠다 하시는 분들은 먼저 보시는걸 추천합니다. Context, 그것은 React에서 props를 넘기는 과정을 돕기위해 만들어 졌습니다. 저-기 밑에있는 컴포넌트를 위해 자식 컴포넌트마다 props를 넘기는 건 비효율적이니까요. 하지만 그렇게 만들어진 Context조차도 완벽하지는 않았습니다. 함수형 컴포넌트에서 하나의 Context를 위해서는 하나의 Wrapper가 필요한데, 이 말은 결국 많은 Context를 위해서는 많은 Wrapper가 필요해진다는 말입니다. 결국 복잡한 React 프로젝트를 Wrapper Hell로 만들어 버리기 충분한 수준입니다. 이러한 문제를 해결하기 위해서 useContext가 탄생했습니다.

useContext는 더이상 함수형 컴포넌트에서 Context를 사용하기 위해

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 1탄 - 개요/useState

나온지가 언제인데 지금에서야 이걸...?

그건 제가 이제서야 이걸 알았기 때문입니다. 늦게라도 알았으니 시작해야죠 별수 있나요.

개요

ninanung

<div id="app">test-component</div>
<script>
(function() {
    // vue init
    landing.createApp('#app', {
        test: 'test'
    });
}());
</script>

ninanung

<template>
    <div>
        Hello World!!!
    </div>
</template>

ninanung

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

// 개발환경인지 아닌지 판단하여 맞으면 true를, 아니면 false를 저장한다
const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    // 개발모드를 설정
    mode: process.env.NODE_ENV,
    // 빌드시 중심이 될 파일을 설정한다. 여기서는 Vue프로젝트의 root파일인 index.js파일을 설정했다.

ninanung

{
  "name": "vue-in-the-php",
  "version": "1.0.0",
  "description": "pack of code for Medium story example code",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "vue": "cross-env NODE_ENV=development webpack --config webpack.config.landing --watch",
    "vue:build": "cross-env NODE_ENV=production webpack --config webpack.config.landing"
  },

ninanung

webpack.config.js 에서 resolve alias사용

resolve: {
  extensions: [ '.js', '.vue', '.json' ],
  alias: {
    '@': path.resolve( __dirname, '..' )
  }
}

이렇게 사용하면 @를 통해 쉽게 import 할 수 있다.

ninanung

AVL Binary Tree

목차

• Interance
• So, what is AVL tree?
• Before rotation
• Rotation
• End