프로그래밍 공부 노트

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다. display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다. { display : block; } 블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다. { display : inline; } 인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다. 예시로 보면 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < style > #block img { display : block ; margin : 5px ; } </ style > </ head > < body > < p > inline 방식 </ p > < div id = "inline" > < img src = "./images/pic.png" alt = "초록색 사진" /> < img src = "./images/pic.png" alt = &qu

대표적으로 많이 사용되는 웹 브라우저에는 크롬, 파이어폭스, 사파리, 오페라, 인터넷 익스플로러 등이 있다. 이러한 웹 브라우저에서 아직 표준 규약이 아닌 속성들 그러니까 간단히 말해 아직 CSS 권고안에 포함되지 못한 기능이거나, CSS 권고안에 포함되어 있지만 아직 완벽하게 표준이 되지 못한 상태의 속성들을 사용하고자 할 때 벤더 프리픽스(Vendor Prefix)를 사용한다. 아직 완벽한 표준이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원하기 때문에 속성 앞에 접두사(prefix)를 붙여 브라우저별로 구분해서 적용시켜 주어야 한다. 만약에 표준 규약이 아니었던 속성들이 표준 규약이 되었다 하더라도 이전 버전을 사용하고 있는 사용자들을 고려해서 계속 브라우저별 접두사를 붙여 사용하기도 한다. 대표적으로 많이 사용되는 웹 브라우저의 벤더 프리픽스(Vendor Prefix) 크롬, 사파리 : -webkit- 파이어폭스 : -moz- 오페라 : -o- 인터넷 익스플로러 : -ms- 사용법은 아래와 같다. < style > .button { background : red ; background : -webkit-linear-gradient ( red , yellow ); background : -moz-linear-gradient ( red , yellow ); background : -ms-linear-gradient( red , yellow ); background : -o-linear-gradient ( red , yellow ); background : linear-gradient ( red , yellow ); } </ style > prefix를 붙여 사용할 때에는 표준으로 결정된 후 사용할 속성을 맨 마지막에 작성한다. 이렇게 작성하면 나중에 속성이 표준으로 결정된 후 앞에 썼던 브라우저별 prefix 들만 지우면 된다. 만약 이렇게 일일

polyfill 최신기술이 적용되지않는 브라우저 즉 과거의 브라우저에서도 최신 기술이 돌아갈 수 있도록 해준다. https://caniuse.com/ 위 사이트에서 검색해보고 지원되지않는 사이트까지도 지원될 수 있게해준다. 해당기술과 관련된 polyfill 라이브러리를 받아 사용법대로 나의 스크립트에 적용하면 기술이 적용되지않는 구버전의 웹브라우저들에게서도 최신기술을 적용시킬 수 있다.

Hash (해시) 북마크의 개념이다. 태그(element)에 id값을 부여하여 사람들이 특정한 자료의 위치에 빠르게 접근할 수 있도록 도와주는 기능이다. id값을 지정해주고 링크로 연결해주면 그 링크를 클릭시 해당위치로 이동한다. 많은 개발블로그들이나 긴 장문의 내용의 블로그들을 보면 맨위에 목차가있고 링크식으로 되어있는데 클릭하면 해당내용으로 스크롤이 움직이는것을 볼 수 있다. 이러한 기능이 Hash(해시) 기능이다. fragment:내용(파편) fragmentIdentifier: fragment를 식별하는 식별자 id 라고 명칭하지만 이름이 중요한것은 아니다! javascript에서 hash구하기: location.hash #!html : hash와 구별하기 위해 관습적으로 !를 붙인다. #의 기본기능이 북마크이기때문에 !를 붙인다.

Ajax fetch API fetch 사용 예제 카카오 검색 api function fetchPage(name){ fetch(url).then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) }); }; fetch의 인자로 특정 백엔드 URL을 작성하면 불러올 파일을 요청하는것이고, 그다음에 작성된 then 메서드는 파일을 서버로 요청하여 다운되는동안 비동기적으로 다른일을 처리하다가 응답이 오면 해당 응답을 처리하는 메서드 이다. then 괄호 안에 들어가있는 콜백 함수의 매개변수로 들어가있는 response는 fetch를 통해 요청한 파일에대한 응답에 대한 결과를 인자로 받아와 response 매개변수의 인자로 준다. #fetch로 요청한 정보에대한 응답결과를 Response객체에 담아 인자로 반환한다. Ajax fetch API를 사용할 때 개발자 도구- Network를 확인해보면 status가 200인 경우와 404인 경우가 존재하는데  200은 잘 불러왔다는 의미이고 404의경우 요청한 파일을 불러오지 못했을때를 나타낸다.  이러한 정보또한 Response객체안에 내포되어있는데 이러한 정보들을 토대로 아래와같이 코드를 작성할 수도 있다. fetch('html').then(function(response){ console.log(response.status); if(response.status === 404){ document.write('해당 요청에대해 응답하지 못했습니다.') } else { document.write('해당 요청을 완료하였습니다.')

