프로그래밍 공부 노트

stability - 0 : Deprecated - 1 : Experimental - 2 : Stable - 3 : Locked 0 은 더 이상 사용하지 말라는 뜻 1 은 아직 실험적인 단계 2 은 어느정도 안정적인 단계 3 은 더 이상 변경이 없는 단계  stability 숫자가 높을수록 더 안정적이고 확정적인 버전이기 때문에  낮은 숫자를 사용하게 될 경우 조심해야한다.

배열에는 다양한 반복문이 존재한다. 대부분의 반복문은 배열을 순회할때 사용되는데 이때 사용되는 다양한 반복문을을 나열해보고자한다. 반복문의 종류들에는 아래의 5가지정도가있다. 1번. for 문 2번. while 문 3번. foreach 4번. for in 5번. for of 4번 .for in  은 객체를 순회할때 많이 사용되며 배열에서 사용시 문제점이 발생하는데 예를들어서 기존에 배열이 존재하고 Array.prototype.getIndex = function(){}; 코드를 추가한뒤 for in 문을 사용하게되면 기존과 다르게 배열에 function(){}이 추가되게된다. 자신이 가지고있는 배열객체 이외에 prototype을 이용해서 자신의 상위에 추가된 이러한 객체들도 값으로 나타내주는 문제가 발생하므로 배열(array)에서 for in 문을 사용하지 않는것이 좋다. 또한 네이티브에 메서드를 추가해서 확장할경우 또한 문제를 발생시킬 수 있다. 이러한 문제점들을 해결해줄방안으로 출시된 반복문이 5번. for of 이다. 배열 반복문에 for of를 사용할것을 추천한다. 숫자배열만이아닌 문자배열에서도 사용가능하다. foreach의경우 filter와 같이 콜백함수를 순회하면서 결과값을 반환한다. 관련되서  https://seungwon-code.blogspot.com/2019/11/ddd9.html

vscode 기준 기본 내장으로 깔려있는 플러그인이다. (블로그들을 확인해보면 대부분 설치를한다. 나는 설치안했다.) ㅡㅡㅡㅡㅡ1. 태그생성하기ㅡㅡㅡㅡㅡ ex1) div*5 -> div태그 5개 생성. <div></div> <div></div> <div></div> <div></div> <div></div> ex2) div.item*5 -> class="item" 인 div태그 5개 생성 <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> ex3) div.item[title]{상자}*5 -> class="item"이고 title="상자" 인 div 태그 5개 생성 <div class="item" title="">상자</div> <div class="item" title="">상자</div> <div class="item" title="">상자</div> <div class="item" title="">상자</div> <div class="item" title=...

원시 타입(primitive type) 1. Boolean 2. null 3. undefined 4. Number 5. String 6. Symbol (ECMAScript 6) 7. bigint 위 7가지는 Javascript에서의 원시 값이다. Javascript에서 원시 값은 변경 불가능한 값(immutable value)이다. 변수에 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없다. 즉, 새로운 메모리 값을 새롭게 할당할 수 있지만 기존 메모리 값을 수정할 수 없다는 의미이다. 원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다.  변경 가능하다는것은 참조하고있는 메모리의 값을 변경 할 수 있다는 의미이다. 위 내용을 이해하려면 복제와 참조에대한 이해가 필요하다. 복제 는 원본데이터를 복제해서 복제된 데이터를 수정하는것이기때문에 원본데이터는 변경되지 않으며 참조 는 원본데이터를 공유해서 그러니까 저장된 메모리 공간을 공유해서 서로 원본데이터를 수정할 수 있기 때문에 수정시 참조하는 모든 데이터들에서 수정이 발생된다. 즉 수정이 발생하면 원본데이터의 값이 변경된다. 가져오는 값이 원시타입이면 복제하여 사용하기때문에 원본데이터를 변경하지않고 가져오는 값이 원시타입이 아닌 객체인경우 참조를 하기때문에 원본데이터도 변경된다. 하지만 객체에 새로운 객체를 할당하면 더 이상 참조하지않고 새롭게 할당된 객체 데이터가 그 변수의 값이 된다.

