Performant and powerful data synchronization for React! -리액트를 위한 성능좋고 강력한 데이터 동기화!

Fetch, cache and update data in your React and React Native applications all without touching any "global state" -"전역 상태"를 건드리지 않고 리액트와 리액트 네이티브 어플리케이션에서 데이터를 fetch, cache, update한다.

리액트 쿼리는 서버의 값을 클라이언트에 가져오거나 캐싱, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 사용할수 있습니다.

useQuery

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import axios from "axios";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    axios.get(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.data)
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

위의 예제코드에서 보면 최상의 router 부분에 react-query를 사용하기 위한 초기 세팅이 들어가고 Example 컴포넌트에서 사용하게 됩니다.

const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    axios.get(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.data)
  );

위의 부분을 보면 구조분해 할당으로 isLoading, error, data, isFetching을 한번에 처리하는 모습이 보인다..! useQuery의 첫번째 인자로는 key값이 들어가고 두번째 인자로는 함수모양으로 안쪽에 axios.get을 이용해서 원하는 데이터를 가져올수가 있습니다.

위의 방식처럼 이용한다면 로딩을 나타낼때 에러를 처리할때 따로따로 지정하지 않고도 리액트 쿼리를 통해서 한번에 처리가 가능합니다..👍

첫번째 인자로 설정한 key값은 다른 컴포넌트에서도 해당키를 사용하면 호출이 가능하고, key는 string과 배열을 받을 수 있습니다. 배열로 key를 받는다면 배열의 첫번쨰 값은 string값으로 다른 컴포넌트에서도 부를수 있는 값이 들어가고 두번째 값은 query 함수 내부에 인자로 해당값이 전달됩니다.

useQuery는 비동기로 작동하게 됩니다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 여러개의 useQuery가 동시에 실행되는 것입니다. 이러한 경우에는 useQuery보다는 useQueries를 사용하는게 좋습니다.

이번 과제는 팀과제로 검색어를 추천 해주는 기능을 만들고 모양은 기존의 홈페이지를 클론코딩하는 식으로 진행됩니다. 요구사항에 Redux를 사용하라는 내용이 있었기에 우선 Redux(리덕스)에 대해서 알아보겠습니다.

Redux(리덕스)

우선 리덕스를 사용하는 이유에는 props문법을 쓰기가 귀찮을때와 state변경 관리를 할때 사용합니다.

보통의 리액트 스타일의 웹개발은 컴포넌트 단위로 나누어 하나의 페이지를 조립하는 식으로 만들게 되는데 이때 사용하는 데이터들을 연결해주기 위해서 상위에서 아래의 컴포넌트에 props를 이용하여 데이터 값을 주고 useState를 이용하여 변경된 값을 전달하는 식으로 개발이 됩니다.

위의 컴포넌트가 매우많이 중첩이 되어있고 가장 상위의 데이터를 가장 하위의 컴포넌트에 전달하기 위해서는 그 중간에 있는 모든 컴포넌트들에게 props를 통해서 전달해 주어야 하는데 이는 굉장히 비효율적인 방식입니다.

이때 사용하는 라이브러리가 리덕스입니다.

하나의 파일을 따로 만들어 그곳에 변수를 저장한 후에 다른 컴포넌트들에서 필요할때마나 따로 만들어둔 변수 파일에서 끌어다가 쓰면 위의 귀찮고 복잡해질수 있는 props를 쓰지 않고 가져다가 쓸수 있게 됩니다.

리덕스를 어디서 사용해야 할까..?

상태를 관리하는곳에 사용하게 된다면 변경되는 부분은 검색어 부분과 키보드의 화살표를 통해서 선택하는 부분을 사용할수 있을까? 라는 생각이 든다.

이번 개인과제에서 영화를 검색하고 즐겨찾기에 추가하는 기능을 만들어야하는데 이때 붙은 조건중 하나가 페이지를 빠져나왔다가 다시 들어가도 즐겨찾기에 추가한 영화들이 남아있어야 한다는 조건이 붙어있었습니다. 옆에 LocalStorage를 이용하라고 나와있었기 때문에 먼저 LocalStorage를 알아보겠습니다.

LocalStorage??

