och_changhoon.log

[react] 검색 API 사용할 때 딜레이 주기

Sun, 14 Aug 2022 09:32:08 GMT

Prologue

Search API를 통해 검색을 하고있던 찰나였다. onChange가 하나하나 바뀔 때 마다 통신을 하니 웹페이지가 너무 버벅이길래, 사용자의 입력이 끝난 후 지정한 시간을 초과하고 나서 통신을 할 수 있도록 구현했다.

What?

setTimeout & useEffect.

How?

useEffect 안에 setTimeout을 걸어놓고, 그 안에 실행되는 함수로써 request()를 넣어주면 완성!

async function request() {
    const res = await fetch(
      `http://10.58.1.43:3000/search/products?keyword=${searchValue}`
    );
    const result = await res.json();
    setSearchedValue(result.result);
  }

  useEffect(() => {
    const timeoutExecute = setTimeout(() => request(), 500);
    return () => clearTimeout(timeoutExecute);
  }, [searchValue]);

[javascript]카카오 API로 로그인하기 - javascript, 액세스 토큰 받아오기

Sun, 14 Aug 2022 09:25:22 GMT

Prologue

카카오 로그인을 구현하기 위해 연습용으로 javascript로 만들어보았다. 하지만 나는 react였기 떄문에 다시 만들어야만 했다고... 그래도 혹시 도움이 될까 싶어 이렇게 글을 남긴다!

What?

상기하였듯 카카오 API. 대략적인 가이드 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/js https://developers.kakao.com/sdk/reference/js/release/Kakao.html

How?

카카오 로그인 버튼을 클릭했을 때, KAKAO_AUTH_URL로 이동하게 되고, 카카오 API를 통해 후미에 인가 코드가 붙은 채로 리다이렉트된다. 그 후 화면이 재 렌더되고, 인가 코드를 저장한 후 서버로 발송하는 로직을 통해 구현했다.

사용된 hooks

HTML 코드


               Facebook으로 로그인
              
               Facebook으로 로그아웃

[react] 카카오 API로 로그인하기 - REST API, 액세스 토큰 전달하기

Sun, 14 Aug 2022 09:15:22 GMT

Prologue

소셜 로그인이라는 것을 한번 도전해보고 싶어 먼지쌓인 카카오 비즈니스 계정을 꺼냈...지만 정작 필요한건 카카오 디벨로퍼 계정이었다. 살짝 머쓱 하지만 당황하지 안코? 등록을 한 후 API 문서를 살펴보는데... 역시나 호락호락하게 API 사용법을 알려주진 않았다. 무조건 따라야하는 대충 사용하는 메서드의 정리 정도가 끝이었다...

마음 단단히 먹고 React로 새출발! 렛츠고!

What?

상기하였듯 카카오 API. 대략적인 가이드 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

How?

사용된 hooks

const navigate = useNavigate();
const location = useLocation();
const params = new URLSearchParams(location.search);
const AUTH_CODE = params.get('code');
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=code`;

 useEffect(() => {
    fetch(`https://kauth.kakao.com/oauth/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `grant_type=authorization_code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${AUTH_CODE}`,
    })
      .then(res => res.json())
      .then(data => {
        if (data.access_token) {
          console.log(data.access_token);
          fetch('http://10.58.4.207:8000/users/login', {
            method: 'GET',
            headers: {
              Authorization: data.access_token,
            },
          })
            .then(response => response.json())
            .then(result => {
              if (result.access_token) {
                localStorage.setItem('token', result.access_token);
                alert('WELCOME');
                navigate('/');
              } else {
                alert('NONONO');
                navigate('/users/login');
              }
            });
        }
      });
  }, []);

HTML 코드

[react] 카카오 API를 통해 로그인 구현하기! (with React)

Sun, 07 Aug 2022 14:42:30 GMT

Prologue

마음 단단히 먹고 React로 새출발! 렛츠고!

What?

상기하였듯 카카오 API. 대략적인 가이드 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

How?

카카오 로그인 버튼을 클릭했을 때, KAKAO_AUTH_URL로 이동하게 되고, 카카오 API를 통해 후미에 인가 코드가 붙은 채로 리다이렉트된다. 그 후 화면이 재 렌더되고, 인가 코드를 저장한 후 서버로 발송하는 로직을 통해 구현했다. 해당 코드는 이후 백에서 따로 카카오 API와 통신하는 프로세스가 필요하다!

사용된 scripts 코드

