IT EVERYTHING

전체 글

개발자 도구의 Sources 탭 기능을 활용해 플래그를 찾아보세요. 2023.10.20
할로윈 파티를 기념하기 위해 호박을 준비했습니다! 호박을 10000번 클릭하고 플래그를 획득하세요! 2023.10.20
Webhacking.kr 1번 2023.10.17
REACT HOOKS 2021.05.02
할리스 와이파이(WIFI) 비밀번호 2021.04.26
C언어 튜터링 #4 2021.04.02
C언어 튜터링 #3 2021.03.26
4차 산업 혁명과 UX 2021.03.25

개발자 도구의 Sources 탭 기능을 활용해 플래그를 찾아보세요.

ITTHING 2023. 10. 20. 10:21

2023. 10. 20. 10:21

소스코드를 받으면 하나의 웹페이지가 나온다.

index.html 에서 f12를 누른후

ctrl + shift + f를 누르고 DH를 검색했더니...

완료!

'웹해킹 > dreamhack' 카테고리의 다른 글

할로윈 파티를 기념하기 위해 호박을 준비했습니다! 호박을 10000번 클릭하고 플래그를 획득하세요! (0)	2023.10.20

할로윈 파티를 기념하기 위해 호박을 준비했습니다! 호박을 10000번 클릭하고 플래그를 획득하세요!

ITTHING 2023. 10. 20. 09:37

2023. 10. 20. 09:37

우연찮게 webhacking.kr 문제를 풀다가 dreamhack이라는 사이트를 발견했다!!

해킹이라고 해서 강의가 유료인줄 알았지만 다행스럽게 무료 사이트다!

열심히 공부해야겠다!!

문제를 다운받으면

html코드가 있고 그안에 css, js가 있다.

html 파일을 실행시켜보면...

pumpkin이 있고 pumpkin 밑에 10000 more clicks to go!라는 문장이 있다.

10000을 클릭하면 flag 값을 얻을 수 있는 문제인것 같다.

처음에는 10000번을 클릭하려다가 클릭하려고 만든 문제가 아닌것 같아서. 코드를 봤다.

html 코드를 다 캡쳐해서 넣기엔 양이 많기 때문에

포인트가 되는 코드만 캡쳐를 해보겠다.

코드 하단부를 보면 이렇게 click 이벤트 함수가 있는데

counter를 10000로 만들어주면 될것 같다.

실행하면

위 코드를 보면 counter 가 10000 초과일때 실행하는 if문인데 애니메이션과 이것저것 실행시켜주는 함수다

이걸보고 counter를 10000으로 만들면 되겠다 싶었다.

??? : 아까 counter가 10000초과일때 if문이 실행되는데 왜 counter를 10000으로 만들죠?

A : 밑 코드를 보자

우리가 만든 while문 밑에 counter += 1이 있다.

이건 counter = counter + 1인데

while에서 counter가 10000일때도 실행이 되는데

밑에 counter를 1증가시켜준다.

간단한 문제였지만 아직까지 쉬운문제더라도 힘들다.

웹 개발공부도 열심히 해야겠다고 다시한번 느낀 순간이다.

'웹해킹 > dreamhack' 카테고리의 다른 글

개발자 도구의 Sources 탭 기능을 활용해 플래그를 찾아보세요. (0)	2023.10.20

Webhacking.kr 1번

ITTHING 2023. 10. 17. 16:47

2023. 10. 17. 16:47

웹 개발을 지속적으로 공부를 하면서 웹보안에도 신경을 써야한다는걸 뒤늦게 알아서

webhacking 으로 웹보안 공부를 하기로 했다.

1번

<?php
  include "../../config.php";
  if($_GET['view-source'] == 1){ view_source(); }
  if(!$_COOKIE['user_lv']){
    SetCookie("user_lv","1",time()+86400*30,"/challenge/web-01/");
    echo("<meta http-equiv=refresh content=0>");
  }
?>
<html>
<head>
<title>Challenge 1</title>
</head>
<body bgcolor=black>
<center>
<br><br><br><br><br>
<font color=white>
---------------------<br>
<?php
  if(!is_numeric($_COOKIE['user_lv'])) $_COOKIE['user_lv']=1;
  if($_COOKIE['user_lv']>=4) $_COOKIE['user_lv']=1;
  if($_COOKIE['user_lv']>3) solve(1);
  echo "<br>level : {$_COOKIE['user_lv']}";
