본문 바로가기

분류 전체보기

(99)
[HTTP/네트워크] 크롬 브라우저 에러 읽기 자주 만나는 크롬 에러메세지 "Aw, Snap!" ("앗, 이런!") Chrome 브라우저에서 페이지를 로드하는 데 문제가 발생했습니다. ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않습니다. ERR_INTERNET_DISCONNECTED 사용 중인 기기가 인터넷에 연결되지 않았습니다. ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT 페이지에 연결하는 데 시간이 너무 오래 걸립니다. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생할 수 있습니다. ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소가 어딘가에 발생했습니다. ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제되었거나,..
[HTTP/네트워크] 기초개념 - Domain과 DNS 📍 IP 주소가 어려우니까 domain으로 찾아가기 IPv6주소는 숫자와 닷(.)으로 이루어져있고, IPv6 주소는 숫자와 클론(:)으로 이루어져있다. 때문에 우리가 숫자를 외워서 IP에 해당되는 pc를 찾아간다면 너무 힘들것이다. 그래서 나온게 domain! domain은 상호나 건물명같이, IP(도로명주소)를 우리가 외우기 쉽게 바꾼 것이다. nslookup [도메인]을 해보면 Name자리에 뜨는게 바로 도메인이다. 우리는 주소창에 domain인 google.com을 사용해서도 구글에 들어갈 수 있지만, IP주소로도 구글에 접속할 수 있다. 🏖 도메인은 대여해서 사용한다. 로컬PC를 나타내는 127.0.0.1말고 다른 도메인은 일정기간동안 대여를 하고 사용한다. 마치 내가 "오늘의 커밋"이라는 슈퍼를..
[HTTP/네트워크] 기초개념 - IP, PORT(포트) 🏠 IP와 IPv4 IP address(Internet Protocol address, IP 주소)란 네트워크에 연결된 특정 PC의 주소를 나타내는 체계이다. 인터넷에 연결된 모든 PC는 각자의 IP주소를 갖는다. IPv4(Internet Protocol version 4, IP 주소체계의 네 번째 버전)는 닷(.)으로 구분된 네덩어리의 숫자로 IP주소를 구성한다. IPv4에서 각 숫자 덩어리는 0~255까지의 숫자 내에서 정해진다. (총 2^(32)=43억개 표현 가능) 🧭 웹 사이트의 IPv4주소 확인하기 터미널에서 아래의 명령어를 입력한다. nslookup google.com IP 주소를 보여준다. 🧭 꼭 기억해둬야 하는 주소 localhost , 127.0.01 현재 사용 중인 로컬 PC 0.0...
[HTTP/네트워크] 기초개념 - URL/URI URL(Uniform Resource Locator) 네트워크 상에서의 파일이 위치한 정보 구성 - scheme, hosts, url-path 좀 옛날 개념임 (SSR에서 페이지를 보낼때 주소에 ~.HTML이런식으로 들어갔다) URI(Uniform Resource Identifier) URI는 URL의 상위개념 (URL은 URI이다. ⭕️ / URI는 URL이다. ❌) URL의 기본요소(scheme, hosts, url-path) + query, fragment 최근 많이 씀 요즘은 google.com/search?q=codestates 이런식으로 식별자까지 포함해서 쓴다. 사실 요즘 url이라고 통칭해서 부르고 있지만, uri가 많이 쓰이고 있다. URI의 구성 부분 명칭 설명 file://, http..
[HTTP/네트워크] 기초개념 - 클라이언트,서버, 프로토콜, API ✌🏻 2-Tier 아키텍처 2티어 아키텍처(클라이언트-서버 아키텍처)는 리소스가 존재하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리시킨 구조를 말한다. 🤟🏻 3-Tier 아키텍처 3티어 아키텍처는 리소스를 저장하는 곳(데이터베이스)과 리소스를 전달하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리시킨 구조를 말한다. 👀 클라이언트와 서버의 종류 클라이언트의 종류: iOS,안드로이드,스마트폰/태블릿/데스크탑 플랫폼 등 서버의 종류: 파일서버,웹서버,메일서버,데이터베이스 등 📍 요청과 응답, 그리고 프로토콜 클라이언트는 서버에게 리소스를 요청하고, 서버는 그 리소스를 주는 것으로 응답한다. 그리고 이런 요청과 응답은 정해진 규칙에 따라 왔다갔다하는데 그게바로 HTTP라는 프로토콜이다. 그리..
[React] Create React App으로 SPA개발 시작하기 👀 create-react-app이란 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴체인이다. 하나의 명령어만으로 SPA개발에 최적촤된 리액트 개발을 시작할 수 있다. 초기 준비시간이 들지 않아 좋다. 리액트에서도 적극적으로 권고하고 있지만, 현업에서는 이렇게 세팅해주는대로 가져가기보다는 필요한거만 솎아내서 사용하는 경우가 많다. 💡 create-react-app으로 시작하기 프로젝트 폴더가 생길 상위폴더에서... npx create-react-app@latest 폴더이름(프로젝트이름) "Happy hacking!"이라는 문구가 뜨면 이제 준비끝이다. npm run start 하면 리액트 로고가 박힌 라이브서버가 열리면서 프로젝트를 확인하면서 개발할 수 있다. 📌 create-react-a..
[React] SPA란? 장점 단점 + React Router사용법 🔮 SPA(Single Page Application) 전통적 웹사이트(MPA): Multiple Page Application, 웹사이트에 다른 페이지로 이동하면 매번 HTML 파일로 된 "페이지 전체"를 불러온다. ➡️ 서버와의 불필요한 트래픽 발생 ➡️ 느림 & 페이지가 바뀔때 전체화면이 깜빡거림 SPA: 페이지가 바뀌어야할 때, 페이지를 실재로 바꾸지 않고 header,nav나 footer같이 중복되는 부분 빼고 업데이트 필요한 데이터만 바꾸어 화면에 보여준다. ➡️ 사실상 페이지 전환없이 유저는 다른 페이지의 컨텐츠를 본다 ➡️ 서버와의 트래픽 과부화 없음 ➡️ 빠름 & 깜빡거리지 않음 👎🏻 SPA 단점 javaScript 파일의 크기가 큼 ➡️ 파일을 기다리는 시간으로 인해 첫화면 로딩 시간이..
[React] state 쓰는 법 ⬆️상향식으로 만들고 ⬇️하향식으로 흐른다. React는 상향식(bottom-up)으로 컴포넌트를 설계한다. React의 데이터 흐름은 하향식(top-down)이다. 컴포넌트를 만들때 하나의 컴포넌트는 하나의 일만 한다는 "단일 책임 원칙"에 맞게 잘게 쪼갠어서, 작은 단위로 일을한다. 때문에 테스트가 쉽고, 확장성이 좋다. 또한 이렇게 만들어지는 컴포넌트들 사이에서 부모 컴포넌트는 props를 이용해서 자식 컴포넌트에게 props를 부여한다. 만들때와 반대되게, 데이터의 흐름은 '하향식'이라고 볼 수 있는 것이다. 이를 단방향 데이터 흐름(one-way data flow)라고 부른다. 🙄어떤 것을 state로 두어야 할까 state가 많을 수록 어플리케이션이 복잡해지므로, 꼭 필요한 것만 state로 ..
[React] State and Props + 이벤트핸들링 🏷 state란? 변할 수 있는 값 '상태' 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있음. 하위 컴포넌트에서도 존재할 수 있음 리액트가 화면을 rerendering해야할 때를 파악하는 기준 ++React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 되었다. ++react가 state를 통제할 수 있는 컴포넌트를 Controlled Component라고 한다. 📥 props란? 외부(부모 컴포넌트)로부터 전달 받은 값 React 컴포넌트는 javaScript 함수와 클래스로, props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React ..
[javaScript] fs모듈, fs.readFile Node.js 내장모듈 살펴보기 node.js의 내장 모듈 목록 Node.js에서 파일 시스템 모듈 불러오기 fs모듈은 빌트인 모듈(built-in module)이므로, js파일에 require만 시켜주면 된다. 빌트인 모듈(built-in module)이란? 해당 프로그래밍 언어에서(이 경우는 Node.js에서) 공식적으로 제공하여 별도의 다운로드없이 사용가능한 모듈이다. const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다 3rd-party 모듈 사용하기 3rd-party모듈이란? 해당 프로그래밍 언어에서(이 경우는 node.js에서) 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈을 말한다. npm install underscore ..