[JavaScript] JS 실행 환경: 브라우저와 Node.js

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다.브라우저 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있습니다.즉, 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있는데요. 한 가지 주의해야 할 점은 브라우저와 Node.js는 용도가 다르다는 것입니다!이로 인해 브라우저에서만 동작하는 클라이언트 사이드 Web API와브라우저와 Node.js 환경 모두에서 실행 가능한 ECMAScript 표준 빌트인 함수를 구분할 수 있어야 합니다. 1. 자바스크립트 실행 환경: 브라우저 vs Node.js 이해하기브라우저는 HTML,CSS,JS를 실행해 웹페이지를 브라우저에 렌더링하는 것이 주 목적이지만,Node.js는 브라우저 외부에서 ..

• format_list_bulleted Study Notes/JavaScript
• · 2025. 1. 24.
• textsms

[JavaScript] let, var, const와 호이스팅

JavaScript를 배우다 보면 let, var, const와 호이스팅(Hoisting) 개념은 중요한 주제입니다. 이 글에서는 스코프(Scope)와 특성을 중심으로 차이점을 설명하고, 호이스팅이 어떤 영향을 미치는지 다뤄보겠습니다. 함께 읽으면 좋은 포스팅 ▼ ▼ ▼ [JavaScript] 변수지난번 포스팅에서 변수를 선언하는 var, let, const 키워드와 호이스팅을 다뤘습니다.이에 대한 배경지식을 더 잘 다져놓으면 좋을 것 같아 변수라는 좀 더 포괄적인 파트로 한번 더 정리해봅니다.kenco.tistory.com  1. var, let, const의 기본 개념JavaScript에서 변수를 선언할 때 사용하는 세 가지 키워드는 다음과 같습니다.var: ES6 이전에 사용되던 변수 선언 키워드...

• format_list_bulleted Study Notes/JavaScript
• · 2025. 1. 24.
• textsms

[학습 기록] Day4: CSS프레임워크, JS

배운 내용 요약 정리Bootstraptailwind.css (자습)JavaScriptBootstrapw3schools 문서를 통해 오늘도 bootstrap의 각종 요소를 설명해주셨다.그런데 이 프레임워크는 아무래도 자율성이 떨어지다보니, 내 취향은 아닌 거같다는 생각이 들었다.정말 급할때 어쩔 수 없이 사용하기 좋은 깔끔한 반응형 웹 프레임워크 같지만,,,디자인 자율성이 너무 없고 그렇게 예뻐 보이지 않았다!그래서 찾아본 게 tailwind.css나는 이게 공부해보고싶어져서 자습시간에 기본적인 구조를 학습해보려 한다.다음엔 tailwind.css로 자기소개 페이지도 새로 만들어봐야겠다. tailwind.css물론 tailwind.css도 장점만 있지는 않다.아래의 블로그에 tailwind.css의 장점과..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 1. 24.
• textsms

[학습 기록] Day3: CSS(flexbox), Bootstrap

배운 내용 요약 정리 CSS: w3schools 문서 기반Flexbox 학습하기: Froggy Game으로 https://flexboxfroggy.com/#koBootstrap 프레임워크CSS: 기억해두고 싶은 내용 위주로 z-index 속성 - 요소끼리 겹치게 배치할 수 있는 속성 - z-index 속성은 요소의 스택 순서(어떤 요소를 다른 요소보다 앞이나 뒤에 배치해야 하는지)를 지정 - 양수 또는 음수의 값을 가질 수 있다.- z-index 없이 겹쳐지는 경우, HTML 코드에서 가장 마지막의 요소가 위로 배치된다. img { position: absolute; left: 0px; top: 0px; z-index: -1;} clearfix Hack플로팅된 요소가 containing e..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 1. 22.
• textsms

[학습 기록] Day2: HTML, CSS

강의를 시작하며 갑의 입장인 은행과 을의 입장인 SI 업체 사이의 실무적인 아키텍처 방향성을 설명하며 강의를 시작하셨다. ▶ 디지털개발 프로세스 WON뱅킹 시스템의 미래 채널 아키텍처 - 차세대 범위: 예전부터 해오던 구조 ex) 통합단말, 채널 통합 인프라, 마케팅/세일즈 - 미래 아키텍처 적용 범위: 새로 추가/개선해 넣을 것 ex) 모바일뱅킹, 홈페이지, 국외점포 ▶ 다이어그램은 하나의 다이어그램으로 모든 것을 설명하지 않는다. ▶ 100% 이해하지 못했다고 해서 계속해서 그거만 반복해서 공부하는 것은 개발을 처음 접하는 데에 있어 효율적이지 않다. 더 상위의 개념으로 넘어가서 공부를 하다보면 처음엔 10%밖에 이해하지 못했던 그 아래의 개념을 더 알게 된다. ▶ 기초를 배울 때, 보안..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 1. 21.
• textsms

[학습 기록] Day1: OT, HTML

비대면 학습이다보니 집중력 향상을 위해 앞으로의 수업 내용을 꾸준히 기록하려 한다.어떤식으로 정리해야 가독성이 좋을지 티스토리는 아직 익숙하지 않지만, 우선 최대한 작성해보자! 오늘은 첫 수업이기에,비대면 수업은 어떻게 이루어지는지 전반적인 분위기 위주로 리뷰하듯이 작성했다.다음 글 부터는 수업내용 정리 위주로 작성할 예정이다. 첫 수업 OT프론트엔드 비대면 강사님 소개프론트엔드 과정 소개Computing paradigm의 변천프론트 비대면 강사님의 소개로 첫 수업을 시작했다.우선, 발음이나 전달력이 너무 좋으셔서 듣는 내내 이걸로 불편할 일은 없다는 안심이 되었다.정말 다양한 기관에서 전담 강사로 경력도 많으셨다. 싸피에서도 7~12기까지 하셨다고 하니 신뢰가 간다! 이후에는 과정 소개와 Computi..

• format_list_bulleted 웹 개발 일기/[LG유플러스] 유레카
• · 2025. 1. 20.
• textsms