본문 바로가기

분류 전체보기123

자바스크립트 프로토타입 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.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (2) 📌 이전 내용 2022.02.26 - [Dev-diary/일상] - 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이 code-designer.tistory.com • Bare-minimum Requirements ✔ 스크롤 이벤트 : up & down 에 따라 위치 이동 ✔ 텍스트, 컴포넌트 transition 애니메이션 추가 ✔ 사용자 후기 볼 수 있는 버튼 구현 ✔ 체험하기 버튼, Footer 디자인 • Advanced Requireme.. 2022. 2. 27.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이다. 텍스트 몇 자랑 gif 넣지 뭐 .. 라고 생각했으나 결과물은 꽤 빈약해보였다 🤔 😨 진짜 안일한 생각이었다 !! 개인적으로 아쉽기도 하고, 스크롤 애니메이션 공부도 할겸 메인페이지 전체를 수정하게 되었다. 그리고 프로젝트를 더 적극적으로 소개하려고 한다 !! 메인페이지는 첫인상을 좌우하니까 중요하다 !! 📎 참고 레퍼런스 UI 컴포넌트가 많은 우리 프로젝트랑 잘 맞겠단 생각을 했다 !! 😊 스크롤 이벤트로 인해 스크린 전체의 이미지가 부드럽게 바뀌는 것도 마음에 들었고, 특히 저 서서히 튀어나오는한 애니메이.. 2022. 2. 26.
자꾸 까먹는 Git 명령어 모음 📌 Git 로컬 저장소 branch 이름 변경하기 git branch -m [기존 브랜치 이름] [새로운 브랜치 이름] 📌 Git 원격 저장소 branch 이름 변경하기 추가 | git push origin [새로운 브랜치 이름] 삭제 | git push origin --delete [기존 브랜치 이름] / git push origin :[기존 브랜치 이름] 2022. 2. 23.

티스토리툴바