bgnbgn

Data Type

bgnbgn — Thu, 18 Aug 2022 00:48:47 +0900

JS는 크게 두가지 데이터 타입이 있다.

- 원시타입

number, string, boolean, null, undefined, Symbol

- 참조타입

object, Array, Function, Date, RefExp, Map, WeakMap, Set, WeakSet

둘의 차이 기본형 :

- 원시타입을 선언하게되면 그거는 stack에 쌓이게 된다. (stack은 기본 자료구조로, 컴퓨터에 저장했다 빼서 쓰기에 빠르다.)

- 다른 값에서부터 값을 가져와서 할당 할때, '복사'가 이루어 진다.

- 다시말해서, 값을 복사해도 원래 있던 값에는 영향이 전혀 없다. 참조형:

- 다른 값에서부터 값을 가져와서 할당하면, '참조'가 이루어진다.

- 값을 참조하게되면, 원래 있던 값에 영향이 있다. 즉, 새로만든 데이터로 값을 변경하게되면 원래 있떤 값도 같이 변경이 된다.

var a = 1;
var b = a;
// 위에거 같은경우 b= a가 같은것이 아니라 따로 a = 1이고 b 는 앞에 a가 아닌 다른 a를 뜻한다.
var a = {'id':1}
var b = a;
// 이거 같은경우 id:1를 두개다 가르킨다고 보면된다.

결론 기본형이나 참조형이나 모두 무언가를 '복제'하긴 하는데, 기본형은 데이터 값만 딱 가져오고 새로운 메모리에서 저장하지만, 참조형은 데이터 값만 가져오는게 아니라 데이터가 저장된 메모리 주소마저도 가져온다. (그래서 기본형은 불변성 성질을 가지고 있다.)

JS has two major Data types.

- primitive type

number, string, boolean, null, undefined, symbol

- reference type

object, Array, Function, Date, RegExp, Map, WeakMap, Set, WeakSet

what is Differences?

- primitive type:

- When we declare a primitive data type in JavaScript, it is stored on a stack.

- A stack is a simple data structure that the computer uses to store and retrieve data quickly.

- When we assign primitive value from one variable to another, the JavaScript engine creates a copy of that value and assigns it to the variable.

- It means that changing the value in one variable does not affect the other.

- reference type:

- Copying a reference from one variable to another creates a reference so that two variables refer to the same object.
- This means that changing the object via one variable reflects in another variable.

Conclusion?

All primitives are immutable(The variable may be reassigned to a new value, but the existing value can not be changed)

리덕스를 사용하는 이유와 그 사용법

bgnbgn — Mon, 15 Aug 2022 20:21:24 +0900

리액트쿼리가 리덕스같은 전역 상태관리 라이브러리를 대체할 수있을까 ?

react-query는 서버상태를 다루는 라이브러리다.

reudx, mobx 등은 클라이언트 상태를 다루는 라이브러리다.

즉, react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다, 다만 reat-query를 도입한다면 개발자가 전역적으로 관리해야하는데 데이터는 매우 적을 것이다. 때문에 recoil이나 jotai같은 간소한 상태관리 라이브러리를 함께 사용하는 것도 좋은 방법이다.

예를 들면 과거 리액트 개발자들은 서버에서 데이터를 받아오는 작업을 리덕스에서 처리하기 위해 redux-thunk, redux-saga 등을 이용해서 비동기 작업을 수행하고 데이터를 리덕스 스토어에 저장한 뒤 그 데이터를 각 컴포넌트에서 사용했다.

react-query는 이 작업을 매우 간편하게 만들어주는데다가 데이터 캐싱을 아주 쉽게 해결할 수 있다. 쿼리에 staleTime: Infinity, cacheTime: Infinity 옵션만 추가하면 앱을 끄기 전까지 다시 fetch되지 않는 데이터로 만드수 있다. 데이터가 처음 fetch되는 동안 isLoading 등의 상태를 직접 선언하고 조작할 필요도 없다. react-query에서 모든 상태값과 메서드를 제공하기 때문이다.

