Jaddong's Lab

프롤로그 벨로그를 만든 지 얼마 안되서 '트렌딩'과 '최신'메뉴를 둘러보다가,,,, 어떤 분이 친구에게 생일 선물이 웹사이트를 선물한 걸 포스팅한 걸 보았다.(⊙o⊙) 너무 좋은 아이디어라고 생각이 들었고, 한 번 나도 해보기로 했다....! 근데 지인보다는 내가 좋아하는 연예인?가수?의 생일 팬페이지 면 좋을 것 같다는 생각이 들어서 개발에 돌입했다. 계획 디자인 우선 디자인부터 해야하는데,,,, 넘나 막막한거다ㅠㅠ 그런데 안그래도 요즘 자바스크립트로 만드는 다이나믹한 인터렉션에 관심이 생겨(사실 예전부터 있었음 ㅎ.ㅎ) 수강신청해놨던 '1분코딩'강의를 들으면서 만들어보기로 했다. 메뉴구성 Home : 말 그대로 인덱스 페이지로 휘황찬란한 인터렉션을 넣어보는 거 목표로 했다. Letter : 친구의 아..

document.querySelectorAll() 사용하여 반환하는 NodeList객체를 for문으로 각각 요소에 이벤트 리스너를 추가합니다. const buttons = document.querySelectorAll(".button") for (const button of buttons) { button.addEventListener('click', function(event) { //... }) }

1. Two Sum Easy Description Given an array of integers, return indices of the two numbers such that they add up to a specific target. 주어진 정수의 배열에서 두 숫자의 합산이 특정 목표 값인 두 숫자의 인덱스를 반환하세요. You may assume that each input would have exactly one solution, and you may not use the same element twice. 각 입력에 하나의 솔루션이 있다고 가정하고, 같은 요소를 두 번 사용할 수 없습니다. Example: Given nums = [2, 7, 11, 15], target = 9, Because ..

문 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 이때, 서로 다른 문은 세미콜론으로 구분합니다. alert('Hello'); alert('World'); 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적이다. alert('Hello'); alert('World'); 세미콜론 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있고 이런 방식을 '암시적'세미콜론 또는 세미콜론 자동 삽입(automatic semicolon insertion)이라 한다. alert('Hello') alert('World') 아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우가 있다. 이는 '불완전한 표현식’이므..

‘script’ 태그 자바스크립트는 HTML 문서 어느 곳에나 삽입할 수 있다. 브라우저는 이 자바스크립트 태그를 만나면 안의 코드를 자동으로 처리한다. 예시: 스크립트 전 스크립트 후 모던 마크업 자바스크립트 태그엔 몇 가지 속성(attribute)이 있습니다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있습니다.1. type 속성:HTML4에선 스크립트에 type을 명시하는 것이 필수였으나 지금은 타입 명시가 필수가 아니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다.2. language 속성:이 속성은 현재 사용하고 있는 스크립트 언어를 나타내지만 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색되어 더이상 사용할 필요가 없어졌다.3. 스크립트 ..

브라우저엔 '개발자 도구’라는 것이 내장되어 있고 이 도구를 이용하면 에러를 확인할 수 있다. 대부분의 개발자는 개발자 도구때문에 Chrome이나 Firefox를 이용해 개발하는 걸 선호한다. 개발자 도구에서 지원하는 기능을 잘 활용하면 개발 효율이 상당히 올릴 수 있다. Chrome F12 또는 Mac 사용자라면 Cmd+Opt+J를 누르면 개발자 도구가 뜬다. 예로 위와 같이 빨간색 에러 메시지가 보이는 경우 'lalala’가 정의되지 않았다(not defined)라는 메시지이고, 에러 메시지 우측에 링크 bug.html:12 는 해당 에러가 발생한 파일에서 12줄에 에러가 발생함을 나타낸다. 에러 메시지 아래에 파란색 기호 >가 있는데, 이를 '커맨드 라인(command line)'이라 부르고 커맨드..

코드 에디터는 크게 통합 개발 환경(IDE)과 경량 에디터로 나뉘는데, 많은 개발자가 둘 중 하나를 택해 작업한다. 통합 개발 환경 통합 개발 환경 (Integrated Development Environment, IDE)는 '프로젝트 전체’를 관장하는 다양한 기능을 제공하고 '개발 환경’을 쾌적하게 해주는 통합 환경을 제공합니다. IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 파일 간의 탐색 작업이 수월해진다. 전체 프로젝트에 기반한 자동 완성 기능도 사용할 수 있고 git과 같은 버전 관리 시스템, 테스팅 환경 등, '프로젝트 수준’의 작업도 IDE에서 할 수 있다. Visual Studio Code (크로스 플랫폼, 무료) WebStorm (크로스 플랫폼, 유료) 경량 에디터 '경량 ..

명세서 ECMA-262 명세서(specification)는 자바스크립트와 관련된 가장 심도 있고 신뢰할만한 정보를 담고 있는 공식 문서로 자바스크립트라는 언어를 정의한다. 하지만 일상적인 참고자료로는 적합하지 않다. ECMA-262명세서는 새로운 버전이 매년 나오고 공식 버전이 나오기 이전의 최신 초안은 https://tc39.es/ecma262/ 에서 확인할 수 있다. 갓 명세서에 등록된 기능이나 '등록되기 바로 직전’에 있는 기능(스테이지(stage)3 상태의 기능), 제안 목록은 https://github.com/tc39/proposals 에서 확인할 수 있다. 매뉴얼 Mozilla 재단이 운영하는 MDN JavaScript Reference(https://developer.mozilla.org/e..

정의 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언이이다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다. 자바와 아무런 연관이 없다. 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작한다. 브라우저엔 '자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있다. Chrome, Opera : V8 Firefox : SpiderMonkey IE : Trident, Chakra(버전에 따라) Microsoft Edg : ChakraCore Safari : SquirrelFis..

현생이 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 시작이 반이다.... 그래.... 현생에 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 거의 다른 글 복붙 수준인뎈ㅋㅋㅋ 그래도 곱씹어 읽어보게 되니 그걸로 만족한다. 시작이 반이다.... 그래.... 1. ..