진주의 개발괴발

📌 크롬 브라우저 에러 Error Message Description "Aw, Snap!" Chrome 브라우저에서 페이지 로드하는 데 문제 발생 ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않음 ERR_INTERNET_DISCONNECTED 사용 중인 기기가 인터넷에 연결되지 않음 ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT 페이지에 연결하는 데 시간이 너무 오래 걸림. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생 ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소가 어딘가에 발생 ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제 혹은 새로운 네트워크에 연결 ERR_CO..

📌 클라이언트 서버 아키텍처 (2-Tiar 아키텍처) : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 클라이언트 : 리소스 사용하는 앱 서버 : 리소스 제공(serve)하는 곳 데이터베이스 : 리소스 저장하는 공간 (2-Tiar 아키텍처 + 데이터베이스 === 3-Tiar 아키텍처) 📌 프로토콜 : 서버와 클라이언트 사이의 통신 규약 OSI 7 Layers에 속한 다양한 프로토콜들이 있음 ✔ API (Aplication Programming Interface) : 서버가 제공하는 인터페이스 Interface : 의사소통이 가능하도록 만들어진 접점 HTTP API 디자인의 Best Practice HTTP 요청에는 메서드 개념 존재 요청 URL 디자인 사용하는 메소드 모든 사용자 조회 /us..

