전체 글 105

타인을 위로할때, 다른사람을 낮출 필요는 없다.

최근에 만난 보석 같은 사람덕에 안 좋은 습관을 발견하고 버리게 되었다. 잊어먹지 않기 위해 여기에 기록을 작성한다. 나는 별로 친하지 않은 사람에게 "다른 사람들은 별로고 당신은 좋은 사람이에요." 라는 뉘앙스로 이야기를 하는 습관이 있었다. A와 B가 있으면 A에게는 B가 별로라고 말하고, 당신은 좋은 사람이라고 말한다. B에게도 마찬가지로 A를 디스하고 B를 치켜세워준다. 나는 왜 이런 식으로 말을 할까? 내가 내린 가설은 두 가지이다. 1. 청자의 기분을 좋게 하기 위해 2. 나만 그룹에서 좋은 사람으로 보이고 싶어서 다행히도 정답은 1번인 것 같다. 내가 좋은 사람으로 보이는 데에도 관심이 없다. 나는 타인의 단점을 앞에서 지적하는데 거리낌이 없고, 가끔은 스스로를 비난하여 남들이 놀라는 경우도..

230403/ 스터디 1일차 회고: 인강을 듣는방법 및 HTML 기초

10주간 강의를 들으며 코딩을 하게 되었습니다. 첫날인 오늘은 강의를 어떻게 들을지 전략을 세우는데 집중했습니다. 인강 듣기 전략 노마드코더의 니콜라스 선생님, 잘 가르치십니다. 하지만 인강을 가만히 듣다 보면 무슨 내용을 말하고 있는지 모를 때가 많습니다. 그래서 선생님의 패턴을 파악해서 강의의 목차를 생각하며 듣기로 했습니다. 제가 파악한 강의 패턴은 다음과 같습니다. 1. 엄격한 정의 소개 후 해당 정의 디스 - 사전적 정의를 보여준 후 비웃는다. 이 과정은 생략되기도 한다. 2. 비유를 활용한 심상모델 제시 - 이해하기 쉬운 개념모델을 제시한다. 3. 실제 예제 코드 제시 - 실제 코드로 형태 및 동작을 보여준다. 4. 이전에 소개한 개념과의 비교 - 좀 전에 배운 개념과 현재 공부 중인 개념의 ..

error:0308010C// webpack과 nodejs의 호환문제 / 자바스크립트 멜론 클론코딩

버그 발생 정보 "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..

<label>태그, 왜쓸까?: form 컨트롤 요소에 이름 붙이기

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문은 다르다. //for in, for of, for in keys()..

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

if, while 조건문을 사용할 때 false로 평가되는 값들 : falsy 값 정리

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 반응형 웹디자인: inline-block 대신 flex를 사용하자.

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

enumerate(이뉴머레이트) 함수: 배열의 인덱스와 값에 함께 접근해보자/ 파이썬

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