컴퓨터 IT
CSS 클래스 선택자(selector) 기본 개념
CSS 클래스 선택자(selector) 기본 개념
2023.03.28CSS 선택자 종류 아래 코드를 보고 어느 선택자인지 설명할 수 있다면 이 포스트는 읽지 않아도 됩니다. 이번 포스트는 CSS 셀렉터! selector 선택자와 관련된 기본 개념을 다룹니다. h1 { color: red;} * { color: blue;} [disabled]{color:red;} .my-class{color:blue;} #my-id{color:red;} CSS를 따로 공부하지 않고 클론 코딩을 들으면 정말 헷갈립니다. "use id selector, write const myBtn = document.getElementById" '잠시만 셀렉터가 뭐지?' "use class selector, write const myClass = document.querySelector" '아까는 id였..
CSS 자식 형제 자손 결합자 정리
CSS 자식 형제 자손 결합자 정리
2023.03.27CSS 자식 형제 자손 자식 선택자, 형제 선택자, 자손 선택자 조합 선택자 (combinator)를 알아보는 포스팅입니다! + ~ > " "(스페이스)는 보통 한 번에 배우는 개념인데, 헷갈리기 쉬운 + ~ > " "을 예시와 함께 정리했습니다. 우선 Combinator 조합 선택자는 무슨 의미인지 알아보고 넘어가겠습니다. 조합 선택자는 기본 선택자 2개 이상을 한 번에 사용하는 선택자입니다. 인접 형제 adjacent Sibling (+) : 바로 뒤 자식 Child Combinator (>) : 직속 자식 일반 형제 General sibling combinator (~) : 같은 부모 자손 Descendant combinator (" " 스페이스) : 직속 부모 아니어도 ok 그림은 아래 코드의 예..
IT 5분 잡학사전 후기
IT 5분 잡학사전 후기
2023.03.02학교에서 알려주지 않는 IT 지식이 담겨있는 니꼴라스 쌤의 "IT 5분 잡학사전". 컴공 전공뿐만 아니라 다른 전공인 분께도 적극 추천하는 IT 교양서라고 당당하게 말할 수 있고, IT와 관련된 업무를 하는 기획자, 디자이너, 마케터 분들도 읽기 좋습니다. 한 번 읽어보니 이제 막 입학한 컴공 전공 학생분들께 적극 추천하는 책입니다. 이 책을 읽으면 IT 업계에 대한 '숲'을 보는 눈이 생기기 때문입니다. 유사한 책인 '비전공자를 위한 이해할수 있는 IT 지식' 책이 있는데, 두 개 다 좋은 책이지만, 개인적인 느낌으로는 니꼴라스 쌤의 책이 조금 더 쉽게 쓰인 것 같습니다 ^^. 그리고 IT 5분 잡학사전을 읽다 보면 니꼴라스쌤이 직접 말해주는 느낌을 받습니다. IT 5분 잡학사전 후기 IT 5분 잡학 ..
파이썬 람다 (lambda) 함수 예제
파이썬 람다 (lambda) 함수 예제
2023.02.27C언어에서 파이썬으로 넘어왔을 때 제일 이해하기 어려웠던 부분이 람다(lambda) 함수를 사용하는 것이었습니다. 저 같은 어려움을 느끼는 분들을 위해 이번 포스팅에서는 람다함수에 대해서 알아보겠습니다. 파이썬 람다 lambda 함수 뜻 lambda function is a small anonymous function. 람다 함수는 익명함수를 뜻합니다. 특정한 기능을 수행하는 함수를 한 줄로 작성할 수 있어서 간편하고, map, filter, reduce와 함께 쓰이면 빛나는 역할을 하는 함수입니다. def를 사용하지 않고, 함수를 정의하고, 여러 매개변수 사용이 가능하지만, 표현식은 하나만 사용할 수 있다는 점이 특징입니다. lambda 매개변수(arguments) : 표현식(expression) 알고..
ESLint 쉬운 설치 방법
ESLint 쉬운 설치 방법
2023.02.20ESLint는 자바스크립트 코드에서 문제가 될 수 있는 패턴을 식별하기 위한 정적 코드 분석 도구입니다. 사용자가 지정한 규칙으로 코드를 분석하여 코딩 스타일 문제를 해결해 줍니다. 이번 포스팅에서는 코드 퀄리티를 점검하기 위해 사용하는 ESLint 설치 방법을 소개하고, 어떻게 하면 활용할 수 있는지 소개하겠습니다. ESLint 설치 방법 ESLint를 사용하기 위해서 비주얼스튜디오 코드의 "Extensions"를 클릭합니다. ESLint를 Enable 합니다. Ctrl+shift+P or Command+Shift+P를 누르고, ESLint:Create ESLint Configuration을 클릭합니다. 터미널에서 질문에 맞는 답을 선택합니다. How would you like to use ESLint..
나만 모르는 파이썬 replace 꿀팁
나만 모르는 파이썬 replace 꿀팁
2023.02.18문자열은 문자, 단어 등으로 구성된 집합을 의미합니다. 파이썬에서 문자열을 다루는 방법은 정말 다양한데요, 문자열을 자유자재로 다룰 수 있어야 원하는 툴을 만들 때 어려움이 없고, 알고리즘 문자열 관련 문제가 나와도 쉽게 당황하지 않을 수 있습니다. 문자열 관련 함수로는 아래와 같이 다양합니다. count find index join upper lower lstrip rstrip strip replace split 문자열 관련 함수 중에서 이 포스팅에서 다룰 함수는 replace입니다. 문자열을 바꿔주는 함수입니다. 파이썬 replace 기본 예제 replace는 대상 문자열, 대체 문자열 순서로 사용하여 문자열 안에서 대상이 되는 값을 대체 값으로 바꿔주는 함수입니다. 아래 예제에서는 You are 부..
HTML 태그 우선순위
HTML 태그 우선순위
2023.01.30HTML이란 Hyper Text Markup Language를 말합니다. 이번 포스트에서는 자주 사용되는 HTML 태그를 소개합니다. HTML 태그 우선순위 모음 혹시 중학교, 고등학교 시절에 "우선순위 영단어"로 영어단어 공부를 해보신 경험이 있으신가요? 제가 중학생 때 주변 친구들이 많이 많이 봤던 책인데요, 많이 사용되는 영어 단어 순으로 나열되어있어 실전 영어 독해에 도움을 주는 책이어서 저희 때 베스트셀러였습니다. HTML 태그도 우선순위 영단어처럼 공부하면 어떨까요? HTML 태그는 150개 이상입니다. 150개 태그를 모두 자유자재로 사용할 줄 알면 좋겠지만, 저희에게는 시간이 없습니다. 우선순위로 공부한다면 보다 실전에서 HTML 태그를 사용하기 좋을 것입니다. HTML 순위 아래 사이트에..
면접을 위한 CS 전공지식 노트
면접을 위한 CS 전공지식 노트
2023.01.22면접을 위한 CS 전공지식 노트 대상 독자 개발자 면접을 준비하며 디자인 패턴, 네트워크, 운영체제, 데이터베이스, 자료 구조 등 CS 전공지식을 준비하고자 하는 분들을 위한 책입니다. 또한, 훌륭한 개발자가 되기 위해 CS 전공지식을 공부하고 싶은 분들에게도 유용합니다. 이 책으로 탄탄한 CS 전공지식을 쌓을 수 있습니다. 책의 구성 1장: 디자인 패턴과 프로그래밍 패러다임 2장: 네트워크 3장: 운영체제 4장: 데이터베이스 5장: 자료구조 6장: 포트폴리오 쓰는 팁과 인성 면접을 준비하는 팁 디자인 패턴 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것을 의미합니다. 싱글톤 패턴, 팩토리 패턴, 전략 ..
자바스크립트 Bubbling
자바스크립트 Bubbling
2022.12.19이번 포스트는 JavaScript event Bubbling에 대한 내용입니다. JavaScript Bubbling 브라우저에서 JavaScript 이벤트는 두 가지 단계로 이벤트 리스너를 실행시킵니다. 첫 번째가 버블링(bubbling) 2 번째가 캡처링(capturing)입니다. 버블링은 내부에서 외부로 이동하고, 캡처링 단계는 외부에서 내부로 이동합니다. 기본적으로 addEventListener로 추가된 모든 이벤트 리스너는 버블링으로 동작합니다. HTML 코드 Click JavaScript 코드 div와 button에 eventListener click이벤트를 추가하였습니다. const div = document.querySelector('div'); const button = document.q..
자바스크립트 preventDefault 정리
자바스크립트 preventDefault 정리
2022.12.18이번 포스팅은 JavaScript preventDefault를 사용하는 이유에 대한 내용입니다. preventDefault 역할 preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다. 이때 기본 동작은 이벤트의 종류에 따라 다릅니다. submit인 경우 form 데이터를 서버에 전송하고, 페이지를 새로 고침 하는 부분이 기본 동작입니다. link의 경우는 해당하는 링크로 이동하는 것이 기본 동작, checkbox에서 클릭하면 박스 togglig이 되면서 체크가 되는 부분이 기본 동작입니다. preventDefault를 사용하면 이러한 기본 동작들을 하지 않게 합니다. preventDefault submit 예제 HTML 파일 Title Submit 아래처럼 생긴 HTML 예..
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
2022.12.16이번 포스팅은 버튼에 클릭 이벤트를 추가하는 3가지 방법을 다룹니다. 권장하지 않는 방법부터, 권장되는 방법, 그리고 추가한 이벤트를 삭제하는 방법도 다룹니다. 우선 base HTML 코드는 아래와 같습니다.! 느낌표로 추가되는 기본 html 구성에 를 쓰고, 그 안에 을 추가한 코드입니다. Button HTML 태그 onclick 버튼 태그에 이벤트를 추가하는 방법으로 HTML 태그에 onclick를 추가해주는 방법이 있습니다. button 여는 태그 안에 onclick를 쓰고, 클릭했을 때 사용하고 싶은 JavaScript 코드를 안에 문자열로 작성합니다. 이 방법으로 button에 이벤트를 연결하면, 코딩하기 쉽다는 장점이 있지만, HTML 코드에 JavaScript 코드가 들어가면서 깨끗하지 않은..
자바스크립트 HTML Template 태그
자바스크립트 HTML Template 태그
2022.12.15Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다. Template 사용 전 코드 JavaScript 코드 const toolElement = document.createElement('div'); toolElement.innerHTML = ` Merry Christmas! I am so happy `; Template 사용 코드 JavaScript 코드 const toolElement = document.createElement('div'); const toolTemplate = document.getElementById('tool'); const too..