'💻 Programming' 카테고리의 글 목록

[클린 코드 Clean Code] 1장 깨끗한 코드

2024.01.14

Clean Code 클린 코드 애자일 소프트웨어 장인 정신 - Robert C. Martin 0장 들어가면서 깨끗한 코드를 작성하는 방법은 배우기 어렵다 단순히 원칙과 패턴을 안다고 깨끗한 코드가 나오지 않는다. 잘 그린 그림과 그렇지 않은 그림을 구분할 줄 안다고 해서 그림을 잘 그릴 수 있는 게 아니듯이 스스로 연습하고 실패도 해보며 고생을 해야 한다. 1장 깨끗한 코드 코드가 존재하리라 코드는 더 이상 문제가 아니고, 모델이나 요구사항에 집중해야 한다고 생각하는 사람도 있을 것이다. 코드를 자동으로 생성하는 시대가 다가오면 프로그래머는 필요가 없게 될 것이다. 챗GPT? 코드가 사라질 가망은 전혀 없다. 왜? 코드는 요구사항을 상세히 표현하는 수단이기 때문 기계가 실행할 정도로 상세하게 요구사항을 ..

💻 Programming/JS, TS

[JavaScript] 자바스크립트로 css 스타일 변경하기

2024.01.13

DOM 요소의 스타일 변경 1) className Product Name 60/60 Submit input.warning { background-color: rgb(248, 191, 145); } #remaining-chars.warning { color:rgb(211, 109, 26); } const spanElement = document.getElementById('remaining-chars'); spanElement.className = 'warning'; element.className('some-class')로 해당 요소에 클래스명을 추가할 수 있다. className으로 css 클래스 추가할 때의 단점 : 이미 클래스를 가지고 있는 요소의 경우, 해당 클래스가 새로운 클래스로 덮어씌어진다...

💻 Programming/JS, TS

[JavaScript] 이벤트 객체

2024.01.13

Event 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다. 웹의 경우 이벤트는 브라우저 윈도우 내에서 발생되는데, 다음와 같은 다양한 이벤트 타입들이 있다. 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둔다(hover). 유저가 키보드에서 키를 선택한다. 유저가 브라우저 창의 크기를 재조정하거나 닫는다. 웹 페이지가 로딩을 완료했다. 양식(form)이 제출되었다. 비디오가 재생되거나, 멈추거나, 혹은 끝났다. 오류가 발생했다. 이벤트리스너의 콜백함수 let paragraphElement = document.body.firstElementChild; function changeParag..

💻 Programming/JS, TS

[JavaScript] window&document 전역객체와 DOM

2024.01.11

전역 window & document 객체 Built-in Variables & Functions 전역 변수로 코드 내에서 항상 사용할 수 있는 변수 window 객체 전역 객체 window 전역 객체는 웹 브라우저 환경에서 전역으로 사용 가능한 객체를 나타낸다. 모든 전역 변수와 함수는 실제로 이 window 객체의 프로퍼티로 존재한다. window 객체의 프로퍼티와 메서드. 함수 기호 f가 표시된 것이 메서드이고 그렇지 않은 것은 프로퍼티이다. window 객체에 내장된 프로퍼티와 메서드들은 window. 없이도 액세스할 수 있다. alert 메서드의 경우 window.alert()로도 사용할 수 있지만 그냥 alert()으로도 실행할 수 있는 것처럼 말이다. 윈도우와 브라우저 탭 윈도우는 웹 브라우..

💻 Programming/HTML, CSS

[CSS] 변환과 전환 (Transformations & Transitions)

2024.01.10

1. 변환 Transformations 요소의 모양을 이동하거나 변경하는 것 (ex. hover) 변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } 변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card..

💻 Programming/HTML, CSS

[CSS] html, :root, * 선택자

2024.01.10

1. html 하는 css 규칙은 html에 적용되고 html 안에 포함된 요소들에도 상속된다. 아래의 css 변수 예제에서 사용했던 논리 html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-300: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1: 18px; --size-5: 50px; background-color: var(--color-grey-100); } 2. :root 가상 ..