시맨틱이란 '의미론적' 이라는 뜻을 가지고 있다. 이러한 시맨틱과 태그가 만나 시맨틱 태그라는 이름이 만들어졌다. 시맨틱 태그란 태그만 보고도 브라우저와 개발자 모두에게 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다. 이렇게 시맨틱 태그를 사용하여 구조화한 웹을 시맨틱 웹이라고 한다. 일반 html 태그를 사용하여 페이지 구조를 잡아도 되지만 시맨틱 태그(sematic tag)를 사용하는 몇가지 이유가 있다. 첫번째. 검색엔진이 html 코드를 확인하고 그 의미를 해석하고 인지하여야하는데 이때 시맨틱 태그(semantic tag)를 사용하면 검색엔진이 보다 쉽게 웹 문서를 파악하여 보다 정확하게 검색하는데 도움을 준다. 동일한 디자인의 제목이라고 할지라도 h1 태그를 사용한 제목과 div 태그를 사용하여 동일한 외형을 가진 제목은 외형만 같은뿐 검색엔진이 인식하는 내용은 전혀 다르다. 두번째, 어떠한 장애가 있더라도 웹사이트를 이용하는데 불편을 없게하기 위해서이다. 웹 접근성 시각에서 볼 때 시맨틱 태그는 매우 중요하다. 시각장애인들은 웹사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 이용하는데 이때 시맨틱 태그를 통해  어느 부분이 제목이고 내용인지 구별할 수 있으므로 그만큼 사이트 내용을 정확히 전달할 수 있기 때문이다. 또한 태그에 대한 역할이 정확히 정해져있기 때문에 어떤 장치에서든 문서를 똑같이 해설할 수 있다. HTML5에서 새롭게 추가된 시맨틱 태그들이다. 1. header : 헤더를 의미한다 2. nav : 내비게이션을 의미한다 3. aside : 사이드에 위치하는 공간을 의미한다 4. section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다 5. article : 분문의 주내용이 들어가는 공간을 의미한다 6. footer : 푸터를 의미한다 section 안에 article 뿐만 아니라 nav(메뉴), main(본문), aside(광고)등으로 구성되기도 ...

네이버 검색 엔진 최적화(search engine optimization, SEO) 검색엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 1. 검색엔진에 내 사이트 등록하기(네이버 웹마스터 도구) 2. 내 사이트 인증하기 3. 관련 문서 제출하기 4. SEO 검색 엔진 최적화하기 검색엔진을 크롤러라고 부른다. 이러한 크롤러가 각 사이트의 정보를 모두 수집, 검색하는데 이때 사이트의 정보를 모두 보여주지않고 숨기고 싶은 정보들이 있다면 robot.txt파일을 작성하면된다.  크롤러가 사이트에 방문하면 가장 먼저 robot.txt 파일에 접근하여 txt파일에 로봇을 허용한다는 내용이 있다면 크롤러가 정보에 접근하여 정보들을 가져오고 반대로 크롤러를 거부한다고 작성되어있으면 크롤러가 사이트에 접근하지 못하도록 한다.  또한 sitemap.xml이라는 파일을 제공할 수 있는데 이는 크롤러가 사이트에 접근했을 때 sitemap이라는 지도를 보고 사이트를 더 정확하고 효율적으로 탐색할 수 있게 만들어 준다. robot.txt 파일과 sitemap.xml을 크롤러가 접근하게 하기위해서는 폴더의 최상위에 둔다. 다른 내부 폴더에 넣을경우 크롤러가 해당 파일에 제대로 접근하기 어렵다.

이미지를 클릭하면 특정 url 주소로 이동하도록 할 수 있다. 그런데 한 이미지를 가지고 클릭 위치에 따라 서로다른 url 주소로 이동하게도 할 수 있다. 이것을 이미지 맵 이라고 한다. 이미지 맵은 이미지에 영역을 만든 후 링크를 추가해야한다. 사용법은 아래와 같다. < map name = "맵이름" > < area > < area > ... .... </ map > < img src = "이미지 파일" usemap = "#맵이름" alt = "이미지설명" > usemap 속성에 #을 붙여야 하며 map 태그의 name 속성과 이름을 동일하게 작성해야 한다. 실제 사용 예제를 보면 < map name = "kurly" > < area shape = "rect" coords = "0,0,100,100" href = "https://www.naver.com" alt = "네이버" /> </ map > < a href = "https://www.kurly.com/shop/event/kurlyEvent.php?htmid=event%2Fjoin%2Fjoin_201223&%243p=a_custom_741527000799871056&%24deeplink_path=home&%24android_passive_deepview=false&%24ios_passive_deepview=false&%24fallback_url=https%3A%2F%2Fwww.kurly.com%2Fshop%2Fevent%2Fkurl...

