개발자의 낙원

버그 발생 정보 "scripts": { "build": "npm run build:server && npm run build:assets" } npm run build를 터미널에 입력하자 아래의 오류 메시지가 출력되었다. node:internal/crypto/hash:71 this [kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash.... 파일경로 중략 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital en..

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..

프로그래밍 언어는 기계가 아닌 사람을 위해 쓰였다. 컴퓨터는 코드를 실행하고, 사람은 코드를 읽는다. 누가 했는지는 잘 모르지만, 유명한 말이 있다. 프로그램은 읽을 수 있게 작성되어야 한다. 실행은 부차적인 일이다. 뭣도 모르고 프로그래밍을 처음 시작했을 땐, 구현이 전부라고 생각했었지만 개인프로젝트를 하면서 이제 정말 저 말이 깊게 와닿는 거 같다. 기나긴 로직을 구현한다면 오류하나 없는 복잡한 코드보다 오류가 있는 읽기 쉬운 코드가 좋다. 코드가 읽기 쉽다면 버그가 발생해도 금방 찾을 수 있다. 유지보수가 쉬운 스타일과 (객체지향 SOLID라던가), 읽기 쉬운 스타일은 같은 개념은 아니다. 하지만 읽기 쉽다면 유지보수 역시 쉽다. 다음 코드는 내가 처음 짠 코드이다. # 이름의 길이를 계산해주는 프..

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..

미리 보는 결론: 만약 사용하는 패키지 오브젝트의 메서드나 속성이 해당 공식 문서에 없다면, 그 오브젝트를 정의할 때 상속받은 오브젝트가 존재하나 확인하고 관련 문서를 찾아봅시다. on.. 어디서 온 녀석이지? 노마드코더의 zoom 무료 클론코딩 강의를 수강하던 중이었다. 이 강좌에선 메시지를 주고받기 위해 ws라는 패키지를 이용해 웹소켓 서버를 구축한다. 웹소켓 서버는 on 이벤트리스너를 통해 유저의 접속을 감지한다. 나는 이on에대해 조금 더 자세히 알고 싶었다. 메서드의 반환값이나 감지할 수 있는 이벤트종류등등을 이해한다면 더 다양한 기능을 구현할 수 있기 때문이다. chat gpt에게 webSocket의 on에 대한 질의를 작성하였으나, 서버문제로 먹통이었다. 그래서 웹소켓 서버와 관련된 인터넷 ..