물론 이러한 서버 데이터와 관계없이 전역적으로 다뤄야 하는 데이터들이 있다. 예를 들면 theme: 'light'|'dark'를 저장하고 있는 전역 데이터는 클라이언트에서만 다루는 데이터이다. 이러한 데이터는 react-query에 임의로 저장하고 다루는 것이 아니라 컨텍스트나 전역 상태관리 라이브러리를 사용해서 핸들링 해야한다.

현재 가장 추천하는 조합은 react-query + recoil이다. context api가 가지고 있는 여러가지 이슈가 있기 때문에 전역 상태관리 라이브러리 하나는 사용을 해야 개발이 편한데, 성능 이슈 없이 간단하게 사용할 수 있기 떄문에 recoil을 추천한다.

일단 redux와 react-query만 쓴다며 redux를 사용하여야하고 아니면 recoil과 react-query를 같이 사용해야한다.

리덕스의 사용법은

스토어, 액션, 기준값, 액션크리에이트, 리듀서를 만들어서 사용하면된다.

반응형css position 속성

bgnbgn — Sat, 13 Aug 2022 15:39:58 +0900

import React from 'react';
import styled from '@emotion/styled';
import flex from '../flex';

const Pra1 = () => {
    return (
        <Div>
            <div className="red"></div>
            <div className="yellow"></div>
            <div className="pink"></div>
            <div className="gray"></div>
            <div className="green"></div>
        </Div>
    );
};

export default Pra1;

const Div = styled.div`
    ${flex({})}

    position: relative;
    width: 100vw;
    height: 100vh;

    .red {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 40%;
        background-color: red;
    }
    .yellow {
        top: 0;
        right: 0;
        position: absolute;
        width: 50%;
        height: 60%;
        background-color: yellow;
    }
    .pink {
        bottom: 0;
        left: 0;
        position: absolute;
        width: 50%;
        height: 60%;
        background-color: pink;
    }
    .gray {
        bottom: 0;
        right: 0;
        position: absolute;
        width: 50%;
        height: 40%;
        background-color: gray;
    }
    .green {
        display: relative;
        width: 30%;
        height: 35%;
        background-color: green;
        z-index: 2;
    }
`;

기본적인 position 기본적인 속성은 static이다.

top, left, bottom, right 속성값은 position 속성이 static 일 때는 무시된다.

relative 속성으로 설정하게되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소를 원래 위치를 기준으로 상대적으로 배치해준다고 생각하면 이해가 쉽다. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을때의 상하좌우로부터 얼마나 떨어지게 할지를 지정할수 있다.

position 속성 값 중 가장 난해하고 주의해서 사용해야하는 속성값은 absolute이다. 아마도 absolute라는 영단어의 의미 때문인데 relative속성의 정반대 개념이라고 많이 오해한다. 오히려 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많기 때문이다.

position 속성을 absolute으로 지정하면 사실 전혀 절대적으로 요소를 배치해주지 않는다. 오히려 배치 기준이 상황에 따라 굉장히 달라질수 있는데, 흥미롭게도 position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. DOM트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데, 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM트리에 최상위에 있는 요소가 배치 기준이된다. 실제로 absolute 속성값을 사용할 때 부모요소를 기준으로 top, left, bottom, right 속성을 적용해야하기 때문이다. 따라서 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례이다.

UI, UX

bgnbgn — Thu, 11 Aug 2022 13:35:55 +0900

디자인 계열에 있는 회사에 다니고 있거나, 본인이 디자이너라면 한번쯤 들어봤을 법한 단어 UI와 UX 스마트 시대에 접어들면서 더 간편하고 보기 편한 미니멀리즘을 추구하고, 또 VR 시대가 성큼 다가온 만큼, UI와 UX는 이제 친군하면서도 중요도 역시 더더욱 중요해졌다.

하지만, UI UX는 말로만 들었을 뿐 정확한 정의와 뜻은 모르는 분들이 많고 헷갈려한다. 그래서 금일은 UI/UX의 뜻과 차이점에 대해서 알아보도록 하겠다.

UI는 UISMS USER INTERFACE의 약자로, UI란 필자 뿐만 아니라 어떠한 제품이나 소프트웨어를 사용하게되는 사용자가 그에 해당하는 제품과 서비스를 이용할 시 처음 접하게 되는 매개물이다.

유저가 사용하고자 하는 소프트웨어나 서비스를 편리하게 사용할 수 있도록 디자인 된 것이다.