📌 Props & State 의 개념 👩 나의 속성과 상태 속성 : 이름, 성별 상태 : 감정, 나이, 직업 Props(속성) : (1) 부모 컨포넌트로부터 전달받은 값 (2) 변하지 않는 값 (3) 변하지 않는 값이기 때문에 읽기 전용 (4) 어떤 형태도 넣을 수 있도록 객체 형태 State(상태) : (1) 컴포넌트 사용 중 컴포넌트 내부에서 변화하는 값 📌 props 전달 방법 1. 부모 컴포넌트에서 불러온 자식 컴포넌트에 key와 그 값으로 전달 const Parent = () => { const word = '나는 자식 컴포넌트'; return ( 나는 부모 컴포넌트 //word는 전해지는 props의 키이다. ) } const Child = (props) => { return ( 저는 무엇일까..

📌 SPA(Single Page Aplication) 서버에서 페이지 전체를 받아오는 것이 아니라 페이지 갱신에 필요한 데이터만 받아 자바스크립트를 통해 해당하는 부분만 업데이트하는 방식 ✔ 탄생 배경 MPA(Multi Page Aplication) 방식 => 사용자와 웹의 상호작용이 많아짐 => 기존 방식은 불필요한 트래픽이 많아 반응성이 느림, 깜빡이 현상 발생 => SPA 방식 ✔ 장점 : 같은 컴포넌트를 여러번 받지 않아도 되어 불필요한 트래픽이 사라짐 ✔ 단점 (1) HTML은 비어있는 반면, Javascript는 무거워서 첫 화면 로딩시간이 길다. (2) HTML이 비어있어서 검색엔진이 정보를 수집하기 어렵다. 따라서 검색엔진 대응책과 브라우저 앞으로 가기, 뒤로 가기 상태관리도 해야하므로 개..

점점 배우는 내용이 어려워지면서 난관을 겪고 있다. 뭔가 이해는 되는데, 외우지는 못한 느낌이 든다. 블로깅을 해도 그 순간에만 알고 뒤돌아서면 까먹어버리는 게 슬프다. 그래도 자랑하고 싶은 것은 손목 쪽에 굳은살이 생겼다는 거다. 마우스를 쓰거나 타자를 칠 때 책상에 손목을 대고 하다보니 생긴 것 같다. 뭔가 엄청 열심히 한 것 같아서 괜히 뿌듯하다^^ 그리고 이번 주에는 책을 두권이나 샀다. 클린코드랑 자바스크립트 딥다이브다. 클린코드는 과제로 내가 선택한 책이고 자바스크립트 딥다이브는 다들 한권 씩 구매했다길래 나도 슬쩍 따라 샀다. 우리 교육 엔지니어분도 이 책을 읽었다고 하셔서 더욱 사야겠다고 생각했다. 어찌됐던 약간 두께의 압박이 있지만 열심히 읽어보려고 한다. 무엇보다 책의 디자인이 너무 예..

📌 React : 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리 ➰ 특징 1. 선언형 (Declarative) - 하나의 파일에 JSX를 활용해 HTML,JS 결합하여 코드를 작성할 수 있다. 2. 컴포넌트 기반 - 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것 (독립적인 단위 모듈) - 서로 독립적이고 재사용성 높음 => 유지보수 쉬움 3. 범용성 - 프레임워크는 생태계에 종속되지만, 라이브러리는 기존 프로젝트에도 유연하게 사용 가능함 - 리액트 네이티브로 모바일 개발도 가능 📌 JSX (Javascript XML) : React에서 사용하는 javascript를 확장한 문법 브라우저가 바로 실행할 수 있는 문법이 아니기에 'Babel'이 이를 컴파일(JSX => ..

📌 타이머 관련 API setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 매개변수(parameter): 실행할 콜백 함수, 콜백함수 실행 전 기다려야 할 시간 (밀리초 단위) return 값 : 임의의 타이머 ID setTimeout(function() { console.log('1초 지났음'); }, 1000); //1초 지났음 clearTimeout(timerId) setTimeout 타이머를 종료 매개변수(parameter): 종료할 타이머 ID return 값 : 없음 const timer = setTimeout(function() { console.log('10초 지났음'); }, 10000); clearTimeout(timer); // setTimeout..

📌 동기 (Synchronous) : 일을 처리할 때, 하나의 일이 끝나고 다음 일을 받아서 처리하는 방식. => 일이 끝날 때까지 기다려야 한다 📌 비동기 (Asynchronous) : 우선 모든 일을 받고, 동시에 처리한다. 요청을 해두고 일을 진행하다가 response가 오면 받는다. Asynchronous의 단점은 순서를 예상하기 어렵다는 점이 있다. 비동기의 주요 사례 DOM Element의 이벤트 핸들러 마우스, 키보드 입력 (click, keydown 등) 페이지 로딩 (DOMContentLoaded 등) 타이머 타이머 API (setTimeout 등) 애니메이션 API (requestAnimationFrame) 서버에 자원 요청 및 응답 fetch API AJAX (XHR) ✔ 비동기 예제..

📌 프로토타입 상속 : 넓은 범위의 클래스를 좁은 범위의 클래스에 상속할 수 있다. ✔ extends : 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언, class 식에 사용됨 🔗 class ChildClass extends ParentClass { ... } ✔ super : 부모 클래스의 생성자 함수를 호출하기 위해 사용됨 🔗 super([arguments]); // 부모 생성자 호출 super.functionOnParent([arguments]); // 부모 메서드만 따로 호출 가능 1. this 나오기 전에 사용 => Reference 에러 생성자 함수 내에선 한번만 사용 가능 정적 메서드(static) 도 호출 가능 class Human { constructor() {} stati..

📌 프로토타입 : contructor(생성자) 함수를 가지는 클래스에 자동으로 부여되는 프로퍼티 클래스에 메서드를 넣을 때, 메서드는 클래스의 prototype 객체 내부에 할당된다. (ES6도 자동으로 할당됨) prototype 역시 객체이므로 자신의 prototype을 가지는데, 이것이 prototype chain을 생성하게 된다. ✔ 프로토타입의 사용 prototype은 클래스에서만 호출이 가능하다. 인스턴스에서는 prototype를 사용할 수 없고, 클래스에서만 사용할 수 있다. 대신, 인스턴스는 __proto__프로퍼티를 통해 함수의 prototype 프로퍼티를 참조한다. 클래스와 그 클래스의 인스턴스를 생성했다. 인스턴스를 보면, prototype은 없고 [[prototype]] 만 있다. 확..