Mo's Develog

Q1. 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다. HTML 안에 있는 이미지 로딩이 끝나면 무언가 코드를 실행하고 싶습니다. 이 이미지가 로드가 되면 콘솔창에 성공, 로드가 실패하면 콘솔창에 실패를 출력하고 싶은데 Promise 문법의 then, catch 함수를 사용해 만들고 싶습니다. 어떻게 코드를 짜면 될까요? (참고) 이미지 로딩이 끝났다는 것은 에 load라는 이벤트리스너를 붙여서 체크가 가능합니다. (참고) 이미지 로딩이 실패했다는 것은 에 error라는 이벤트리스너를 붙여서 체크가 가능합니다. id가 test인 가 로딩이 되었는지 / 로딩 실패했는지 판단하려면 이렇게 하면 됩니다. 별거아닙니다. 그럼 이걸 Promise를 이용해서 로딩성공시 .then() 실패시 .catch()를 실..

콜백함수 디자인패턴이 마음에 안드는 분들은 Promise 디자인패턴을 사용하시면 됩니다. 이건 자바스크립트의 새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐입니다. Promise 생김새 맛보기 이것이 끝입니다. new Promise()문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다. 그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 프로미스 안의 코드가 실행이 완료가 되었을 때 then()함수 내의 코드를 실행시켜줍니다. 코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜줍니다. (지금은 프로미스 안에 코드가 암것도 없지만요) 이런식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise입니다. Promi..

자바스크립트는 항상 동기식 처리 (synchronous) 동기식 처리가 뭐냐면 한번에 코드 한줄씩 차례차례 실행된다는 소리입니다. 자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데 거기서 코드를 한줄한줄 차례로 실행합니다. 그럼 하단 코드는 어떤 순서대로 출력될까요? 예상하신 대로 1,2,3이 차례로 출력됩니다. 왜냐면 자바스크립트는 한번에 코드 한줄씩 차례차례 실행하니까요. 이걸 전문용어로 동기적이다~ (synchronous) 라고 합니다. 그냥 거의 대부분의 프로그래밍 언어들은 이런 특징을 가지고 있습니다. 비동기처리 (asynchronous)라는 것도 가능합니다 특정 코드를 1초 후에 실행하고 싶으면 어떻게하죠? 일반적인 프로그래밍 언어에서 이런 코드를 작성하려면.......

자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습입니다. 다른 파일로 쪼개놓고 그걸 첨부해서 사용하는 방법을 알아보도록 합시다. ES6 import/export를 쓰시면 내가 원하는 변수, 함수, class만 다른 파일로 보낼 수 있습니다. 어떻게 하는지 알아봅시다. (참고) import 해온 변수, 함수는 사용은 가능하지만 수정은 불가능합니다. read-only 입니다. 파일 두개를 만들어 봅시다. 저는 index.html과 library.js를 만들어서 library.js 파일에 있는 내용을 index.html 이걸 쓰도록 합시다. 이것이 원조 import 문법 아니겠습니까. 혹은 모던 브라우저에선 이렇게 하면 import export 문법이 사용가능해지는데 대부분은 리액트 뷰 nodejs..

Array, Object 자료형에 있는 중요한 자료들을 변수로 꺼내고 싶으면 어떻게 합니까. 한두개면 모르겠는데 여러개의 자료를 뽑아서 변수 만들려면 코드가 매우 길어지겠죠? 그럴 때 destructuring 문법을 사용하면 변수를 쉽게 만들 수 있습니다. Array 안에 있는 데이터를 변수에 담는 방법 [2,3,4]라는 array가 있는데, 여기안에 있는 3개의 데이터들을 전부 밖으로 꺼내서 변수에 담고 싶으면 어떻게 합니까. 뭐 이런식 아닐까요? 근데 더 쉽게할 수 있는 방법이 있습니다. [2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해주시면 됩니다. 변수 이름은 아무렇게나 해주시면 되고요. 그럼 a,b,c 변수가 세개 생성되는데 각각 2,3,4라는 자료를 가집니다. array에서 데이터 끄집어..

1. 직접 class 구조 만들어보기 갑자기 강아지 SNS를 만들고 싶어서 자바스크립트로 열심히 코딩하던 중, 여러 강아지 정보들을 담은 유사한 오브젝트 자료형을 테스트삼아 몇개 만들려고 합니다. 이렇게 쭉 많이 만들고 싶은데 하드코딩하기 싫어서 class를 만들어 강아지 오브젝트들을 뽑고 싶습니다. 그럼 class를 어떻게 만드는게 좋을까요? 그럼 이제 Dog 이라는 class로 부터 새로운 강아지 오브젝트들을 쉽게 뽑아낼 수 있겠군요. 2. 이번엔 고양이관련 object들을 만들고 싶습니다. 이번엔 class를 이용해 고양이 오브젝트 여러개를 뽑고 싶습니다. type, color는 이전에 만든 강아지 object와 유사한데 고양이들만 특별하게 age라는 속성을 하나 더 추가하고 싶습니다. 어떻게 cl..

많은 분들이 왜 쓰는지 궁금해하는 자바스크립트 getter, setter 문법을 알아봅시다. 얕게 말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데 깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보시면 됩니다. 요즘 원본 데이터는 immutable 해야한다 이런말 들어보셨습니까. 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는게 대세를 이루고 있는데 거기에 합치되는 일종의 코딩 테크닉이라고 보시면 됩니다. 이걸 이해하려면 일단 object 데이터를 다루는 방법론에 대해 알아야합니다. 함수로 object 데이터를 꺼내는 방법 object 데이터를 하나 만들어봅시다. 그 다음에 여러분의 내년 나이를 출력해보고 싶으면 어떻게..

자바스크립트 객체지향 문법의 끝판왕인 extends를 배워보도록 합시다. 어렵진 않고 그냥 외울게 몇개 더 생기는 것일 뿐입니다. class를 상속한 class를 만들고 싶을 때 쓰는 extends 할아버지 class를 하나 만들었다고 칩시다. 할아버지 class는 성과 이름이라는 속성을 가지고 있습니다. 그럼 이제 new 할아버지() 뭐 이런식으로 하면 새로운 object를 쉽게 생성할 수 있겠죠? 그런데 이 class가 너무나도 유용한 나머지 이것과 유사한 class를 하나 더 만들고 싶습니다. 그러면 직접 class를 하나 더 만들어서 내용을 복붙하면 되겠죠? 하지만 class안에 복사할 내용이 너무나도 많으면 코드가 너무나도 길어집니다. 그래서 고대의 개발자들이 extends라는 문법을 만들었는데..

보호되어 있는 글입니다.

class 라는 문법이 있습니다. constructor, prototype 을 이용한 상속기능을 간지나게 만들 수 있게 도와주는 문법입니다. 기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현해줄 뿐입니다. 어떻게 하는지 자세히 알아봅시다. ES6 class 키워드로 구현하는 constructor 기계만들기 constructor 라는건 앞선 포스팅에서 했기 때문에 다들 아시죠? 오브젝트 뽑는 기계였습니다. ES6 class라는 신문법으로 constructor를 만드시려면 이렇게 따라치시면 됩니다. 끝입니다. 예전 function 부모(){} 어쩌구 이렇게 기계를 만드는 문법과 똑같은 문법입니다. 이제 new 키워드를 이용해서 방금 만든 부모라는 기계에서 오브젝트를 새..