프로그래밍 공부 노트

1. 객체안에 메서드 2. prototype 3. 생성자 함수 4. addEventListener 함수의 콜백 함수 1,2,3,4번 에서 사용하는경우 this는 window를 가리키게되므로 원하는데로 동작하지 않는다.

프록시 서버 (Proxy Server) 프록시 서버(proxy server)는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다. 프록시 서버 중 일부는 프록시 서버에 요청된 내용들을 캐시를 이용하여 저장해 둔다. 이렇게 캐시를 해 두고 난 후에, 캐시 안에 있는 정보를 요구하는 요청에 대해서는 원격 서버에 접속하여 데이터를 가져올 필요가 없게 됨으로써 전송 시간을 절약할 수 있게 됨과 동시에 불필요하게 외부와의 연결을 하지 않아도 된다는 장점을 갖게 된다. 또한 외부와의 트래픽을 줄이게 됨으로써 네트워크 병목 현상을 방지하는 효과도 얻을 수 있게 된다. Proxy Server 의 기능 1. 유저의 아이피를 Proxy Server에서 임의로 바꿔 버릴 수 있다. 그래서 인터넷에서는 접근하는 사람의 IP를 모르게 된다. 2. 보내는 데이터도 임의로 변경할 수 있다. 3. 방화벽 기능 4. 웹 필터 기능 5. 캐쉬 데이터, 공유 데이터 제공 기능 Proxy Server 를 사용하는 이유 1. 회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어 2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공 3. 더 나은 보안 제공 4. 이용 제한된 사이트 접근 가능

예전에 강의를 들을때 npm install <모듈명> -g 로 설치를 했었다. npm 을 통해서 모듈을 설치할 때 -g 옵션을 주게 되면 프로젝트마다 모듈을 설치해 줄 필요가 없이 내 컴퓨터 안에 글로벌한 공간에 모듈이 설치되어있기 때문에 프로젝트마다  같은 모듈을 공유해서 사용할 수 있다. 그러나 이는 좋은 방법이 아니다. 개발자 입장에서는 귀찮게 여러 번 설치할 필요도 없고 한 번만 설치하면 끝나는데 왜 좋은 방법이 아닐까 라고 생각할 수 있다. 하지만 좋은 방법이 아니다. 그 이유에는 아래와 같다. 모듈이 업데이트 되었는지 안되었는지 확인이 불가능 하다. 모든 프로젝트마다 모듈을 재설치 하는것이 아닌, 한 번 설치한 모듈을 그대로 사용하기 때문에 프로그래머가 매번 글로벌 모듈을 최신 버전으로 재 설치하지 않으면 확인 자체가 불가능 하다. 또한 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있다. 프로젝트를 여러개를 운영하는데 같은 모듈의 각각 다른 버전이 필요한 상황이 있을 수 있다. 이럴 때 글로벌 모듈의 버전을 사용하면 동일한 버전을 여러개의 프로젝트가 동일하게 사용하기 때문에 문제가 발생하게 된다. 특히 create-react-app 같은 보일러플레이트는 치명적인 문제가 발생할 수 있다. 리액트 프로젝트 생성 도구인 create-react-app 같은 모듈의 경우 업데이트가 잦은 모듈이다. 그렇기 때문에 매 설치 이전에 npm으로 재 설치를 하지 않는 경우에는 이전 버전을 사용하게 될 수 있다.  이러한 프로젝트 생성 모듈은 매 업데이트 마다 새로운 기능과 다양한 버그들이 고쳐진다. 그렇기 때문에 보일러플레이트 같은 모듈의 경우에는, 항상 최신 버전을 유지해 주는 것이 좋은데, 매번 설치하는 것이 꽤나 귀찮은 일이다. 이에 대한 해결책이 바로 npx 이다. npm 5.2버전부터 npx가 기본 패키지로 제공되기 시작했다. npx도 모듈의 일종이다. 이 모듈은 npm을 통해 모듈을 로컬에 설치했어야만...

원격 저장소 재연결 (연결 끊고 다시 연결하기) 깃(git) 사용시 현재 로컬 저장소와 연결되어있는 원격 저장소인 github의  repository와의 연결을 끊고 다시 연결하는 방법을 보자. 현재 연결되어있는 원격 repository를 확인한다. $ git remote -v  연결된 주소를 삭제  $ git remote remove <name> $ git remote -v  명령어로 연결된 원격 repository가 있는지 다시 확인해본다. 지워진것을 확인할 수 있다.  다시 연결하고싶은 원격 저장소와 연결하면 된다.