const navigate = useNavigate();
const location = useLocation();
const params = new URLSearchParams(location.search);
const AUTH_CODE = params.get('code');
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=code`;

useEffect(() => {
  if (AUTH_CODE) {
    fetch(`{SERVER_IP}/users/login`, {
      method: 'POST',
      headers: {
        Authorization: AUTH_CODE,
      },
    })
      .then(response => response.json())
      .then(result => {
        console.log(result);
        if (result.access_token) {
          localStorage.setItem('token', result.access_token);
          alert('WELCOME');
          navigate('/');
        } else {
          alert('NONONO');
          navigate('/users/login');
        }
      });
  }

  navigate('/users/login');
}, []);

HTML 코드

[react] 제한된 영역을 클릭했을 때 좌표값을 구하는 방법 (feat. useRef, offsetX, offsetY)

Sun, 07 Aug 2022 14:26:14 GMT

Prologue

이미지를 업로드 하고 난 후, 클릭을 통해 해당 위치에 (+) 아이콘을 만들려고 했다. (마치 지도에서 핑을 찍듯!) 그러려면 일단 해당 사진에서 좌표를 구하는 일이 먼저라고 생각했기에, 좌표를 구하는 방법을 찾아봤다. 생각보다 금방 나오던데?

What?

우리가 사용할 것은 useRef()와 offsetX, offsetY 이다! offsetX와 offsetY는 이벤트 대상 객체에서의 상대적 좌표값을 반환해주는 내장 객체이다.

이 값은 offset 뿐만이 아니라 client, page, screen 또한 존재하는데, 상세한 내용은 http://megaton111.cafe24.com/2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90/ 를 참조하면 좋을 것 같다!

How?

간단하다. X좌표와 Y좌표를 저장할 객체 state와, 그 좌표쌍을 저장할 배열 state를 준비하면 된다. 그 후, onClick 이벤트가 일어날 대상에 useRef()를 심어주면 끝!

사용된 hooks와 function들

const [onClickCoordinate, setOnClickCoordinate] = useState({
  coordinateX: '',
  coordinateY: '',
});
const [coordinatesList, setCoordinatesList] = useState([]);

const imageOverlay = e => {
  setOnClickCoordinate(prev => ({
    ...prev,
    coordinateX:
      ((e.nativeEvent.offsetX - 12) / photoOverlay.current.offsetWidth) * 100,
    coordinateY:
      ((e.nativeEvent.offsetY - 12) / photoOverlay.current.offsetHeight) *
      100,
  }));
};


console.log(coordinatesList)

HTML 코드

위 코드는 이미지 태그 위에서 일어나는 onClick 이벤트에서 좌표값을 저장한 후 console.log() 를 찍는 코드이다!

[react] div를 input태그로 만들기 (feat. useRef())

Sun, 07 Aug 2022 14:08:04 GMT

Prologue

파일 업로드 버튼을 만드는 도중에, 상단의 이미지와 같이 디자인을 넣고 싶었다. 하지만 input 태그는 저런 느낌으로 꾸며줄 수가 없었고... 여러가지 방법을 생각해냈지만 순수 자바스크립트 문법으로는 전부 실패해버렸다. 그러다 마지막에 떠오른게 이 친구였다.

What?

바로 useRef()! useRef를 통해 div가 브로커 행세를 할 수 있게 된다.

How?

해결법은 간단했다.

이미지 업로드용 에 useRef()를 걸어주고 { display: none } 처리한다.
그 후 에서 onClick 이벤트가 발생할 때 useRef()를 통해 이 실행되게 만든 후,
의 onChange 이벤트에서 setter 함수를 실행하여 state를 변경할 수 있도록 해주면 된다!

뭔 개소린지 모르겠다면 코드를 봐보도록 하자!

사용한 hooks와 function들

const [imageInfo, setImageInfo] = useState({
   file: null,
   previewURL: '',
 });
const photoInput = useRef();

const imageUploadOnClick = e => {
   e.preventDefault();
   photoInput.current.click();
 };

const imageInputOnChange = e => {
 setImageInfo({
   file: e.target.files[0],
   previewURL: URL.createObjectURL(e.target.files[0]),
 });
};

HTML 코드

                                // div
  {imageInfo.file === null ? (
            // div or button
                                      // react-icons 아이콘
      사진 올리기
      (* 최대 10장까지)
    
  ) : (
      
  )}

위 코드는 조건부 렌더링을 통해 ? (이미지 업로드 버튼을 출력하거나) : (업로드된 이미지를 보여주는) 코드이다. 스타일드 컴포넌트를 이용했기에 태그가 보이지 않는 점은 양해 바란다.

AWS 란

Sun, 31 Jul 2022 14:32:24 GMT

일단, AWS(Amazon Web Services)란 무엇일까?

What

아마존(Amazon)닷컴에서 개발한 클라우드 컴퓨팅 플랫폼으로, 네트워킹을 기반한 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 서비스를 제공하고 있다. 현재 소규모 일반 소비자와 법인들을 아우르는 다양한 사용자들이 사용하고 있으며, 특히 클라우드 컴퓨팅의 장점을 이용하기 위해 많은 거대 기업에서도 활용하고 있다. 그렇다면, 클라우드 컴퓨팅은 무엇일까?

- 클라우드 컴퓨팅(Cloud computing)

기존의 서버가 물리적으로 구축되어있어야 했다면, 이제는 네트워크 기반 서비스 형태로 제공하는 것이다! 즉, 사용자로 하여금 네트워크 상에서 클라우드 서비스의 자원을 사용하는 것이다.

이는 크게 다음과 같이 3가지로 분류된다 ▶ IaaS(Infrastructure as a Service) AWS, 네이버플랫폼 과 같은 인프라스트럭쳐를 제공하는 서비스로, 가상 서버 또는 스토리지, 가상 네트워크 등의 리소스를 서비스 형태로 제공한다. 사용자는 물리적인 하드웨어를 직접 관리할 필요가 없으며, 직접적으로 서비스 이용을 통해 컴퓨터 리소스를 사용 할 수 있다.

- 클라우드 IT의 기본 구성 요소 (네트워킹, 컴퓨터, 데이터 스토리지 공간) ▶ PaaS(Platform as a Service) DB 또는 Application 서버 등의 이미 미들웨어를 제공한다. 하드웨어/OS/미들웨어 에 대한 관리는 서비스 제공자가 하며, 사용자는 제공된 미들웨어만 사용 할 수 있다. 주로 개발 환경과 관련한 서비스를 제공하며, 기본 인프라를 관리할 필요 없이 애플리케이션을 실행할 수 있게 해준다. ▶ SaaS(Software as a Service) 소프트웨어 또는 애플리케이션의 기능만 제공하는 서비스. 네이버클라우드, 웹 메일, ERP 등과 같은 형태의 서비스를 사용자에게 제공한다.

Why

AWS 클라우드 컴퓨팅의 장점

그렇다면, 기업들은 왜 클라우드 컴퓨팅을 사용하는 것일까? 1. 저렴한 비용 AWS는 계약금이나 약정이 불필요하며 저렴한 종량제 방식으로 운영된다. 확장형 글로벌 인프라를 구축 및 관리하고, 더 저렴한 요금의 형태로 사용자에게 비용 절감 혜택을 고스란히 돌려준다. 가변적으로 관리하여 시간대별로도 자원을 끌수있다는 장점이 있다. 2. 빠른 속도와 높은 자유도 몇분만에 전세계에 배포할 수 있는 수준인 AWS는 언어 및 운영 체제에 구애받지 않는 플랫폼이다. 따라서 사용자의 비즈니스에 가장 적합한 개발 플랫폼 또는 프로그래밍 모델을 선택할 수 있다. 사용할 서비스를 한 개 또는 여러 개 선택하고, 그 사용 방식도 선택할 수 있다. 3. 민첩성, 즉각적 융통성 서버를 증축하거나 추가하려면 몇 주 또는 몇 개월 동안 서버를 구축하길 기다려야 한다. 하지만 AWS는 그 즉시 새로운 앱을 배포할 수 있고, 수요를 기준으로 다운사이징할 수도 있다. 필요한 가상 서버가 한 대든 아니면 수천 대든, 가상 서버가 필요한 시간이 몇 시간이든 사용한 양만큼 비용이 청구된다. 즉 한 줄로 요약하면 설치가 빠르고 관리가 편하다는 것이다. 4. 용량 추정 과정 자체가 불필요하며 데이터 센터 운영 및 유지관리에 비용 투자 또한 불필요하기 때문이다. - 규모의 경제로 얻게되는 이점 - 몇 분 만에 전 세계에 배포 가능 등

React - 5. Cleanup Function

Sun, 31 Jul 2022 14:28:49 GMT

What

useEffect 의 콜백 함수에서 side effect를 만들면 뒷정리가 필요한 경우가 종종 있었는데, 이럴 때 우리는 콜백 함수를 이용해 리턴 값으로 그 뒷정리를 하는 함수를 리턴할 수 있었다.

여기서 뒷정리를 위해 return한 함수를 우리는 Cleanup Function이라고 한다.

예로, 이미지 미리보기를 구현하려고 한다면, Object URL을 만들어서 브라우저의 메모리를 할당(createObjectURL) 해야한다. 그 후엔 정리 함수를 통해 이때 할당한 메모리를 다시 해제(revokeObjectURL)해줘야 하는 것이다.

Why

쉽게 말해, callback 한번에 Cleanup Function도 한번. 이렇게 생각하면 편하다.

정확히는,

callback 함수가 호출 되기 전에 실행되거나/
컴포넌트가 화면에서 사라질 때 그 직전에/ 정리 함수가 실행된다.

즉, 정리 함수가 실행되기 직전에 실행된 callback의 side effect를 정리하기 위해 실행되는 것이다.

그 예시는 다음과 같다:

React - 4. sideEffect와 useEffect

Sun, 31 Jul 2022 14:28:03 GMT

What

side effect가 뭘까? 다들 잘 알듯이, 부작용이라는 뜻이다.

현실에서와 프로그래밍에서의 부작용의 뜻이 약간 다른데, 프로그래밍에선 말 그대로 내가 의도치 않은 부수적인 작용이 일어나는 것을 말한다.

예를 들자면,

let count = 0

function greetWithSideEffect(name) { // Input
  count = count + 1 // Side Effect!

  return `${name}님 안녕하세요!` // Output
}

greetWithSideEffect() 라는 함수는 이름을 받아 인삿말을 리턴하는 함수이다.

하지만 이 함수는 단순히 input과 output만 존재하는 함수가 아니다. 실행하는 중간에 함수 스코프 외부에 있는 count 변수의 값을 변경하는 프로세스가 섞여있다. 이는 함수의 결과값 이외의 다른 상태를 변경시키는 행위에 해당하므로 Side Effect 가 있다고 할 수 있는 것이다.

이러한 예시 말고도, 우리에게 아주 친숙한 예로 console.log 등이 있다! console.log 함수를 사용하면 값을 계산해서 리턴하는 게 아니라 콘솔 창에 문자열을 출력하게 되는데, 이 자체가 외부 상태를 변경해서 문자열을 출력하는 것이다.

이렇게 함수 내부에서 함수 외부에 있는 값 또는 상태를 변경하는 행위를 'side effect'라고 한다.

Why

하지만 이 side effect가 단어 뜻 그대로 나쁘기만한 순수 쓰레기같은 친구인가 하면~ 그건 또 아니다.

useEffect 는 리액트 컴포넌트 함수 안에서 이 side effect를 실행하고 싶을 때 사용하는 함수이기 때문이다.

DOM 노드를 직접 변경하기도 하며, 브라우저에 데이터를 저장할 수도 있고, 네트워크 통신 요청를 보내는 것처럼 말이다.

상기하였듯, 주로 리액트 외부에 있는 데이터나 상태를 변경할 때 사용하는데, 간단한 예시를 보면 이해에 좀 더 좋을 것 같다.

페이지 내 데이터 변경
useEffect(() => {
  document.title = title;
}, [title]);


네트워크 요청
useEffect(() => {
  fetch('https://alpha.bravo/delta')
    .then((res) => res.json())
    .then((result) => setData(result));
}, [])


데이터 저장
useEffect(() => {
  localStorage.setItem('Echo', Echo);
}, [Echo]);


타이머
useEffect(() => {
  const tikTok = setInterval(() => {
    setSecond((prevSec) => prevSec + 1);
  }, 1000);

  return () => {
    clearInterval(tikTok);
  }
}, []);

How

useEffect는 보통 '동기화'에 쓰면 유용한 경우가 많다. 여기서 동기화란, 컴포넌트 내부의 데이터와 그 외부에 있는 데이터를 일치시키는 것을 의미한다.

이게 뭔 개소리요 싶으실텐데, 어떤 의미인지 이번에도 간단한 예시를 가져왔다.

import { useEffect, useState } from 'react';

const TITLE = 'Untitled';

export default function ChangeTitle() {
  const [title, setTitle] = useState(Title);

  const titleChangeHandler = (e) => {
    const inputText = e.target.value;
    setTitle(inputText);
  };

  const titleClearHandler = () => {
    setTitle(TITLE);
  };

  useEffect(() => {
    document.title = title;
  }, [title]);

  return (
    
      
      
    
  );
}

상단의 ChangeTitle컴포넌트는 입력 값에 따라 페이지 타이틀을 바꾸는 컴포넌트이다.

만약 이 코드를 핸들러 함수만 사용해서 처리를 하려 했다면, 핸들러마다

document.title = inputText or TITLE;

을 포함하는 코드가 있었어야 할 것이다.

하지만 우리는 useEffect를 사용함으로써 document.title이라는 side effect를 다루는 부분만 따로 처리할 수 있었고, document.title 을 변경하는 코드를 신경 쓰지 않고 사용할 수 있어 편리해 질 수 있겠다!

즉, useEffect 를 사용했을 때 반복되는 코드를 줄이고, 동작을 쉽게 예측할 수 있는 코드를 작성할 수 있게 되는 것이다.

React - 3. 참조형 데이터를 state로 사용하고 싶을 때

Sun, 24 Jul 2022 14:59:08 GMT

본 내용은 이전의 React - State의 기초 와 이어집니다

자바스크립트의 자료형은 크게 기본형(Primitive type)과 참조형(Reference type)이 있다는 건 모두가 알고 있을 것이다.

기본형은 별거 없는데 문제는 바로 참조형. 참조형 값들은 그 특성들이 좀 독특해서 변수로 다룰 때도 조금 주의해 주어야 하는데, 이것은 state를 활용할 때도 마찬가지이다.

아래 코드는, 로그인 히스토리에 로그를 추가하려는 한 참조형알못의 코드이다.

  const [loginHistory, setLoginHistory] = useState([]);

  const historyHandler = () => {
    loginHistory.push(log);
    setLoginHistory(loginHistory);
  };
  // 실행 안됨 ㅎ

위 코드처럼, 배열 값을 가진 loginHistory state에 push()를 통해 배열의 값을 변경한 다음, 변경된 배열을 setLoginHistory setter 함수로 state를 변경하려고 하면 코드가 제대로 동작하지 않는다.

왜일까?

LoginHistory state는 배열 값 자체를 가지고 있는 게 아니라, 그 배열의 주솟값을 참조하고 있기 때문이다. 그렇기 때문에 push()로 백날 배열 안에 요소를 바꿔준다고 하더라도 결과적으로 참조하는 배열의 주솟값은 변경된 것이 아니게 된다는 것이다.

결과적으로 react 입장에서는, loginHistory State가 참조하는 주솟값은 응당 똑같기 때문에, State가 바뀌었다고 판단하지 않는 것이다!

결론은, 참조형인 state를 사용할 때에는 반드시 새로운 참조형 값을 만들어 state를 변경해야 한다.

그 중 가장 간단한 방법은 Spread 문법(...) 을 활용하는 것이다. 어떻게? 아래처럼!

  const [loginHistory, setLoginHistory] = useState([]);

  const historyHandler = () => {
    setGameHistory([...gameHistory, nextNum]);
  };
  // 실행 잘됨!

이 참조형 state의 특성을 이해하지 못하면, 간혹 state가 제대로 변경되지 않는 버그가 발생했을 때 원인을 제대로 찾지 못하는 경우가 발생할 수도 있다.

참조형 state를 활용할 땐 반드시 새로운 참조형 값을 만들어서 state를 변경해야 한다는 점. 꼭 기억해 두길 바란다.

React - 2. State의 기초

Sun, 24 Jul 2022 14:42:16 GMT

react를 공부해보셨다면, state는 진짜 한평생 쓴다고 봐도 무방하다는 말에 동의하실 것이다. 그러면 이제 react의 핵심, State가 무엇인가에 대해 한번 끄적여 보겠다.

What

그렇다면 State란 뭘까? State를 네이버 사전에서 찾아보았다. 그렇다. State는 상태였다. 누가 모를까. 중요한건, react에서의 state도 그 의미가 크게 다르지 않다는 점인데, 이 "상태"가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 한다는 것을 알면 좋을 것이다.

When

값이 동적으로 변화하고 그 변화에 맞게 새롭게 렌더링이 되어야 할 때 사용된다. 즉, 위에서 이야기했듯, 동적으로 데이터를 관리하고 화면을 그려내야할 때 사용된다는 것이다.

How to use useState()

일단, "상태"를 만들어야 하고, (State) 상황에 맞게 "상태"를 바꿔줄 수 있어야 하겠죠? (Setter) 결론은 간단하다. useState라는 함수를 활용하면 된다. 이 함수를 통해, State를 선언하고, State값을 Set 해주는 Setter를 만들 수 있다.

import { useState } from 'react';

  const [num, setNum] = useState(1);

아주 간단하죠?

위 코드에 사용된 문법은 Destructuring 문법이라는 것인데, 궁금하다면 한번 찾아보고 오는 것을 추천한다.

말로 풀자면, num이라는 State와, setNum이라는 Setter 함수를 선언하고, 1이라는 초깃값을 num에 할당한 것인데~

이렇게 사용하는 이유는, useState 함수가 초깃값을 인자로 받고, 그에 따른 return 값으로 2개의 요소를 포함한 배열을 뱉기 때문이다.

이때 뱉는 첫 번째 요소가 State, 두 번째 요소가 이 state를 바꾸는 Setter 함수인 것이다.

그렇다면 각각 요소들의 네이밍은 어떻게 할까? 간단하다. 변하는 값의 특성에 맞게 State의 이름(여기선 num)을 붙이고, Setter 함수는 state 이름 앞에 set을 붙인 다음 카멜 케이스로 사용하는 것(여기선 setNum)이다.

State는 변수에 새로운 값을 할당하는 방식으로 변경하는 것이 아니라, 이 Setter 함수를 활용해야 한다. 꼭! Setter 함수를 통해 argument 값을 전달하여 state 값을 변경해 주자.

How to use Setter()

그럼 이렇게 강조하는 Setter는 어떻게 사용하는 것일까? 그래서 코드를 준비했다!

import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

function App() {
  const [num, setNum] = useState(1);

  const diceRollHandler = () => {
    setNum(3); 
  };

  const diceClearHandler = () => {
    setNum(1);
  };

  return (
    
      
      
      
    
  );
}

export default App;

이벤트 핸들러에 Setter 함수를 세팅해 둔 후, Button의 onClick이라는 이벤트가 발생할 때마다 State의 값이 변하면서 화면이 새로 그려지는 것이다!

...

이제 대략적인 State에 대한 설명이 끝났다. 잘 이해가 되는 글인가? 라고 스스로에게 물었을 때, 그렇지만은 않다. 라고 대답할 수 있을 것 같다. 다음번엔 state를 참조형으로 사용할 때 유의해야할 점에 대하여 다뤄보겠다.

총총.

[Code Kata] Week 02-05

Sun, 24 Jul 2022 13:27:02 GMT

인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 상단 이미지는 배열 [1, 8, 6, 2, 5, 4, 8, 3, 7]을 받았을 때를 상정한 그래프 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요.

function getMaxArea(height) {
  result = 0

  copyHeight = height
  let compObj = {};

  for (var i = 0; i < height.length; i++) {
    compObj[i] = copyHeight[i];
  }

  let compVals = Object.values(compObj)

  for (var i = compVals.length; i >= 0; i--) {
    for (var j = compVals.length - 1; j >= 0; j--) {
      width = i - j
      height = compVals[i] >= compVals[j] ? compVals[j] : compVals[i]
      if (width > 0 && width * height > result) {
        result = width * height
      }
    }
  }
  return result
}

머리가 안좋아서 매우 멍청하게 객체로 만들어서 풀었다. 배열만으로도 결과 도출이 가능했을 것 같은데, 풀은 내가 봐도 왜 이렇게 풀었는지 이해가 안될 지경이다. 아마 이전에 작성한 코드를 재활용하고 싶었던 것이리라.

일단, height의 값을 객체의 key와 value로 저장한 후, values의 길이를 구한다. 그리고 반복문으로 전체탐색을 하는데, 돌때마다 가로길이와 세로길이의 최댓값을 찾아내 부피의 최대값을 갱신해준다.

솔직히 이건 개못짰네 ㄹㅇㅋㅋ 인정합니다.

[Code Kata] Week 02-04

Sun, 17 Jul 2022 15:00:40 GMT

숫자 배열을 인자로 받았을 때, 가장 자주 등장한 숫자를 k 개수만큼 return해주세요.

nums = [1,1,1,2,2,3], k = 2 일 때
return: [1,2]
nums = [1], k = 1 일 때
return: [1]

function FrequentIntCount(nums, k) {
                                              // console.log(nums)
  let incomeObj = new Set(nums)                // console.log(incomeObj)
  let incomeArray = Array.from(incomeObj)    // console.log(incomeArray)
  let compObj = {}

  // compObj 초기값 형성
  incomeObj.forEach((num) => {
    compObj[num] = 0;
  });                                        // console.log(compObj)

  // compObj value 변경
  let numsLen = nums.length
  for (var i = 0; i < numsLen; i++) {
    compObj[nums.shift()] += 1;
  }                                            // console.log(compObj)

  // 해시테이블화
  compArr = Object.values(compObj)
  let alpha = new Array(compArr.length + 1);
  for (var i = 0; i < compArr.length; i++) {
    alpha[compArr[i]] = incomeArray[i]
  }                                            // console.log(alpha)

  let result = []
  for (var i = 0; i < k; i++) {
    result.push(alpha.pop())                // console.log(result)
  }
  return result;
}

이걸 찾아볼 사람은 매우 특정적이기에 이야기하자면, Week 02 - 02번 문제와 로직이 흡사하다. 하지만, 로직 자체는 여전히 단순하기에, 코드가 매우 길다.. 로직은 다음과 같다.

인자로 받은 숫자들의 배열인 nums의 중복제거한 인자들을 key값으로, nums 속 해당 인자들의 갯수를 value값으로 객체를 선언한 후 해당 값들을 해시테이블 화 하여 정렬하고 출력하는 코드이다.

먼저 let incomeObj = new Set(nums)을 통해 중복제거한 nums 배열을 incomeObj에 복사하는데, 여기서 set 함수는 객체를 반환하므로 let incomeArray = Array.from(incomeObj)를 통해 배열로 변환해준다.

그 후 비교용 객체 compObj를 선언하여 상기하였듯 key와 value 쌍을 추가해주는 과정. 초기값 형성과 value 변경이 여기에 속한다.
그 다음은 해시테이블화인데, 이 부분은 스스로 직접 이해해 보는 편이 좋을 것 같다.

힌트를 주자면, key값을 alpha배열의 index로, 해당하는 index의 값을 value로 사용하여 2차원으로써 그려져야 할 데이터쌍을 1차원으로 구현한 것이다. 해시테이블 변수 명은 alpha. 당연히 key값을 index로 사용해야 하기 때문에, 배열의 길이가 1 더 늘어난다는 점 참고해주면 좋겠다.

그 후, 역순으로 정렬된 해시테이블을 뒤에서부터 팝!하여 k개만큼 출력해주면 문제는 끝!

여기서 해시테이블이 무엇이고 왜 사용하는가에 대해 궁금한 사람들은 아래 유튜브를 시청하고 오면 좋다! https://www.youtube.com/watch?v=xls6jEZNA7Y 광고아니에요 저 아닙니다 그냥그렇다고요

[Code Kata] Week 02-01

Sun, 17 Jul 2022 14:58:17 GMT

1~3999 사이의 로마자를 의미하는 문자열을 받았을 때, 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 유의할 점은 4를 표현할 때는 IIII가 아니라 IV, 9를 표현할 때는 VIIII가 아니라 IX 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 쉽게 구현할 수 있습니다.

const romeToInt = strs => {
  const romeNum = {
    'I': 1,
    'V': 5,
    'X': 10,
    'L': 50,
    'C': 100,
    'D': 500,
    'M': 1000
  }
  let result = 0
  const romeArrStr = strs.split("")
  const romeArrInt = []

  for(i in romeArrStr){
    romeArrInt.push(romeNum[romeArrStr[i]])
  }

  for(let i=0; i romeArrInt[i]){
      result -= romeArrInt[i]
    } else {
      result += romeArrInt[i]
    }
  }
  return result
}

생각 외로 단순했던 문제였던 것 같다.

로마자를 key값으로, 아라비아 숫자를 value값으로 가지는 객체를 선언한다. 그 후 인자로 받은 strs를 쪼갈라 배열로써 저장하고, 각 글자마다 해당하는 데이터쌍으로 변환을 해준다.

그 후 for문을 돌려 찢어진 숫자들을 한데 모으는 작업을 하게 되는데, 이 때 문제에 명시된 개꿀팁인 뒤의 숫자에서 앞의 숫자를 빼주면 쉽게 구현할 수 있다는 특성을 이용해 자신 바로 뒤에 있는 수가 자신보다 크다면 스스로를 결과값에서 제하는 로직을 구현했다.

React - 1. Props & Children

Sun, 17 Jul 2022 14:40:33 GMT

Props (Properties)

JSX 문법에서는, 컴포넌트를 호출할 때 해당 컴포넌트에서 사용할 속성값을 넣어서 보내줄 수 있는데, 그렇게 컴포넌트에 넣어준 속성들을 Props라고 부른다.

컴포넌트에 넣어준 속성들은 하나의 객체로 묶여서 컴포넌트를 정의한 함수의 파라미터 값으로 전달된다.

Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    
      Parent Component
      
    
  );

export default Parent;

Child.js

import React from 'react';

function Child(props) {
  // console.log(props);

  return (
    
      Child Component
    
  );
}

export default Child;

위 예시 코드처럼, Parent 함수에서 Child 컴포넌트를 호출함과 동시에 titleColor라는 속성을 red로 지정해주고, Child 함수 내부에서 props라는 파라미터를 하나 만들어 출력해보면 브라우저 콘솔에는 다음과 같은 객체 형태의 값을 볼 수 있다.

{ titleColor: "red" }

즉, props를 활용하면 사용할 속성 값들을 다양하게 전달해주면서 컴포넌트를 활용할 수 있는데, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수도 있게 된다는 뜻이다!

참고로, props는 객체 형태를 띠고 있어 Child.js에서 호출할 땐 props.[키 이름] 등으로 호출하여야 한다. 상단의 Child.js에서는 props.titleColor가 그 예시가 되겠다.

이 때에는 Destructuring 문법을 활용해서 조금 더 간결하게 코드를 작성할 수도 있는데, Destructing 문법에 대해서는 한번 찾아보는 것도 추천한다.

Children

props에는 children이라는 조금 특별한 props가 있다.

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.

Button.js

function Button({ children }) {
  return ;
}

export default Button;

App.js

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    
      
        
        
      
      
    
  );
}

export default App;

그래서 JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고, 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있다.

참고로 이 children은 단순히 텍스트만 작성하는 걸 넘어서 컴포넌트 안에 컴포넌트를 작성할 수도 있고, 컴포넌트 안에 복잡한 태그들을 더 작성할 수도 있다고 하니 이 값을 어떻게 활용하면 좋을지 우리 다같이 한번 생각해 보는 것도 좋을 것 같다!

[Code Kata] Week 01-05

Sun, 10 Jul 2022 14:55:04 GMT

단어가 담긴 strs 배열을 받았을 때, 공통된 시작 단어(prefix)를 반환해주세요. strs = ['start', 'stair', 'step']일 때, return: 'st' strs = ['start', 'wework', 'today']일 때, return: ''

const getPrefix = strs => {
  let result = ""

  for (var i = 0; i < strs.length; i++) {
    let count = 0
    let comp = strs[0].charAt(i)
    for (var j = 0; j < strs.length; j++) {
      if (comp == strs[j].charAt(i)) {
        count++
      }
    }
    if (count == strs.length) {
      result = result + comp
    } else {
      return result
    }
  }
  return result
}

이번에도 코드를 최적화하지 못하고 생각 그대로의 날것이 만들어져버렸다. 최적화, 재능없을지도..?

간단한 로직:

항상 똑같지만, 나의 국밥 해결방법인 전체 탐색 되시겠다. 우리가 할 것은 배열에 담긴 값 하나하나씩 글자단위로 비교하여 상황에 따라 결과값에 append하여 출력할 예정이다. 오디션 프로그램에서 심사위원들의 따봉을 받으면 통과하는 것 처럼, 그 과정에서 전체 배열의 갯수만큼 따봉을 받으면 합격! 결과값에 추가된다. 단, 조건은 만장일치의 따봉을 받아야 한다는 것.

코드 해석:

결과값이 되어 줄 result를 선언함과 동시에 초기화. for문으로 쑝. 심사위원들의 따봉 갯수를 선언한다. 변수명은 count. 오와 열은 항상 해당 열 첫번째 훈련병이 담당한다. strs[0]의 i번째 글자를 comp(are할) 값으로 가져온다. 다시 for문 입성. strs배열 속 모든 요소들의 i번째 글자가 comp와 동일한지 검사한다, 동일하다면 따봉의 갯수를 ++. 군장검사가 끝났다면, 이제 따봉의 갯수를 비교할 차례다. 따봉의 갯수가 머릿수와 같다면, 해당 글자를 result에 추가하고 그렇지 못하다면 그대로 game over 시켜준다.

생각의 흐름을 따라 코드를 작성하긴 했지만, 잘 작동하면 그걸로 만사오케이가 아닐까?

[Code Kata] Week 01-03, 04

Sun, 10 Jul 2022 14:36:53 GMT

숫자배열과 목표 정수값을 인자로 받았을 때, 배열 속 중복되지 않은 두 정수를 더해 '목표 정수값'이 나오게 하는 배열의 index를 return해 주세요. 예를 들어, nums: [4, 9, 11, 14], target: 13 일 때 return값은 [0, 1]이 되어야 합니다. String 값을 인자로 받았을 때, 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. str = "abcabcabc"일 때, return: 3 => // 'abc' str = "aaaaa"일 때, return: 1 => // 'a' str = "sttrg"일 때, return: 3 => // 'trg'

const getLengthOfStr = str => {
  let maxCnt = 0
  let tempCnt = 0

  for (var j = 0; j < str.length; j++) {
    let strArr = []
    for (i = j; i < str.length; i++) {
      if (strArr.indexOf(str[i]) == -1) {
        strArr.push(str[i])
      } else {
        strArr = []
        strArr.push(str[i])
      }
      tempCnt = strArr.length
      if (maxCnt < tempCnt) {
        maxCnt = tempCnt
      }
    }
  }
  return maxCnt
}

오. 이 친구는 예외사항이 아주 많아 매우매우매우매우 귀찮았다.

maxCnt는 return할 최종 값이 저장될 변수, tempCnt는 maxCnt와 비교할 변수. strArr는 str의 글자 하나하나를 분해해 넣어볼 그릇이다.

2중 for문 중, 내부 for문 먼저 알아보자.

strArr에 str[i]가 없을 경우, str[i]를 삽입한다.
maxCnt와의 비교를 위해 strArr의 길이를 tempCnt에 저장한 후
if문을 통해 우위를 가리고 승자가 maxCnt가 된다.

strArr에 str[i]가 있을 경우, strArr를 초기화 한 후 str[i]를 삽입한다.
maxCnt와의 비교를 위해 strArr의 길이를 tempCnt에 저장한 후
if문을 통해 우위를 가리고 승자가 maxCnt가 된다.

str의 길이 만큼 반복한다.

그 후, 내부 for문이 종료되고 외부 for문이 돌아가는데

strArr를 초기화한 후, index를 한자리 뒤로 땡겨서 다시 탐색한다.
이후 내부 for문 실행.

strArr를 내부for문 밖에서 초기화해주는 이유는, 내부 for문이 끝날 때, '가장 긴, 중복되지 않은 문자열'이 str의 최후열에 있을 경우 미처 초기화되지 못한 strArr를 위해서이다. 이 과정을 통해, 전체 탐색을 해줌으로써 길이가 '가장 긴, 중복되지 않은 문자열'이 문자열 어디에서부터 시작되든 찾아낼 수 있게 된다. 이 과정이 필요한 이유는 'atbctefgth'를 str로서 사용해보면 알게 된다.

정수값을 인자로 받았을 때, 해당 인자의 회문(palindrome) 여부를 boolean 값을 통해 반환해주세요. num: 123일 때, return: false => 뒤집은 모양이 321 이기 때문 num: 1221일 때, return: true => 뒤집은 모양이 1221 이기 때문 num: -121일 때, return: false => 뒤집은 모양이 121- 이기 때문 num: 10일 때, return: false => 뒤집은 모양이 01 이기 때문

const sameReverse = num => {
  return num.toString() == num.toString().split("").reverse().join("")
}

예전에 사용했던 꼼수 문법과 굉장히 유사하다. 솔직히 좀 날먹이었달까(쑻)

[Code Kata] Week 01-01, 02

Sun, 10 Jul 2022 14:11:14 GMT

Week01 - 01

숫자배열과 목표 정수값을 인자로 받았을 때, 배열 속 중복되지 않은 두 정수를 더해 '목표 정수값'이 나오게 하는 배열의 index를 return해 주세요. 예를 들어, nums: [4, 9, 11, 14], target: 13 일 때 return값은 [0, 1]이 되어야 합니다.

const twoSum = (nums, target) => {
  for (var i = 0; i < nums.length; i++) {
    for (var j = i + 1; j < nums.length; j++) {
        if (nums[i] + nums[j] == target) {
          return [i, j]
        }
    }
  }
}

target 값이 도출될 때 까지 모든 정수를 하나하나씩 더해보면 답이 나오겠다 싶어서 해당 문제는 전체 탐색을 하는 방향으로 이차원 배열로써 해결했다. 해결하지 못한 점은 조합이 2개 이상일 때를 대비하지 못한 것이다.

Week01 - 02

정수를 인자로 받았을 때, 그 숫자를 뒤집어서 return해주세요. 음수의 경우, 해당 부호가 유지되어야 합니다. x: 1234일 때, return: 4321 x: -1234일 때, return: -4321 x: 1230일 때, return: 321

const reverse = (x) => {
  let arr = x.toString().split("").reverse();
  if (arr.includes("-")) {
    arr.pop();
    arr.unshift("-");
  }
  return Number(arr.join(""));
}

해당 문제는 정공법이 아닌 꼼수를 통해 해결했다. 받은 인티저값을 int -> string -> array 순으로 쪼갈라서 뒤집은 후 다시 string으로 재조립하는 과정을 통해 해결했다. 수취한 값이 음수일 경우엔 pop()과 unshift() 메소드를 통해 부호를 맨 앞으로 이동시켜 주었다.

데이터베이스에 대한 고찰(3) - KEY

Sun, 03 Jul 2022 14:48:56 GMT

이번에는 KEY와 관련된 이야기를 풀어보고자 한다. 이해를 돕기 위해 인터넷에서 예시 이미지를 추가했는데, 도움이 되었으면 좋겠다.

KEY의 종류

슈퍼 키 (Super Key)
- 테이블에서 각 행을 유일하게 식별할 수 있는 하나 또는 그 이상의 속성들의 집합이다. 유일성만 만족하게 되면 누구나 슈퍼 키가 될 수 있는데, 여기서 유일성이란 하나의 키로 특정 행을 바로 찾아낼수 있는 데이터 속성을 말한다. 여러가지 속성 값들을 묶어 중복값이 안나오게 서로 구별만 할 수 있으면 누구나 슈퍼 키가 될 수 있다. 대표적인 예시로 주민등록번호가 있겠다.

        어떻게 묶던 중복값만 나오지 않으면 상관없다!

후보 키 (Candidate Key)
- 한 테이블 내에서 각 튜플 값들을 유일하게 식별할 수 있게 하는 속성 값들 전체를 뜻한다. 즉, 기본 키가 될 수 있는 후보들인 셈이다. 이 중, 선택받은 자는 기본 키가 되고, 그렇지 못한 자들은 대체키가 되는데...
```
  후보 키는 단일 속성으로 유일성과 최소성을 확보해야 하기 때문에,
  위의 이름+나이 조합으로는 후보키가 될 수 없다는 말이다.