?>
<br>
<a href=./?view-source=1>view-source</a>
</body>
</html>

위코드는 메인화면에 view-source링크를 클릭하면 볼 수 있는 코드다.

php언어에 대해서 잘 몰랐기에 천천히 코드를 분석하면서 문제를 풀었다.

첫번째 php는

만약 view-source가 1이면 view_source를 실행시키고

만약 COOKIE가 없다면(?) user_lv을 설정하는데 값은 1로 한다.

두번째 php는

만약 user_lv이 숫자가 아니면 user_lv을 1로 설정

만약 user_lv이 4이상이면 user_lv을 1로 설정

만약 user_lv이 3이상이면 user_lv을 1로 설정

여기서 주목해야되는 점은 user_lv이다.

코드를 분석하면서 user_lv이 1로 안만들면 문제를 풀 수 있을 것 같았다.

3 < user_lv <= 4 인 것이다.

그래서 4를 넣어봤지만 되지 않아서 3.5를 넣었더니 문제가 풀렸다.

코드를 수정해야되는줄 알았지만 chrome에 cookie 값을 설정할 수 가 있다!

chrome 개발자도구를 키고 Application에 Cookies를 들어가면

name이 user_lv이 있는데 Value를 3.5로 만들었다.

Enter를 하고 페이지에서 새로고침을 하면!

완료!

문제를 푸느라 되게 이것저것 만져봤지만 잘 안됬다.

3시간동안 문제를 푸느라 힘들었지만 그래도 문제를 풀어서

좋았다.

REACT HOOKS

ITTHING 2021. 5. 2. 00:23

2021. 5. 2. 00:23

hook 을 배우기 위해서 npx create-react-app hooks-tuotrial 을 해주세요!

1. useState

useState는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고

있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면

이 Hook 을 사용하시면 됩니다.

한번 이 기능을 사용해서 숫자 카운터를 구현해보겠습니다.

src 디렉터리에 Counter.js 파일을 생성하고 다음 코드를 입력해보세요

Counter.js

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

export default Counter;

Counter 컴포넌트를 렌더링

App.js

import React from 'react';
import './App.css';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

1.1 useState 를 여러번 사용하기

하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 만약에 컴포넌트에서

관리해야 할 상태가 여러 개라면 useState 를 여러번 사용하면 된다.

src 디렉터리에 Info.js 파일을 생성하고 다음의 코드를 작성하세요

Info.js

import React, { useState } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름: </b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

App 컴포넌트에서 렌더링

App.js

import React from 'react';
import './App.css';
import Info from './Info';

const App = () => {
  return <Info />;
};

export default App;

2. useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는

Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를

합칭 형태로 보아도 무방

Info 컴포넌트에 useEffect 를 적용

Info.js

import React, { useState, useEffect } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  useEffect(() => {
    console.log('렌더링이 완료되었습니다!');
    console.log({
      name,
      nickname,
    });
  });

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름: </b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

2.1 마운트 될 때만 실행하고 싶을 때

만약 useEffect 에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고

업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는

배열을 넣어주시면 됩니다.

Info.js - useEffect

useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

2.2 특정 값이 업데이트 될 때만 실행하고 싶을 때

useEffect 를 사용 할 때 특정 값이 변경이 될 때만 호출하게 하고 싶을 경우도 있을

것입니다.

Info.js - useEffect

 useEffect(() => {
    console.log(name);
  }, [name]);

배열 안에는 useState 를 통해 관리하고 있는 상태를 넣어줘도 되고 , props로 전달받은

값을 넣어주어도 됩니다.

2.3 뒷정리 함수

만약 컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고

싶다면 useEffect 에서 뒷정리(cleanup) 함수를 반환해주어야 합니다.

Info.js - useEffect

useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

App.js

import React, { useState } from 'react';
import './App.css';
import Info from './Info';

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setVisible(!visible);
        }}
      >
        {visible ? '숨기기' : '보이기'}
      </button>
      <hr />
      {visible && <Info />}
    </div>
  );
};

export default App;

만약에 , 오직 언마운트 될 때만 뒷정리 함수를 호출하고 싶으시다면 useEffect 함수의

두번째 파라미터에 비어있는 배열을 넣으시면 됩니다.

Info.js - useEffect

  useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

