Today Hailie Learned

SOP란? SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 말한다. https://shinystarforever.tistory.com:443 https:// => 프로토콜 shinystarforever.tistory.com => 호스트 443 => 포트 출처(origin)는 프로토콜, 호스트, 포트의 조합으로 되어있고, 이 중 하나라도 다르면 동일한 출처로 보지 않는다. **알아두기** http 프로토콜의 기본 포트는 80 https 프로토콜의 기본 포트는 443 SOP은 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다. => 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고..

next.js라는 서버사이드 렌더링 프레인 워크로 만들어진 파일을 Create React App를 사용했을때와 같이 'npm start' 명령어로 브라우저를 여는데 위 화면과 같은 오류를 만났습니다. Port 3000 is alreay in use. Create React App를 사용했다면 자동으로 다른 포트로 연결을 해주었지만, next.js는 저 문구만 나오고 더 이상의 진전이 없었는데요! 그래서 구글링 고고!! 맥북 터미널 창을 열고, 아래와 같은 명령어를 입력했습니다. STEP 1. sudo lsof -i :포트번호 ➥ 저의 경우는 3000 포트를 찾고 싶어서 sudo lsof -i :3000을 입력했습니다. ⭐️⭐️⭐️여기서 sudo를 안쓰면 완전히 kill 한게 아니기 때문에 꼭 sudo를 ..

방법 1. export default를 써주고 import로 받기 예시 - 내보낼 파일 const person = { name:'Max' } export default person 예시 - 받을 파일 (정확한 이름을 써주지 않아도 된다) import person from './person.js' import prs from './person.js' 방법 2. export만 써주고 중괄호 써서 import하기. (파일 안에서 정의된 정확한 이름 사용) 예시1 - 내보낼 파일 const person = { name:'Max' } 예시1 - 받을 파일 import {person} from './person.js' 한 문장으로 작성도 가능하다. 예시2 - 내보낼 파일 export const clean = () ..

1. reduce 사용하기 // For large data, it's better to use reduce. Supose arr has a large data in this case: const arr = [1, 5, 3, 5, 2]; const max = arr.reduce((a, b) => { return Math.max(a, b) }); // console.log(max); // 5 2. Math.max.apply 사용하기 // For arrays with relatively few elements you can use apply: const arr = [1, 5, 3, 5, 2]; const max = Math.max.apply(null, arr); //console.log(max); //5 3...

API의 대표적인 아키텍처인 REST API 어떻게 요청과 응답을 하는 것이 바람직한 방법인가? 👇👇 REST API “Representational State Transfer”의 약자 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로 모두가 잘 알아볼 수 있도록 작성하는 것이 중요하다. 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API를 디자인하는 방법 레오나..

SSR(Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. ✔️ 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. ✔️ 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 브라우저가 다른 경로로 이동할 때마다 서..

웹페이지에서 일부분만 바꾸고 싶다면 AJAX를 사용한다. AJAX 란? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것이다. 예를들어 1, 구글 홈페이지에서 검색창의 경우, 유저가 검색창에 한 글자씩 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 추천 검색어로 보여준다. 예를들어 2, 무한 스크롤이 발생할 때마다 Fetch를 통해 데이터를 가져와서 업데이트하고 렌더링하기 예를들어 3, 네이버..

HTTP란? HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜이다. HTTP Messages (클라이언트와 서버 사이에서 데이터가 교환되는 방식) HTTP Messages 의 유형 2가지 요청(Requests) 응답(Responses) start line : start line에는 요청이나 응답의 상태를 나타낸다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부른다. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다. empty line : 헤더와 본문을 구분하는 빈 줄. body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다. 요청과 응답의 유형에 따라..

Domain name 웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소 택시타서 서울시청이 목적지라고 할 때, 서울시청의 도로명 주소가 아닌 '서울시청'이라고 말해도 도착지에 도착하는 것처럼 이해하면 쉽다. DNS(Domain Name System) 네트워크 상에 존재하는 모든 PC는 IP 주소가 있다. 그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아니다. 로컬 PC를 나타내는 127.0.0.1 은 localhost 로 사용할 수 있지만, 그 외의 모든 도메인 이름은 일정 기간 동안 대여하여 사용한다. 대여한 도메인 이름과 IP 주소는 매칭하는 작업이 필요한데, 네트워크에는 이것을 위한 서버가 별도로 있고, 이를 DNS(Domain Name System)이라고..

IP 주소란? (IP address(Internet Protocol address) ➥ 네트워크에 연결된 특정 PC의 주소를 나타내는 체계 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다. 이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 한다. IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻한다. IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있다. 따라서 2^(32)인 약 43억 개의 IP 주소를 표현할 수 있다. 알기! localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭한다. 0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크..