진주의 개발괴발

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

점점 시간이 빨리 지나간다. 이번 주에는 섹션 1이 끝나고 섹션 2가 시작됐다. 다른 분들의 회고를 읽으면서 내가 안일한가...? 하는 생각이 들었다. 다들 체계적이고 공부도 엄청 열심히 하고 그 와중에 건강도 챙겨...! 그래서 결국 필라테스를 등록하고 왔다 ^^ 나는 돈쓰기 천재야! 등록하고 나니 필라테스가 덤탱이 운동이라는 글을 읽어버렸지만 그래도 열심히 하자ㅎㅎ 이번 주에는 남자친구랑 조금 싸워서 우느라고 정신이 없었다. 사실 남자친구가 잘못한 건 거의 없는데 부캠을 하면서 생긴 불안함이 남친한테 향한 것 같다. 전화로 막 싸우다가 (사실 나만 혼자 와다다 털어놓음) 다음 날에 화나서 느리게 답장하고 꿍해있었는데 그 때 혼자 생각해보니까 남자친구가 잘못한 게 뭐지...? 싶었다. 내 불안으로 괴롭..

📌 절차적 프로그래밍 (Producedural Programming) 순차적인 처리를 중요시 여기며, 프로그램 전체가 유기적으로 연결되게끔 하는 프로그래밍 기법 장점 모듈 구성이 용이, 구조적 프로그래밍이 가능 컴퓨터의 처리구조과 비슷하여 실행 속도가 빠르다 단점 ◽ 유지 보수 어려움 => 순서대로 코드를 작성하므로 앞의 코드가 바뀌면 결과가 달라질 수 있음 ◽ 순서대로 작성하기 위해서 앞에서부터 코드를 이해해야 하므로 긴 코드는 이해하기 어려움 =>대형 프로젝트에 맞지 않음 대표적 언어: C, 포트란 📌 객체 지향 프로그래밍 (Object Oriented Programming) 데이터와 기능을 하나로 묶어 재사용성을 갖는 프로그래밍 설계 철학 > 클래스에 객체를 만들기 위한 생성자 함수, 속성(데이터)..