로컬 스토리지는 말그대로 지역 저장소 즉 HTML5에서 지원하는 기능으로 브라우저에 존재하는 저장소를 뜻한다. 로컬 스토리지는 읽기 전용 속성을 사용하면 Document 출처의 스토리지 객체에 접근할 수가 있습니다. 저장된 제이터는 브라우저 세션간에 공유가 되기때문에 이 부분에 즐겨찾기된 데이터들을 저장한다면 페이지가 바뀌어도 데이터를 남겨둘수 있습니다.

// key : 'accessToken' || Value: 'value'
localStorage.setItem('accessToken', 'value')
// key값이 'accessToken'인 값을 가져오기
const data = localStorage.getItem('accessToken')
// key값이 'accessToken'인 값을 제거하기
localStorage.removeItem('accessToken')
// 초기화
localStorage.clear()

위에서 보이는 key값과 value값은 모두 string이라는것을 명심해야 합니다.

따라서 로컬 스토리지에 객체형태를 저장하고 싶다면 내용을 'JSON.stringify()'를 통해 JSON형태로 변환해주어야 하고 데이터를 받아올때에는 'JSON.parse()'를 통해 원래의 데이터 모양으로 되돌려 주어야 합니다.

• 검색 기능과 첫페이지에서 페이지네이션과 하단의 네비게이션바를 만들어 홈부분과 즐겨찾기 부분을 라우트로 연결해두었습니다.
• 과정 중에 생긴 여러가지 문제점들을 해결하느라 시간이 너무 많이 걸렸습니다..
• 하지만 아직도 많은 부분 모자란 부분이 있다..

부족한 부분

• 검색할때 엔터키 이용 불가
• 한번 검색을 하고 첫페이지가 아닌 중간 페이지에 두고 검색을 하면 첫페이지로 되는것이 아니라 페이지 목록이 그대로이다...
• 영화의 개수가 한페이지를 안넘을때 페이지의 수가 두개가 나온다..
• 즐겨찾기 페이지로 넘어갔다 돌아오면 검색이 초기화되어있다.

해야되는 기능

• 즐겨찾기 추가 기능
• 즐겨찾기 삭제 기능
• 영화를 누르면 즐겨찾기를 하겠냐는 메세지

우선 순위..

일단은 최저한의 기능들을 채운뒤에 부족한 부분을 채우는것이 맞는것같습니다. 해야되는 기능을 하면서도 부족한 부분이 분명 추가되겠지만.. 그 부분은 후에 채워두도록 해야겠습니다..

React pagination libray

이번 과제에서는 라이브러리의 활용이 자유롭게 가능해서 우선 페이지네이션을 라이브러리를 통해서 구현해볼 생각 이었습니다.

https://www.npmjs.com/package/react-paginate

위의 라이브러리를 이용하여 pagination을 구현하였고 과정중에 자꾸 페이지의 시작이 2부터 시작하여 한참을 해매이다가 api로 넘어오는 페이지 넘버는 1부터 시작인데 페이지네이션에서는 0부터 시작되어 1에 들어가게 되므로 어긋났었던 것이다.. 이거 때문에 시간을 많이 날리게 되었다...

dl태그?

<dl> 태그는 용어와 그에 대한 설명을 리스트 형식으로 정의할때 사용합니다. <dl>요소는 용어나 이름을 나타내는 <dt>요소와 해당 용어에 대한 설명을 나타내는 <dd>요소로 구성됩니다. 강의 중에 강사님이 사용한 태그라서 만들어 가는 방향이 비슷한거 같아 사용해보았습니다..

한글 초성만으로 검색하는 기능

로컬스토리지 쓸때 스트링으로 저장되므로 store.js 라이브러리를 쓰면 아주 편하게 사용이 가능하다.

검색창 구현시에 엔터키를 사용하여 만드는 방법 이벤트핸들러를 이용하지 않고 만드는 방법

carousel slick.js 슬라이드 형태를 만드는데 유용

useMemo, useCallback의 차이점

Cx.. 활용잘하기

Html tag

Html 태그는 can I use 사이트에 검색해보고 사용되는지 확인하고 사용하는게 좋다.

검색하는 법 영어로 검색 해야 많은 것을 볼 수 있음, 기본적으로 알아야 하는 직무 영어정도는 많이 알아두는게 좋다