우리나라 모 대기업에서 제공해주는 Computer Science 하버드 대학의 강의 알게되었다.  당장 실무에서 사용되는 코딩 공부도 중요하지만 기본적인 학문도 알아두면 언젠간 꼭 도움이 될것이라 생각되어 듣게되었다. 오늘 학습한 내용에 대해서 적어보려한다. 오늘 배운 내용은  - 컴퓨터 과학 - 2진법 - 비트 - 바이트 컴퓨터 과학이란 문제 해결에 대한 학문이다. 문제 해결은 입력(input)과 출력(output)을 만들어내는 과정이다. input과 output 사이에 중간과정이 컴퓨터 과학이다. 그리고 이러한 input과 output을 표현하기 위해서 모두와의 약속(표준)이 필요하다. 그래서 그렇게 만들어진 약속중 표현방법에 대해서 학습했다. 2진법 우리가 일상 생활에서 사용하는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 와 같은 숫자들은 10진법이다. 하지만 컴퓨터는 오직 0 과 1로만 표현하는 2진법을 사용한다. 컴퓨터는 글, 사진, 영상, 소리 등 모든것을 0 과 1만으로 저장할 수 있다. 우선 아래의 123 을 보면

 getter / setter getter와 setter는 보통 사용자로 하여금 원하는 값이 아닌 값을 받았을때 개발자가 원하는 값으로 변경해서 값을 할당하는 방법이다. 즉, 프로퍼티 값을 원하는대로 통제할 수 있다. 접근자 프로퍼티인 getter와 setter는 get과 set으로 나타낼 수 있다. 'use strict' class User { constructor ( name , gender , age ) { this . name = name ; this . gender = gender ; this . age = age ; } //값을 리턴 get age () { return this . _age ; } //값을 설정 set age ( value ) { this . _age = value < 0 ? 0 : value ; } } const user1 = new User ( 'steve' , 'male' , - 1 ); console . log ( user1 ); // User { name: 'steve', gender: 'male', _age: 0 } getter 메서드는 User.age 를 사용해 프로퍼티를 읽으려고 할 때 실행되고,  setter 메서드는 User.age = age 로 프로퍼티에 값을 할당하려 할 때 실행된다. this.age = age; 에서  앞에 this.age 는 get age(){ return this._age } 를 가리키며 뒤에 값을 할당하는 age 는 set age(value){ this._age = value < 0 ? 0 : value } 를 가리킨다.  get과 set메서드에서 this.age 가 아닌 this._age를 사용한것은 위에 생성자와 동일하게 작성할 경우 callstack이

일단 use strict를 사용하는 이유 세가지를 간단히 알아보면 1. 기존에는 무시될 수 있었던 에러들을 잡아낸다. 2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로 잡는다. 동일한 코드이더라도 비 엄격 모드 보다 엄격모드에서 더 빨리 동작한다. 3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다. 자바스크립트는 유연한 즉 flexible한 언어이다. 유연하다는점은 프로그래밍에있어서 많은 문제점을 발생시킬 수 있다.  자바스크립트에서의 경우 선언되지 않은 변수에 값을 할당한다던지 기존에 존재하는 프로토타입을 변경한다던지와 같은 다른 언어에서는 볼 수 없는 유연함이 존재한다. 이러한 유연함을 제한해주는것이 'use strict' 이다. a = 6 ; console . log ( a ); // 6 이렇게 선언되지 않은 a라는 변수에 6을 대입하여 실행하면  이처럼 6을 반환한다. 하지만 'use strict' 를 선언하면 'use strict' a = 6 ; console . log ( a ); // error 이렇게 에러를 발생한다. 이러한 'use strict' 를 사용하여 Strict Mode(엄격 모드)로 개발하게되면 자바스크립트 엔진이 조금 더 효율적으로 빠르게 자바스크립트를 분석할 수 있기 때문에 코드를 실행하는데 있어서 조금 더 나은 성능개선을 기대해볼 수 있으며 조금 더 견고하게 프로그램을 개발할 수 있다. + es6에서는 Strict Mode(엄격 모드)가 기본으로 설정되어 있기 때문에 'use strict'를 작성하지 않아도 Strict Mode로 실행된다.

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 scope를 기억하여 자신이 선언됐을 때의 환경(scope) 밖에서 호출되어도 그 환경(scope)에 접근할 수 있는 함수를 말한다.  이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수라고 말할 수 있다. 일반적으로 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없다. 하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조를 클로저라고 한다.  즉, 자신의 고유 스코프를 가진 상태로 소멸하지 않고 외부 함수에 의해 호출되는 함수를 만드는 것이 바로 클로저이다. let outerFunc = () => { let x = 10 ; let innerFunc = function () { console . log ( x ); }; return innerFunc ; }; /* * 함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다. * 그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다. * 함수는 return하면 생을 마감한다. */ let inner = outerFunc (); inner (); // 10 클로저를 남발하게되면 가비지컬렉션 대상이 되어야할 객체들이 메모리상에 남아있게 되므로 클로저를 남발하면 오버플로우가 발생할 수도 있다. +예시 const add = a => b => a + b ; console . log ( add ( 10 )); // b => a + b const add10 = add ( 10 ); console . log ( add10 ( 10 )); //20 console . log ( add10 ( 40 )); //20 함수를 반환하는 고차함수이다.  add함수에 값

배열에서의 전개연산자 // 기본동작원리코드 const fruits1 = [ "apple" , "orange" , "banana" ]; const fruits2 = [... fruits1 ]; console . log ( fruits1 ); // [ 'apple', 'orange', 'banana' ] console . log ( fruits2 ); // [ 'apple', 'orange', 'banana' ] console . log ( fruits1 === fruits2 ); //false (fruit1 === fruit2); //false 결과가 나온 이유는 immutable array와 같은 개념으로 참조가아닌 원본객체 복사하여 새로운 fruit 객체를 만든것이기 때문이다. 직접 확인해보면 아래와 같다. const fruits1 = [ "apple" , "orange" , "banana" ]; const fruits2 = [... fruits1 ]; // console.log(fruits1); // [ 'apple', 'orange', 'banana' ] // console.log(fruits2); // [ 'apple', 'orange', 'banana' ] // console.log(fruits1 === fruits2); //false fruits1 . push ( "watermelon" ); console . log ( fruits1 ); // [ 'apple', 'orange', 'banana', 'watermelon' ] console . log ( fruits2 ); // [ &#

arrow function(화살표 함수) 표현방식 // 1번) // 한 줄 작성 let arrow1 = ( x , y ) => x + y ; arrow ( 10 , 10 ) //20 // 여러줄 작성 let arrow2 = ( x , y ) => { console . log ( "여러줄 작성" ); return x + y ; } arrow2 ( 10 , 10 ) //20 // 여러 줄 작성 (return문 미작성) let arrow2 = ( x , y ) => { console . log ( "여러줄 작성" ); x + y ; } arrow2 ( 10 , 10 ) //undefined 한줄로 코드를 작성할 경우 { }중괄호 생략이 가능하다. 하지만 여러 줄의 코드를 작성해야 하는경우 { }중괄호와 return문이 꼭 작성되어야한다. return문이 없는 경우 undefined를 반환한다. // 2번) const oneParameter = x => x ; oneParameter ( 10 ) // 10 매개변수가 하나일 경우 괄호도 생략이 가능하다. 매개변수가 두개인 경우에는 생략 불가 // 3번) const obj = ( x , y ) => ({ x , y }) obj ( 123 , 456 ); // {x: 123, y: 456} 하지만 객체를 반환하는 경우에는 ( ) 소괄호를 사용해야 한다. 매개변수에 기본값 설정 화살표 함수를 포함한 함수 선언문방식과 함수 표현식에서 모두 매개변수에 기본값을 설정할 수 있다. 매개변수에 할당연산자를 이용하여 매개변수에 값이 전달되지 않은 경우 해당 기본값으로 계산되게 할 수 있다. // ex1) let arrow = ( x = 1 , y = 2 ) => { return x + y ; } arrow (); // 결과 : 3 // ex2) let arrow = ( x , y

<!doctype html> 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다. <html lang="en"></html> 웹 문서의 시작과 끝을 나타내는 태그이다.  웹 브라우저가 <html> 태그를 만나면 </html> 까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시한다. html 내용에 한글을 넣을것이면 en을 ko 로 수정 -->  <html lang="ko"> <head></head> 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이다.  스타일 및 스크립트 등이 head 태그안에 포함된다. 문서에서 사용할 외부 파일들도 이곳에 작성한다. head 태그에서 가장 중요한 태그는 <title></title> 태그이다.  모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색엔진은  제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측한다. <body></body> 실제로 웹 브라우저 화면에 나타날 내용을 작성한다.  <meta charset="UTF-8">  문자 세트 지정하기.  웹 브라우저에게 UTF-8 형식의 글자 인코딩을 알려주는 정보이다. ​ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일 기기 고려하기.  웹 브라우저를 표시하는 기기(모바일 폰, PC등) 의 사이즈에 따라 맞추는 기능 ​ <meta http-equiv="X-UA-Compatible" content="ie=edge"> 인터넷 익스프로러 브라우저 고려하기. 인터넷 익스플로러 브라우저에게 호환성을 가장 최신버전으로 맞추어 표시하라는 기능 검색엔진 고

얕은 복사와 깊은 복사를 알기위해서는 기본적으로 원시 데이터 타입과 참조 데이터 타입에 대해서 알아야 한다. 원시 데이터 타입(Primitive type) - String - Number - Boolean - Null - Undefined 참조 데이터 타입(Reference type) - Object - Symbol 원시 데이터 타입의 경우 값을 복사하면 새로운 메모리에 값을 할당하기 때문에 원본과 복사된 값 둘 간의 영향을 미치지않는다. let ex1 = "apple" ; let ex2 = ex1 ; ex1 = "banana" ; console . log ( "ex1 =>" , ex1 ); // ex1 => banana console . log ( "ex2 =>" , ex2 ); // ex2 => apple 반면에 참조 데이터 타입은 해당 객체의 메모리 주소 값을 복사하기 때문에 원본과 복사된 값 둘중 하나라도 값의 변경이 일어나면 원본과 복사본 모두 변경사항이 반영된다. let person1 = { name : "Kim" , age : "11" , }; let person2 = person1 ; person1 [ "name" ] = "Park" ; console . log ( "person1 =>" , person1 ); // person1 => { name: 'Park', age: '11' } console . log ( "person2 =>" , person2 ); // person2 => { name: 'Park', age: '11' } 객체의 경우 이러한 특성 때문에 객체를 복사하는 방법이 크게 두가지로 나뉜다. 얕은 복사 shallow copy 얕

변수 변수란 데이터를 저장하는 저장소이다. javascript에선 let 키워드를 사용하여 변수를 생성한다. 간단히 사용법을 알아보면 아래와 같다.  // 문자열, 숫자 등과 같은 자료형들을 저장할 수 있다. let letVariable = "변수1" ; // 한 줄에 변수를 한번에 선언할 수도 있다. 하지만 권장되지 않는다. let variable1 = "var1" , variable2 = "var2" , variable3 = "var3" ; // 한 줄에 한 개의 변수를 선언하면 가독성이 높아진다. let variable1 = "var1" ; let variable2 = "var2" ; let variable3 = "var3" ; 변수 명명 규칙 javascript에서는 변수의 이름을 작성할 때 두가지 제약 조건들이 있다. 1. 첫 글자로 숫자가 올 수 없다. 2. 문자, 숫자, $(달러사인), _(언더스코어) 만 사용할 수 있다. 그리고 변수명은 대문자와 소문자를 구별한다. 동일한 이름의 변수명이더라도 서로 다른 변수이다. 상수 변수와 동일하게 데이터를 저장한다. 하지만 약간의 차이점이 존재하는데 상수의 경우 변화하지 않는 데이터 값을 저장할 때 사용한다. 상수의 경우 let 예약어를 사용하지 않고 const  예약어를 사용한다. // example const name = 'Kim' ; const 예약어를 사용하여 상수를 선언하면 let 예약어와 달리 변수값을 재할당 할 수 없다.  재할당 할 경우 에러가 발생한다. const 예약어를 사용하여 상수를 사용하다보면 대문자로 선언하는 경우가 있고, 대소문자를 혼용하여 사용하는 경우가 있다. 일반적으로 대문자만을 사용하는 경우에는 이미 정해져있는 값을 할당할 때 사용하며, 대소문자를 혼용하는 경우에는 추후에 할당될 값이 아직 정해져있지 않았을 때