진주의 개발괴발

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

🍮 react app 파일구조 SIMPLEROUTE라는 폴더에 만든 리액트앱의 구조이다. node_modules, public, src, package.json, package-lock.json, README.md로 이루어져 있다. node_modules는 너무 많아서 펼치진 않았지만 모듈들이 들어있다. 모듈 추가할 때 게시물에 적었던 파일이다. public에는 많이 만지지 않았던... index.html과 리액트 아이콘 사진파일이 들어있다. manifest.json은 뭔지... 모르겠다. src에는 App.js이 들어있는데 여기서 주로 앱구성을 한다. src폴더가 주된 코드를 짜는 파일이 많은 폴더이다. App.js에서 export default App을 하고 있다. 이것을 index.js에서 impo..

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

자바스크립트는 싱글 스레드이다. 그 말인 즉슨, 한번에 한 개의 일만 처리할 수 있다는 의미이다. 실제로도 자바스크립트 코드를 작성하다보면 위에서부터 아래로 쭉 훑고 내려오며 위에서 에러가 생기면 아래 코드까지는 읽지도 않는다는 느낌을 받을 수 있다. 위 그림은 자바스크립트 엔진이 어떻게 구성되어 있는지를 보여준다. Call Stack이 한개이기 때문에 자바스크립트를 싱글 스레드라고 부른다. 그런데 이런 자바스크립트에서 비동기라니. 혼자 공부를 하며 이해가 되지 않았다. 스스로 찾아보며 생각한 결론은 '자바스크립트는 동기적이다.' 라는 것이었다. 그럼 setTimeout()과 같은 대표적인 비동기 함수는 어떻게 된걸까? 자바스크립트는 동기적이지만, 자바스크립트 런타임들은 비동기적이다. 그리고 그 런타임들..

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

📌 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]] 만 있다. 확..