흔히들 말하는 UI 디자인 이라는 것이 아이콘에 대한 디자인이나 색감, 그리고 표현과 글씨 폰트로 보여지는 시각 디자인을 말하는 것임을 알보두자.

UX란 USER EXPERIENCE의 약자이고, 유저의 경험을 의미, 유저가 스마트한 서비스나 제품을 직접 사용하여 느끼는 것을 말한다.

그렇기에 UX 디자인은 이용을 하는 이용자가 편리하고 만족을 할 수 있게끔 UI를 DESIGN하는 것이라 볼 수 있다.

차이점

UI는 앞서 언급한 것처럼, 시각적으로 보여지는 디자인에 의의를 둔다.

예를 들어 어떤 컨셉의 아이콘, 배너, 폰트 등등의 시각적 디자인이라고 보면 되고, UX는 좀 더 포괄적이다.

UI 디자인을 이용하여 이용자가 어떤식으로 사용할 때에 편리할지를 계산하여 위치나 구도를 잡고 표현방식을 정하는 것이라 볼 수 있다.

사용자 혹은 이용자가 편리한 경험을 해주게끔 도와주는 디자인을 UX 디자인이라 할수 있다.

JSX란

bgnbgn — Thu, 11 Aug 2022 12:52:26 +0900

jsx란

javascript에 XML을 추가한 확장한 문법이다.

jsx는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

jsx는 하나의 파일에 자바스크립트와 html을 동시에 작성하여 편리하다.

자바스크립트에서 html을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

jsx문법

1.반드시 부모요소 하나가 감싸는 형태여야한다.

2. 자바스크립트 표현식

3. if문 대신 삼항 연산자 사용

4. react dom은 html 어트리뷰트 이름 대신 camelcase 프로퍼티 명명 규식을 사용

5. jsx 내에서 주석 사용 방법

css 단위

bgnbgn — Wed, 10 Aug 2022 20:18:27 +0900

em/ rem

em, 폰트 기준으로 한 단위

em 역시 동적인 단위인데 재미있게 이 단위는 폰트 크기의 영향을 받는다.

1em = 부모의 폰트 크기라는 별난 계산법을 가지고 있다.

부모폰트가 16px일때, 1em = 16px

만약 부모의 폰트 크기가 20px이면 1em = 20px이 된다.

부모가 커지면 자식도 커진다.

rem, 최상위 폰트를 기준으로 한 단위

em의 친구로는 rem이란 속성도 있다. 다른점이 있다면 rem은 relative to the root element라는 점이다.

HTML문서에서 최상위 요소 (root element)는 바로 <html> 요소를 가리킨다.

1rem = html의 폰트 크기가 12px일때, 1rem = 12px

em과 rem 활용법

부모의 폰트값을 영향받는것을 이용하여 사용한다.

예를 들어

.title { font-size: 30px; }
.title__image { width: 10em; }
.title__text { font-size: 1.5em; }
.title__text-small { font-size: 0.8em; }

title 사이즈를 30px 에서 50px로 바꾼다면

image width값이 300px -> 500px

text값이 45px -> 75px

text-small값이 24px -> 40px로 다 커질것이다.

이것을 이용하면 별다른 공수 없이 반응형을 손쉽게 만들수 있다.

html { font-size: 62.5%; } // 기본고정이 16px이므로 10px이되려면 62.5%를 사용해야한다.
.image { width: 12rem; } //120px
.item { font-size: 1.6rem; } //16px
.copyright { margin-top: 5rem; } //50px
 
@media all and (max-width: 750px) {
  html { font-size: 50%; } // 이제 문서 내 모든 rem 단위가 영향을 받습니다.
}

위 코드를 보면 1rem = 10px이 되어 작성하기 휠씬 쉽고, 미디어 쿼리로 html 요소의 폰트 사이즈 값만 바꾸면 모든 rem 단위에 영향을 줄수 있다는 걸 알수 있다.

em에 비해 휠씬 편하다.

vh & vw (vertical height & vertical width)
반응형 웹디지인 테크닉은 퍼센트 값에 상당히 의존하고 있어요.

만약 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값에 맞게 사용할 수 있다면 어떨까요?

900px일때 1vh는 9px이라는 뜻이고 너비 값이 750px이면 1vw는 7.5px이된다.

