[JavaScript] 자바스크립트 변수 (let,const,var)와 호이스팅, 헷갈리는 개념정리

안녕하세요! 자바스크립트뿐 아니라 모든 프로그래밍의 기본이 되는 변수에 대해 알아보고자합니다. 변수란 무엇인지 변수를 어떻게 선언하는지 알아보고 처음 배우는 사람들에게는 다소 혼란스러울 수 있는 호이스팅에 대한 개념까지 쉽게 정리해보도록하겠습니다! 1. 변수란 ? (Variable)변수는 프로그래밍에서 데이터를 임시로 저장하고 참조하기위해 사용되는 이름 붙은 공간입니다. 하나의 변수에는 하나의 값만 저장할 수 있고, 이값을 변경할 수 있기 때문에 변할 수 있는값 즉 변수라고합니다.변수를 통해 다양한 값(숫자, 문자열, 객체 등)을 메모리에 저장하고 필요할때 다시 사용할 수 있습니다.JavaScript 에서는 변수를 선언할 때 let, const, var라는 세가지 변수선언 키워드를 사용합니다. 2. ..

• format_list_bulleted IT & 프로그래밍/Javascript
• · 2025. 5. 16.
• textsms

[javascript] 자바스크립트, vscode에서 바로! 내장터미널로 쉽게 실행하는 방법

안녕하세요! 콩선생입니다.오늘은 처음 JavaScript(자바스크립트)를 시작하는 분들을 위해 자바스크립트는 무엇인지 또 간단하게 실습환경을 만들 수 있는 방법에 대해 알아보고자합니다. 오늘은 많이들 사용하는 무료 코드에디터인 vscode에서 내장터미널을 이용해 편리하게 자바스크립트를 공부할 수 있는 실습환경을 만들어 보려고합니다. 1. JavaScript (자바스크립트)란?JavaScript(자바스크립트)는 간단하게 말해 웹페이지를 동적으로 만들어주는 프로그래밍 언어입니다. HTML이 뼈대와 구조를 담당하고 CSS가 스타일을 담당한다면 자바스크립트는 웹페이지의 행동 즉 움직임을 제어합니다. 현재 컴퓨터나 스마트폰 등에 사용되는 웹 브라우저에는 자바스크립트 인터프리터가 대부분 내장되어있습니다. 자바스크..

• format_list_bulleted IT & 프로그래밍/Javascript
• · 2025. 5. 15.
• textsms

컴퓨터 예약종료 간단하게 하기(윈도우 자동종료 명령어)/ 예약종료 해제 방법

안녕하세요. PC로 작업을 하다보면 시간맞춰 저절로 끄고싶을때가 많은데 잘몰라서 못하는 분들이 많은것같아 알려드리고자합니다. 컴퓨터 예약종료를 하는 방법은 정말 간단하기때문에 한번만 알아두면 유용하게 사용할 수 있습니다. 윈도우에서 가능하고 간단한 명령어로 제어할 수 있습니다. 1. 윈도우 실행창 켜기윈도우 자동종료를 위해서 실행창을 켭니다. 윈도우 자체 단축키 또는 검색을 통해 실행창을 켤 수 있습니다.- 윈도우 단축키로 실행창 켜기 : Win(윈도우키) + R 키를 같이 눌러주면 실행창이 뜹니다.- 검색시 : 실행 검색하기2. 명령어 입력하기시스템 예약종료 명령어를 입력합니다. shutdown -s -t 1800 여기에서 1800은 시간입니다. 초단위이기때문에 1800은 30분 3600은 1시간입니다..

• format_list_bulleted IT & 프로그래밍/윈도우
• · 2025. 5. 14.
• textsms

무료 편집기 VSCODE 비쥬얼스튜디오코드 설치방법 및 유용한 단축키

안녕하세요! 제가 사용하기도 하고, 많은 사람들에게 사랑받는 무료 소스코드 편집기 VSCODE 비쥬얼스튜디오코드 설치하는 방법과 유용한 단축키를 알려드고자합니다. VSCODE(Visual Studio Code)는 무료이면서도 강력한 기능, 뛰어난 확장성, 심지어 빠르고 가벼운 성능을 자랑합니다. 프론트엔드 개발자인 저에게는 없어서는 안되는 필수 코드 에디터입니다. 오늘은 간단하게 VSCODE가 무엇인지알아보고 설치 방법과 자주쓰이는 단축키에 대해 알아보겠습니다. 1) VSCODE (Visaul Studio Code) 비쥬얼스튜디오 코드는 무엇인가요? 공식 웹사이트 : https://code.visualstudio.com/Visual Studio Code 줄여서 VSCODE는 마이크로 소프트에서 ..

• format_list_bulleted IT & 프로그래밍/프로그램
• · 2025. 5. 13.
• textsms

[React] React란? SPA이해하기 (리액트 개념과 특징 / 장점과 활용분야)

