Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 맥에서 브라우저를 새로고침, 강력 새로고침 하는 방법에 대해 알아보겠습니다. How to do a refresh 단축키 : Command + R How to do a hard refresh 단축키 : Command + Shift + R 위 방법을 사용하시면 브라우저 새로고침 및 강력 새로고침을 할 수 있습니다 :)

16.1 내부 슬롯과 내부 메서드 내부 슬롯 (internal slot)과 내부 메서드 (internal method)는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method 입니다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖습니다. 내부 슬롯은 JS 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수 없지만 __proto__를 통해 간접 접근이 가능합니다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 Js 엔진은 프로퍼티를 생성할 때 프로퍼티의 어트리뷰트를 기본값으로 자동 정의합니다. 프로퍼티의 상태란 값 (value), 값의 갱신 가능 여부 (writable), 열거..

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 15.1.2 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정합니다. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높이고 전역 변수가 중복 선언되는 경우가 발생합니다. 15.1.3 변수 호이스팅 var 키워드 변수 선언 시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작합니다. // 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언됨 (1.선언 단계) // 변수 foo는 undefined로 처기화 됨 (2. 초기화 단계) console.log(foo); // undefined // 변..

14.1 변수의 생명주기 14.1.1 지역 변수의 생명주기 지역 변수의 생명 주기는 함수의 생명 주기와 일치합니다. function foo() { var x = 'local' // 변수 x 생성, 변수 x에 값 할당 console.loog(x) return x // 변수 소멸 } foo(); console.log(x); // x is not defined 호이스팅은 스코프를 단위로 동작합니다. 호이스팅은 변수 선언이 스코프이 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 말합니다. 14.1.2 전역 변수의 생명 주기 함수와 달리 전역 코드는 명시적인 호출 없이 실행됩니다. var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 ..

Intro 안녕하세요. 모바일 네비게이션 메뉴에서 스크롤 이동을 표현해야 했습니다. 여러 방법이 있겠지만 저는 특정 요소 위치로 스크롤 이동할 수 있는 scrollIntoView 함수를 사용했습니다. Syntax scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions) alignToTop - true : aligned to the top 상단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "start", inline: "nearest"} - false : aligned to the bottom 하단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "end",..

Work 회사 홈페이지 개발 리뉴얼 웹앱 서비스 오픈 및 피드백 반영 후 회사 홈페이지 개발을 시작하게 되었습니다. 회사 홈페이지의 경우 외주 작업을 작업하려 했으나, 추후 유지보수와 비용 측면에서 직접 개발하기로 결정했었습니다. 시니어 개발자분께서 어느정도의 PC 화면을 구축해놨고, 저는 모바일 UI 구현을 중점으로 개발했습니다. MUI를 사용했기 때문에 크게 건들 일은 없었지만, UI가 PC / Mobile 버전일 때 다른 부분들이 꽤 있어서 이곳저곳 다듬었습니다. 홈페이지 개발이 생각보다 계속 피드백을 주고 받으며 작업해야 할일이 많았습니다. 개발도 개발이지만, 이번달은 디자이너, 에디터 분과 더 소통을 많이 했던 것 같습니다. 추가로 AWS + Git Actions 을 통해 자동배포 환경을 구성하..

13.1 스코프란?모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유 범위가 결정되비다. 이를 스코프라고 합니다. 즉 스코프는 식별자가 유효한 범위를 말합니다. var x = 'global' function foo() { var x = 'local' console.log(x) //local } foo() console.log(x) //global 13.2 스코프의 종류코드는 전역과 지역으로 구분할 수 있습니다 13.2.1 전역과 지역 스코프전역이란 코드의 가장 바깥 영역을 말합니다. 전역은 전역 스코프를 만듭니다. 전역 변수는 어디서든 참조할 수 있습니다. 13.2.2 지역과 지역 스코프지역이란 함수 몸체 내부를 말합니다. 지..

55. EBS 개요 EBS Volume 볼륨을 사용하면 인스턴스가 종료된 후에도 데이터를 지속할 수 있습니다. EBS Volume 을 쓰는 목적입니다. 인스턴스를 재생성하고 이전 EBS 볼륨을 마운트하면 데이터를 다시 받을 수 있습니다. 한마디로 말하면 USB 스틱처럼 한 컴퓨터에서 꺼내 다른 컴퓨터에 꽃는 역할을 합니다. EBS 볼륨은 특정한 가용 영역에 고정되어 있습니다. 하지만 스냅샵을 이용하면 다른 가용 영역으로도 볼륨을 옮길 수 있습니다. CCP 레벨의 ESB 볼륨은 한 번에 두 개의 인스턴스와 연결될 수 없습니다. 하지만 인스턴스 하나에 두 개의 EBS 볼륨이 연결되는 건 문제 없이 가능합니다. 네트워크 USB 스틱 두 개가 머신 하나에 연결되는 상황을 생각해 보면 됩니다. EBS 볼륨을 생성..

12.1 함수란? 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수 내부로 입력을 전달받는 변수를 (parameter), 입력을 (argument), 출력을 반환값return value)라고 합니다. 12.2 함수를 사용하는 이유 코드의 재사용 측면, 유지보수와 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있습니다. 12.3 함수 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호로 사용해 값을 생성하는 표기 방식을 말합니다. 즉 리터럴은 값을 생성하기 위한 표기법입니다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체입니다. 즉 함수는 객체입니다. 12.4 함수 정의 1. 함수 선언문 fu..

46. 프라이빗 vs 퍼블릭 vs 탄력적 IP IPv4는 공용 공간에서 37억 개의 서로 다른 주소를 허용합니다. 47. 프라이빗 vs 퍼블릭 vs 탄력적 IP 실습 # 프라이빗, 퍼블릭 public ip로 접속합니다. private ip는 사설 네트워크에 속하고 현재 aws 사설 네트워크에 연결되어 있지 않습니다. 인터넷으로 AWS에 연결되어 있을 뿐입니다. 따라서 public ip를 샤용해야 합니다. 공용 네트워크에서 AWS에 액세스 할 수 있기 때문입니다. ssh -i EC2Tutorial.pem ec2-user@3.129.218.15 // public ip 로그인 성공 시 private ip를 볼 수 있습니다. [ec2-user@ip-172-31-11-234 ~]$ ssh -i EC2Tutoria..