호이스팅(Hoisting)은 어디에 선언했나와 상관없이 항상 제일 위로 선언을 끌어 올리는 현상이다. 아래의 예시를 보면 function foo () { console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } foo (); 다른 프로그래밍 언어의 경우 위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생한다.  하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 자동으로 초기화 해주기 때문에 에러 없이 undefined가 출력된다.  위 코드는 아래와 동일한 역할을 하는 코드이다. function foo () { var a ; console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } foo (); 변수 이외에도 함수가 선언되기 이전에 함수를 호출하여도 에러가 발생하지 않으며 동작한다. foo (); function foo () { console . log ( a ); // undefined var a = 100 ; console . log ( a ); // 100 } 함수 작성 이전에 함수를 호출하였지만 JavaScript의 특이한 컨텍스트 실행 동작 방법으로인해 동작한다. 이러한 호이스팅은 유연함을 제공하지만 그만큼 오류도 많이 발생하게 되어 문제가 된다. 호이스팅은 혼란스러울 수 있기 때문에 함수를 호출하기 전에 최상단에 함수를 선언하는 습관을 들이는 것이 좋다. var를 사용하여 변수를 선언하거나 함수 선언문을 사용하였을때는 호이스팅이 발생하였는데  현재 es6로 넘어오면서 let, const 문법을 사용하거나 함수 표현식을 사용하게 되면서 호이스팅 현상이 발생하지 않게 되었다.??  사실 호이스팅이 발생한다. 그런데 var는...

프로미스 ( Promise) 란  내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체이다. 프로미스(Promise)는 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리란 순서대로 동작하는것이 아닌 오래 걸리는 작업은 뒤에서 따로 수행하면서 그동안 뒤에있는 작업들을 순서대로 수행하는 자바스크립트의 특성을 말한다. 프로미스는 보통 API를 통해 서버에서 데이터를 받아오거나 파일을 읽어오는 등의 역할을 수행하기 위해서 사용된다. 프로미스는 기본적으로 아래와 같이 작성한다. let promise = new Promise (( resolve , reject ) => { // executor }); new Promise에 전달되는 콜백 함수는 executor(실행자, 실행 함수)함수라고 부른다. new Promise를 만들면 콜백 함수인 executor 함수는 자동적으로 즉각 실행되는데, executor 함수 내부에서 원하는 일(비동기 작업)을 처리할 수 있다. 이러한 콜백함수 executor는 항상 resolve 콜백 함수와 reject 콜백 함수를 받는다. 이 함수들은 프로미스 객체를 선언하면 자동으로 생성되므로 따로 선언하지 않아도 된다. executor를 실행하고 결과를 즉시 얻든, 늦게 얻든 상관없이 인자로 넘겨진 resolve, reject 콜백 함수 중 하나를 반드시 호출해야 한다. 두 콜백 함수는 사용방법을 보면 resolve(value) 콜백 함수는 일이 성공적으로 처리된 경우 그 결과인 프로미스를 value로 전달하고 reject(error) 콜백 함수는 에러가 발생하면 에러 객체를 error로 전달한다. 즉 비동기적으로 작업을 수행하고 처리 결과에 따라 성공시 resolve를 실패시 reject를 호출한다. 프로미스를 사용하려면 state 상태에 대해서도 알아야한다. promise 상태 변화 promise 객체는 내부 프로퍼티를 갖고있는데 state 와 result 를 프러퍼티로 갖는다. state는 처음에 ...

event.keyCode 코드값 Javascript는 사용자의 키입력을 감지하여 함수를 처리할 수 있다. 이러한 키입력을 감지하는 이벤트가 keydown 이벤트이다. keydown 이벤트를 사용할경우 단순히 아무키를 입력할때마다 이벤트가 발생하는데  이때 원하는 키를 입력할때 예를들어 엔터를 입력할때 이벤트가 발생하도록할수있게해주는것이 event.keycode 값이다. enter의 키코드값은 13이다. event.keyCode 는 ASCII 코드에 기반한다.   다음의 링크는 사용자가 입력한 키의 keyCode 값을 알려준다. https://laelbe.s3.amazonaws.com/blog/81/Javascript-eventkeyCode-Value_ex01.html keyCode 표 0 10 20 Caps Lock 30 40 Arrow Down 1 11 21 31 41 2 12 22 32 42 3 13 Enter 23 33 Page Up 43 4 14 24 34 Page Down 44 5 15 25 35 End 45 Insert 6 16 Shift 26 36 Home 46 Delete 7 17 Ctrl 27 Esc 37 Arrow Left 47 8 Backspace 18 Alt 28 38 Arrow Up 48 0 9 Tab 19 Pause/Break 29 39 Arrow Right 49 1 50 2 60 70 f 80 p 90 z 51 3 61 =+ 71 g 81 q 91 Windows 52 4 62 72 h 82 r 92 53 5 63 73 i 83 s 93 Right Click 54 6 64 74 j 84 t 94 55 7 65 a 75 k 85 u 95 56 8 66 b 76 l 86 v 96 0 (Num Lock) 57 9 67 c 77 m 87 w 97 1 (Num Lock) 58 68 d 78 n 88 x 98 2 (Num Lock) 59 ;: 69 e 79 o 89 y 99 3 (Num Lock) 100 4 (...