심볼(Symbol)은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용하거나 동시 다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을때 정말 고유한 식별자가 필요할 때 쓰여진다. Symbol( ) 또는 Symbol.for() 을 사용하면 심볼값을 만들 수 있다. Symbol을 사용하여 주어지는 String에 상관없이 동일한 String을 사용하더라도 고유한 식별자를 만들 수 있다. const symbol1 = Symbol ( 'id' ); const symbol2 = Symbol ( 'id' ); console . log ( symbol1 === symbol2 ); // false 만약 String이 똑같다면 동일한 Symbol 을 만들고 싶다면 Symbol.for()을 사용해서 아래와 같이 동일한 Symbol을 만들 수 있다. const symbol1 = Symbol . for ( 'id' ); const symbol2 = Symbol . for ( 'id' ); console . log ( symbol1 === symbol2 ); // true Symbol을 출력할 때에는 변수를 바로 사용하면 에러가 발생하므로 아래와 같이 심볼명.description 을 사용하여 String으로 변환하여 출력해야 한다. const symbol1 = Symbol . for ( 'id' ); const symbol2 = Symbol . for ( 'id' ); console . log ( symbol1 === symbol2 ); // true console . log ( symbol1 . description ); // id

여러개의 commands를 동시에 작동 시킬 수 있게 해주는 라이브러리 https://www.npmjs.com/package/concurrently#usage 개발을 할 때 프론트서버와 백서버를 따로따로 실행시켜줘야하는 번거러움을 줄여준다. client 폴더에서는 프론트 서버를 실행하고 server 폴더에서는 백 서버를 실행한다. 두개의 서버를 모두 실행하려면 client 폴더에가서 명령어를 한번, server 폴더에가서 명령어를 한번 총 두번 입력해야 한다. 이럴때 명령어 한번 입력으로 기존의 두번의 동작을 한번으로 줄여줄 수 있는 라이브러리이다. 최상위 폴더에서 각각의 package.json의 script 명령어의 위치를 지정해주어야한다. 위와 같이 명령어를 설정한 후 실행해보면 아래와같이 한줄의 명령어로 두개의 서버를 동시에 동작시킬 수 있다.

Xcode Command Line 오류(xcode-select --install 오류) $ npx create-react-app 으로 프로그램을 설치하던 중 err가 발생했다. 오류 내용 중 일부 No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'. gyp: No Xcode or CLT version detected! ... ... ... stack overflow 검색결과 Mac OS  Catalina (10.15.*) 버전에서 발생하는 문제라고한다.  Catalina (10.15.*)  이하의 버전들에서는   $ npx create-react-app 명령어를 사용하여도 에러가 발생하지 않는다고 한다. 해결방법 👇🏼 $ xcode-select --print-path # in my case /Library/Developer/CommandLineTools # the next line deletes the path returned by the command above $ sudo rm -rf $(xcode-select --print-path) # install them (again) if you don't get a default installation prompt $ xcode-select --install 첫번째 명령어는 설치 위치 확인 두번째 명령어는 삭제 세번째 명령어는 재설치  순서이다. 세번째 명령어  $ xcode-select --install 사용시 아래 사진과 같은 에러가 발생한다. 현재 소프트웨어 업데이트 서버에서 사용할 수 없기 때문에 해당 소프트웨어를 설치할 ...

HTTP (요청, 메서드, 상태코드) HTTP 요청 - 모든 자원(Resource)은 명사로 식별한다. - HTTP 경로로 자원을 요청한다. ex)  - GET /users            (O) - GET /users/{id}     (O) - GET /get_users      (X) - GET /create_users  (X) 해당 요청에대한 자세한 동작은 메소드를 작성해서 구분한다.  자원(Resource)(경로) 부분에 동작에대한 내용은 작성하지 않는다. HTTP 메서드 서버 자원에 대한 행동을 나타낸다. (동사로 표현) - GET : 자원을 조회 - POST : 자원을 생성 - PUT : 자원을 갱신 - DELETE: 자원을 삭제 등등.. HTTP 상태코드 1xx: 아직 처리중 2xx: 요청에 대한거 여기 있어! 3xx: 잘 가  4xx: 너가 문제야 5xx: 내가 문제야 200: 성공(success), GET, PUT 201: 작성됨(created), POST 204: 내용없음 (No Content), DELETE 400: 잘못된 요청 (Bad Request) 401: 권한 없음 (Unauthorized) 404: 찾을 수 없음 (Not found) 409: 충돌 (Conflict) 500: 서버 에러 (Interel server error) 참고자료 : HTTP 상태 코드 | MDN https://developer.mozilla.org/ko/docs/Web/HTTP/Status

