라이브

최신글

• JavaScript의 클로저와 실행 컨텍스트 클로저란 무엇인가외부함수가 종료되어도 클로저 함수는 외부함수의 스코프(함수가 선언된 어휘적 환경)에 접근할 수 있도록 하는 개념function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName;}const myFunc = makeFunc();myFunc();이 코드를 실행하면 makeFunc이 종료되어도 makeFunc의 내부 변수 name을 조회할 수 있다.어떻게 가능한가?실행 컨텍스트가 외부 함수에 대한 렉시컬 환경에 대한 참조값을 가지고 있어서 상위 스코프에 접근할 수 있다.이를 이해하기 위한 개념들스코프선언된 변수에 대해 접근 가능한 유효범위!하위 스코프.. 2025.04.08
• JavaScript 엔진과 동작원리 JS의 엔진JavaScript 엔진이란 JavaScript를 실행하는 프로그램 또는 인터프리터주요 엔진 종류V8(Chrome, Node.js)구글에서 개발한 오픈소스 엔진C++로 개발된 빠른 실행속도와 높은 성능을 가진 엔진-> 속도향상을 위해 인라인 캐싱 등 최적화 기법을 사용주로 Chrome 브라우저나 Node.js 런타임 환경에서 사용안드로이드 브라우저에도 탑재되어있음SpiderMonkey(FireFox)Mozilla에서 개발한 엔진최초의 JS엔진으로 안정성과 호환성에 중점을 둔 엔진주로 Firefox 브라우저에서 사용JavaScriptCore(Safari)Apple에서 개발한 엔진, MacOS 및 IOS 환경의 Safari 브라우저에서 사용그외에도 Chakra(Microsoft), Hermes(R.. 2025.03.31
• Command 패턴 Command 패턴행동 패턴(Behavioral Pattern) 중 하나로 객체가 자신의 역할을 깔끔하게 수행할 수 있도록 도움기능을 캡슐화 해서 작업(행동)을 규격화 하는 것왜 사용하는가?어떤 객체 A에서 객체 B의 메서드를 실행할 경우 객체 B에 대해 의존성이 발생한다.B의 기능이 수정될 경우 A도 수정이 필요할 수 있다.하지만 커맨트 패턴을 사용하면 B에 대한 의존성을 제거할 수 있다.예시만약 그림판 기능을 만든다고 생각해보겠다.그림을 그리는 사용자 User 클래스, 그림판 Board 클래스, 연필 Pencil 클래스가 있다고 한다.이 코드를 작성하면 아래와 같을 것이다.public class Pencil { public void drawPencil() { System.out.pr.. 2025.03.29
• 프론트 버블링에 대하여 아래 코드에서 우리는 em부분을 클릭해도 div에 할당된 핸들러가 동작한다.이것은 어떻게 가능한 것인가?``` EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다.```바로 버블링이 발생하기 때문이다### 버블링버블링이랑특정 화면 요소에서 이벤트가 발생했을 때이벤트가 더 상위의 화면 요소들로 전달되어가는 것이다.마치 vue에서 emit을 통해 부모 컴포넌트로 이벤트를 발생시키는 것과 비슷한 개념 같다.한 요소에서 이벤트가 발생하면이 요소의 이벤트 핸들러가 동작하고 부모의 핸들러가 동작한다.이 과정을 최상위 요소를 만날 때까지 반복한다. 부모요소 자식 요소이런 구조에서 p를 클릭한다면p의 핸들러를 동작하고 부모인 div의 핸들러를 동작하게 된다.따라서 p alert가 동작하고.. 2024.12.12
• 자바스크립트 변수 호이스팅이란? 호이스팅인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상var 변수 호이스팅아래 javascript 코드를 vs에서 실행하면console.log(a)var a = 10console.log(a)원래라면 a는 참조오류가 나야한다.하지만 결과로 나온다.왜? 그럴까?javascript가 해당 코드를 실행할 때 변수 호이스팅이 발생하여변수 선언문을 최상단으로 보낸다.var aa = undefinedconsole.log(a)a = 10console.log(a)결과적으로 이렇게 변환해서 실행하기 때문에 오류가 나지 않고 undefined가나타나는 것이다.let 변수 호이스팅여기서 var가 아니라 ES6부터 등장한 let으로 선언하면.. 2024.11.25
• CleanCode 4장, 5장 4장. 주석주석은 나쁜 코드를 보완하지 못한다.주석을 유지보수하기는 불가능 하기 때문에주석은 오래 될 수록 코드에서 멀어진다.주석을 사용하기 보다는 코드를 명확하게 작성하는 것이 좋다.좋은 주석은 무엇인가?법적인 주석 ex) 저작권 정보, 표준 라이센스 등정보를 제공하는 주석의도를 설명하는 주석// 스레드를 대량 생성하는 방법으로 어떻게든 경쟁 조건을 만들려 시도한다.for(int i = 0;i결과를 경고하는 주석ex) // 여유 시간이 충분하지 않으면 실행하지 마시오TODO 주석중요성을 강조하는 주석 5장. 형식 맞추기코드 형식은 의사소통의 일환오늘 구현한 코드는 바뀔 가능성이 높고오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 영향을 미친다.좋은 형식의 코드란?세로 형식 : 적절한 행 길이를 .. 2024.11.14
• 자바스크립트의 비동기와 병렬처리 자바 스크립트는 비동기로 병렬처리를 하는가?자바스크립트는 싱글 스레드 언어이다.즉, 한번에 하나의 일만 수행할 수 있다는 것이다. 그럼 어떻게 병렬처리를 할까?자바스크립트는 병렬처리를 하지 않는다.그럼 Promise는 병렬처리가 아닌가?지금부터 자바스크립트의 비동기 동작을 알아보자Promise.resolve().then(()=>console.log(1));console.log(2);console.log(3);Promise.resolve().then(()=>console.log(4));해당 코드에서 Promise는 JS의 비동기 함수이다.결과를 보면 2,3이 비동기로 호출한 1,4보다 먼저 나오는 것을 볼 수 있다.즉 JS에서 비동기는 task를 바로 실행하는 것이 아니라 queue나 어딘가에 넣어뒀다가 .. 2024.10.13
• 기술블로그 velog에서 tistory로 옮긴 이유 오랜만입니다. 라이브입니다. 결론부터 말씀드리자면 다시 돌아왔습니다. velog로 기술블로그를 옮기려고 시도했었습니다. velog는 기술블로그 쓰기 좋은 플랫폼이었으니까요. 하지만 실패했습니다. velog는 좋은 플랫폼입니다. 개발자들이 많이 있는 만큼 양질의 소식을 들을수 있습니다. 게다가 markdown 구문을 사용할 수 있어서 글 쓰는것도 쉬운 편이었고요. 하지만 저는 돌아왔습니다. 아무래도 일궈놓은 tistory보다 velog가 정이 안간던 것도 있고요. 별도의 장치를 하지않으면 방문자가 보이지 않는것도 한몫 했습니다. 제가 아무리 글을 써도 누군가에게 읽혀진다는 느낌이 없었거든요. 그래서 친숙한 tistory로 돌아오게되었습니다. 잘부탁드립니다. 2023년 다사다난한 한해였습니다. 취업하고 적응.. 2024.03.26
• 블로그 이전 안내 블로그 이전했습니다. 새로운 블로그 https://velog.io/@lee_areum 2022.10.11
• (c++) 백준 "7662_우선순위_큐" https://www.acmicpc.net/problem/7662 7662번: 이중 우선순위 큐 입력 데이터는 표준입력을 사용한다. 입력은 T개의 테스트 데이터로 구성된다. 입력의 첫 번째 줄에는 입력 데이터의 수를 나타내는 정수 T가 주어진다. 각 테스트 데이터의 첫째 줄에는 Q에 적 www.acmicpc.net #include #include #include #include #include using namespace std; int main() { int T; cin >> T; for (int t = 0; t > N; map m; for (int i = 0; i > c; int num; cin >> num; if.. 2022.08.08