3. useContext

이 Hook 을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있습니다

src 디렉터리에 ContextSample.js 이라는 컴포넌트를 만들어보세요

ContextSample.js

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme,
  };
  return <div style={style} />;
};

export default ContextSample;

App.js

import React from 'react';
import ContextSample from './ContextSample';

const App = () => {
  return <ContextSample />;
};

export default App;

4. useReducer

useReducer 는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른

값으로 업데이트해주고 싶을 사용하는 Hook.

Reducer는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아

새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들 때는 꼭

불변성을 지켜주어야 합니다.

4.1 카운터 구현하기

먼저, 기존의 Counter 컴포넌트를 useReducer 를 사용하여 다시 구현

Counter.js

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b> 입니다.
      </p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
    </div>
  );
};

export default Counter;

useReducer 의 첫번째 파라미터는 리듀서 함수, 그리도 두번째 파라미터는 해당 리듀서의

기본 값을 넣어줍니다. 이 Hook을 사용 했을 때에는 state 값과 dispatch 함수를 받아오게

되는데요, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는

함수입니다. dispatch(action) 와 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면

리듀서 함수가 호출되는 구조입니다.

useRedcuer 을 사용했을 때의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로

빼낼 수 있다는 점 입니다.

App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

4.2 인풋 상태 관리하기

이번에는 useReducer 를 사용하여 Info 컴포넌트에서 인풋 상태를 관리해보겠습니다.

기존에는 인풋이 여러 개여서 useState 를 여러번 사용했는데요, useReducer 를 사용한다면

우리가 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name 을

참조하여 setState 를 해준 것과 유사한 방식으로 작업을 처리 할 수 있습니다.

Info.js

import React, { useReducer } from 'react';

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: '',
  });
  const { name, nickname } = state;
  const onChange = e => {
    dispatch(e.target);
  };

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

App.js

import React from 'react';
import Info from './Info';

const App = () => {
  return <Info />;
};

export default App;

5. useMemo

useMemo 를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있습니다.

먼저 리스트에 숫자들을 추가하면 해당 숫자들의 평균을 나타내는 함수형 컴포넌트를

작생해 봅시다.

src 디렉터리에 Averge.js 파일을 생성하세요

Average.js

import React, { useState } from 'react';

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };
  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  return (
    <div>
      <input value={number} onChange={onchange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균 값:</b> {getAverage(list)}
      </div>
    </div>
  );
};

export default Average;

App.js

import React from 'react';
import Average from './Average';

const App = () => {
  return <Average />;
};

export default App;

평균 값은 잘 보여지고 있는데, 숫자를 등록할 때뿐만 아니라 인풋 내용이 수정 될 때도

우리가 만든 getAverage 함수가 호출되고 있는것을 확인 할 수 있습니다. 인풋 내용이 바뀔

땐 평균 값을 다시 계산 할 필요가 없는데, 이렇게 렌더링 할 때마다 계산을 하는 것은 낭비.

useMemo Hook 을 사용하면 이러한 작업을 최적화 할 수 있습니다. 렌더링 하는 과정에서

특정 값이 바뀌었을 때만 연산을 실행하고 만약에 원하는 값이 바뀐 것이 아니라면 이전에

연산했던 결과를 다시 사용하는 방식입니다.

Average.js

import React, { useState, useMemo } from 'react';

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = e => {
    setNumber(e.target.value);
  };
  const onInsert = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균 값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

list 배열의 내용이 바뀔 때에만 getAverage 함수가 호출

6. useCallback

useCallback 은 useMemo 와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야

하는 상황에서 사용하는데요, 이 Hook 을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성

할 수 있습니다.

우리가 방금 구현한 Average 컴포넌트를 보면, onChange 와 onInsert 라는 함수를

선언해주었습니다. 이렇게 선언을 하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이

새로 생성됩니다. 대부분의 경우에는 이러한 방식이 문제가 되지 않지만, 컴포넌트의

렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 이 부분을

최적화 해주시는 것이 좋습니다.

Average.js

import React, { useState, useMemo, useCallback } from 'react';

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []);

  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
    },
    [number, list]
  );

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균 값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

useCallback 의 첫번째 파라미터에는 우리가 생성해주고 싶은 함수를 넣어주고, 두번째

파라미터에는 배열을 넣어주면 되는데 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로