질문하는 법 질문을 할때는 1차원적인 질문보다는 에러메세지와 함께 어떤식으로 작동 시키려 하는지를 함깨 물어야 한다.

이미지 최적화 이미지를 최적화 하지 않으면 홈페이지 로딩이 매우 느려져서 웹페이지가 망하게 된다. 보통은 ui디자이너가 챙겨주지만 그렇지 못한 경우에는 개발자들이 신경써줘야하는 부분이다. Jpg 이미지 최적화 방법은 사이트를 이용 (https://squoosh.app/) 이 홈페이지에서 압축률에 따른 사진의 상태 비교와 용량이 얼마나 줄었는지 알수 있다. 해상도의 이해도가 어느정도 필요할것 같다.

색상수가 적은 클립아트 와 같은 경우는 png로 변환 해주면 좋다. 색상이 적은경우에는 색상의 종류도 줄여준다면 극한으로 데이터를 아낄수가 있다.

gif는 사용하지 않는다.

모멘트.js는 버리는 추세 day.js를 사용한다

이후의 타입스크립트 관련한 foundation 설정과 기본적인 사용법에 관한 내용들 또한 기업 과제의 설명

지난번 포스팅에서 해결하지 못했던 둥근 모서리를 만드는 법을 스택오버플로우에서 찾을수가 있었다 역시 버거형님들 👍 clip-path 속성은 그대로 inset을 사용하였고 inset의 옵션중에 round속성이 있어 border-round의 값과 똑같이 해주었더니 원하는 모양으로 딱맞게 자를 수가 있었다!

  clip-path: inset(0% 0% round 60px);

위의 코드처럼 한다면 해당 div영역크기 만큼 다 보이도록 설정하는 방법은 0% 0%로 주면서 가리는 부분이 없게 해주는 것이고 round 60px를 통해서 border-round 효과를 추가해줄수가 있다.

어제 마지막으로 강사님이 프로토타입으로 만들어 배포한 Idolist에TodoList에 구현되지 않은 기능들을 팀원들과 컴포넌트별로 나누어 기능 구현을 해보기로 하였습니다. 여러 기능 중에 저는 상단의 메뉴바를 클릭하면 원래의 화면이 옆으로 넘어가며 완전히 넘어가는 화면은 사라지고 옆으로 이용자의 정보들을 모아둔 메뉴 화면이 나오도록 하는 부분이었다. 이것을 두 명이 나누어서 나는 화면이 넘어가는 애니메이션 부분을 맡게 되었습니다.

아래의 영상에서 보듯이 원래 있던 화면이 옆으로 넘어가면서 살짝쿵 작아지게 되는데 원래의 화면 크기에서 벗어나면 안보이게 해주는것이 포인트라고 생각했습니다.

transition과 tranceform

transition은 페이지에서 동작이 일어날때 부드럽게 이동하도록 만들어 주는 css 속성입니다. 시간을 정하여 이동하는 속도를 조정할 수 있습니다. tranceform에서는 scale속성을 이용하여 가로세로의 비율을 줄여주었고 translateX속성을 이용하여 위의 영상처럼 x축으로 이동할 수 있게끔 만들어 주었습니다.

clip-path..

clip-path는 이미지를 다양한 모양으로 잘라주는(?) 모양에 맞춰서 이미지나 컴포넌트를 잘라주는 css속성입니다. 이번 과제의 컴포넌트 모양처럼 둥근모서리의 사각형으로 만들어 주고 싶었으나 clip-path의 작동방식이 도형 모양을 정하고 도형의 꼭지점의 좌표를 움직여 모양을 만들어야 하는 방식이어서 정확히 잘라내진 못하고 이번 과제에서는 inset속성을 이용하여 컴포넌트의 크기와 같은 사각형으로만 잘라내었습니다.

어려웠던점 clip-path가 위의 설명처럼 꼭지점을 움직이는 것이었는데 각 순서마다 섬세하게 움직이는것이 쉽지 않았었다. 하지만 clip-path의 모양대로 바꾸면 속성의 값을 반환해주는 홈페이지를 찾아 여러가지로 실험해 볼수 있었다. clip-path 홈페이지 : https://bennettfeely.com/clippy/ 영상 원본 홈페이지 : https://dribbble.com/shots/14100356-ToDo-App-UI

온보딩과정 1일차..

1일차에는 과정 통과한 사람들의 코드를 보면서 피드백하며 코딩하면서 생각해야하는 부분들과 사용하면 안되는 것들 또 좋았던 부분들에 대해서 살펴 보았고, 홈페이지들을 탐방하면서는 어떤것들을 사용해서 만들었는지와 이미지 최적화에 대한 이야기들을 위주로 많은 이야기들을 들었습니다. 또한 강사님의 Visual Studio Code의 설정들을 보면서 어떤것들을 사용했고 간단한(?) TODO리스트를 짜면서 활용하는 방법까지 살펴 보았습니다.

첫날에 너무나 많은 정보들이 들어오고 내가 모르던 부분들이 너무나 많았어서 듣고 소화하기까지가 아직 많이 부족한것 같다.. 강의중 메모를 잘 활용해서 중요 키워드들을 정리하고 블로그에 정리하는 식으로 진행하도록 해야겠다.

key값 index로 하면 안된다..?

Map을 사용시에 key값을 index를 그대로 넣게 된다면 리액트가 key를 확인할때 같은값으로 인식하기 떄문에 원하는대로 따로 움직이는게 아니라 같이 움직이게 되므로 index를 사용하려면 `slice-key-${index}`와 같이 각각의 key마다 이름을 붙여주어야 한다.

cx? classNames?

조건에 따라 style을 변경할때 사용함 자세한건 검색

ref

ref같은 경우는 ux적으로 바꾸는것 아니고 데이터를 바꾸면 바뀜과 동시에 페이지 오류가 발생할수 있다 따라서 직접 데이터를 건드리는 부분은 사용하면 안된다.

이메일 정규식

Email regex w3c - 이메일 국제표준 정규식

e.target? e.currentTarget!

e.targer 말고 e.currentTarget 그냥 target은 그 자식요소들 까지 모두 선택되는 반면 currentTarget은 부모 요소만 가져오게 되므로 currentTarget을 사용하는게 좋다.

useState

setState를 사용할때는 한번에 사용하면 리액트는 한번에 처리하려고 하기 때문에 생각과는 다르게 동작할수 있기때문에 그런식의 사용은 하지 않는게 좋다

id태그?

리액트에서는 id태그를 사용할 일이 거의 없다.

핵심 이미지들

화면에 핵심에 속하는 이미지들은 퍼블릭에 있으면 안된다. src폴더에 들어가 있어야 한다.

svg파일 취급

svg파일은 따로 컴포넌트화해서 사용한다. 그렇게 사용하면 이미지 파일의 색상을 임의로 바꿔서 사용이 가능하다.

useClickAway 라이브러리

useOnClickOutside

useClickAway 라이브러리

온보딩에 지원하기 위해 과제를 만들던 중에 'TypeError: Cannot read properties of null (reading 'style')' 라는 에러를 만나게 되었다. 토글이나 탭을 만들면서 css를 조건에 맞춰 바꾸기 위해 document.getElementById을 이용해서 바꾸려고 했지만 이 과정중에서 첫 렌더링때에 토글이 사용이 안되고 한번 렌더링 후 다시 저장하였을때만 작동하는 것을 발견하였다.

해결 과정

해결은 사실 간단하였다 HTML을 먼저 랜더링하고 자바스크립트를 가져오면 되는것이었다. 하지만 나는 지금 리액트를 이용하여 만들고 있기 때문에 그것보다는 useRef를 사용해 보기로 하였다.

useRef?

useRef란 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환해준다. 이 객체에는 일반 변수뿐 아니라 DOM을 담을 수도 있다. 변환된 객체는 컴포넌트의 전 life cycle을 통해서 유지된다. .current의 프로퍼티를 변경하더라도 리렌더링이 발생되지 않는다. ref 객체 안의 값은 리액트 생명주기에 독립적이기 때문에 리렌더를 발생시키지 않을 뿐더러 리렌더 되더라도 값이 유지된다. 라고 하지만 아직은 '리액트에서 dom을 사용하기 위한것' 정도로 생각하고 다음에 다시 정리 해보도록 하겠습니다.

간단히 말해서 완성되어 있는 코드를 동작이 바뀌지 않더라도 좀더 좋은 코드 깔끔한 코드 누구나 쉽게 알아볼 수 있는 코드, 더욱 최적화가 잘 되어있는 코드로 바꾸는 것들을 리팩토링이라고 합니다. 물론 동작이 바뀌거나 디자인을 바꾸는 등의 나중에 추가되는 코드들도 리팩토링이라고 생각합니다.

리팩토링을 하는 이유

리팩토링을 하는 이유는 다양하지만 가장 근본적인 이유는 아무래도 처음부터 완성된 코드를 짜는 사람은 없기 때문입니다. 특히 시간 제한이 있는 코딩의 경우에 자잘한 부분이나 놓치는 부분이 분명이 존재하고 이를 고쳐나가서 클린 코드를 짜기위해 리팩토링을 하는 것입니다.

취업을 준비하며 내가 만들었던 프로젝트를 살펴 보았을때 부족한 부분들과 좀더 깔끔한 완성도를 위해 리팩토링을 시작해보려고 합니다. 우선은 당시 시간이 부족하거나 실력이 부족하여 하지 못했던 typescript의 타입들을 정하고 모듈화 하는 부분과 반응형 홈페이지를 만드는 부분과 좀 더 깔끔한 디자인을 만드는 것이 이번 리팩토링의 목표입니다.

시작!

피보나치 수열이란

• 1 + 1 + 2 + 3 + 5 + 8 + 13 ... 식과 같이 1 + 1부터 시작해서 더해서 나온 결과와 그 앞에 있는 숫자를 계속해서 더해가는 식을 피보나치 수열이라 한다.

Memoization기법을 사용하지 않은 수열

function fibo(num) {
    if(num <= 1) return num;

    return fibo(num - 2) + fibo(num - 1)
}

위의 코드는 매우 간단하게 피보나치 수열을 풀 수 있지만 간단히 10번째 수열을 구하려고 해도 아래의 디버깅 홈페이지에서 봐도 수 많은 연산이 필요하게 된다.

하지만 동적계획법의 핵심인 memoization 기법을 사용하게 된다면 어떻게 될까?

동적계획법의 알고리즘

• 문제를 부분 문제로 나눈다.
• 가장 작은 문제의 해를 구한 뒤에 테이블에 저장
• 테이블에 저장되어있는 데이터를 사용해 그 문제의 결과가 필요하다면 다시 계산을 하는 것이 아닌 저장되어있는 답을 가져와서 전체의 문제의 답을 구한다.

function fibo_memo(num){
    let newArr = [0, 1];

    let fi = (num) => { // 저장된 결과값이 있는지 없는지 판별해주는 함수를 선언
        if(newArr[num] !== undefined){ // 만약 결과값이 있다면 바로 리턴
            return newArr[num];
        }
        // 없다면 결과 배열에 결과값을 추가
        newArr[num] = fi(num - 1) + fi(num - 2);
        return newArr[num];
    };
    return fi(num);
}

위와 같이 결과값을 따로 저장해주는 배열을 선언하고 그 안에 결과가 들어있는지 아닌지를 판별해 있다면 그대로 가져다 쓰고 없다면 새롭게 추가 해주며 정답을 찾아간다면 그전에 답을 구할때까지 계속해서 재귀하여 푸는 방식보다 훨신 적은 연산으로 답에 도달할 수 있다.

위와 아래의 사진에서 아래쪽 step을 본다면 확연한 차이를 느낄수가 있다.

참고 자료 : https://velog.io/@devjade/%ED%94%BC%EB%B3%B4%EB%82%98%EC%B9%98-%EC%88%98%EC%97%B4-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0Dynamic-programming

분할 정복

• 문제를 나눌 수 없을 때까지 나누어서 각각을 풀면서 다시 합병하여 문제의 답을 업는 알고리즘이다.
• 하향식 접근법으로, 상위의 해답을 구하기 위해서 작은 단위인 아래로 내려가면서 하위의 해답을 먼저 구하는 방식이다.(일단적으로 재귀함수로 구현함)
• 문제를 잘게 쪼갤 때, 부분 문제는 서로 중복되지 않음(예 : 병합 정렬, 퀵 정렬 등)

동적프로그래밍

• 입력의 크기가 작은 부분 문제들을 '해결'한 후에 해당 부분 문제의 해를 활용해서, 보다 큰 크기의 문제를 해결하여 최종적으로 전체 문제를 해결하는 알고리즘이다.
• 상향식 접근법으로 가장 최하위 해답을 구한 후, 이를 저장하고 해당 결과값을 이용해서 상위 문제를 풀어가는 방식이다.
• 프로그램 실행 시 이전에 계산한 값을 저장하여 다시 계산하지 않으며 전체 실행 속도를 빠르게 만드는 기술인 Memoization 기법을 사용한다.
• 문제를 잘게 쪼갤 때, 부분 문제는 중복 되어 재활용된다. (예 : 피보나치 수열)

이 두 방법은 뭐가 다르지..?

우선 방향성이 조금은 다르다 분할 정복과 동적프로그래밍의 특징을 살펴보면 큰 문제인 것을 작은 문제로 나누어서 생각하는거 까지는 같은 특성이라고 볼 수도 있지만 검색을 해보면 든 생각은 비슷하긴 하지만 확실히 다른 특성이라고 생각이 되었다.

• 먼저 동적 프로그램은 memorization 즉, 작은 단위 문제의 답을 저장 해두었다가 꺼내 쓰는 방식인 것이다. 큰 문제를 작은 문제로 나누어 생각한다기 보다 작은 부분 부터 풀어나가 이것의 값을 이용해서 크고 복잡한 문제의 답을 낼때에 작은 과정들에서 빠르게 답만 가져온다라는 것이다.
• 이러한 특성 때문에 bottom-up 방식이라고 하는 것이다.
• 대표적인 예시로는 피보나치 수열이 있다.

• 다음으로 분할 정복 방식은 동적 프로그래밍과는 달리 시작의 큰 문제 에서 파고 들어 문제를 작게 만든 후에 그 작은 문제부터 연쇄적으로 풀며 답을 도출하는 방식이라고 생각이 들었다.
• 큰 문제를 파고 드는 방식이기 때문에 top-bottom 방식이라 칭하는것 같다.
• 대표적인 예로는 퀵 정렬과 병합 정렬이 있다.

두 방법의 예시로 든 퀵 정렬과 병합 정렬은 후에 정렬을 정리할때 천천히 살펴보도록 하겠다. 그때 피보나치 수열 또한 간단하게 보도록 하겠다.

이번 동적 프로그래밍을 공부하며 분할정복에 대해서도 알게되어 이렇게 비교하는 방식으로 정리를 해보았다. 내가 이해한것이 정확한 것인지는 모르겠지만 그래도 동적프로그래밍과 비슷한 분할 정복을 알았다는 것, 이 둘의 차이점을 비교 해볼 수 있었던 것에 만족한다.

오늘은 리눅스기반 환경에서 통용되는 개념인 사용권한과 환경 변수에 대해서 배웠다.

사용 권한

r : read permission w : write permission x : execute permission

사용 권한은 위와 같이 약자로 표시되며 총 4부분으로 이루어져 있다.

• d : 이 부분은 폴더인지 아닌지를 나타내는 부분으로 'd'로 나타 나있을시에는 폴더라는 뜻이다.
• owner : 파일의 소유자를 뜻하며 기본적으로 파일을 만든 사람이 소유자가 된다.
• group : 여러 user가 포함될수 있고, 그룹에 속한 모든 user는 파일에 대한 동일한 group 액세스 권한을 갖는다.
• other : 파일에 대한 액세스 권한이 있는 다른 user를 뜻한다. 파일을 만들지 않는 다른 모든 user를 의마한다. 따라서 other 권한을 설정하면, 해당권한을 global 권한 설정이라고 할 수 있다.

위의 표시를 이진법으로 다음과 같이 표시할 수도 있다.

약자 = 이진법 = 십진법 rwx = 111 = 7 rw- = 110 = 6 r-x = 101 = 5 r-- = 100 = 4 -wx = 011 = 3 -w- = 010 = 2 --x = 001 = 1 --- = 000 = 0

사용 권한을 확인하기 위해서는 터미널에서 명령어를 통해서 확인할 수 있다.

ls -l 명령어 사용

sudo?

일반 사용자가 root 권한(관리자 권한)을 빌려서 명령어를 실행할 때 활용할 수 있는 커맨드

su?

계정 전환을 위한 커맨드

chmod 라는 명령어로 권한 설정을 해 주어야 하는 이유?

내가 만든 파일이나 디렉토리를 다른 사람이 마음대로 수정하거나 삭제되면 심각한 문제가 발생할 수 있기 때문에 설정해주어야 한다.

[커맨드] symbolic method 사용 예시

chmod g-r filename # removes read permission from group
chmod g+r filename # adds read permission to group
chmod g-w filename # removes write permission from group
chmod g+w filename # adds write permission to group
chmod g-x filename # removes execute permission from group
chmod g+x filename # adds execute permission to group
chmod o-r filename # removes read permission from other
chmod o+r filename # adds read permission to other
chmod o-w filename # removes write permission from other
chmod o+w filename # adds write permission to other
chmod o-x filename # removes execute permission from other
chmod o+x filename # adds execute permission to other
chmod u+x filename # adds execute permission to user

[커맨드] chmod 명령어와 symbolic method로 helloworld.js 파일의 권한을 변경

chmod a=rw helloworld.js # -rw-rw-rw-
chmod u= helloworld.js # ----rw-rw-
chmod a+rx helloworld.js # -r-xrwxrwx
chmod go-wx helloworld.js # -r-xr--r--
chmod a= helloworld.js # ----------
chmod u+rwx helloworld.js # -rwx------

환경 변수

환경 변수란? API key와 같이 공개할 수 없는 정보가 코드에 포함될 경우, 네트워크를 통해 공개될 우려가 있다. 이러한 일을 방지 하기 위해서 사용하는 방법이 JavaScript에서 변수에 문자열을 할당하는 것처럼, API key를 PC에서 사용하는 변수에 할당하고 사용할 수 있다. Linux 기반의 운영체제의 PC에는 시스템 자체에 전역변수를 설정할 수 있다. 그리고 시스템에 설정한 전역변수를 환경변수라 한다. export를 이용해 설정할 수 있다.

환경변수 확인하기, 환경변수 임시 적용

• Linux 운영체제에는 이미 많은 환경변수가 설정되어 있다. 터미널에 명령어 export를 입력해, 기록된 환경변수를 확인할 수 있다.

터미널에 export 명령어를 입력하면, 현재 성절된 환경변수를 확인할 수 있다. 또한 export를 이용하면 새로운 환경변수를 추가 할수 있다. 명령어 ehco와 함께 환경변수를 입력하시면, 환경변수의 값을 확인할 수 있다. 이때 환경변수의 앞에는 달러사인($)을 입력, 변수라는 뜻을 터미널에 전달해야한다.

export urclass="is good" -> urclass에 "is good"이라는 문자열이 들어간 변수 선언 echo $urclass -> 결과값으로 바로 아래줄에 is good이 출력된다.

dotenv

• npm 모듈인 dotenv를 사용하면, 자바스크립트에서 환경변수를 사용할 수 있다. 아래의 과정을 통해서 설치할 수 있다. 이때 생성된 폴더는 설치할 모듈과 이름이 같아서는 안된다.

  mkdir 폴더명 # 설치할 폴더 생성

• cd 폴더명* # 생성한 폴더에 들어감

• npm init* # 엔터키를 여러번 입력해 init을 마친다.

• npm i dotenv* # dotenv 모듈을 설치

• 설치한 dotenv를 이용해 환경변수에 접근할 수 있다. 새로운 파일 index.js를 생성하고, process.env를 출력한다. Node.js의 내장 객체 process.env를 이용하면, 명령어 export 로 확인한 내용과 동일한 내용을 객체로 출력하게 된다.

• process.env는 Node.js 환경에서 조회할 수 있다.

.env

• 환경변수를 Linux 운영체제에 저장하는 방법은 여러 가지가 있지만, Node.js에서는 파일 .env를 만들어 저장하는 방식을 사용한다. 먼저, .env파일을 생성하고, 사용하고자 하는 환경변수를 입력한 뒤 저장한다.
• 모듈 dotenv를 이용하면, 파일 .env에 저장한 변수를 조회할 수 있다.
• 위의 과정들을 통해서 API key, DB password와 같이 민감한 정보들을 저장하고 관리할 수 있다. 또한 서로 다른 PC 또는 여러 .env 파일에서, 같은 변수 이름에 다른 값을 할당할 수 있다.