```
기본 키 (Primary Key)
- 한 테이블 내에서 각 튜플 값들을 유일하게 식별할 수 있게 하는 속성 값 중,
- 기준으로 선택한 키*를 뜻한다. 당연히 한 테이블 아래 두개의 기본 키는 존재할 수 없다! 유일하게 식별할 수 있어야 한다는 특성에 의해 NULL 값을 가질 수 없고, 기본 키로 정의된 속성에는 중복이 허용되지 않는다는 특성이 있다. 대표적인 예시로 학번이 있겠다.

여기서 잠깐, 기본 키와 후보 키가 되기 위해서 만족해야 하는 조건이 있는데, 그것은 바로 유일성과 최소성이다.

유일성: 하나의 키값으로 하나의 튜플을 인식할 수 있어야 함
최소성: 특정 값을 유일하게 식별할 수 있는 필수적인 속성으로만 구성되어야 함

대체 키 (Alternate Key)
- 한 테이블 내에서 각 튜플 값들을 유일하게 식별할 수 있게 하는 속성 값 중,
- 기준으로 선택되지 못한 키*를 뜻한다. 기본 키로 선택되지 못한 낙동강 오리알 신세이지만, 낙심하지 말자! 기본 키인 학번이 사라지면 주민번호가 기본 키 자리를 대체할 수 있게 된다.

외래 키 (Foreign Key)
- 다른 테이블을 참조 및 연계하여 데이터를 처리해야 할 때 사용되는 키로, 외래키는 참조하는 테이블의 기본 키를 가르키는 동시에 해당 키의 속성을 가진다.

RDBMS의 제약 조건도 다뤄보고 싶었지만, 시간 관계상 나중에 포스팅을 하든, 추후 수정을 하든 해야할 것 같다. 응애미안 ㅎ 핵심적으로 다루게 될 내용은 무결성 제약 조건인데, 그 중 개체 무결성과 참조 무결성에 대해 다뤄보겠다

데이터베이스에 대한 고찰(2) - DB의 장/단점

Sun, 03 Jul 2022 13:48:53 GMT

헬?루 거두절미하고 담백하게 장/단점에 대해 알아보자. 결단코 머릿글을 쓰는게 귀찮아서가 아니다.

데이터베이스의 장점 및 단점

- 장점
    1. 파일 시스템과 달리 중복을 피할 수 있다.
    2. 데이터의 일관성 및 무결성을 보장 가능하다.
    3. 데이터의 논리적, 물리적 독립성이 보장된다.
    4. DB 안의 자료를 여럿이서 같이 사용할 수 있다.
    5. 자료 상태를 최신으로 관리하기 쉽다.
    6. 데이터의 표준화가 가능하다.

파일 시스템이란, 뭔가 대단한 단어가 아니다. 디스크 파티션을 관리하는 하나의 체계인데,

응용프로그램 별로 필요한 데이터들을 파일로 관리할 수 있도록 하는 기능을 제공한다. 여기에서 핵심은 응용 프로그램 별로 파일을 유지한다는 점인데, 즉 같은 데이터가 여러 파일에 중복되어 저장될 수 있다는 것이다. 하지만, DBMS는 DB에 데이터를 통합하여 관리하기 때문에 중복문제를 쉽게 해결할 수 있다.

앞서 이야기했듯, 중앙집중식으로 데이터를 통합하여 관리하기 때문에 데이터의 중복 제어가 보다 쉬워 일관성을 유지하기 편리하고, DB를 사용하여 명령을 처리할 때 마다 유효성을 검사하기 때문에 무결성 또한 쉽게 보장할 수 있다.

데이터 표준화란 무엇일까. " 현실 세계의 정보를 컴퓨터로 관리하기 위해 DB에 저장하는 정보 항목의 종류, 명칭, 형식, 유효값, 관리절차 등을 특정 기준에 따라 표준을 만드는 일" 을 뜻한다. 우리는 데이터 표준화를 통해 다음과 같은 효과를 기대할 수 있겠다.
- 데이터 중복성을 낮춰 지속적으로 증가하는 유지보수 비용을 절감하고
- 데이터 복잡도를 낮추며 중복된 데이터를 줄일 수도 있으며,
- 사용자에게 출력되는 UI와 데이터베이스 간에 서로 독립성을 유지할 수 있게 된다!

하지만, 볕이 있으면 그늘도 있는 법. 상술한 장점을 위해 감수해야 할 단점들도 알아보자.

- 단점
1. 자료의 전산화에 있어 인력과 비용이 발생한다.
2. 자료를 보호하기 위해 백업이 필수적이며, 훼손 시 복구가 어렵다.
3. 체계적으로 설계하지 못하면 매우 복잡해진다.

설명이 필요한가? DB가 저장될 서버 및 네트워크 장비도 필요하지, DBMS를 관리하는 DBA도 채용해야하지, 서버 가동 후에 생기는 서비스 장애 대응이나 프로그램 수정과 확장 축소 등 초기비용뿐만 아니라 추후 들어가는 운영비용 또한 무시하지 못한다.
체계적인 관리는 가능하나, 만에하나 DB가 손상되거나 유실될 시 복구 작업이 매우 까다롭다.
초기에 DB설계를 제대로 하지 못하면 추후 사업의 확장성을 고려할 때 매우 골머리를 썩게 된다. 이것저것 살이 붙게 되면 매우 복잡하고 효율적이지 못한 DB로 변모하기 떄문.

기본적인 사항들에 대한 것은 대충 기술한 것 같다. 다음엔 뭘 쓸까?

몰?루~