생성해주어야 하는지 명시해주어야 합니다.

만약에 onChange 처럼 비어있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 단 한번만

함수가 생성되며, onInsert 처럼 배열 안에 number 와 list 를 넣게 되면 인풋 내용이

바뀌거나 새로운 항목이 추가 될 때마다 함수가 생성됩니다.

7. useRef

useRef Hook 은 함수형 컴포넌트에서 ref 를 쉽게 사용 할 수 있게 해줍니다. Average

컴포넌트에서 등록 버튼을 눌렀을 때 포커스가 인풋 쪽으로 넘어가도록 코드를

작성해보겠습니다.

import React, { useState, useMemo, useRef, useCallback } from 'react';

const getAverage = numbers => {
  console.log('평균값 계산중..');
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');
  const inputEl = useRef(null);

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성
  const onInsert = useCallback(
    e => {
      const nextList = list.concat(parseInt(number));
      setList(nextList);
      setNumber('');
      inputEl.current.focus();
    },
    [number, list]
  ); // number 혹은 list 가 바뀌었을 때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균 값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

7.1 로컬 변수 사용하기

추가적으로, 컴포넌트 로컬 변수를 사용해야 할 때도 useRef 를 활용 할 수 있습니다. 여기서

로컬 변수라 함은, 렌더링이랑은 관계 없이 바뀔 수 있는 값을 의미합니다. 만약에 클래스

형태의 컴포넌트로 따지자면 다음과 같은 코드입니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  id = 1
  setId = (n) => {
    this.id = n;
  }
  printId = () => {
    console.log(this.id);
  }
  render() {
    return (
      <div>
        MyComponent
      </div>
    );
  }
}

export default MyComponent;

이러한 코드를 함수형 컴포넌트로 작성한다면 다음과 같이 할 수 있습니다.

import React, { useRef } from 'react';

const RefSample = () => {
  const id = useRef(1);
  const setId = (n) => {
    id.current = n;
  }
  const printId = () => {
    console.log(id.current);
  }
  return (
    <div>
      refsample
    </div>
  );
};

export default RefSample;

8. 커스텀 Hooks 만들기

만약에 여러 컴포넌트에서 비슷한 기능을 공유하게 되는 일이 발생한다면 이를 우리들만의

Hook 을 작성하여 로직을 재사용 할 수 있습니다.

8.1 useInputs

한번 우리가 기존에 Info 컴포넌트에서 여러개의 인풋을 관리하기 위하여 useReducer 로

해결했던 작성했던 로직을 useInputs 라는 Hook으로 따로 분리해보겠습니다

src 디렉터리에 useInputs.js 파일을 만들고 다음 코드를 작성해보세요

useInputsjs

import { useReducer } from 'react';

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);
  const onChange = e => {
    dispatch(e.target);
  };
  return [state, onChange];
}

Info.js

import React from 'react';
import useInputs from './useInputs';

