개발자의 낙원

HTML 삽입 미리보기할 수 없는 소스 label(라벨 = 레이블) 태그의 기능 HTML의 label 태그는 이름 그대로 라벨 역할을 합니다. 폼(form) 내부에서 해당 폼의 조작을 담당하는 태그의 이름표로 쓰입니다다. 예시코드) 타겟에대한 정보 *for 속성에 라벨링 할 태그의 id를 집어넣습니다. label 태그를 사용하는 이유 1. self-closing 태그의 용도를 분명하게 보여줍니다. 위의 input 태그는 셀프-클로징(self-closing) 태그입니다. 셀프-클로징 태그는 다른 HTML 태그와 다르게, 내부에 다른 태그를 넣거나, 텍스트를 삽입할(innerText) 공간이 존재하지 않습니다. 바로여기가 innerHTML, innerText 그래서 해당 태그는 그 자신에 대한 정보를 제공하..

구조분해 할당: destructuring assignment? 오브젝트의 속성값으로 여러 변수를 초기화 할 때 해당 객체의 구조를 보여주면서, 변수들을 한 번에 선언하는 문법이다. 말로 하면 이해가 안간다. 바로 코드를 보자. const { sockets: { adapter: { sids, rooms}, }, } = wsServer; 위의 코드는 wsServer 객체의 속성인 sockets, 그리고 그 객체의 속성인 adapter의 성분을 sids, rooms 두 변수에 저장하고있다. 아래의 코드와 정확히 같은 기능을 한다. const sids = wsServer.sockets.adapter.sids; const rooms = wsServer.sockets.adapter.rooms; bing gpt에 따..

동기: 나는 자바 -> 파이썬-> 자바스크립트 순서로 언어를 배웠다. 코딩테스트 연습은 파이썬으로 하고 웹개발은 자바스크립트로 진행하다 보니 두 언어의 for in구문이 다른 의미를 가지고 있다는 것을 인지하지 못했다. 또 자바스크립트의 for in과 같은 기능을 하는 구문은 파이썬에 없다. 헷갈리기도 하고 신기하기도 해서 글을 포스팅하기로 했다. 두 언어 간 for 구문비교 파이썬의 for in은 반복자의 성분을 차례대로 실행문에 전달한다. 즉 자바스크립트의 for of와 같은 기능을 한다. 자바스크립트의 for in은 오브젝트의 키 값을 문자열로 차례대로 반환한다. 이런 기능을 하는 함수는 파이썬에 없다. 파이썬의 for in과 자바스크립트의 for of: 반복자 iterable의 성분을 순서대로 가..

false로 평가되는 값 바로 보기 동기: if와 while 조건문을 유연하게 작성하고자, 조건식이 false로 판단되는 값들을 정리하였습니다. *false가 아닌 값들은 전부 true로 판별됩니다. 조건문의 괄호 안에는 부울리언(boolean)타입이 아닌 여러가지 타입의 데이터가 입력될 수 있습니다. if (바로여기) {} while( 여기){} 그러한 데이터들은 모두 true, 혹은 false로 평가됩니다. 예시 truthy "hello" 나 1은 각각 문자열(string)과 숫자(number) 타입을 갖습니다. 하지만 이 값들이 들어간 조건식은 true로 평가됩니다. 이러한 값들을 truthy 라고 합니다 falsy undefined나 null 은 실제로 false가 아니지만, 조건식에선 false..

