jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 기본 문법 jQuery는 HTML 요소를 선택 하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다. 기본 문법 : $(selector).action() jQuery 정의/액세스를 위한 $ 기호 (selector)..
BEM(Block, Element, Modifier)이란? BEM (Block, Element, Modifier)은 CSS 코드를 구조화하고 조직화하는 방법론이다. 코드의 유지 보수성, 가독성 및 확장성을 향상시키기 위해 명명 규칙 및 CSS 아키텍처에 대한 모듈식 접근 방식을 제공한다. BEM은 러시아 검색 엔진 회사인 Yandex가 소개했으며, 웹 개발자들 사이에서 인기를 얻었다. Yandex Finds everything yandex.com BEM 방법론은 세 가지 핵심 구성 요소로 구성된다. 블록(Block) 블록은 독립적이고 재사용 가능하며 논리적으로 독립된 개체로, 사용자 인터페이스(UI)의 의미 있는 부분을 나타낸다. 블록의 예로는 헤더, 푸터, 버튼, 내비게이션 메뉴가 있다. BEM에서 블..
외부 Diff 도구 Visual Studio Code로 설정하기 소스트리에서 제공하는 Diff의 GUI는 가독성이 너무 떨어진다. 그래서 Visual Studio Code로 연동하는 법을 찾아봤다. 설정하는 법은 굉장히 간단하다. MacOS 기준으로 아래와 같이 적용하면 된다. Command + , 혹은 메뉴 - 설정으로 진입한다. 비교 탭으로 들어가면 외부 비교/병합 - 시각적 비교 도구가 파일병합으로 되어있을 것이다. 파일병합을 맞춤설정으로 변경한 후 Diff 명령어와 변수를 아래와 같이 기입한다. Diff 명령어 : /usr/local/bin/code 변수 : --diff --wait $LOCAL $REMOTE 설정은 끝났다. Visual Studio Code로 비교하는 법은 두가지다. 비교를 원하..
문제 설명 코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다. 컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을..
permission denied writing to file 에러 Vue 프로젝트를 생성하고 파일을 수정한 후 저장하려는데 파일에 쓰기 권한이 거부되었다는 에러를 마주했다. 해결 방법은 간단했다. 해당 폴더에 777 권한을 부여하는 것이다. 터미널에서 파일 권한을 변경하기 위해 사용하는 명령어는 chmod다. chmod 777은 모든 사람이 파일을 읽고, 쓰고, 실행할 수 있도록 만드는 것을 의미한다. sudo chmod -R 777 sudo 명령어이기 때문에 실행하면 시스템 암호를 입력하라는 메시지가 표시된다. 프로필 계정 암호를 입력하면 된다. Reference Mac VS code error — permission denied writing to file Give the folder 777 perm..
문제 설명 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 ..
Chat GPT한테 코드리뷰 시켰습니다.. (feat. Github Action) Github Action을 이용해서 Chat GPT한테 코드 리뷰를 시켜보자! velog.io 위 글을 보고 진행했다. OpenAI API Key OpenAI API Key OPENAI API에서 로그인하고 설정에서 API Key 를 생성하자. secret key를 깃허브 리파지토리에 등록해야 하니 복사한다. OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com OPEN AI API는 무료가 아니다. Github action secret 코드리뷰를 시킬 리파지토리나 조직의 설정에 들어가서 Secrets and variable..
Prototype(프로토타입) JavaScript에서 프로토타입은 다른 객체를 만들기 위한 청사진 역할을 하는 객체다. 이는 JavaScript 객체 지향 프로그래밍의 필수 부분으로, 프로토타입에서 속성과 메소드를 상속하는 객체를 생성할 수 있다. 이 상속 메커니즘을 프로토타입 상속이라고 한다. 프로토타입 객체는 두 가지 기본 용도로 사용된다. 상속: 객체는 프로토타입에서 속성과 메소드를 상속할 수 있다. 코드 재사용성: 프로토타입을 사용하여 공유 속성 및 메소드를 정의하여 코드 중복을 줄일 수 있다. 이 개념을 이해하기 위해 생성자 함수와 프로토타입을 사용하여 간단한 예제를 만들어보자. // Car 객체를 생성하기 위한 생성자 함수 function Car(make, model, year) { this...
6004번 버스의 평일/토요일/일요일의 기점 출발 데이터를 쌓아놓은 것을 바탕으로 테이블 UI를 구성했다. const result = departures?.reduce( (acc, dep) => { const dayOfWeek = dep.departure.slice(0, 3); switch (dayOfWeek) { case 'Sun': acc.sundays.push(dep.departure); break; case 'Sat': acc.saturdays.push(dep.departure); break; default: acc.weekdays.push(dep.departure); break; } return acc; }, { weekdays: [], saturdays: [], sundays: [] }, );..
문제 설명 과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다. 한 상자에 사과를 m개씩 담아 포장합니다. 상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다. 과일 장수가 가능한 많은 사과를 팔았을 때, 얻을 수 있는 최대 이익을 계산하고자 합니다.(사과는 상자 단위로만 판매하며, 남는 사과는 버립니다) 예를 들어, k = 3, m = 4, 사과 7개의 점수가 [1, 2, 3, 1, 2, 3, 1]이라면, 다음과 같이 [2, 3, 2, 3]으로 구성된 사과 상자 1개를 만들어 판매하여 최대 ..