const Info = () => {
  const [state, onChange] = useInputs({
    name: '',
    nickname: '',
  });
  const { name, nickname } = state;
  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

8.2 usePromise

이번에는 함수형 컴포넌트에서 Promise 를 더 쉽게 사용 할 수 있는 Hook 을 만들어봅시다.

src 디렉터리에 usePromise.js 파일을 생성하고 다음 코드를 입력해보세요

usePromise.js

import { useState, useEffect } from 'react';

export default function usePromise(promiseCreator, deps) {
  const [resolved, setResolved] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const process = async () => {
    setLoading(true);
    try {
      const result = await promiseCreator();
      setResolved(result);
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

  useEffect(() => {
    process();
  }, deps);

  return [loading, resolved, error];
}

위 커스텀 훅에서는 useState와 useEffect 를 함께 사용하였습니다. 이 함수는 프로미스를

생성하는 promiseCreator 와, 언제 프로미스를 새로 만들지에 대한 조건을 위한 deps

배열을 파라미터로 받아옵니다. 이 deps 배열은 useEffect 의 두번째 파라미터로 전달되며,

기본값은 비어있는 배열입니다.

UsePromiseSample.js

import React from 'react';
import usePromise from './usePromise';

const wait = () => {
  // 3초 후에 끝나는 프로미스를 반환
  return new Promise(resolve =>
    setTimeout(() => resolve('Hello hooks!'), 3000)
  );
};
const UsePromiseSample = () => {
  const [loading, resolved, error] = usePromise(wait, []);

  if (loading) return <div>로딩중..!</div>;
  if (error) return <div>에러 발생!</div>;
  if (!resolved) return null;

  return <div>{resolved}</div>;
};

export default UsePromiseSample;

App.js

import React from 'react';
import UsePromiseSample from './UsePromiseSample';

const App = () => {
  return <UsePromiseSample />;
};

export default App;

velog.io/@velopert/react-hooks

리액트의 Hooks 완벽 정복하기

React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히

velog.io

할리스 와이파이(WIFI) 비밀번호

ITTHING 2021. 4. 26. 19:58

2021. 4. 26. 19:58

C언어 튜터링 #4

ITTHING 2021. 4. 2. 03:35

2021. 4. 2. 03:35

구구단 출력

int gogodanNum;
	printf("몇단 출력할까? ");
	scanf("%d", &gogodanNum);

	for (int i = 1; i < 10; i++) {
		printf("%d * %d = %d\n", gogodanNum, i, gogodanNum * i);
	}

1부터 입력한 숫자까지 누적 합계 프로그램

	int whatNum;
	int sum = 0;
	printf("숫자 : ");
	scanf("%d", &whatNum);

	for (int j = 1; j <= whatNum; j++) {
		sum += j;
	}

	printf("%d", sum);

함수 :

int main()
{

	

	return 0;
}

int main() => 정수형 자료형인 main함수

return 0 => 함수의 자료형이 int이기 때문에 return 0

int multiple(int number) 
{
	int result;
	result = number * 2;

	return result;
}

int main()
{
	int num;
	printf("숫자를 입력해주세요 : \n");
	scanf("%d", &num);
	
	multiple(num);
	printf("%d", multiple(num));
	

	return 0;
}

코드 설명 :

숫자를 입력받고 num에 저장

multiple() 호출하는데,,, multiple(num) => 입력받은 값을 multiple에 전달

multiple에 int number 에는 전달된 값이 저장

입력받은 값에 * 2 후 result 값 반환

printf()함수는 multiple에서 반환된 값 출력

함수를 이용해서 구구단 프로그램

int gugudan(int number) 
{
	for (int i = 0; i < 10; i++) {
		printf("%d * %d = %d\n", number, i, number * i);
	}
}


int main()
{
	int a;
	printf("입력 : ");
	scanf("%d", &a);

	gugudan(a);

	return 0;
}

전역변수:

전역변수는 모든 소스코드 내에서 사용가능!

지역변수:

- 지역변수는 그 함수 내에서만 사용가능하고 다른 함수에서는 사용 불가능

main에서 변수를 선언했다고 해도 다른 함수에서는 사용 불가능!

- 같은 이름의 변수를 다른 함수에서 선언했다면 이름은 같지만 다른 변수!

구구단, 누적 프로그램

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

void gugudan(int number) 
{
	for (int i = 0; i < 10; i++) {
		printf("%d * %d = %d\n", number, i, number * i);
	}
}

int nujuck(int nujuckNumber) {
	int sum = 0;
	for (int j= 0; j <= nujuckNumber; j++)
	{
		sum += j;
	}
	return sum;
}


int main()
{
	int a;
	printf("입력 : ");
	scanf("%d", &a);

	printf("\n");
	printf("구구단 출력 프로그램\n\n");
	gugudan(a);

	printf("\n");
	printf("============\n\n");

	printf("누적 값 출력 프로그램\n\n");
	printf("1부터 입력 값까지 더한 값 : %d", nujuck(a));

	return 0;
}

'Programming Language > C' 카테고리의 다른 글

C언어 튜터링 #3 (0)	2021.03.26
C언어 튜터링 #2 (0)	2021.03.24
C언어 튜터링 # 1 (0)	2021.03.19
c언어 #17 (0)	2020.03.23
c언어 #16 (0)	2020.03.23

C언어 튜터링 #3

ITTHING 2021. 3. 26. 01:40

2021. 3. 26. 01:40

for 문

int i;

	for (i = 0, i < 5; i++;) {
		printf("5번 출력");
	
	}

<코드 설명>

정수형 i 선언

for 문을 만남 -> i = 0 , i < 5 참 -> printf문 실행

-> 다시 위로 올라감 -> i++ 만남 -> i 증가 -> i < 5 참 -> printf문 실행

-> i = 4 일때는 i++로 i가 5로 증가되므로 i < 5 거짓 -> for문 종료for 문

10 번 출력 (100번은 눈이 아파서,,,)

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

int main() 
{
	for (int i = 0; i < 10; i++) {
		printf("10번 출력\n");
	}
}

while 문

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

int main() 
{
	int i = 0;
	while (i < 5)
	{
		printf("안녕!\n");
		i++;
	}
	return 0;
}

<코드 설명>

i = 0 -> while문 만남 -> i < 5 참 -> printf문 실행 -> i 증가 -> while 문 -> i < 5 참

->printf문 실행 -> i 증가

i++ 에서 5로 증가되면 -> i < 5 거짓 -> while 문 종료

중첩 for문 별찍기!

*****

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

int main()
{
	int i;
	int j;

	for (i = 0; i < 5; i++) {
		for (j = 0; j < 5; j++) {
			printf("*");
		}
		printf("\n");
	}


	return 0;
}

for (i = 0; i < 5; i++) {
	for (j = 6; i < j-1 ; j--) {
		printf("*");
	}
	printf("\n");
}

for (i = 0; i < 5; i++) {
	for (j = 0; j <= i; j++) {
		printf("*");
	}
	printf("\n");
}

'Programming Language > C' 카테고리의 다른 글

C언어 튜터링 #4 (0)	2021.04.02
C언어 튜터링 #2 (0)	2021.03.24
C언어 튜터링 # 1 (0)	2021.03.19
c언어 #17 (0)	2020.03.23
c언어 #16 (0)	2020.03.23

4차 산업 혁명과 UX

ITTHING 2021. 3. 25. 22:47

2021. 3. 25. 22:47

4차 산업 혁명과 UX의 상관관계

Industry 1.0

- 기술의 혁신과 새로운 제조 공정

- 대량 생산

- 인간의 노동력 대체

Industry 2.0

- 석유를 동력으로 활용

- 전기가 새로운 동력

- 컨베이어 벨트

- 전기 장치를 이용한 엔터테인먼트 제품들이 개발

Industry 3.0

- 인터넷 커뮤니케이션 기술과 재생 가능한 에너지의 결합

- 수평적으로 이루는 수단

Industry 4.0: Product as a Service

- 모든 분야에 영향을 미치는 다양한 신기술

- 초스피드, 초자동화, 초연결

UX 디자인은 사용자 관점에서 디자이너가 해야 할 일이 무궁무진한 분야

✔ 인간을 이해하고 공감할 것

✔ 문제를 파악하고 관찰할 것

✔ 윤리적인 책임을 가질 것

'WEB > UI UX' 카테고리의 다른 글

UI 디자인과 Interaction 디자인 법칙 #2 (0)	2021.03.25
UI 디자인과 Interaction 디자인 법칙 #1 (0)	2021.03.25
UX 디자인 기본 개념 (0)	2021.03.25

PREV 이전 1 2 3 4 ···18 NEXT 다음

전체 글

'웹해킹 > dreamhack' 카테고리의 다른 글

'웹해킹 > dreamhack' 카테고리의 다른 글

1. useState

1.1 useState 를 여러번 사용하기

2. useEffect

2.1 마운트 될 때만 실행하고 싶을 때

2.2 특정 값이 업데이트 될 때만 실행하고 싶을 때

2.3 뒷정리 함수

3. useContext

4. useReducer

4.1 카운터 구현하기

4.2 인풋 상태 관리하기

5. useMemo

6. useCallback

7. useRef

7.1 로컬 변수 사용하기

8. 커스텀 Hooks 만들기

8.1 useInputs

8.2 usePromise

구구단 출력

1부터 입력한 숫자까지 누적 합계 프로그램

함수 :

코드 설명 :

함수를 이용해서 구구단 프로그램

전역변수:

지역변수:

구구단, 누적 프로그램

'Programming Language > C' 카테고리의 다른 글

for 문

10 번 출력 (100번은 눈이 아파서,,,)

while 문

중첩 for문 별찍기!

'Programming Language > C' 카테고리의 다른 글

4차 산업 혁명과 UX의 상관관계

UX 디자인은 사용자 관점에서 디자이너가 해야 할 일이 무궁무진한 분야

'WEB > UI UX' 카테고리의 다른 글

티스토리툴바