리액트에서 페이지 이동 즉, 라우터를 사용하기 위해서는 react-router-dom 모듈 패키지를 설치를 해야한다. 리액트 라우터 설치 $ npm install react-router-dom react-router 도 설치해야 하지만, react-router-dom 패키지 내부에 react-router가 함께 설치되기 때문에  react-router-dom만 설치하면 된다. 여기서 한가지 알아야 할 점은 리액트에서 라우터는 실제로 페이지가 바뀌는것이 아닌 가상으로 바뀌는것으로 웹브라우저가 해당 페이지가 변경되었는지 인식하지 못 할 수 있다. 페이지 이동을 위해서 사용되는 라우팅 방법에는 몇가지가 있다.  그 중에서 많이 사용되는  BrowserRouter, HashRouter, Route, Link 에 대해서 공부해 봤다. 라우팅을 사용하기 위해서는  import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; 해당 코드를 import 해야한다. import 한것들에 대해서 간단히 말하면 BrowserRouter와 HashRouter는 라우터 기능을 사용하게 해주는 큰 틀과 같은 역할을 하며 Route는 경로를 지정하고 해당 경로에 대한 출력 화면 즉, 컴포넌트를 설정할 수 있다. 마지막으로 Link는 a 태그와 같이 설정한 경로에대한 컴포넌트를 불러오도록 도와준다. import React from 'react' import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; import LoginPage from './components/LoginPage' ; import MainPage from './components/MainPage' ; import RegisterPage from './...

SSH를 이용해서 GITHUB 연결 SSH란? SSH(Secure Shell Protocol)는 네트워크 프로토콜 중 하나로 컴퓨터와 컴퓨터가 인터넷과 같은 Public Network를 통해 서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 프로토콜이다. SSH의 통신방법 : Private Key / Public Key SSH는 다른 컴퓨터와 통신위해 접속 시 우리가 일반적으로 사용하는 비밀번호 입력을 통한 접속을 하지 않는다.기본적으로 한쌍의 Key (Private/ Public) 를 통해 접속하려는 컴퓨터와 인증과정을 거친다. Public Key : 공개되어도 안전한 키. Public Key를 통해 메세지 전송 전 암호화를 한다. (복호화불가) Private Key : 절대로 외부노출이 되어서는 안되는 키. 본인 컴퓨터 내부에 저장됨. Private Key를 통해 암호화된 정보를 복호화한다.  1. Public Key를 통해 정보 암호화 (복호화 불가) 2. Private Key를 통해 암호화된 정보 복호화  이러한 과정을 통해 서로 관계를 맺고 있는 Key라는 것이 증명되면 비로소 두 컴퓨터 사이에 암호화된 채널이 형성이 되어 Key 를 활용해 정보를 암호화/복호화 하며 데이터를 주고 받는다. SSH KEY 생성하고 Github와 연결 일단 SSH key 생성을 하려면 아래 링크로 이동 https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent 자신의 운영체제를 선택해주고 메뉴얼대로 진행한다. key 가 생성되면 터미널에  $ ls -a ~/.ssh 위의 명령어를 입력한다. id_rsa는 Private Key id_rsa는 Public Key 그 다음 아래 링크에서 대로 GitHub과 연결해준다. https://docs.github....

Buffer 란? 바이너리 데이터들의 스트림을 읽거나, 조작하는 매커니즘. 간단히 말해 버퍼는 0, 1로 이루어진 컴퓨터 친화적인 데이터이다. Nodejs 공식문서에 아래와 같이 나와있다. The Buffer class was introduced as part of the Node.js API to enable interaction with octet streams in TCP streams, file system operations, and other contexts. 버퍼 클래스는 TCP 스트림, 파일 시스템 작업 및 기타 컨텍스트에서 옥텟 스트림과의 상호작용이 가능하도록 Node.js API의 일부로 도입되었다. Buffer란 Node.js 에서 제공하는 Binary 의 데이터를 담을 수 있는 객체이다. 바이너리 데이터라는 말그대로 1010011010 과 같은 데이터가 Buffer 객체에 담긴다. 여기서 바이너리 데이터(binary data)란  컴퓨터는 이진수로 데이터를 저장하고 표현한다. 이진수는 0과 1의 집합이다. 각 이진수에서 0 또는 1로 되어있는 자리를 비트(bit)라고 한다.  const buff = Buffer . from ( 'hello' , 'utf-8' ); // utf-8 인코딩 생략가능 console . log ( buff ); //<Buffer 68 65 6c 6c 6f> 여기서 이진법이라면 1001101010 이런식으로 되어있어야 하는거 아닌가라는 의문을 가질 수 있다. 하지만 실제로 버퍼가 메모리에 담고있는 값은 이진수 이지만 콘솔에는 16진수로 표시된다. utf-8은 생략가능하지만 작성하지 않을경우 글자가 깨질 수 있다. console . log ( buff . toString ()); //hello buffur를 사람이 읽기 쉬운 문자열로 변환하기 위해서는 toString()메서드를 사용한다. toString() 메서드의 경우 default로 utf-8이 설정되어있어서 깨지지않고...