html 요소는 다음과 같은 css 코드를 통해 인라인 (inline)과 블록(block) 요소의 성질을 모두 갖게 설정할 수 있다. display: inline-block; 이렇게 지정된 인라인블록은 기존의 인라인처럼 다른 것들과 수평적으로 나란히 배치할 수 있다. 또 블록처럼 너비와 관련된 속성값을 설정할 수도 있다.(margin, height, width) block: 수평선을 혼자 차지하는 HTML태그 ex) , , ... , .. 등 inline: 수평선에 다른 요소가 같이 위치할 수 있는 HTML 태그 ex) , , , .. 등 블록을 인라인블록으로 바꿔보자 div 태그는 같은 수평선 안에 다른 html 요소가 올 수 없는 대표적인 block 태그이다. html코드 .baby { margin:..

enumerate? 뜻: 하나하나 세다 파이썬 함수: 순회 가능한 객체를 입력받고 enumerate 오브젝트를 반환하는 함수 *다시 말하자면 string, list, tuple 등 [0]과 같은 인덱스로 접근가능한 자료구조를 인자로 받아들인다. 그리고 마찬가지로 비슷한 구조를 가진 enumerate 라는 객체를 반환한다. enumerate오브젝트? loop문으로 순회가 가능한 객체이다. 입력받은 인자의 인덱스 번호 및 성분을 함께 담고 있는 튜플을 원소로 갖는다. example = [x,y,z] enumerate(example) 이 반환하는 객체는 다음과 같은 값들을 갖는다. (0,x),(1,y),(2,z) 성분을 보고 싶다면 list()를 통해 리스트로 변화시키면 된다. * tuple()도 가능하나 s..

package.json Node.js환경으로 자바스크립트 프로그래밍을 할 때, 개발 프로젝트의 메타적인 정보가 저장되는 파일이다. *이름, 사용된 패키지 버전정보 등 어디에 쓰이는가? 파악: package.json의 정보를 살펴봄으로써 프로젝트사용된 기술스택의 종류와 버전을 알 수 있다. 관리: 또 작성되어 있는 값들은 터미널의 여러 명령어에 연동되므로 패키지설치 및 관리, 테스트 케이스 실행 등 전체 프로젝트를 손쉽게 관리하는 데에 쓰인다. package.json 생성하기 보통은 개발사작과정에서 다음 명령어를 터미널에 입력하여 프로젝트 초기화를 진행할 때 자동으로 생성된다. npm init 생성된 package.json { "name": "test", : 패키지를 npm에 퍼블리싱할 이름 "versio..

Select(셀렉트) 태그 개념 이름 그대로 선택목록을 만드는 태그이다. 아래의 드롭다운 리스트가 브라우저가 표현한 셀렉트 태그의 모습이다. HTML 삽입 미리보기할 수 없는 소스 셀렉트 태그는 자신의 내부에 여러 개의 옵션(option) 태그를 포함하는 형식으로 작성한다. ul, ol 태그가 li 태그를 포함하는 것과 같은 구성이다. 위에서 본 드롭다운 리스트의 HTML 코드는 다음과 같다. JavaScript TypeScript HTML 주요 속성 (Attribute)들 disabled: 옵션목록을 비활성화시킨다. 목록을 유저가 보거나 고를 수 없다. 비활성화된 모습 HTML 삽입 미리보기할 수 없는 소스 form: 이 드롭다운 리스트를 연결할 폼을 지정해 주는 속성 폼의 아이디를 적어넣어주면된다. ..

이 글은 먼저 자바스크립트 코드를 통해 글의 동기를 서술하고, 밑부분에 새로고침이 발생하는 이유를 보여주는 구성을 가지고 있습니다. 이유바로 보기 Form(폼) 태그를 다루는 자바스크립트 코드 밑의 코드는 자바스크립트를 통해 폼의 이벤트를 감지하는 예제의 템플릿이다 코드의 구성은 다음과 같다. 1. 변수: DOM document 오브젝트의 메서드를 통해 폼 태그가 저장되어 있다. 2. 콜백함수: "submit"이벤트가 폼태그에서 발생했을 때 호출된다 3. 이벤트리스너: 1번의 변수에 저장한 폼의 "submit" 이벤트를 감지하는 비동기함수이다. const myForm = document.querySelecotr("form") /**Event Listener는 콜백함수의 첫 인자로 * event 오브젝트를..

큐 요약정리부분 바로가기 파이썬 코드부분 바로가기 자료구조 Queue(큐)에 대한 이해 Queue motivation 큐를 배워야 하는 이유 큐는 한번에 하나의 정보를 입력하거나 출력할 수 있는 자료구조에요. 저장할때에는 제일 뒷부분에 저장하고, 출력할때에는 맨 앞의 정보를 출력해요. 큐의 구조와 동작을 이해하면 컴퓨터 및 프로그래밍 언어의 실행구조에 관한 이해에도 도움이 되어요. 자바스크립트는 비동기(Asynchronous) 함수를 실행하면, 그 함수의 종료를 알리는 콜백을 테스크 큐라는곳에 저장한답니다. 거기에서 태스크(작업)들은 자신의 차례를 기다리게 됩니다. 이벤트 루프가 콜백이 저장된 큐를 확인하고, 콜스택의 작업이 비어있으면 콜백함수를 콜스택으로 옮겨서 실행하게 하지요. 또 컴퓨터 프로세스의 ..