💻 Programming/HTML, CSS

[CSS] em, rem, %

2024.01.09

1. 폰트 크기에서의 em, rem, % 1) px 장점: Easy to understand & translateable 단점: Limited user focus & not scalable 2) em vs. rem (1) em (element) Size is relative to font-size 다른 요소의 폰트 크기와 연관된 크기 - 폰트 크기는 부모 요소의 크기에 달려있다. 단점 %와 마찬가지로 부모 요소에서 상속받는 크기에 따라 사이즈가 달라지기 때문에 관리가 어렵다. (2) rem (root em) Size is relative to root element’s font size 현재 요소의 폰트 크기와 최상위 요소의 폰트 크기와 연결되어 있다. HTML에서 최상위 요소: 최상위 요소에 폰트 크기..

💻 Programming/기타

VS Code 작은 따옴표, 큰 따옴표 설정하기

2024.01.07

VS Code에서 코드 작성할 때 나는 주로 큰 따옴표(Double quote)를 사용하는 것을 선호하는데, 자꾸 자동으로 작은 따옴표(Single quote)가 사용되어서 설정을 찾아보던 중에 발견했다. 나중에 팀 컨벤션이 작은 따옴표인 경우도 있을 수 있기 때문에, 상황에 맞게 설정을 변경할 때 유용할 것 같아 블로그에 남기는 게 좋을 것 같다고 생각했다. 먼저 code - 기본 설정 - Settings 또는 단축키 Command + , 를 눌러서 Settings에 들어간다. 여기서 다음 네 가지를 상황에 맞게 설정해준다. 1. 기본 설정을 큰 따옴표(Double quote)로 설정 시 JavaScript > Preferences: Quote Style ➡️ double TypeScript > Pre..

💻 Programming/기타

ROM, RAM, SSD, HDD (feat. 프로젝트 헤일메리)

2024.01.05

요즘 프로젝트 헤일메리라는 책을 재밌게 읽는 중인데, 주인공이 우주선에서 터치스크린 컴퓨터(아마 태블릿PC가 아닐까 한다.)를 발견하는 장면에서 다음과 같은 내용이 나온다. "'의회 도서관'이라는 이름이 붙은 폴더가 하나 있는데, 거기에는 미국에서 저작권을 인정받은 모든 전자 카탈로그가 통째로 들어 있는 듯 하다. ...(중략)... SSD는 무게가 가벼우니, 정보를 실을 때 굳이 인색해질 필요는 없다고 생각한 모양이다. 아니, 자료를 그냥 롬(ROM)에 구워버린걸 수도 있다." 이 부분을 읽으면서 SSD와 ROM이 뭐였더라? SSD는 비교적 익숙하지만 ROM은 들어만 봤지 무엇이었는지 정확히 기억이 나지 않아서 찾아보았다. 1. ROM ROM은 Read-Only Memory의 약자로 읽기 전용 메모리를..

💻 Programming/Algorithm

[프로그래머스 Lv. 0] 구슬을 나누는 경우의 수

2023.08.19

프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 구슬을 나누는 경우의 수 1) ❓ 문제 설명 머쓱이는 구슬을 친구들에게 나누어주려고 합니다. 구슬은 모두 다르게 생겼습니다. 머쓱이가 갖고 있는 구슬의 개수 balls와 친구들에게 나누어 줄 구슬 개수 share이 매개변수로 주어질 때, balls개의 구슬 중 share개의 구슬을 고르는 가능한 모든 경우의 수를 return 하는 solution 함수를 완성해주세요. 2) 🚫 제한 사항 1 ≤ balls ≤ 30 1 ≤ share ≤ 30 구슬을 고르는 순서는 고려하지 않습니다. share ≤ balls 3) ✅ 입출력 예 balls share result 3 2 3 5 3 10 입출력 예 #1 서로 다른 구슬 3개 중 ..

티스토리툴바