본문 바로가기

분류 전체보기126

22.04.09 타입스크립트와 함수 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 4. 9.
MAU, DAU, MCU, ACU 지표성 언어 정리 ✍🏻 왜 ? IT 기술 뉴스레터를 읽다보니 내가 모르는 약자들이 너무 많이 보이더라. 😂 한번 정리해두면 좋을 것 같아 기록하게 되었다. +그리고 그렇게 어렵지도 않음 !! 📍 MAU [ Monthly Activity User ] 월별 사용자 실제 활동하는 사람의 수를 추적하기 때문에 월별 회원수와는 다른 개념임. 📍 DAU [ Daily Activity User ] 일별 사용자 하루 단위, 실제 사용자 수. 📍 MCU [ Maximum Current User ] 순간 동시 접속자 단순한, 순간의 추이. 📍 ACU [ Average Current User ] 순간 동시 접속자의 평균 순간적으로 접속하는 유저의 평균값. 📍 PV [ Page View ] 페이지 내에서 사용자의 요청 수 한 사이트 내에서 사.. 2022. 4. 7.
Bundler 번들러란 ...? create-react-app 생각없이 사용하던 나를 반성하며, Bundler 개념이 나왔을 때 고개 갸우뚱했던 나를 반성하며 ... 공부 !-! 📌 Bundler ? 여러개의 파일을 하나로 묶어주는 역할 ex. Webpack, Parcell, Rollup, Browserify ✔ 번들러는 왜 탄생했는가 ? ✔ 왜 굳이 여러개의 파일을 하나로 묶어줘야 하는가 ? 2022. 4. 5.
자바스크립트 프로토타입 Prototype (2) 📌 프로토타입 (객체) ? ❗ 객체 간 상속inheritance을 구현하기 위한 핵심 개념 ❗ ❗ 프로토타입의 프로토타입은 언제나 Object.prototype ❗ 프로토타입은 어떤 객체의 상위 객체(부모 객체)의 역할을 하는 객체로, 다른 객체에 공유 프로퍼티/메서드를 제공한다. 프로토타입을 상속받은 하위 객체(자식 객체)는 상위 객체의 프로퍼티/메서드를 본인의 프로퍼티/메서드처럼 자유롭게 사용할 수 있다. 📌 객체 생성 방식과 프로토타입 결정 😮 (진심으로 너무 다양한) 객체 생성 방법들 ... ✔ 객체 리터럴 ✔ Object 생성자 함수 ✔ 생성자 함수 (new 연산자) ✔ Object.create 메서드 ✔ 클래스(ES6) 📍 객체 리터럴 객체 리터럴에 의해 생성되는 객체의 프로토타입은 Objec.. 2022. 4. 4.
Babel 과 Babel 이 필요한 이유 📌 Babel 이란 ? Babel is a JavaScript Compiler ...? Babel is a JavaScript Transpiler ...! 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다. 📍 Babel 등장 이유 Cross Browsing 을 돕기 위해 등장하였다. 🤔 Cross Browsing (크로스 브라우징) ? 브라우저나 기기의 종류에 관계없이 사이트가 의도대로 보여지고 작동되게 하는 작업. (호환성) 브라우저마다 렌더링 엔진이 다르기 때문에 개발자의 의도대로 작동하지 않는 경우가 발생한다. 그래서 크로스 브라우징 작업이 추가로 필요함. 😂 📎 Babel 이 빌드하는 과정 1. Parsing (파싱) : 코드 → AST 변환 과정 2. Trans.. 2022. 4. 3.
this 와 this binding 📌 this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing-variable 이다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property 나 method 를 참조할 수 있다. 단, this 가 가리키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정된다. 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 (간접) 호출 📎 일반 함수 호출 기본적으로 this 에는 전역 객체(global object)가 바인딩된다. (어떠한 함수[중첩 함수, 콜백 함수 포함]라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩.. 2022. 4. 2.
22.03.24 [읽기 좋은 코드가 좋은 코드다] - 더스틴 보즈웰, 트레버 파우커 📍 책을 읽게 된 계기 팀 프로젝트 진행에 앞서 팀 규칙을 정하게 된다. 이때 변수명, 파일명 등 얕은 코드 스타일을 통일시켜놓고 시작할 수 있는데, 어떤 걸 기준으로 정해야되는지 모르겠더라. 읽기 편하다는 기준도 엉망이고 ..!! 팀 단위 작업을 할때 적어도 좋은 규칙을 제안할 수는 있어야겠다는 생각에 읽게 되었다. 💡 목차 1. 표면적 수준에서의 개선 ✔ 이름에 정보 담기 ✔ 오해할 수 없는 이름들 ✔ 미학 ✔ 주석에 담아야 하는 대상 ✔ 명확하고 간결한 주석 달기 2. 루프와 논리를 단순화하기 ✔ 읽기 쉽게 흐름제어 만들기 ✔ 거대한 표현을 잘게 쪼개기 ✔ 변수와 가독성 3. 코드 재작성하기 ✔ 상관없는 하위 문제 추출하기 ✔ 한 번에 하나씩 ✔ 생각을 코드로 만들기 ✔ 코드 분량 줄이기 4. 선택.. 2022. 3. 24.
자바스크립트 프로토타입 Prototype (1) (원시 타입을 제외했을 때) 자바스크립트를 이루고 있는 모든 것은 객체다. 📌 객체지향 프로그래밍 특징? 명령형 프로그래밍 객체지향 프로그래밍 ✔ 그래서, 객체지향 프로그래밍이 뭔데 ? 프로그램을 객체의 집합 으로 표현하려는 프로그래밍 패러다임 이다. 📎 객체 Object 📎 메서드 Method 📎 속성 Property 객체지향 프로그래밍은 실제 세계의 실체를 인식하는 철학적인 사고를 프로그래밍에 접목한 결과다. 현실에서 사물이나 개념은 각자의 '속성'을 가지고 있기 때문에 이를 기준으로 실체를 인식하거나 구분한다. 이 방식을 프로그래밍에 접목시켜보면, 하나의 객체(사물)는 상태(사물의 색상, 너비, 무게)와 동작(사물의 부피를 구하는 수식)으로 표현할 수 있다. 상태 state는 속성 property/.. 2022. 3. 9.
주소창에 URL (www.google.co.kr) 을 입력하면 무슨 일이 벌어지나요 ? 📌 브라우저 주소창에 www.google.co.kr을 입력하면 무슨 일이 벌어질까 ? 1. 브라우저 주소창에 www.google.co.kr을 입력. 2. 브라우저는 총 4개의 cache에서 DNS기록 확인. 3. 요청한 URL이 cache에 없으면 ISP의 DNS server는 재귀적으로 도메인 이름을 찾음. 4. 알맞은 IP주소를 찾으면, 브라우저는 해당 서버와 TCP연결을 시도. 5. TCP연결에 성공하면, 브라우저가 웹 서버에 HTTP요청 보냄. 6. 웹 서버는 처리한 HTTP응답을 브라우저에게 보냄. 7. 브라우저는 응답에 기반, HTML 컨텐츠를 랜더링해서 우리 눈에 보여줌. 📍 브라우저 주소창에 www.google.co.kr 이라는 도메인 이름을 검색한다. 📍 해당 도메인 주소의 IP주소를 찾.. 2022. 3. 4.

티스토리툴바