IT공부 70

[지식루프의 IT공부] Boolean('0') 이 true 인 이유

Boolean('0')이 true를 반환하는 이유는 JavaScript에서 Boolean 객체가 "truthy"와 "falsy"**의 개념에 따라 동작하기 때문입니다.JavaScript에서 truthy와 falsy란?JavaScript에서는 조건문에서 평가될 때, 값들이 true 또는 false로 암묵적으로 변환됩니다. 이때 값은 truthy(참으로 간주되는 값) 또는 falsy(거짓으로 간주되는 값)로 분류됩니다.falsy 값 (거짓으로 간주되는 값)다음 값들은 falsy로 간주됩니다: false0 (숫자)-00n (BigInt 0)"" (빈 문자열)nullundefinedNaN위에 나열된 falsy 값을 제외한 모든 값은 truthy로 간주됩니다.Boolean('0')의 동작 원리'0'은 문자열입니다..

IT공부 2024.12.17

[지식루프 IT공부] 자바스크립트 연산자 우선순위

자바스크립트에서 쓰이는 연산자 우선순위입니다. 숫자가 높을수록 우선순위가 높습니다.  즉, ( ) 는 19, ! 은 15 이므로, () 가 우선순위가 더 높아 먼저 실행됩니다.  우선순위연산자유형결합성연산자19그룹없음( … )18멤버 접근좌결합성… . …계산된 멤버 접근좌결합성… [ … ]new (인자 리스트 제공)없음new … ( … )함수 호출좌결합성… ( … )옵셔널 체이닝좌결합성?.17new (인자 리스트 생략)우결합성new …16후위 증가없음… ++후위 감소… --15논리 NOT우결합성! …비트 NOT~ …단항 양부호+ …단항 부정- …전위 증가++ …전위 감소-- …typeoftypeof …voidvoid …deletedelete …awaitawait …14거듭제곱우결합성… ** …13곱하기좌..

IT공부 2024.12.15

[지식루프 IT라이프] vscode 들여쓰기 설정

vscode 에서 간단하게 indentation을 설정하는 방법을 알려드리겠습니다.먼저 VSCode를 실행하고, 설정창(Settings)을 열어주세요. 단축키 Ctrl + , (맥에서는 Cmd + ,)입니다.Step1: 상단의 검색창에서 editor tab이라고 검색한 다음. Step2: Editor: Detect Indentation 은 체크 해제해 주세요. Step3: Editor: Tab Size 는 2로 변경해 주세요. Step4: 기본 값이라 변경할 필요는 없지만 Editor: Insert Spaces 부분이 체크 되어 있는지만 한 번 확인해주세요.이렇게 되면 들여쓰기 관련된 설정은 모두 완료됐습니다! 간단하죠? 그런데 기존에 작성한 코드에는 바로 반영이 되지 않을 텐데요.기존에 작성했던 파일로..

IT공부 2024.10.26

[지식루프 IT라이프] api 열어준다, 제공한다의 의미

API는 "Application Programming Interface"의 약자로, 애플리케이션이 서로 소통할 수 있도록 돕는 인터페이스입니다.어떤 시스템이나 소프트웨어가 다른 소프트웨어와 상호작용할 수 있게 기능을 제공하는 일종의 규칙과 도구 모음이라고 할 수 있습니다.API 제공의 의미기능 접근 가능: API를 제공한다는 것은 특정 소프트웨어나 서비스의 기능을 외부 개발자들이 접근하고 사용할 수 있게 해주는 것입니다. 예를 들어, 구글 지도 API는 다른 웹사이트나 앱에서 구글 지도의 기능을 사용할 수 있도록 해줍니다.데이터 및 서비스 활용 가능: 외부 프로그램이나 애플리케이션이 API를 통해 데이터에 접근하거나, 특정 기능을 요청할 수 있습니다. 예를 들어, 날씨 API는 개발자가 자신의 앱에서 실..

IT공부 2024.10.26

[지식루프 IT라이프] javascript runtime 뜻

자바스크립트 **런타임(runtime)**은 프로그램이 실행되는 환경을 의미합니다. 자바스크립트 런타임은 코드가 작성된 이후 실제로 동작하고, 명령을 수행하는 환경을 제공합니다.대표적인 자바스크립트 런타임 환경으로는 웹 브라우저와 Node.js가 있습니다.런타임의 역할자바스크립트 코드를 실행하고 결과를 반환할 수 있도록 자바스크립트 엔진과 필요한 API, 라이브러리를 제공합니다.웹 브라우저의 경우, 브라우저는 DOM 조작, 이벤트 처리 등의 기능을 포함하여 자바스크립트 코드를 해석하고 실행합니다.Node.js는 브라우저 외부에서도 자바스크립트가 실행될 수 있는 서버 환경을 제공하며, 파일 시스템, 네트워크 처리와 같은 기능을 포함합니다.간단히 말해, 자바스크립트 런타임은 자바스크립트 코드가 돌아가는 실행..

