개발자의 낙원

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 오브젝트를..

동기 노마드코더의 파이썬 챌린지를 하던 중, 입력받은 숫자를 계산하는 함수를 만들어야 했다. 나는 여기서 함수에 인자로 입력받은 숫자에 대한 타입체크를 수행하고 싶었다. 파이썬은 함수의 입력인자 및 출력 값의 데이터 타입을 확인하는 기능이 있다. 바로 타입힌트(type hint) 가 그것이다. 하지만 이것은 말 그대로 타입 힌트이지 타입체크가 아니다. 아무런 강제성이 없다. 허접한 영문장으로 구글에 파이썬 유니온타입 타입체크를 검색하자 (how to check union type in python?) 스택오버플로우에서는 "typing"이라는 라이브러리를 추천해 주었다. typing 라이브러리 주소 https://docs.python.org/3/library/typing.html typing.Union U..

Mdn문서 설명: getMonth() 메서드는 지역시간에 근거한 달력을 0-기반 값으로 반환합니다. (숫자 0은 그 해의 첫 달을 의미합니다.) *이글의 작성일자: 2023/03/14 getFullYear은 2023을 잘 반환한다. 다른 메서드 getDate도 오늘이 14일임을 정확히 알려준다. 그런데 getMonth만 시작 숫자가 0을 기반으로 설정되어 있어서 현재 달에 해당하는 숫자보다 1 낮춰서 반환한다. 즉, 2를 반환한다. 당장 콘솔창을 열어서 아래의 코드를 입력해보면 2023/2/14를 얻을 수 있다. const today =new Date(); today.getFullYear() today.getMonth() today.getDate() 비슷한 zero-base 메서드를 찾아보면 getDay..

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

스택 요약정리 부분 바로가기 파이썬 코드부분 바로가기 자료구조 Stack(스택)에 대한 이해 Stack(스택) motivation: 스택 공부 동기 스택은 데이터를 저장하는 자료구조입니다. 한 번에 하나의 정보를 입력하거나 출력할 수 있어요. 정보의 저장 및 제거는 항상 스택 성분의 마지막위치(최상단)에서 일어나요. 만약 스택을 직접 사용하지 않더라도 구조와 동작을 잘 알아두는 것이 좋습니다. 컴퓨터나 프로그램에서 함수의 실행에 대한 이해에 많은 도움이 되거든요. 대부분의 프로그래밍 언어에서 중첩된 함수를 구현할때, 스택 구조를 이용하고 있어요. 함수가 호출되면 콜 스택에 저장하고, 실행이 완료되면 다시 제거하는 방식입니다.. 이러한 스택의 크기는 정해져있어서, 일정 개수 이상의 함수를 중첩하면 스택이 ..

목차링크 1.시작: fetch가 뭐야? 2. XMLHttpRequest: 선배님들이 사용한 api통신 오브젝트 3.Promise & then : fetch의 밑바탕 +@ 영단어 resolve 4. Synchronous & Asynchronous:동기와 비동기, Promise의 개발이유 5. 결론: 영상속 코드 이해하기 들어가며.. 이 글은 특정 개발지식을 익히기에 적합한 글이 아닙니다. 문서에 쓰여있는 개념들을 읽으면서 실시간으로 내용을 써넣었기 때문에, 개념의 정돈보다는 흐름에 집중했습니다. 항상MDN 문서를 위키 탐독하듯이 돌아다니면서 공부를 합니다. 인상적인 개념 몇가지만 포스팅으로 남기는것이 늘 아쉬워 공부 과정 전체를 글로 남겼습니다. 시간 넉넉하고 심심하신분만 읽어보시길 바랍니다. 사실 쓰다가..

2000줄가까이 되던 글이 800줄로 변했다. 자동저장이 임시저장된 글을 훼손시켰다. 그냥 리액트공부나해야겠다

일반적으로 하나의 웹페이지를 개발할 때, html, css, 그리고 javascript 세 종류의 파일에 코드를 분리해서 저장한다. html 문서의 구조 사실 스타일을 지정하거나, 브라우저의 동작을 지정할 코드들도 html 문서 내부에 충분히 작성할 수 있다. 그렇다면 대체 왜 개발자들은 css파일과 javascript파일을 따로 분리해서 html 파일에 연결해 주는 방식을 택한 것일까? html 파일 하나에 모두 작성하지 않는 이유! 를 CSS와 javascript 를 통한 html 태그의 조작을 간단히 소개하면서 살펴보겠다. 기술적 이유: 사실은 이렇습니다. CSS (Cascading Style Sheets)? CSS는 HTML와 같은 웹페이지 구성요소의 스타일을 지정하는 언어이다. CSS코드를 HT..

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..