Hello world!

자바스크립트는 많은 유용한 빌트인 메서드들을 제공한다. MDN 사이트에 들어가서 검색하면 어렵지 않게 메서드에 대한 정보를 찾을 수 있지만, 자주 쓰는 메서드들은 되도록이면 외우는게 좋다. Array.prototype.indexOf 메서드는 Array.prototype의 메서드로, 배열 객체가 상속받아 자신의 메서드처럼 사용할 수 있다. (참고로 프로토타입은 자바스크립트에서 중요한 개념이므로 다음 포스팅에서 따로 다룰 예정이다...) Description 원본 배열에서 인수로 전달된 요소를 검색하여 첫번째 인덱스 반환, 없으면 -1 반환 const array = [2, 2, 9, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 Parameters indexOf(..

General ⇧⌘P Sh명령 팔레트 표시 ⌘, 사용자 설정 ⌘K ⌘S 단축키 설정 ⌃` 터미널 토글 ⇧⌘M Problems 패널 토글 ⌃⌘Space 기호 Basic Editing ⌘X 라인 잘라내기 ⌘C / ⌘V 라인 복사/붙여넣기 ⇧⌥↓ / ⇧⌥↑ 라인 아래/위 복사 ⌘Enter / ⇧⌘Enter 라인 위/아래 삽입 ⇧Tab / Tab 라인 내어쓰기/공백 ⌘[ / ⌘] 라인 내어쓰기/들여쓰기 ⌥⌘[ / ⌥⌘] 현재 토글 접기/펼치기 모든 토글 접기/펼치기 ⌘/ 라인 주석 ⇧⌥A 블럭 주석 Movement&selection ⌥← / ⌥→ 단어 단위로 왼/오 커서 이동 ⇧⌥← / ⇧⌥→ 단어 단위로 왼/오 커서 선택이동 ⌥↓ / ⌥↑ 라인 아래/위 이동 ⌘←(Home) / ⌘→(End) 라인 시작/끝으로..

Emmet 이란? Emmet은 "Expressive Meta-Markup Language"의 약자로, HTML 및 CSS 코드를 간결하게 작성하고 생성하기 위한 확장도구이다. Emmet을 사용하여 HTML 및 CSS를 빠르게 작성할 수 있다. 다양한 IDE에서 지원되며, Visual Studio Code에서는 1.26.0부터 내장되어 별도로 설치하지 않아도 된다. Emmet 구문 사용하기 바로 예시로 살펴보자. HTML 파일에서 다음과 같이 작성해볼 수 있다. // 기본 구문: 태그명 // div // p // span // 요소 복제하기 // li*3 // 요소 class 및 id 추가하기: '.', '#' // 참고로 태그명 생략할 경우, 디폴트로 가 생성됨 // div...

아래 용어들은 '모던 자바스크립트 deep dive' 책을 바탕으로 정리하였다. 저자가 말한 것과 같이 이 단어들은 자바스크립트에 국한되지 않으며 컴퓨터 공학 전반에서 사용하는 언어이다. 개발 공부를 하다보면 기본 용어에 대한 이해가 정립이 안되어 있다는 것을 느낄 때가 많았다. 궁극적으로 공식문서를 제대로 활용하고 명확한 커뮤니케이션을 하기 위해 조금씩 이곳에 정리하고자 한다. No. KR ENG Def. Desc. 1 값 value 표현식이 평가되어 생성된 결과 - 모든 값은 데이터 타입을 가지며, 메모리에 이진수의 나열로 저장된다. - 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. - 값을 생성하는 방법 중 하나로 리터럴이 있다. 2 변수 variable 하나의 값을 저장하기 위..

https://yozm.wishket.com/magazine/detail/1319/ 역사로 알아보는 CSS가 어려워진 이유: ①웹 문서에서 웹 애플리케이션으로 | 요즘IT CSS는 배우기 어렵지 않으며 CSS를 작성하는 것 역시 어렵지 않습니다. 하지만 CSS 개발을 하다 보면 'CSS를 이렇게 쓰는 게 맞는가?' 하는 의문이 들 때가 생깁니다. 처음 배울 때와 달리 점점 CSS yozm.wishket.com

디버깅(Debugging)이란? 디버깅(Debugging)은 코드에서 오류를 찾기 위해 코드의 실행/동작 과정을 분석하고 추적하는 것을 말한다. 디버깅(Debugging) 단계 VSCode에서 디버깅은 다음과 같은 단계로 진행된다. 1. 소스 코드에 중단점(Breakpoint) 설정 중단점은 코드 동작을 일시 정지시키는 지점을 의미합니다. 중단점은 코드 줄의 왼쪽 마진을 클릭(빨간색으로 표시)하거나, 해당 줄로 이동한 후 F9 키를 눌러 설정할 수 있다. 2. 디버깅 창으로 이동 왼쪽 사이드바에서 벌레 모양의 디버그 아이콘을 클릭하거나, Ctrl+Shift+D 단축키를 사용하여 디버깅 창으로 이동한다. 3. 디버그 세션 시작 & 스텝(Step) 진행 디버그 실행 버튼('Run and Debug')을 클릭..

그냥 외워 그냥!!! 딕셔너리 길이 len(딕셔너리) : 딕셔너리에 포함된 키-값 쌍의 개수를 반환 딕셔너리 찾기 딕셔너리['key'] : 키에 해당하는 벨류 반환, 키가 존재하지 않을 경우 KeyError (따라서 예외 처리를 하지 않으면 종료 처리가 됨) 딕셔너리.get('key') : 키에 해당하는 벨류 반환, 키가 존재하지 않을 경우 None 반환 (이때 None은 디폴트 값으로 두 번째 인자로 줘서 재설정 가능) * 참고) request.POST['key'] vs request.POST.get('key') 'key' in 딕셔너리 : 해당 키가 딕셔너리에 있는지 확인, True 또는 False 반환 딕셔너리.keys() : 딕셔너리의 모든 키를 리스트로 반환 딕셔너리.values() : 딕셔너리..

''' https://school.programmers.co.kr/learn/courses/30/lessons/64061 크레인 인형뽑기 게임 문제 설명 해당 코드는 인형뽑기 게임에서 인형을 뽑는 과정을 시뮬레이션하고, 제거된 인형의 개수를 반환 제한사항 board 배열은 2차원 배열로 크기는 "5 x 5" 이상 "30 x 30" 이하입니다. board의 각 칸에는 0 이상 100 이하인 정수가 담겨있습니다. 0은 빈 칸을 나타냅니다. 1 ~ 100의 각 숫자는 각기 다른 인형의 모양을 의미하며 같은 숫자는 같은 모양의 인형을 나타냅니다. moves 배열의 크기는 1 이상 1,000 이하입니다. moves 배열 각 원소들의 값은 1 이상이며 board 배열의 가로 크기 이하인 자연수입니다. ''' # 풀..

패키지, 앱, 모듈? 그게 뭔데? 패키지, 앱, 모듈은 모두 프로그래밍에서 코드를 구조화하는 방식이다. 패키지(Package) : 여러 모듈을 모아 놓은 디렉토리. 관련된 모듈들을 그룹핑해서 보다 체계적으로 관리할 수 있으며, 패키지는 하위 패키지를 포함할 수도 있다. 앱(Application) : 일반적으로 기능별로 분리되어 있는 작은 단위의 독립적인 모듈이다. 앱은 패키지와 유사한 구조를 가지고 있다. 모듈(Module) : 코드가 들어 있는 파일. 모듈은 변수, 함수, 클래스 등을 정의할 수 있으며, 다른 모듈에서 import해서 사용할 수 있다. 패키지, 앱, 모듈로 코드를 구조화하면 관리와 유지보수가 편리하고 코드의 재사용성도 높아진다. Django의 패키지(Package) & 앱(App) 패키..

이 메서드들은 무조건 암기할 것!! 문자열 길이 len(문자열) : 문자열 길이를 반환 문자열 세기/찾기 문자열.count("문자") : 문자열 내에서 특정 문자가 몇 개 있는지 세는 메서드 문자열.find("문자열") : 문자열 내에서 특정 문자열이 처음 나오는 위치(인덱스)를 찾아주는 세는 메서드, 없을 경우 -1 반환(따라서 -1이 나올 경우 어떤 로직을 실행하라고 처리 가능) 문자열.index("문자열") : 문자열 내에서 특정 문자열이 처음 나오는 위치(인덱스)를 찾아주는 세는 메서드, 없을 경우 ValueError 반환(따라서 Try, Except로 처리 가능) 문자열 합치기/쪼개기 "문자열".join(문자열 리스트) : 특정 문자열로 리스트 문자열들을 합치는 메서드, 문자열을 반환 (특정 문..