IT공부 2024.10.26

[지식루프의 웹개발공부] CSS의 box-sizing

CSS에서 box-sizing은 요소의 크기를 계산하는 방식을 정의하는 속성입니다. 이 속성을 통해, 요소의 width와 height가 포함하는 영역이 달라지며, 레이아웃을 더 직관적으로 제어할 수 있습니다. box-sizing에는 주로 두 가지 값이 사용됩니다:1. content-box (기본값)요소의 width와 height가 내용 영역(content area)의 크기를 의미합니다. 즉, padding, border는 이 값에 포함되지 않고, 요소의 최종 크기에 추가됩니다.예를 들어, width: 200px인 요소에 padding: 20px과 border: 10px을 추가하면 최종 요소의 크기는 다음과 같습니다:가로 크기: 200px (content) + 20px (left padding) + 20p..

IT공부 2024.10.21

[지식루프의 웹개발공부] CSS의 border

CSS에서 border는 HTML 요소의 경계(테두리)를 정의하는 속성입니다. border는 요소의 외곽에 적용되며, 스타일, 두께, 색상을 지정할 수 있습니다. 주요 구성 요소는 다음과 같습니다:border-width: 테두리의 두께를 설정합니다. 두께는 픽셀(px), 포인트(pt), 백분율(%) 등으로 지정할 수 있으며, thin, medium, thick 등의 값도 사용할 수 있습니다.예: border-width: 2px;border-style: 테두리의 스타일을 설정합니다. 가능한 값은 다음과 같습니다:solid: 실선dashed: 점선dotted: 점선 (작은 점들)double: 이중선groove: 입체적인 홈이 파인 효과ridge: 입체적인 돌출 효과inset: 요소가 눌려 들어간 듯한 효과o..

IT공부 2024.10.21

렌더링(rendering) 뜻

렌더링(rendering)은 컴퓨터 공학에서 데이터나 코드로 작성된 내용을 화면에 시각적으로 표현하는 과정을 의미합니다. 즉, 웹 페이지나 그래픽, 애니메이션 등을 사용자가 볼 수 있도록 컴퓨터가 처리하여 출력하는 작업입니다.웹 개발에서 렌더링HTML, CSS, JavaScript 같은 웹 코드가 브라우저에 의해 렌더링되어 화면에 보이는 형태의 웹 페이지로 출력됩니다. 브라우저는 서버에서 받은 코드를 해석하고, 그 결과를 사용자가 볼 수 있는 그래픽으로 변환하는 과정을 거칩니다.예를 들어:HTML은 웹 페이지의 구조를 정의하고,CSS는 그 구조의 스타일(색상, 크기, 배치 등)을 지정하며,JavaScript는 동적인 동작을 추가합니다.이 모든 것이 렌더링 과정을 통해 최종적으로 화면에 표시됩니다.그래픽에..

IT공부 2024.10.20

[지식루프의 웹개발공부] CSS의 margin 중복 (Collapse)

CSS에서 마진 중복(Margin Collapse)은 인접한 블록 요소들의 상하 마진(margin-top, margin-bottom)이 겹쳐지는 현상입니다.  이 현상은 수직 마진에서만 발생하며, 수평 마진에서는 적용되지 않습니다.  마진 중복이 발생하면 두 요소의 마진이 합쳐지는 대신, 더 큰 마진 값이 적용됩니다.  이를 통해 예상치 못한 마진이 설정될 수 있으니, 이를 이해하고 관리하는 것이 중요합니다.  # 마진 중복이 발생하는 경우 1. 인접한 블록 요소 간두 블록 요소가 위아래로 인접해 있을 때, 서로의 margin-bottom과 margin-top이 중복됩니다. 이때 더 큰 값이 적용됩니다. 이 경우, 두 블록 요소 사이의 간격은 50px이 아닌, 30px(더 큰 값)만 적용됩니다. 2. 부..

IT공부 2024.10.20

[지식루프의 웹개발공부] CSS의 margin

CSS의 속성 중 margin 은 요소의 외부 여백을 지정한다.   element는 우리가 작성한 컨텐츠라고 보면 된다.  margin 은 속성값을 가진다. - 단위 : px, em, cm 등의 단위가 있다. - auto : 브라우저가 너비를 계산한다- % : 부모 요소의 가로 너비에 대한 비율로 지정한다.  1. 모든 방향에 대해 한 번에 설정하는 방법.element { margin: 20px 15px 10px 5px; }이 방식은 위, 오른쪽, 아래, 왼쪽 순으로 여백을 지정한다.2. 축약형 사용법축약형을 사용하면 1개, 2개 또는 3개의 값을 줄 수 있다.하나의 값: 모든 방향에 동일한 여백을 준다.element { margin: 20px; /* 위, 오른쪽, 아래, 왼쪽 모두 20px */ }두 ..

IT공부 2024.10.19