본문 바로가기

프로그래밍/자바스크립트65

[자바스크립트] 화살표 함수(arrow function) 화살표 함수는 함수를 간편한 문법으로 사용할 수 있도록 한 표현방법입니다. 화살표 함수 정의하기 간단한 익명 함수(anonymous function)의 정의를 보겠습니다. let sum = function(a, b) { return a + b; } 이 익명함수와 동일한 기능의 화살표 함수는 아래와 같습니다. 소괄호 안에 인자 리스트가 있고, 다음에 화살표 모양의 기호(이름이 화살표 함수인 이유), 다음에 반환값을 나타내는 표현식이 옵니다. let sum = (a, b) => a + b; 화살표 함수의 다양한 형태 화살표 함수는 인자의 갯수 본문내의 문장의 갯수등에 따라 조금씩 다른 형태를 사용할 수 있습니다. // 인자가 없을 경우 소괄호만 사용합니다. 소괄호를 생략할 수 없습니다. let val = (.. 2023. 6. 5.
[자바스크립트] 상수 (const)와 심볼(Symbol)의 비교 자바스크립트에서 바꿀 수 없는 값을 지정하기 위해서 const 와 Symbol 을 사용할 수 있습니다. 두 가지의 사용법과 차이점을 알아봅니다. 상수(const) 상수는 선언과 동시에 값을 지정하고, 이후로 변경이 불가능합니다. 중복 선언 또한 불가능합니다. // 선언과 동시에 초기화 합니다. const num = 5; // 이후에 값을 바꾸려고 하면 에러가 발생합니다. num = 10; // 중복 선언을 하려고 하면 에러가 발생합니다. const num = 7; 심볼(Symbol) 심볼은 값을 바꿀 수 없으면서 유일한 값을 만듭니다. 한번 만들어진 값은 자신외에 어떤 값과도 같지 않습니다. // 심볼을 하나 생성합니다. const SUN = Symbol(); // 심볼 생성시 인자값을 줄 수 있습니다... 2023. 6. 5.
JavaScript - 문장(Statement)과 표현식(Expression)의 차이점 JavaScript에서 문장(Statement)과 표현식(Expression)이 어떤 의미를 가지는지 알아봅니다. 아마도 다른 언어에서도 비슷한 의미로 사용될 것이라고 생각됩니다. 문장(Statement)은 프로그래밍에서 실행 가능한 최소의 코드라고 할 수 있습니다. 한 줄이 될 수도 있고, 블록({})으로 묶여 여러줄이 될 수도 있습니다. 문장의 예) let a, b; // 변수를 선언하는 문장. let c = 1; // 선언과 초기화를 한 번에 하는 문장. // 조건을 판별하는 if문장 if(a > b) { console.log("a가 b 보다 큽니다."); } a = b; // 대입 문장 c = a + b; // 계산 문장 표현식(Expression)은 주로 식별자, 연산자, 리터럴 등으로 구성되고.. 2022. 4. 19.
JavaScript - 반복문 반복문은 어떤 명령을 반복적으로 실행해야할때 사용됩니다. 자바스크립트에서는 다음과 같은 반복문을 사용할 수 있습니다. 1. for 문 2. while 문 3. do...while 문 4. 레이블, break, continue 문 5. for...in 문 6. for...of 문 1. for 문 for문은 "초기문, 조건문, 증감문"을 사용해서 반복 횟수를 지정하는 방식입니다. for([초기문]; [조건문]; [증감문]) { 문장; } // 0부터 4까지 5회 반복 for(let i = 0; i < 5; i++) { console.log("i = " + i); } // 배열 인덱스로 사용하는 방법 let arr = [ "foo", "bar", "baz" ]; for(let i = 0; i < arr.len.. 2022. 4. 12.
JavaScript - 흐름 제어와 오류처리 순차적으로 실행되는 명령을 조건에 따라 다른 명령을 실행할 수 있도록 해주는 흐름 제어(Flow Control)를 하는 방법을 알아봅니다. 1. 블록문 가장 기본적인 명령문은 세미콜론(;)으로 구분됩니다. 이러한 명령을 그룹으로 묶는 방법이 대괄호({}) 블록을 사용하는 것입니다. 블록은 함수, 조건문, 반복문, 에러처리 등에서 명령어 그룹을 묶는데 사용되어지며 변수의 유효범위를 결정하는 단위이기도 합니다. { 문장1; 문장2; . . . 문장n; } ※참고 var를 사용하면 함수 레벨 유효범위가 되고, ES6에서 추가된 let, const를 사용하면 블록 레벨 유효범위가 적용됩니다. 2. 조건문 조건에 따라 프로그램 실행 흐름를 변경할 수 있는 기능을 제공하는 명령으로 if, switch가 있습니다. .. 2022. 4. 4.
JavaScript - 문장, 식별자, 변수선언 1. 문장(Statement) 자바스크립트 문장의 끝에는 세미콜론(;)이 있어도 되고 없어도 됩니다. 하지만 한줄에 여러 문장을 적으려면 세미콜론(;)으로 구분을 해줘야 합니다. 자바스크립트는 대소문자를 구별하며 유니코드를 사용합니다. 그러므로 변수명등 식별자에 "한글"을 사용할 수 있습니다. var 좋아하는과일 = "배"; // 변수에 공백은 사용할 수 없습니다. 2. 주석 프로그램에 설명을 달 수 있습니다. // 한줄 주석 입니다. 슬래쉬 2개 이후 부터 줄 끌까지 입니다. /* 이건 여러줄 주석입니다. slash-star부터 다음 start-slash가 나올때까지가 주석입니다. */ 3. 식별자(Identifier) 변수명, 함수명, 클래스명등 식별자는 시작하는 글자가 영문자, 유니코드가 가능하며,.. 2022. 4. 1.
Node.js + TypeScript 프로젝트 만들기 자바스크립트를 공부하려다 타입스크립트를 알게 되었고, 타입스크립트를 공부하려니 간단한 테스트환경이 필요해졌습니다. Node.js는 웹브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해줍니다. 특히 서버 프로그램을 작성하는데 강점이 있다고 하더군요. 타입스크립트를 연습해보기 위한 간단한 환경이 될 수 있겠다 싶어서 Windows에서 Node.js와 TypeScript를 사용하는 프로그램을 위한 개발환경을 만들어 봅니다. 에디터는 Visual Studio Code(이하 vscode)를 사용하려고 합니다. ※ 작업환경은 다음과 같습니다. - Windows 10 Pro 64bit - Node.js v16.14.1 LTS : 설치 참조 - https://offbyone.tistory.com/441 - ya.. 2022. 3. 23.
TypeScript를 사용하는 React App 만들기(feat. yarn berry) React와 TypeScript를 공부하는 첫 단계로 패키지 관리자 yarn을 사용해 프로젝트를 생성해 보았습니다(yarn 이외에 npm, npx를 이용한 프로젝트 생성 방법도 있습니다). 처음의 목표는 yarn berry(yarn v2)를 global로 설치를 해서 yarn classic(yarn v1)없이 바로 yarn berry + react + typescript 프로젝트를 생성하는 것이었습니다. 하지만 생성된 프로젝트는 실행시 오류가 너무 많이 떠서 포기 하였습니다. 다음으로 선택한 방법이 yarn classic으로 프로젝트를 생성한 다음에 yarn berry로 마이그레이션하고, PnP(플러그앤플레이)설정과 Zeor-Install 설정까지 하는 것이었습니다. 결론부터 말하자면 yarn berry.. 2022. 3. 20.
Node.js 패키지 관리자 yarn 설치하기 Node.js의 패키지 관리자 yarn을 설치해 봅니다. Node.js를 설치하면 기본적으로 npm 이라는 패키지 관리자가 포함되어 있습니다. yarn은 npm보다 성능과 보안성을 높였다고 합니다. 하지만 이것저것 찾아보니 npm 또한 개선이 많이 되어서 성능은 거의 비슷해지고, 보안쪽도 개선이 되었다고 합니다. 처음 접해보는 입장에서 어느것이 더 나은지 판단이 되지 않습니다. yarn을 사용하는 예제가 종종 보이고, yarn을 사용하길 권장하는 모듈도 보이는지라 필요할때 필요한 것을 사용하면 될것 같습니다. 먼저 Node.js가 설치되어 있어야 합니다. 필요하면 https://offbyone.tistory.com/441 를 참고 해서 설치하면 되겠습니다. yarn의 공식 홈페이지는 https://yar.. 2022. 3. 18.
Node.js 설치하기 Node.js는 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. 특히, 서버 프로그램을 작성하는데 많이 사용되고 있는것 같습니다. React를 사용해보기 위해서 설치해 봅니다. Node.js 한글 사이트는 https://nodejs.org/ko/ 입니다. 설치 파일을 다운로드 받습니다. 현재 최신 버전은 17.7.1이네요. 저는 16.14.1 LTS 버전은 다운받아 설치합니다(LTS는 Long Term Support의 약자로 오랫동안 지원하는 버전을 말합니다). 다운로드 받은 파일은 node-v16.14.1-x64.msi 이고, 크기는 27.1MB 정도 입니다. 다운받은 파일을 더블클릭하여 설치합니다. 라이센스에 동의합니다. 설치 위치를 지정.. 2022. 3. 17.
CKEditor 이미지 업로드시 JSON 응답, jQuery UI Dialog와 같이 사용시 콤보박스 안열리는 현상 해결 이전글 "CKEditor 4 설치와 PHP 연동 하기"에서 CKEditor의 사용법을 알아 보았습니다. CKEditor에서 이미지 업로드 후에 에디터에 이미지를 표시하기 위해서 반환되는 값은 다음과 같은 자바스크립트 입니다. 최근 새 버전을 설치하고 테스트해본 결과 이 반환값이 JSON 값으로 변경된것 같습니다. 1. 이미지 업로드 성공시 반환값 { "uploaded": 1, "fileName": "foo.jpg", "url": "/files/foo.jpg"} - uploaded : 1 로 설정합니다.- fileName : 업로드 된 파일의 이름입니다.- url : 업로드 된 파일의 URL (URL 인코딩 됨)입니다. 이 값을 이용해서 에디터 내부에 업로드된 이미지를 표시합니다. 2. 업로드 성공하였지만.. 2019. 1. 23.
jQuery UI Button 사용법 jQuery UI의 버튼 기능을 사용해 봅니다. 1. 필요한 라이브러리를 추가합니다. 2. 기본적인 사용법버튼1버튼2 $(document).ready(function() { $("#btn1").button(); $("#btn2").button();}); 2. 버튼 클릭 이벤트 처리$(document).ready(function() { // 버튼을 생성함과 동시에 이벤트 핸들러를 추가합니다. $("#btn1").button().on("click", function(event) { alert("버튼1이 눌러졌습니다."); }); // 버튼 생성과 이벤트 핸들러 추가를 분리합니다. $("#btn2").button(); $("#btn2").click(function(event) { alert("버튼2가 눌러졌습.. 2018. 12. 13.
jQuery UI 대화창 동적으로 생성하기 jQuery UI 대화창의 기본 사용법은 대화창이 될 HTML을 페이지 내에 미리 만들어서 숨겨었다가보여주는 방식입니다. 여기서는 동적으로 대화창을 만들고, 대화창내에 보여질 내용도 다른 URL을 호출 하여 채워 넣는방법을 알아봅니다. 1. 필요한 파일들을 가져옵니다. 2. 대화창 컨텐츠를 가진 페이지 입니다.(dialog_content.html)동적으로 불려진 컨텐츠 입니다. 3. 클릭하면 다이얼로그를 열 버튼 입니다.동적으로 다이얼로그 열기 4. 동적 대화창 생성 스크립트 입니다. 설명은 코드에 있는 주석을 참고 하세요. 동적 대화창 생성 방법을 알아보았습니다. 2018. 11. 23.
jQuery resize()를 사용하여 컨텐츠 영역 height를 100%로 유지하기 jQuery의 resize() 함수를 사용하여 헤더, 메뉴, 컨텐츠 영역으로 구성되는 화면에서 컨텐츠 영역의 높이는 브라우저의 크기를 조절 하더라도 항상 100% 가 유지 되고, 컨텐츠 영역 내부의 실제 컨텐츠의 높이가 컨텐츠 영역의 높이보다 크다면 스크롤이 생기도록 만들어 봅니다. 먼저 html 부분 입니다. head와 main이 상하로 나뉘고, main 내부에는 menu와 contents 가 좌,우로 나뉘어져 있습니다. HEADER MENU CONTENTS Lorem ipsum ... 스타일 시트 부분 입니다. html, body, div 부분은 엘리먼트들의 크기를 초기화 하는 부분 입니다. #main 은 flexbox 레이아웃을 사용해서 구성 했습니다. #contents 가 컨텐츠 영역으로 over.. 2018. 11. 16.
동시에 여러 메뉴가 열리는 아코디언(Accordian) 메뉴 만들기 이전 글 "jQuery UI Accordian을 사용한 메뉴 만들기" 에서 메뉴를 만들어 보았는데, 한번에 하나의 메뉴만 열렸었습니다. 하나를 열면 열려 있던 다른 메뉴는 닫혀 버리는 것이죠. 여기서는 여러 메뉴를 열 수 있는 방법을 알아 봅니다. jQuery UI의 Accordian으로는 구현이 안되므로 jQuery 플러그인으로 새로 만들어 봅니다. 1. jQuery 를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 플러그인을 생성합니다. 코드를 간단히 하기 위해서 메뉴가 되는 헤더는 태그를 사용합니다. 간단히 메뉴가 열리.. 2018. 10. 31.

티스토리툴바