vmin & vmax
vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있다.
예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 된다.
너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

redux, query 사용하는 이유

bgnbgn — Tue, 9 Aug 2022 22:14:20 +0900

리덕스 사용하는 이유
1. action dispatch 할 때마다 기록이 남아 에러를 찾기 쉽다.
2. 상태의 중앙화 스토어라는 이름의 전역 자바스크립트 변수를 통해 상태를
한 곳에서 관리하는데, 이를 중앙화라 함. 전역 상태를 관리할때 굉장히 효과적
3. redux는 상태를 읽기전용으로 취급한다. 상태가 읽기전용이므로,
이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만
하면됨. 이런식으로 실행 취소 기능을 구현

리덕스 툴킷 사용하는 이유

1.리덕스의 단점으로 꼽히는 보일러플레이트 코드가 줄어든다는 것
보일러플레이트 코드가 많으면 코드의 예측 가능성 측면에서 떨어지고
코드 해석이 어려워서, 실수를 유발 시킬 수 있다.

2. 패키지 의존성을 줄여준다.
리덕스를 사용하면 redux devtool, immer, reselect 등 여러가지 라이브러리
들을 설치하게 된다. 하지만 redux-Toolkit에는 이런 많은 라이브러리 들이
내장되어 있어서 많은 라이브러리들의 의존성을 줄일수 있다.

react-query 사용이유
1. 캐싱
- 데이터를 캐싱할수 있다
   - 쉽게말하면: 우리가 리액트 쿼리를 사용할때 '쿼리키' 라는 친구가 있다
예제:

export const useGetMyPosts = () => {
  const fetcher = async () => {
    const { data } = await apis.getMyPost();
    return data;
  };
  return useQuery("myPosts", fetcher);
};

여기서 보면 myPosts가 쿼리키이고, 저 key를 가진 객체에의 value에 내가 필요한 데이터를 저장해 둔다는 뜻 이다.
이게 왜 장점인가?
캐싱에 저장을 해두면, 값이 변경되지 않았을때는 서버로부터 통신을 안하고 저기에 저장된 데이터에서 값을 가져온다 (속도가 월등히 증가, 불필요한 서버통신 제거)

조금 더 깊게 들어가면, 쿼리키는 일단 '고유' 해야한다. 우리의 주민등록번호 처럼.
하나의 쿼리키에는 하나의 쿼리캐시만 들어갈 수 있다.

2. get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.
- 이것도 캐싱, 쿼리키와 관련이 깊다
  - 쉽게말하면: 우리가 게시판 목록을 가져오는데 만약에 create로 게시글을 추가하면, get할때 게시판목록에 추가된걸 가져와야하는데, 이게 react query가 알아서 업데이트를 감지하고 자동으로 get을 해준다는 내용이다.

3. 데이터가 오래 되었다고 판단되면 다시 get
- 데이터가 오래되었다(stale - 상했다) 싶으면 다시 get 한다
   - 쉽게말하면, 오래된 데이터를 알아서 새걸로 바꿔준다.
- 기능은 invalidateQueries 이렇게 말하고 예제를 보자
예제:
const useUpdateProfile = () => {
  const queryClient = useQueryClient();

  return useMutation(updateProfile, {
    onSuccess: (data) => {
      queryClient.invalidateQueries("user");
      return data;
    },
    onError: () => {},
  });
};

여기 보면 queryClient.invalidateQueries("user"); 요런애가 있다.
이게 데이터를 리프레시(새로받기) 해야하는데 데이터가 변하지 않으면 자동 업데이트를 안해주는 너무 똑똑한 리액트 쿼리를 위해서, 우리가 강제로 업데이트를 해주는 거다.
즉 다시 해석하지면, queryClient의 invalidateQueries 메소드를 이용해서 query 키를 날려버리는거다. (메소드란? 그냥 기능을가진 함수라고 이해하자)

4. 동일 데이터 여러번 요청하면 한번만 요청한다.
- 같은데이터를 만약에 우리가 여러번 요청하면, 알아서 그거 한번만 해준다.
  - 쉽게 말할것도 없이 위에 내용이 다임.. 우리가 따로 적용 안해줘도 알아서해줌..