오늘은 프론트엔드 개발 기술중 한국에서 가장 많이 쓰이는 기술 중 하나 인 React에 대해 알아보려고합니다.웹페이지를 개발하면서 자주 쓰이는 기술이고 이용했었는데 정확히 무엇인지 특징과 장점 어떻게 활용되는지 알아보겠습니다. 1. React란?더보기React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용된다. (출처:위키백과)간단하게 정의하자면, React는 사용자 인터페이스 즉 UI를 만들기 위한 JavaScript라이브러리입니다.페이스북에서 개발되어 오픈소스로 공개되었으며 전세계적으로 많은 웹 프로젝트에서 활발하게 사용되고있습니다.특히 한국에서는 React가 점유율이 굉장히 높아 프론트엔드 개발자들이 알아야할 필수 라이브러리중 하나입니다. *SPA(Sing..

• format_list_bulleted IT & 프로그래밍/React.js
• · 2025. 5. 12.
• textsms

[React] CRA 지원중단, Vite로 프로젝트 시작하는 방법

2025년 2월 14일부터 React에서 Create-react-app을 더이상 사용하지않고 기존앱에서 프레임워크로 마이그레이션하거나Vite, Parcel, RSBuild와 같은 빌드도구로 마이그레이션하도록 권장하고 있다고해요.아직까지 CRA(create-react-app) 로 react프로젝트 생성은 가능하나 굳이 권장하지않는데 사용하는것보다 권장하는 방식으로 프로젝트 생성을 하는 것이 좋다고합니다.오늘은 빌드도구중 하나인 Vite로 React 개발환경을 구성하는 방법에 대해 알아보려고합니다. ​ 1. Vite란? Vue.js 또는 React 프로젝트를 위한 빠르고 간단한 빌드 도구입니다.Vite는 모던 브라우저에서 웹 애플리케이션을 더 빠르게 실행하기 위해 개발 되었습니다.Vue 창시자 에..

• format_list_bulleted IT & 프로그래밍/React.js
• · 2025. 5. 11.
• textsms

[HTML 기초 08]HTML 오디오,비디오 태그

[웹프로그래밍 기초강좌 - HTML 08] HTML 오디오태그, 비디오태그​ (HTML기초강좌 8강) ① 오디오 태그 (audio) - HTML5에서는 audio태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다. - HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, OGG뿐입니다. 태그 설명 audio 오디오를 생성하는 태그입니다. 속성 설명 src 음성파일의 경로를 지정합니다. preload 사용자가 사용할 생각이 없더라도 음성파일을 미리 다운로드합니다. autoplay 음성파일 자동재생여부를 지정합니다. loop 음성파일을 반복할지를 지정합니다. control 음성파일 재생도구를 출력할지를 지정합니다. volume 음성파일 재생 볼륨을 설정합니다(0.0..

• format_list_bulleted IT & 프로그래밍/HTML
• · 2021. 10. 5.
• textsms

[HTML 기초 07]HTML 이미지태그 <img>

[웹프로그래밍 기초강좌 - HTML 07] HTML 이미지태그​ (HTML기초강좌 7강) ① HTML 이미지태그 - 태그는 웹페이지에 이미지를 삽입할때 사용됩니다. - 태그는 닫는태그가 없는 태그입니다. - 태그는 두개의 필수 속성이 있습니다. ② 태그 필수 속성 src, alt 속성 설명 src 삽입할 이미지의 경로를 지정합니다. alt 이미지의 설명을 작성합니다. -필수 alt속성은 사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결, src 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공합니다. ③ 절대경로, 상대경로 경로 설명 절대경로 현재위치와 관계없이 고유한 경로(주소)를 말합니다. 상대경로 현재위치를 기준으로 작성한 경로를 말합니다. 1) 절..

• format_list_bulleted IT & 프로그래밍/HTML
• · 2021. 10. 3.
• textsms

[HTML 기초 06]HTML 테이블태그 (table)

[웹프로그래밍 기초강좌 - HTML 06] HTML 테이블태그 ( table )​ (HTML기초강좌 6강) ① 기본 테이블 구조 (table/tr/td) - 테이블을 사용함으로 웹개발자가 데이터를 열과행으로 정렬하여 표현할 수 있습니다. - 테두리를 설정해주지 않으면, 기본으로 빈 테두리로 테이블이 생성됩니다. (* 참고: css border으로 지정) - 모든 테이블 행에는 셀의 수가 동일해야합니다. (셀을 합쳐야할경우, 아래 배우게 될 colspan,rowspan속성을 이용합니다.) 태그 설명 테이블을 만드는 태그입니다. 테이블 내부의 행 태그입니다. 행 내부의 일반 셀 테그입니다. 행 내부의 제목 셀 태그입니다. 테이블 제목 또는 간단한 설명을 작성하는 태그입니다. 테이블 만들기 음식 한식 양식 중..

• format_list_bulleted IT & 프로그래밍/HTML
• · 2021. 10. 1.
• textsms

[HTML 기초 05]HTML 목록태그 (ul,ol,dl)

[웹프로그래밍 기초강좌 - HTML 05] HTML 목록태그​ (HTML기초강좌 5강) ① 태그 - 순서가 없는 목록 - 태그는 unordered list의 약자로, 순서가 필요없는 목록을 만들때 사용됩니다. - 태그 내부에 요소 (list item)을 사용하여 각 항목을 표시합니다. - 대부분의 브라우저에서 ul태그의 리스트에는 원과 같은 불릿(bullet)으로 표시됩니다. 떡볶이 피자 타코 치킨 라면 ② 태그 - 순서가 있는 목록 - 태그는 순서가 있는 목록을 만들기 위해서 사용됩니다. - 과 동일하게 내부에 로 리스트를 작성합니다. - 대부분의 브라우저에서 리스트를 숫자(기본값)로 표현되며, 속성을 지정하여 변경이 가능합니다. - 리스트에는 type,start,reserved와 같은 속성을 사용할 ..

• format_list_bulleted IT & 프로그래밍/HTML
• · 2021. 9. 30.
• textsms