09.21 항해 9일차 TIL

오늘 배운 것

• 프론트엔드 기초지식
• JavaScript 배열 내장함수
• React 설치

주특기 강의를 들으면서 배운 내용을 정리 해보려고 한다.

Server 와 Client

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 한다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같다.

• 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI에 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 파이어폭스 또는 크롬 과 같은 웹 브라우저) 입니다.
• 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다.

서버리스(Serverless)

• 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델이다.

• 클라우드 제공업체가 서버 인프라에 대한 프로비저닝, 유지 관리, 스케일링 등의 일상적인 작업을 처리하며, 개발자는 배포를 위해 코드를 컨테이너에 패키징하기만 하면 된다.

JS 배열 내장함수

MAP

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

• 원본 배열을 해치지 않고 새로운 배열을 생성한다.
• 요소를 가공할 수 있다.

FILTER

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

• 조건을 만족하는 특정 요소를 뽑아낼 수 있다.
• 요소를 가공할 수는 없다.

CONCAT

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

• 배열을 합칠 수 있다.
• 중복 요소를 제거하지 않는다.
  
  

중복 요소 제거 방법

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열에 넣어주겠다.
const merge = [...new Set([...array_num01, ...array_num02])];
// 중복 항목(숫자 3) 제거
console.log(merge);

FROM

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

• 유사 배열 객체나 반복 가능한 객체를 복사해 새로운 배열 객체를 만든다.

React

creat-react-app 설치 중 계속 오류가 생겨 해결 한 방법을 남겨두려 한다.

yarn 설치 오류

$ yarn add global create-react-app
yarn add v1.22.11
info No lockfile found.
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.npmjs.org/creat-react-app: Not found".
info If you think this is a bug, please open a bug report with the information provided in "경로"
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

npx 설치 오류

$ npx create-react-app
npm ERR! code E404
npm ERR! 404 Not Found - GET http://registry.npmjs.org/creat-react-app - Not found
npm ERR! 404
npm ERR! 404  'creat-react-app@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\wshan\AppData\Roaming\npm-cache\_logs\2021-09-21T16_30_54_725Z-debug.log
[ 'creat-react-app@latest' ] 설치가 오류 코드 1로 실패했습니다

구글링을 하여 해결 방법을 찾던 중 어떤 방법을 써도 해결이 안되었는데 결국 Git-hub 에서 해결 방법을 찾았다.

기존 패키지 삭제

npm uninstall -g create-react-app
yarn global remove create-react-app

패키지 설치

npx create-react-app my-app
cd my-app
npm start

해결 방법을 기록하긴 하였으나 결국 후에 오류가 발생 하였을 때 기존 방법들 처럼 바뀔 수 도 있고 그냥 Git-hub에 다시 들어가서 변경 된 사항을 확인하고 오류를 해결 하는게 가장 빠르게 해결할 수 있을 것 같다.