5. 무한 스크롤 사용이 쉽다
- 리액트 쿼리는 inifite Queries라고 get할때 그 짜증나는 무한스크롤을 엄청 쉽게 해준다. (자세한건 따로 찾아오셈 - 케빈)

6. Optimistic Update
- 긍정적 업데이트라고 하는데 이 기능이 쉽게 구현된다.
- 일단 내가 서버통신하고 하는데 오래걸릴수가 있는 로딩속도를 0.01초로 줄여서 성공됬다는 가정하에 업데이트를 해준다. (실패하면 다시 원래거로 돌아감)
예제: 좋아요 기능이 있다하자, 좋아요 눌렀는데 1초뒤에 좋아요가 빨갛게 바뀌면 이거 어플 아무도 안쓸게 뻔하다. 이럴경우 무조건 optimistic update를 해줘야한다.
(자세한건 따로 찾아오셈 - 케빈)

const useUpdateNickname = () => {
  const queryClient = useQueryClient();
  const dispatch = useDispatch();

  return useMutation(addComment, {
    onMutate: async (data) => {  //기능의 핵심 요소 onMutate
      await queryClient.cancelQueries("user");
      queryClient.setQueryData("user", (oldData) => {
        oldData.nickname = data.nickname;
        return oldData;
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries("user");
      dispatch(UserProfileModalSuccess(true));
    },
    onError: () => {
      dispatch(UserProfileModalDupError(true));
    },
  });
};

7. react custom hook으로 fetching하는걸 빼서 쉽게 관리가 가능하고
fetching 할때, isLoading, isFetching등 기능을 우리가 따로 리덕스처럼 dispatch 안해도 쉽게 가져다 쓸 수있다.

bounce animation css/react

bgnbgn — Tue, 9 Aug 2022 16:13:10 +0900

로딩 컴포넌트는 사용자 경험에 있어 필수적으로 개발되어햐는 컴포넌트로 bounce 스타일로 만들어 보겠습니다.

emotion keyframes을 사용해서 css만으로 로딩중인 상태를 나타내도록 만들어 보았다.

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import colors from '../style/colors';

const bounce = keyframes`
  0 {
    transform: translateY(0);
  }
  50% {
      transform: translateY(-15px);
  }
  100% {
      transform: translateY(0);
  }
`;

const Text = styled.div({
  width: '80px',
  margin: '0 auto',
  animation: `${bounce} 3s ease infinite`,
  fontSize: '13px',
  textAlign: 'center',
  color: `${colors.gray_text02}`,
});

const Container = styled.div({
  width: '80px',
  margin: '0 auto',
});

const BoxStyle = styled.div({
  float: 'left',
  width: '30%',
  padding: '5px',
});

const LoadingIcon = styled.div({
  width: '20px',
  height: '20px',
  borderRadius: '100%',
  background: `${colors.gray_text}`,
  animation: `${bounce} 3s ease infinite`,
});

export default function Loading() {
  return (
    <>
      <Text>
        로딩중
      </Text>
      <Container>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
        <BoxStyle>
          <LoadingIcon />
        </BoxStyle>
      </Container>
    </>
  );
}

컴퓨터의 구성[cs]

bgnbgn — Mon, 8 Aug 2022 14:46:51 +0900

컴퓨터는 크게 하드웨어와 소프트웨어로 나누어져있다.

하드웨어 : 컴퓨터를 구성하는 기계적 장치

소프트웨어 : 하드웨어의 동작을 지시하고 제어하는 명령어 집합

하드웨어는 중앙처리장치(cpu), 기억장치(RAM,HDD), 입출력 장치(마우스, 프린트)가 있고,

소프트웨어에는 시스템 소프트웨어(운영체제, 컴파일러), 응용 소프트웨어(워드프로세서, 스프레드시트)가 있다.

하드웨어의 구성요소들은 각각 시스템 버스로 연결되어 있으며, 시스템 버스는 데이터와 명령제어 신호를 각 장치로 실어나르는 역할을 한다.

중앙처리장치(CPU)

인간으로 따지면 두뇌에 해당하는 부분이다.

주기억장치에서 프로그램 명령어와 데이터를 읽어와 처리하고 명령어의 수행 순서를 제어한다.

중앙처리장치는 비교와 연산을 담당하는 산술논리연산장치(ALU)와 명령어의 해석과 실행을 담당하는 제어장치, 속도가 빠른 데이터 기억장소인 레지스터로 구성되어 있다.

산술논리장치(ALU)[하드웨어 장치]

덧셈, 뺄셈같은 두 숫자의 산술연산과 배타적 논리합, 논리곱, 논리합 같은 논리연산을 계산하는 디지털 회로이다.

산술논리 장치는 컴퓨터 중앙처리장치의 기본 설계 블록이다.

(ALU 크기가 CPU 크기를 결정함 ( 8, 16, 32 비트 등의 CPU))

레지스터(CPU가 용청을 처리하는데 필요한 일시적 기억장치)

프로세서에 위치한 고속 메모리로 극히 소량의 데이터나 처리 중인 중간 결과와도 같은 프로세서가 바로 사용할수 있는 데이터를 담고있는 영역을 레지스터라고 한다. 크기와 종류가 다양하다.

기억장치

프로그램, 데이터, 연산의 중간 결과를 저장하는 장치이다.

주기억장치와 보조기억장치로 나누어지며, RAM과 ROM도 이곳에 해당한다.

RAM은 휘발성 메모리로 전원이 차단되면 데이터가 사라진다.(레지스터???)

ROM은 비휘발성 메모리로 전원이 차단되어도 데이터가 사라지지 않는다.

보조기억장치는 하드디스크 등을 말하며, 주기억장치에 비해 속도는 느리지만 많은 자료를 영구적으로 보관할수 있는 장점이 있다.

입출력 장치

입력과 출력장치로 나누어진다.

입력장치는 컴퓨터 내부로 자료를 입력하는 장치(키보드, 마우스 등) 있다.

출력장치는 컴퓨터에서 외부로 표현하는 장치(프린터, 모니터, 스피커 등) 이다.

시스템 버스

하드웨어 구성 요소를 물리적으로 연결하는 선이다.

각 구성요소가 다른 구성요소로 데이터를 보낼 수 있도록 통로가 되어준다.

용도에 따라 데이터 버스, 주소 버스, 제어 버스로 나누어진다.

데이터 버스 (고속도로)

중앙처리장치와 기타장치 사이에서 데이터를 전달하는 통로이다.

기억장치와 입출력장치의 명령어와 데이터를 중앙처리장치로 보내거나, 중앙처리장치의 연산결과를 기억장치와 입출력장치로 보내는 양방향 버스이다. (양방향길?)

주소 버스 (네비)

데이터를 정확히 실어나르기 위해서는 기억장치 주소를 정해주어야 한다.

주소 버스는 중앙처리장치가 주기억장치나 입출력장치로 기억장치 주소를 전달하는 통로이기 때문에 단방향 버스이다.

제어 버스 (자동차)

주소 버스와 데이터 버스는 모든 장치에 공유되기 때문에 이를 제어할 수단이 필요하다.

제어 버스는 중앙처리장치가 기억장치나 입출력 장치에 제어 신호를 전달하는 통로이다.

제어 신호 종류에는 기억장치 읽기 및 쓰기, 버스 요청 및 승인, 인터럽트 요청 및 승인, 클릭, 리셋 등이 있다.

제어 버스는 읽기 동작과 쓰기 동작을 모두 수행하기 때문에 양방향 버스이다.

컴퓨터는 기본적으로 읽고 처리한 뒤 저장하는 과정으로 이루어져 있다.

(READ -> PROCESS -> WRITE)

이 과정을 진행하면서 끊임없이 주기억장치(RAM)과 소통한다.

이때 운영체제가 64bit라면, CPU는 RAM으로부터 데이터를 한번에 64비트씩 읽어온다.

다시 복습하는 이론 react (Component, state, props)

bgnbgn — Mon, 8 Aug 2022 11:31:38 +0900

Component란 무엇인가?

- 컴포넌트는 리액트에서 가장 중요한 요소이다. 그 이유는 리액트로 만들어진 앱을 이루는 최소한의 단위가 컴포넌트이기 때문이다. 쉽게 말하자면 컴포넌트들은 하나하나의 블록들이라고 생각하고 이 블록들을 잘 쌓아 올리는 과정이 리액트를 쓰는 과정이라고 생각하면 된다. 그리고 이 작은 컴포넌트들을 유기적으로 잘 연결 시키고 동작이 잘될시에 리액트를 잘 다루고 있다고 표현할수 있다. 그리고 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데 공식사이트에서는 함수형 컴포넌트를 권장한다.

HTML을 사용하다보면 header, container, footer 등등으로 나누다보면 코드가 상당히 길어지게 된다. 그것들을 하나하나 컴포넌트들로 나누어서 사용하면 매우 깔끔하게 사용가능하다.

<div className="App">
  <header />
  <container />
  <footer />
</div>

이런식으로 1개 1개의 컴포넌트들로 나누어서 사용할 수 있다.

state와 props란?

- 컴포넌트들은 데이터를 어떤식으로 관리할까? 방법은 state와 props를 이용해서 데이터를 사용한다. 우선 state는 컴포넌트가 가지고 있는 데이터이다. 즉 자기자신이 가지고 있는 데이터라고 이해하면 쉽다. 그리고 props 는 컴포넌트가 부모 컴포넌트로 부터 받아온 데이터이다. 예를 들어 <header/>에서 사용한 데이터인 로고 이미지 경로나 메뉴 이름들은 다른 컴포넌트들에서는 사용하지 않는다. 즉 헤더 컴포넌트내에서만 쓰는 정보인 셈이다. 여기서 알수 있는건 state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다. 생성과 수정도 오직 해당 컴포넌트 내에서만 이루어진다.

- props는 부모 컴포넌트로 부터 받아온 데이터라는데 무슨말일까? 아래 예시 코드를 살펴보자

<container>
	<imagebanner/>
	<contents1/>
</container>

위와 같은 형태의 컴포넌트들이 있다고 가정해보자. container는 두 개의 자식 컴포넌트를 가지고 있다. imgaebannr에 필요한 이미지 경로 데이터를 부모인 container가 가지고 있다고 가정하면 (state로) 이 때 imagebanner 컴포넌트는 자신의 부모인 container로 붙여 데이터를 받아서 사용한다. 여기서 container가 가지고 있는 이미지 경로를 imagebanner에 전달해주면 이 이미지 경로가 imagebanner의 props가 되는 것이다. 즉 앞서 말한것처럼 부모 컴포넌트로 부터 전달 받은 데이터를 props라고 한다. 그리고 props는 자기 자신의 데이터가 아니기 때문에 수정할 수 없다.

함수형 component란?

import React from 'react'; 
 //방식1
function Bucketlist(props){
    return (
        <div>버킷 리스트</div>
    );
}
//방식2
const BucketList = (props) => {
    return (
        <div>
            버킷 리스트
        </div>
    );
}
export default BucketList;

함수형 컴포넌트는 위와 같이 2가지 방식으로 사용할수 있는데 보통 밑에 방식으로 사용하는걸 더 선호한다. export default BucketList는 이 컴포넌트를 외부로 보내주기 위해서 사용한 코드이다. 그 후에 App.js로 돌아가서 BucketList 컴포넌트를 import 시켜주고 사용하면 된다.

import React from 'react';
import BucketList from './BucketList'; ## 이렇게 우리가 사용할 컴포넌트를 import시켜주고 사용한다.

function App() {

  return (
    <div className="App">
      <h1>내 버킷리스트</h1>
      <BucketList/> ## 여기로 불러왔다.
    </div>
  );
}

export default App;

클래스형 Componetn란?

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BucketList from './BucketList';

class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }

  render() {
      return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        <BucketList list={this.state.list}/>
      </div>
    );
  }
}

export default App;

위와 같은 형식이 클래스형 컴포넌트의 방식이다. 이제 컴포넌트에서 컴포넌트로 데이터를 넘겨주는 방식을 알아보도록하자 앞서 counstructor 부분에 있는 데이터를 BucketList로 state를 넘겨준다고 생각하면 된다. BucketList 컴포넌트 안에 list란 이름으로 데이터를 전달해 준게 지금BuketList에 데이터를 넘겨준것이라고 보면된다. 그 후에 BucketList에서 함수형 컴포넌트 생성시 파라미터 안에 props를 받아서 console.log(props)로 찍어보면 확인할 수 있다.