키자드에 등록된 kindle14의 티스토리 포스트 목록

kindle14의 등록된 링크

kindle14로 등록된 티스토리 포스트 수는 87건입니다.

[주간 챌린지] 알뜰교통카드 앱 UX/UI 분석하기 [내부링크]

정말 오래간만에 글을 쓴다. UX 디자이너로 일을 시작한지 얼마 안된 것 같은데 다음 달이면 2년차가 된다는게 믿기지가 않음 금주부터 홀릭스에서 진행하는 주간 챌린지를 시작하게 됐다.. 매주 아티클을 읽고 올리거나, 앱을 간단하게 분석하려고 한다. 이번주 첫 챌린지는 알뜰교통카드 앱 얼마 전 UI가 대대적으로 개편이 되며 불편한 점이 한 두가지가 아니었는데 실제로 UXUI가 개선이 됐는지, 단점이 있다면 어떤 점인지에 대해 간략하게 보도록하자. 기존 앱 먼저 기존 앱을 살펴보자. 앱을 눌러 들어가면 제일먼저 얼마나 적립되어있는지 확인할 수 있다. 왼쪽 상단에 이번 달에 적립된 마일리지를 통해 쌓인 금액을 확인할 수 있다. 우측 스탬프 업데이트는 실효성이 있는지 모르겠으나, 오류가 있을 경우 새로고침을 할..

UX/UI 디자인의 이해 [내부링크]

커리어 쌓기 6단계 이론 공부 - 툴 익히기 - 경험 쌓기 - 네트워킹 - 멘토 찾기 - 채용 정보 찾기 c 유용한 사이트 & 설정 Medium : https://medium.com Smashing : https://smashing.com NNG(Nielsen Norman Group) : https://nngroup.com Feedly : RSS Feed 제공 Alfred : 빠른 검색 기능 제공 c UX, UI, Usability, UCD UX : 전체 User Experience(사용자경험) 사용자가 직, 간접적으로 느끼고 생각하게 되는 모든 경험 혹은 사용자와의 상호작용과 관련된 모든 측면 UI : 접점 User Interface(사용자 인터페이스) 사용자가 특정 작업을 수행할 수 있도록 정보,..

[자료구조 / Stack] 스택(Stack) [내부링크]

Stack 스택(Stack) 나중에 넣은 데이터가 먼저 나오는 LIFO 기반의 선형 자료 구조 구현 메서드 데이터 전체 획득 / 비어 있는지 확인: Stack.getBuffer(), Stack.isEmpty() 추가 / 삭제 / 마지막 데이터 조회 / 크기 확인: Stack.push(), Stack.pop(), Stack.peek(), Stack.size() 데이터 위치 / 존재 여부 확인: Stack.indexOf(), Stack.includes() Stack 구현 예제(1) // Stack() : 생성자 함수로, 초기 데이터 설정 function Stack(array) { this.array = array ? array : []; } // 객체 내 데이터 셋 반환 Stack.prototype.ge..

[자료구조 / Queue] 원형 큐(Circular Queue) [내부링크]

Circular Queue 원형 큐(Circular Queue) 원형 형태를 가진 FIFO 기반 선형 자료 구조 length보다 길게 넣을 경우 삭제 시키기(메서드 사용) 구현 메서드 데이터가 다 찼는지 / 비어있는지 확인: CircularQueue.isFull(), PriorityQueue.isEmpty() 데이터 추가 / 삭제 / 반환: CircularQueue.enqueue(), CircularQueue.dequeue(), CircularQueue.getBuffer() 첫 번째 데이터 / 사이즈 / 전체 삭제: CircularQueue.front(), CircularQueue.size(), CircularQueue.clear() Circular Queue 구현 예제(1) // CircularQu..

[자료구조 / Queue] 우선순위 큐(Priority Queue) [내부링크]

Priority Queue 우선순위 큐(Priority Queue) 우선순위를 고려하여 먼저 넣은 데이터가 먼저 나오는 FIFO 기반의 선형 자료 구조 우선순위 정렬 방식: 배열 기반, 연결리스트 기반, 힙(Heep) 기반 등의 정렬 방식 존재 구현 메서드 데이터 전체 획득 / 비어있는지 확인: PriorityQueue.getBuffer(), PriorityQueue.isEmpty() 데이터 추가 / 삭제: PriorityQueue.enqueue(), PriorityQueue.dequeue() 첫 번째 데이터 / 사이즈 / 전체 삭제: PriorityQueue.front(), PriorityQueue.size(), PriorityQueue.clear() Priority Queue 구현 예제(1) //..

[자료구조 / Queue] 큐(Queue) [내부링크]

Queue 1) 큐(Queue) 먼저 넣은 데이터가 먼저 나오는 FIFO 기반의 선형 구조 구현 메서드 데이터 전체 획득 / 비어 있는지 확인: Queue.getBuffer, Queue.isEmpty() 데이터 추가 / 삭제: Queue.enqueue(), Queue.dequeue() 첫 번째 데이터 / 사이즈 / 전체 삭제: Queue.front(), Queue.size(), Queue.clear() Queue 구현 예제(1) 객체 내 데이터 셋 반환, 존재 여부 파악 // Queue(): 생성자 함수로 초기 데이터 설정 function Queue(array) { this.array = array ? array : []; } // getBuffer(): 객체 내 데이터 셋 반환 Queue.prototy..

[자료구조 / Linked List] 원형 연결 리스트(Circular Linked List) [내부링크]

Circular Linked List 원형 연결 리스트(Circular Linked List) 각 노드가 데이터와 포인터를 가지며, 원형 형태로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조 사용 많이 안함! 구현 메서드 노드 개수 / 빈 노드 확인 / 출력: CircularLinkedList.size(), CircularLinkedList.isEmpty(), CircularLinkedList.printNode() 노드 추가: CircularLinkedList.append(), CircularLinkedList.insert() 노드 삭제: CircularLinkedList.remove(), CircularLinkedList.removeAt() 데이터 위치 확인: CircularLinkedList.i..

[자료구조 / Linked List] 이중 연결 리스트(Double Linked List) [내부링크]

Double Linked List 이중 연결 리스트(Double Linked List) 각 노드가 데이터와 포인터를 가지며, 두 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조 (이전 값 접근 가능!) 구현 메서드 노드 개수 / 빈 노드 확인: DoubleLinkedList.size(), DoubleLinkedList.isEmpty() 순차 출력 / 역 출력: DoubleLinkedList.printNode(), DoublelinkedList.prontNodeInverse() 노드 추가: DoubleLinkedList.append(), DoubleLinkedList.insert() 노드 삭제: DoubleLinkedList.remove(), DoubleLinkedList.removeAt() 데이..

[자료구조 / Linked List] 연결 리스트 [내부링크]

[JavaScript / Nomad Coder] JavaScript로 그림판 만들기(canvas) [내부링크]

강의에서 배운 기능에 새로운 기능인 eraser와 clear 버튼을 추가 했다. 그리고 컬러는 슬라이드로 구현을 해놨다. 아예 처음부터 만들기도 했고 공부한지 시간이 꽤 지났어서 오래 걸렸다. ㅠㅠ 클론코딩은 역시 본인이 직접 다시 만들어봐야 하는 것 같다. HTML CLEAR SAVE PEN ERASER PAINT CSS @import "reset.css"; body { padding: 50px 0px; background-color: #f6f9fc; } .canvas-wrap { display: flex; justify-content: center; align-items: center; height: 70vh; margin-bottom: 2em; } .canvas { width: 500px; heig..

[Algorithm] 재귀식, 등차수열, 등비수열, 피보나치 수열 [내부링크]

2. 점화식 1) 점화식(재귀식) : 수열에서 이웃하는 두 개의 항 사이에 성립하는 관계를 나타낸 관계식 대표 점화식 등차 수열: F(n) = F(n - 1) + a 등비 수열: F(n) = F(n - 1) * a 팩토리얼: F(n) = F(n - 1) * n 피보나치 수열: F(n) = F(n - 1) + F(n - 2) 2) 등차수열 for문 let result; function forloop(s, t, num) { let acc = 0; for (let i = 1; i

[Algorithm] 경우의 수(순열과 조합) [내부링크]

1. 경우의 수 경우의 수 어떤 사건 혹은 일이 일어날 수 있는 경우의 가짓수를 수로 표현 완전 탐색으로 경우의 수를 푸는 알고리즘 순열(nPr) 조합(nCr) 중복(nH): 서로 다른 n개의 원소 중 r을 중복으로 골라 순서에 상관 있게 나열하는 수 1) 순열 : 서로 다른 n개의 원소 중 r을 중복 없이 골라 순서에 상관 있게 나열하는 수 for문 증가 할수록 대처 하는데 한계가 있음 let input = ["a", "b", "c"]; let count = 0; function permutation(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { if (i == j) continue; // 중복..

[Algorithm] 알고리즘 복잡도 [내부링크]

0. 알고리즘 복잡도 1) 알고리즘 복잡도(시간 복잡도) 알고리즘 평가 지표 코테 시 메모리 사용량, 시간 복잡도를 중점으로 생각해야 함 시간 복잡도 입력 크기의 값에 대해 단위 연산을 몇 번 수행하는지 계싼하여 수행시간을 평가하는 방법 3가지 점근적 표현법 Big-O(빅오): 최악의 상황을 고려 성능 측정 결과 표현 big-Θ(세타): 평균적인 경우 성능 측정 결과 표현 big-Ω(오메가): 최선의 상황일 때 성능 측정 결과 표현 Big-O 표기법 O(1) 상수일 때: 아무리 커도 상수이므로 1로 표현 function bigO(n) { let sum - 0; // 1회 sum = n * 2; // 1회 return sum; // 1회 } O(N), O(N²) for문이 몇(n) 개로 중첩 되..

[JavaScript 개념잡기] JavaScript Date(), N차원 Array [내부링크]

9. Collection(2) 5) Date 표준 Built-in 객체로써 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체 Date 객체는 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초로 나타내는 정수 값으로 표현 생성자 및 method Date 객체 생성자: new Date() 현재 시간 기준 문자열: Date() 날짜 정보 얻기 (년, 월, 일): Date.getFullYear(), Date.getMonth(), Date.getDate() 날짜 정보 얻기 (시, 분, 초): Date.getHours(), Date.getMinutes(), Date.getSeconds() 날짜 정보 설정 (년, 월, 일): Date.setFullYear(), Date.setMonth(), Date.setD..

[JavaScript 개념잡기] JavaScript Map(), Set(), Math() [내부링크]

8. Collection(1) 1) 자바스크립트가 제공하는 Collection 구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간 Indexed Collection: Array, Typed Array Keyed Collection: Object, Map, Weak Map, Set, Weak Set 2) Map 다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장 할 수 있는 Collection Map은 Object 대비 다양한 key의 사용을 허용 값의 추가, 삭제 시 메서드를 통해 수행이 필요 property & method 생성자: new Map() 개수 확인: Map.size 요소 추가: Map.set() 요소 접근: Map.get() 요소 삭제: Ma..

[JavaScript 개념잡기] 고차함수와 생성자 [내부링크]

7. 고차함수와 생성자 1) 고차함수 고차함수 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수 매개변수로 전달되는 함수: 콜백 함수 대표 배열 조작 method 임의 정렬: Array.sort(callback function) 반복 작업: Array.forEach() 콜백함수 결과 배열 반환: Array.map() 조건을 만족하는 하나의 값 반환: Array.find() 조건을 만족하는 값 배열로 반환: Array.filter() 누적 결과 반환: Array.reduce() 고차함수: sort() c sort()의 문제와 한계점 문제: 일의 자리 4가 10의 자리보다 뒤에 정렬됨 원인: 정렬 될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생 한계점: 대소문자 구분없이 정렬..

[JavaScript 개념잡기] 배열(Array) [내부링크]

6. Array(배열) 1) Array 배열(array) 여러 개체(Entity)값을 순차적으로 나열한 자료 구조 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근 대표 속성과 메서드 배열 크기 및 여부 확인: Array.length, Array.isArray() 배열 추가 및 삭제: Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice() 등 배열 탐색: Array.indexOf(), Array.lastIndexOf(), Array.includes() 2) 배열 기본 메서드 배열 선언, 접근, 속성 선언: "new Array()" 혹은 "[]"을 통해 선언, 사이즈 혹..

[JavaScript 개념잡기] JavaScript 숫자와 문자 [내부링크]

5. 숫자와 문자 1) Number Number 자바스크립트엣 일반적인 숫자는 64비트 형식의 IEEE-754 표준 기반 형태로 저장되는 자료형 10진수 외 16, 2, 8진수 등 다양한 진수 사용 16진수(Hexadecimal): 0xFF 8진수(Octal): 0o71 2진수(Binary): 0b1101 대표 상수값 [MAX|MIN]_VALUE, [MAX|MIN]_SAFE_INTEGER, [POSITIVE|NEGATIVE]_INFINITY, NaN 대표 메서드 문자열로 변환: Number.toString() 특정 자리수까지 제한하여 표현: Number.toFixed(), Number.toPrecision() 타입 확인: Number.isNaN(), Number.isFinite() 지수 / 진법 ..

[JavaScript 개념잡기] 함수와 메서드 [내부링크]

4. 함수와 메서드 1) 함수 함수란? 다수의 명령문을 코드 블록으로 감싸고 하나의 실행 단위로 만든 코드의 집합 유사한 동작을 하는 코드를 하나로 묶어 범용성을 확대 시킨 블록 코드 정의 부분, 호출 부분으로 구성 가급적 한 가지 일만 하며 매개 변수는 최대 3개 이내로 작성을 권장 function add(x, y ) { return x + y; // 반환 결과 } add (10, 20); // 인자(argument) : 매개변수(parameter)에 대입 함수 정의 함수 선언식 function add(x, y) { return x + y; } 함수 표현식 const add = function (x, y) { return x + y; }; 화살표 함수 // ES6 const add = (x, y..

[JavaScript 개념잡기] 조건문과 반복문 [내부링크]

3. 조건문과 반복문 1) Scope Scope란? 변수 혹은 상수에 접근할 수 있는 범위 모듈, 함수 내 코드에서 동일한 변수 사용 시 간섭을 줄이는 용도로 사용 Scope는 Global Scope(전역 변수)와 Local Scope(지역 변수)로 구분 Global Scope : 전역에 선언되어 어디에서도 접근 가능 Local Scope?(block, function level scope) : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능 2) 조건문 조건문 : if-else 알고리즘에서 논리적 비교를 할 때 사용되는 조건식 if, if else, else 키워드를 통해 구성됨 조건식에 맞을 경우 중괄호 {} 내에 있는 명령문을 수행 단, 실행 문장이 단일문장 인 경우 {} 생략 가능 c..

[JavaScript 개념잡기] JavaScript의 연산자 [내부링크]

2. JavaScript의 연산자 1) 산술대입 연산자 연산자 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자 연산의 대상 값: 피연산자 피 연산자의 개수에 따라 단항, 이항, 삼항 연산자로 나뉨 연산자 우선순위 순위가 높을 수록(내림차순) 우선 실행됨 [연산자 우선순위](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) 산술 연산자 수학적 계산을 위해 제공하는 연산자 // 덧셈 연산자 + console.log(31 + 10); // 뺄셈 연산자 - console.log(31 - 10); // 곱셈 연산자 * console.log(31 * 10); // 나눗..

[JavaScript 개념잡기] 변수와 자료형 [내부링크]

1. 변수와 자료형 1) 변수와 상수 변수 변경 가능한 값을 저장하기 위한 기억 공간(memory) 사용하기 전 반드시 선언 중복 선언 불가능 키워드 : let let A = 123; // 변수 선언 및 값 초기화 A = 456; // 값 재할당 let A = 789; // 재선언 -> error : 이미 선언 되어있기 때문 상수 변경 불가능한 값을 저장하기 위한 기억공간 사용하기 전 반드시 선언 중복 선언 불가능 키워드 : const const B = 123; // 상수 선언 및 값 초기화 B = 456; // 값 재할당 -> error const C; // 초기화 없이 상수 선언 -> error C = 123; // error 호이스팅(Hosting)c 코드에 선언된 변수 및 함수를 유효한..

[JavaScript 개념잡기] JavaScript의 개요 [내부링크]

0. JavaScript의 개요 1) 개요 JavaScript란? 객체(Object) 기반 스크립트 프로그래밍 언어 ECMAScript 사양을 준수하는 범용 스크립팅 언어 자바와 직접적인 연관은 없으며 웹의 동적 동작을 구현하기 위해 제작 JS 엔진 위에서 수행되며 google V8, Firefox SpiderMonkey 등이 있음 ECMAScript란? Ecma International이 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 자바스크립트를 표준화하기 위해 만들어졌음 Ecma International : 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구 97년 ES1 초판, 09년 ES5, ES2015(ES6)으로 매해 6월에 버전 갱신 중 2) 기본 입출력 입..

[CSS 개념잡기] Grid 정복하기 [내부링크]

8. Grid 1) grid grid의 개요 웹페이지를 위한 2차원 레이아웃 시스템이다. 행(row)과 열(column)이 존재함 gutters(gap) container : display flex와 마찬가지로 외부 container와 내부 item이 있다. container : grid-template-rows, grid-template-columns 몇 개의 행, 열을 가질 것인지 설정한다. 단위 값을 명시 해줘야함 명시한 값의 개수만큼 자리 차지함 fr : 대비되는 비율 repeat(반복할 횟수 n, 값 명시) : 반복 함수 .container { grid-template-rows: 1fr 1fr /* 2개의 행 */ grid-template-columns: 100px 100px 50px..

[CSS 개념잡기] Flexbox 정복하기 [내부링크]

7. Flexbox 1) flexbox flexbox의 개요 1차원 직선의 형태로 요소를 정리하기 위함 부모 자식 관계가 성립 되어야 적용할 수 있음 용어 - flex container, flex item, main axis, cross axis flex container : 아이템을 감싸는 부모 영역 flex item : 내부 정렬을 위한 요소들 main axis : 주축, 가로로 흐름 cross axis : 교차축, 세로로 흐름 container - display 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. 바깥쪽 : block, inline...외부 요소와의 관계 정의 안쪽 : flex, grid...내부 아이템 레이아웃 정의 i..

[CSS 개념잡기] CSS 변형과 전환 [내부링크]

CSS 변형과 전환 1) transform transform(변형) 개요 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있다. transform-function 요소에 적용할 하나 이상의 CSS 변형 함수 변형 함수는 왼쪽에서 오른쪽으로 곱해짐 크기 - scale x, y, z축 비율 설정 가능, 원래 공간은 계속 차지함 회전 - rotate angle 자료형 deg - degree(도) turn - 바퀴 rotate - 각도만큼 회전 시킴 음수값도 가능 이동 - translate (0, 0)을 기준으로 얼만큼 이동시킬지 결정한다. 기울이기 - skew deg, 다른 속성과 달리 값을 하나만 입력하면 x축에만 적용된다. 기준점 - transform-origin 기준..

[CSS 개념잡기] CSS 레이아웃과 색상 및 배경 [내부링크]

5. 레이아웃과 색상, 배경 1) 레이아웃 display - inline, block, inline-block inline 영역의 크기가 내부 콘텐츠 크기로 정해짐 margin, padding의 top,bottom을 지정 못함 요소가 가로로 배치 됨 block 영역의 크기를 width와 height로 지정할 수 있음 width를 지정하지 않으면 가로로 전체를 차지함 요소가 세로로 배치 됨 inline-block 대표적으로 input이 있음 block처럼 width, height 크기를 지정할 수 있음 inline처럼 가로로 배치 됨 display 속성을 통해 변경 요소를 없애는 방법 - display none, visibility hidden display none : 요소 자체를 사라져 버리게 ..

[CSS 개념잡기] 박스모델(Box model) [내부링크]

4. Box model CSS 박스 모델 박스 모델이란? 웹 페이지는 여러 박스로 구성되어 있다. content: 콘텐츠가 표시되는 영역 padding: 콘텐츠와 테두리(border) 사이 여백 border: padding과 margin 사이 테두리(default = 0) margin: 가장 바깥 쪽 레이어 콘텐츠와 패딩, 테두리를 둘러며 해당 박스와 다른 요소 사이 공백 역할 크기 - width, height content의 크기 지정 defalut: auto 상속되지 않음 블록 요소에만 적용됨!! 인라인 요소에 적용 하려면 display 값을 block 또는 inline-block으로 바꿔줘야 함 크기 - max-width, min-width, max-height, min-height 특정..

[CSS 개념잡기] CSS의 단위와 값 [내부링크]

3. CSS 단위와 값 1) 길이 및 백분율, 퍼센트 프로퍼티마다 허용하는 값의 종류가 다르다. 절대길이 - px 화면에서의 전통적인 하나의 점, 가장 작은 요소(pixel) 많은 사용자가 웹 브라우저의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정함 절대 길이는 사용자 설정을 따르지 않으므로 접근성 문제를 야기할 수 있음 font-size를 지정할 때 em, rem 등 상대 길이를 사용해서 해결 상대길이 - em, rem em 1em = 부모의 font-size 부모의 크기를 기준으로 함 %랑 기능은 같으나 더 직관적임 rem 1rem = root의 font-size 최상단의 font-size를 기준으로 사이즈를 정함 em보다 rem을 사용하는게 더 직관적임 상대길이 - vw, vh viewpor..

[CSS 개념 잡기] 폰트 및 텍스트 관련 속성 [내부링크]

2. 폰트 관련 속성 1) font 속성 font - size, style, weight font-size : 글자의 크기 대부분의 브라우저는 16px를 기본으로 함 font-style : 문자의 변화 normal(default), italic, oblique... font-weight : 굵기 normal - 400 bold - 700... 폰트에 따라 지원 폭이 다름(넘어가면 최대치 적용) font - family 글꼴 선택 속성 여러 개의 글꼴을 나열해서 사용 '맑은고딕', sans... 앞에서부터 사용 가능한 폰트인지 판단 후 적용 됨 line-height 줄의 높이 글꼴마다 기본값이 차이가 있음 (line-height으로 통일 가능) 부모 요소의 height = 자식 요소의 line-..

[CSS 개념 잡기] CSS의 선택자 [내부링크]

1. CSS 선택자 선택자(Selector)의 종류 CSS 선택자는 CSS 규칙을 적용할 요소를 정의한다. 주요 선택자 Type h2 { color: purple; } 하나의 웹 페이지에서 일괄적으로 적용할 때 사용 대게 CSS 상단부에 작성 ID #welcome-title { color: red; } 특정 요소 하나에만 적용되는 유일한 선택자 CSS에서 태그 앞에 #을 붙임 Class .blue { color: blue; } 스타일을 공통 적용해야 할 요소들을 그룹화 하기 위한 선택자 여러 요소에 중복 가능 CSS에서 태그 앞에 .을 붙여 적용 속성 선택자 - [attr], [attr=value] 요소의 속성을 선택한다. [attr] /* [attr] */ a[target] { color: ho..

[CSS 개념잡기] CSS의 개요 [내부링크]

0. CSS의 개요 1) CSS 소개 CSS(Cascading Style Sheets) 웹 문서의 스타일을 책임 진다. CSS3 부터는 모듈별로 버전을 달리 함 ex) font, table... 사용시 웹브라우저마다 지원 되는지 확인 cascading : 폭포, 위에서 적용한 스타일이 아래 요소에게 적용 됨 2) CSS의 생김새 CSS는 룰 기반(Rule-based) 언어이다. CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음 선택자(Seletor): 스타일을 지정할 HTML 요소를 선택 선언 블록(declation block): 중괄호 {} 내부의 여러 선언들을 작성 선언(declation): 프로퍼티와 값으로 이루어진 쌍 선택자 { 속성: 값; }의 형태로 이루어..

[HTML 개념잡기] HTML의 속성 [내부링크]

6. HTML의 속성 1) 전역 속성 전역 속성은 문서 전체에 사용 가능하다. id, class : 식별자 id : 고유식별자 id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의한다. 프래그먼트 식별자를 사용해 요소를 가리킬 때 사용 특정 요소를 식별하기 위해 사용함 특성 값에 공백이 들어가면 안됨 숫자, 특수문자로 시작하면 안됨(-, _, / 제외) class class 전역 특성은 공백으로 구분한 요소 클래스의 목록이다. CSS나 JavaScript에서 메서드를 통해 요소에 접근할 수 있음 여러 요소에 동일한 class를 적용할 수 있음 하나의 요소가 여러 개의 class 사용 가능. (공백으로 둘 수 있음) CSS보다 우선순위가 높음 style style 전역 특성은 요소에 적용..

[HTML 개념잡기] HTML의 요소(5) [내부링크]

5. HTML의 요소(5) 7) 폼 관련 요소 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. 일방적으로 사용자에게 정보를 전달하는게 아닌 정보를 다시 돌려받기도 함 form 요소에 한계가 있기 때문에 더 섬세한 컨트롤은 JS로 함 - action, method 속성 action: 지정한 경로로 form 정보를 보내줌 method: 양식을 제출할 때 사용할 HTTP 메서드 post: 양식 데이터를 요청 본문으로 전송함. 서버에 보이지않게 전송 get: 양식 데이터를 action URL과 ? 구분자 뒤에 이어붙여 전송함. 보안 취약 dialog: 양식이 안에 위치한 경우, 제출과 함께 대화 상자를 닫음 button, input type="submit", input typ..

[HTML 개념잡기] HTML의 요소(4) [내부링크]

4. HTML의 요소(4) 5) 목록과 표 목록 - , , unordered list, 순서가 없는 목록 숫자 없이 점 등으로 나타냄 ordered list, 순서가 있는 목록 단계적으로 나타냄 type 속성을 사용함 a, b, c A, B, C 로마자(대, 소문자) ... start : 항목을 셀 때 시작할 수 reversed : 내부에 지정한 항목이 역순으로 배열된 것인지 나타냄 list item, 단일 아이템을 표현하는 태그 중첩 가능 ol 태그 내에서 list에 value 값을 사용하면 해당 행부터 적용됨 목록 - , , 은 로 표기한 용어와 로 표기한 설명 그룹의 목록을 감싸 설명 목록을 생성함 용어 사전 구현, 메타데이터(키-값 쌍 목록)을 표시할 때 사용 dl 안에 dt, dd를 넣을..

[HTML 개념잡기] HTML의 요소(3) [내부링크]

3. HTML의 요소(3) 4) 구조를 나타내는 요소 컨테이너 - , 요소는 플로우 콘텐츠를 위한 통용 컨테이너이다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 아무 영향이 없음 의미가 없은 "순수" 컨테이너 : 의미를 가진 다른 요소가 없을 때 사용 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 도움 문서의 특정 구역이 다른 언어임을 표시하는 용도로 사용 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너이다. 스타일을 적용하거나 lang등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용 와 매우 유사하지만 인라인 요소 아무 것도 나타내지 않음 시멘틱 웹(Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성함 :..

[HTML 개념잡기] HTML의 요소(2) [내부링크]

2. HTML의 요소(2) 3) 텍스트 요소 제목 ~ ~ 요소는 6단계의 구획 제목을 나타낸다. Heading h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 구획 단계는 이 가장 높고 >이 가장 낮음 글씨 크기를 위해 제목 태그를 사용하지 않을 것을 권장(CSS style 사용) 제목은 순차적으로 기입하는 것을 권장 웹 접근성을 위해 전체 페이지의 목적을 설명하는 은 페이지 당 하나를 권장 검색 엔진이 을 먼저 찾아 웹 페이지의 전체 내용을 아우르는 것을 인지. 본문 - 요소는 하나의 문단을 나타낸다. HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다. 문단은 블록 레벨 요소이다. 닫는 태그 문장의 한 줄 ..

[HTML 개념잡기] HTML의 요소(1) [내부링크]

1. HTML의 요소(1) 1) HTML이란? HTML의 생김새 웹페이지를 구성하고 있는 요소(element)를 '태그'로 작성 태그를 통해 어떤 요소인지 명시 태그의 이름은 HTML5 웹 표준에 맞게 작성 This is Title! Fix you HTML은 줄바꿈을 인식하지 못한다.(br tag 사용) 여는 태그 닫는 태그 내용 : 요소의 내용 요소 : 여는 태그, 닫는 태그, 내용을 통틀어 요소라 함태그의 경우, 대소문자를 구분하진 않지만 가독성을 높이기 위하여 모두 소문자로 작성하는 것을 권장 빈 요소(Empty elements) 내용이 없는 요소를 빈 요소라고 부른다. ex) 이미지, 수평선, 줄바꿈 등 닫는 태그를 추가로 명시하지 않아도 된다. Empty element, Self-Cols..

[HTML 개념잡기] HTML의 개요와 실습 환경 세팅 [내부링크]

0. HTML 개요 1) HTML과 웹 브라우저 HTML 로 작성된 언어 .html 의 확장명을 갖는다. (ex. .pdf, .hwp ...) 웹 브라우저는 .html 확장자를 실행할 수 있다. 웹브라우저 : 크롬, 엣지, 익스플로러, 사파리... html을 보여주는 단순 뷰어 뿐만아닌 웹페이지 분석 가능한 개발 도구를 제공한다. HTML(HyperText Markup Language) Programing Language : 데이터를 가공 또는 명령 Markup Language : 데이터를 어떻게 표현할지, 보여질지 정의 2) HTML, CSS and JavaScript HTML : markup, 설계 등 웹 페이지의 골격 및 구조 CSS : 요소의 레이아웃, 스타일링 JavaScript : 동적..

[JavaScript / Canvas] CanvasRenderingContext2D 알아보기 [내부링크]

Canvas HTML에선 Canvas API를 제공하고 있다. Canvas는 context를 가지며 이는 요소 안에서 픽셀에 접근할 수 있는 방법이라고 보면 된다. context는 와 사이에 있다 생각하면 된다. 이 때, 실질적으로 그림을 그리는 것은 CanvasRenderingContext2D를 통해 할 수 있다. CanvasRenderingContext2D context를 만드는 방법은 간단하다. context veriable을 만들어주면 된다. const canvas = document.getElementById('my-house'); const ctx = canvas.getContext('2d'); properties fillStyle 도형 내부의 색, 그래디언트, 패턴 등을 정의한다. examp..

[JavaScript ] addEventListener, mouse event의 종류 [내부링크]

Mouse Event mouse와 관련된 대표 event에 대해 알아보자. MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다. (키보드, 마우스처럼) 1. mousedown / mouseup 요소 위에서 마우스를 클릭하거나 뗄 때 발생한다. 2. mouseover / mouseout 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직이거나 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합한다. 3. mousemove 마우스를 움직일 때 발생한다. 4. click 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행된다다. 5. dblclick 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 ..

[JavaScript] form action과 onsubmit()으로 다음 페이지 넘어가기 [내부링크]

HTML의 form action, JavaScript의 onsubmit()을 활용하면 다음 페이지로 넘어가는 이벤트를 줄 수 있다. Form action & onsubmit() action : form 데이터를 처리할 프로그램의 URI(Uniform Resource Identifier)를 지정한다. 웹 문서 링크를 문자열 형태로 작성한 뒤 form의 데이터를 전송하면 해당 루트로 이동한다. php나 jsp로 작성한 문서를 지정해 데이터를 처리하는 것도 가능하다. onsubmit() : 양식 제출 이벤트가 발생할 때의 동작을 지정할 수 있다. form 태그 내부에서 type="submit"으로 인해 발생하는 이벤트를 처리할 수 있다. 이벤트 발생과 url이 적용되는 시점 사이에 처리할 동작을 지정할 수 있..

[Frontend / Build Tool] Webpack이란? (개념 및 설치 방법) [내부링크]

Build Tool? 웹, 앱 프로그래밍 개발의 발전과 함께 필요한 라이브러리도 많아졌다. 라이브러리들을 직접 다운받아 추가해 사용하는 방법도 있지만 그럼 번거롭게 되므로 이를 위해 만들어진 것이 빌드 도구(Build Tool)이다. 소스 코드를 컴파일, 테스트, 정적분석하여 실행 가능한 애플리케이션으로 자동 생성하는 프로그램 계속해서 늘어나는 라이브러리 자동 추가 및 관리 프로젝트를 진행하며 시간이 지남에 따라 라이브러리 버전을 자동 동기화 Frontend Tool로 npm., Yarn, Gulp, Webpack, Browserify, Grunt 등이 있음 Webpack을 사용하는 이유? 많이 사용하는 툴은 Gulp, Grunt, Webpack이 있는데 그 중 webpack을 사용하는 이유는 프로젝트 ..

[m1 / npm] browserify 설치 오류 해결하기 [내부링크]

npm 설치를 한 뒤 browserify를 설치하려하니 npm WARN deprecated라는 오류가 떴다. 심지어 컬러오류라 더 보기싫었다. 된다는거야 안된다는거야ㅡㅡ 여러 버전으로 다운 받고 install browserify를 해도 안되길래 다음과 같이 해결했다. npm 설치할 때 문제가 있던 것 같다. Browserify 설치하기 npm 설치 https://nodejs.org/en/download/ Download | Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 먼저 npm 버전을 확인한다. 나는 처음에 최신 버전으로 까는게 좋다 생각했는데 LTS 버전으로 재설치했다. LTS버전은..

[JavaScript] DOM Element 위치값 가져오기 [내부링크]

jQuery없이 JS로 슬라이더를 만들던 중 getBoundingClientRect()를 발견했다. DOMRect의 오브젝트를 긁어오는 메소드인데 console로 찍으면 다음과 같이 나온다. console.log(SLIDE_SIZE); // 출력 결과(firefox) DOMRect { x: 488.5, y: 120, width: 300, height: 237.88333129882812, top: 120, right: 788.5, bottom: 357.8833312988281, left: 488.5 } x, y 좌표값과 해당 엘레먼트의 width, height값 그리고 상하좌우 값도 나온다! getBoundingClientRect() IE에서 x, y값을 얻지 못하는 것을 제외하고(역시 IE...) 대부분..

m1에서 개발환경 구축하기 (brew, git, oh my zsh, iTerm2) [내부링크]

1. Homebrew 설치 /bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa/raw/48f48f7fef21abb308e129a80b3214c2538fc611/homebrew_m1.sh)" 터미널에서 위와같은 코드를 입력한다. 대신 홈페이지에서 최신 버전이 맞는지 체크하는 것을 추천. 이후 맥북 암호 입력, return(엔터키) 누르기 등은 다른 블로그에 나와있는 것처럼 진행하면 된다. zsh: command not found: brew Homebrew 설치 시 자주 발생하는 오류 중 하나가 있다. m1의 경우 설치가 끝난 뒤 brew 명령어를 치면 에러가 발생한다. ec..

[JavaScript] RGB 색 랜덤하게 가져오기 [내부링크]

자바스크립트로 랜덤하게 컬러(RGB)를 가져오도록 해보자. 사용한 코드 function makeColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); } rgb 색상은 각각 256가지의 정수 값 3개가 모여 만들어진다. ex) rgb(255, 155, 55) 0 ~ 255 = 256개이므로 Math.random()함수를 사용해 리턴한다. Math.floor() Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다. Math.floor(c) Math.random() Math.r..

[Git / GUI] 깃크라켄(GitKraken) 설치 및 사용하기 [내부링크]

Git GUI란? 먼저 Git이란 버전 제어 시스템(VCS) 중 하나이다. 모든 프로젝트는 코드를 저장하고 관리하기 위해 Git 리포지토리를 구현한다. Git을 사용하면 코드 작성이 쉬워지고, 유용한 통합 기능을 제공하므로 보다 쉽게 협업이 가능하다. Git GUI(Graphical User Interface)란 명령이나 작업을 이해하기 쉽도록 Git 히스토리를 시각화해주는 도구이다. 대표적으로 깃크라켄(GitKraken), 소스트리(Source Tree), Github 데스크탑 등이 있다. 이 중 깃크라켄 사용법에 대해 알아보자. (UI가 제일 간결하고 무료 기능이 많다.) GitKraken 사용법 1. 설치 https://www.gitkraken.com/ Free Git GUI for Windows,..

HBD Page [내부링크]

https://github.com/34184oc/HBD-project 34184oc/HBD-project 생일 축하 애니메이션 페이지. Contribute to 34184oc/HBD-project development by creating an account on GitHub. github.com 생일 축하 애니메이션 페이지를 제작했다. 크림이나 쉬폰이 딱딱해서 어색하긴한데 DOM 제어해서 타이머 메서드 사용하는 것도 재밌었다!

[프로그래머스 / JavaScript] Lv.1 두 개 뽑아서 더하기 [내부링크]

문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 조건 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 문제 풀이 function solution(numbers) { const answer = []; for (let i = 0; i < numbers.length; i++) { for (let j = i + 1; j < numbers.length; j++) { const sum = numbers[i] + numbers[j]; if (answer.indexOf(sum) < 0)..

[프로그래머스 / JavaScript] Lv.1 x만큼 간격이 있는 n개의 숫자 [내부링크]

문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 조건 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 문제 풀이 function solution(x, n) { let answer = []; for (let i = 1; i (i + 1) * v) } 맵이 여기서도.. ..

[프로그래머스 / JavaScript] Lv.1 행렬의 덧셈 [내부링크]

문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 문제 풀이 function solution(arr1, arr2) { let answer = []; for (let i = 0; i < arr1.length; i++) { answer[i] = []; for (let j = 0; j < arr1[i].length; j++) { answer[i].push(arr1[i][j] + arr2[i][j]); } } return answer; } 어떻게 하면 배열끼리..

[프로그래머스 / JavaScript] Lv.1 핸드폰 번호 가리기 [내부링크]

문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 * 으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 4 이상, 20이하인 문자열입니다. 문제 풀이 function solution(num) { const numLength = num.length - 4; return "*".repeat(numLength) + num.substring(numLength); } 매개변수 - 4 길이만큼 repeat() 메서드로 별을 찍었다. 그리고 substring()*으로 이후 뒷자리 값을 출력했다. 다른 사람 풀이 f..

[프로그래머스 / JavaScript] Lv.1 같은 숫자는 싫어 [내부링크]

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한 조건 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나..

[프로그래머스 / JavaScript] Lv.1 평균 구하기 [내부링크]

문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 문제 풀이 function solution(arr) { let answer = 0; for (let i = 0; i < arr.length; i++) { answer += arr[i]; } return answer/arr.length; } 주어진 배열의 개수만큼 나눠야하니까 answer 을 arr.length로 나누었다. 다른 사람 풀이 function solution(arr) { return.reduce((a, b) => a + b) / arr.length; } red..

[프로그래머스 / JavaScript] Lv.1 직사각형 별찍기 [내부링크]

문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수입니다. 문제 풀이 // 주어진 부분 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); //풀이 부분 let star = ''; for (let i = 0; i < b; i++) { for (let j = 0; j < a; j++) { star += '*'; } star += '\n'; } con..

[프로그래머스/JavaScript] Lv.1 짝수와 홀수 [내부링크]

문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다 문제 풀이 function solution(num) { return (num % 2) ? "Odd" : "Even"; } 0==False인 것을 이용해 삼항연산자를 사용했다. num = 4라면 %2는 0이므로 "Even" 출력.

[JavaScript] innerHTML, innerText, textContent 차이점 [내부링크]

공통점 텍스트값을 읽어오고 설정할 수 있다. 차이점 1. textContent textContent는 식별자 노드의 내부 콘텐츠를 text/plain으로 파싱(Parsing)한 결과이다. 즉, 해당 노드가 가지고 있는 텍스트 값을 그대로 읽기 때문에 다른 프로퍼티들에 비해 파싱이 빠르다. IE 엔진에 적합하게 만들어졌기 때문에 해당 환경에서 성능이 더 좋다. "만나서 반갑습니다." 로 입력되어있을 때, 연속되는 공백이 그대로 처리되어 보여진다. 2. innerTEXT innerText 프로퍼티의 값은 text/plain으로 파싱한 결과이다. 해당 Element 내에서 사용자에게 보여지는 텍스트 값을 읽어온다. 때문에 원시텍스트가 최종적으로 렌더링 된 모습이 된다. "만나서 반갑습니다." 로 입력되어있을 ..

[JavaScript] 터치 슬라이더 구현하기 (touch event) [내부링크]

touch event를 사용해 모바일 터치 슬라이더를 구현해본다. HTML slide-contents 를 감싸는 slide-box가 있고 전체 영역인 slide-wrap으로 구조를 짜놨다. 오늘의 감정을 기록할 준비가 됐나요? 1 Emoary로 당신의 하루를 기록 해보세요. 오늘의 감정을 모아 월별로 확인할 수 있어요. 오늘의 감정을 기록할 준비가 됐나요? 2 Emoary로 당신의 하루를 기록 해보세요. 오늘의 감정을 모아 월별로 확인할 수 있어요. 오늘의 감정을 기록할 준비가 됐나요? 3 Emoary로 당신의 하루를 기록 해보세요. 오늘의 감정을 모아 월별로 확인할 수 있어요. CSS contents의 width값은 300px으로 맞춰주고 box는 position을 relative로 지정해줬다. tra..

[JavaScript] 자바스크립트로만 slider 구현하기 (수정 중) [내부링크]

검색하다보면 제이쿼리를 이용한 bx slider는 많은데 자바스크립트는 잘 없는 것 같아 만들기로 했다. 텍스트 박스 세 개를 슬라이더로 구현하기로 했다. 우선 영역은 크게 세 개로 나뉜다. 어쩌구저쩌구 1. slide-wrap : 슬라이드가 보이는 영역 2. slide-box : 컨텐츠 넓이의 합 3. slide-contents : 컨텐츠 영역 3번이 400px 이라고 할 때, 2번은 3*400px = 1200px로 상하 또는 좌우로 슬라이드가 움직이는 영역의 총 값이 된다. 1번은 컨텐츠 넓이와 똑같이 지정 + overflow: hidden을 통해 보이고자하는 부분만 나올 수 있게 한다.

[JavaScript] 타이머 함수 setIntervel() / setTimeout() [내부링크]

1. setInterval() / clearInterval setInterval() 함수는 일정 시간 간격으로 코드를 반복 실행 하는 함수이다. 첫 번째 인자는 반복 실행하고자 하는 코드, 두 번째 인자는 시간 정보 (단위: ms)로 설정한다. clearInterval() 함수는 타이머 동작을 중지시키는 함수이다. let timer = setInterval(() { console.log("일정 시간 코드 반복"); }, 1000) clearInterval(timer); 2. setTimeout() / clearTimeout setInterval() 함수는 지정한 시간 간격에 코드가 딱 한 번 실행되는 함수이다. 첫 번째 인자는 한 번 실행하고자 하는 코드, 두 번째 인자는 시간 정보 (단위: ms)로 설..

[디지털논리회로] 부울함수의 간소화 및 구현(2) [내부링크]

무관조건 무관조건(don't care condition) 입력변수들의 조합에 따라 함수값이 발생하지 않는 경우 함수값이 0과 1 중 어떤 출력값으로 나와도 무관한 경우 BCD 코드 2진수 16개 조합 중 10개 조합만 사용 나머지 6개 조합(1010, 1011, 1100, 1101, 1110, 1111 : 10 ~15)은 미사용 따라서 BCD 코드를 사용하는 논리회로는 6개 조합이 발생하지 않는다는 가정하에 동작 ∴ 6개 조합과 무관하게 동작되는 논리회로가 구성 부울함수에서 무관조건의 표현 무관조건은 부울함수를 더욱 간소화하는데 사용한다. 무관조건은 X로 표시한다. : 3변수 부울함수에 대한 무관조건이다. 3개의 변수 A, B, C에 대한 2진수의 열 000, 001, 111인 경우 해당 부울함수의 ..

[디지털논리회로] 부울함수의 간소화 및 구현(1) [내부링크]

카르노 도표를 이용한 간소화 부울함수의 간소화 방법 1. 대수적인 방법 주어진 부울함수에 부울대수 정리를 대수적으로 적용해 간소화 도표 방법과 테이블 방법의 이론적 바탕 2. 도표 방법 카르노 도표(Karnaugh map)를 사용하는 방법 카르노 도표를 사용하여 부울함수의 각 항들을 곱이나 합 형태로 간소화 여섯 개 이하의 변수를 가진 부울함수에 사용 3. 테이블 방법 퀸-맥클러스키(Quine-Mcluskey) 방법 테이블을 사용해 간소화 알고리즘을 구현한 방법 많은 변수를 가진 부울함수에 적합 카르노 도표의 개요 카르노 도표 여러 개의 사각형으로 된 다이어그램 사각형은 각각 하나의 최소항 또는 최대항을 의미 최소항 또는 최대항들이 차지하는 도표내의 면적을 이용하여 간소화 카르노 도표는 부울함수의 입..

[디지털논리회로] 논리게이트와 부울대수(2) [내부링크]

부울함수의 정규형 및 표준형 부울함수의 정규형 : 부울함수를 최소항(sum of minterm)의 합이나 최대항(product of maxterm)의 곱으로 표현한 것 정규형 1. 최소항과 최대항 최소항 논리곱(AND)으로 표현되는 어떤 변수의 결합 결과가 논리 1이 나오도록 하는 것 걍 m의 j값을 이진수로 바꿔서 항으로 표시하자 최대항 논리합(OR)으로 표현되는 어떤 변수의 결합 결과가 논리 0이 나오도록 하는 것 이진수로 바꿔 만든 최소항 m의 쌍대 M을 만들자 1) 최소항 각 변수의 문자 1개씩 모두 n개의 논리곱 항으로써 그 결과가 논리 - 1인 경우 mj로 표시 2) 최대항 각 변수의 문자 1개씩 모두 n개의 논리합 항으로써 그 결과가 논리 - 0인 경우 Mj로 표시 3) 진리표를 부울함수..

[디지털논리회로] 논리게이트와 부울대수(1) [내부링크]

논리연산 논리연산의 개요 2진 디지털 시스템에서 입출력 관계를 표현하는 방법 1. 그래프나 진리표 2. 논리함수 입력에 따라 변수가 어떻게 변하는가를 나타내는 함수로 표현 입력이 2진 논리값이므로 논리함수(F = X)로 나타낸다. 논리집합과 논리연산 논리집합(부울집합) 집합이 0(거짓)과 1(참)으로만 구성된 집합 {0,1} 논리연산(부울연산) 두 개의 이산값에 적용되는 연산 논리집합{0,1}에 대한 세 가지 논리연산 AND 연산 : 점( · )으로 표시, 생략 가능 OR 연산 : 덧셈 기호(+)로 표시 NOT 연산 : 변수 위에 줄(-)을 그어 표시 논리게이트 기본 논리게이트 1. AND 게이트 2. OR 게이트 3. NOT 게이트 NAND 게이트와 NOR 게이트 1. NAND 게이트 2. NO..

[CSS] CSS에서 사용하는 단위들 [내부링크]

rem(root em) em은 현재 font-size를 정의한다. 자식 요소는 부모의 폰트 사이즈를 상속 받아 커진다. rem은 단일 사이즈로 표현하고 싶을 경우 사용하며 최상위 요소를 기준으로 삼는다. vh(vertical height), vw(vertical width) vh, vw는 타겟 요소의 값을 뷰포트의 너비값과 높이값에 맞게 사용하는 단위이다. vh요소는 높이값의 1/100(1%) 이다. vmin, vmax vmin, vmax는 뷰포트의 너비값과 높이값에 따라 최소, 최대값을 지정할 수 있다. 브라우저의 크기가 1280 x 700 이라면 1vmin은 7px, 1vmax는 12px이 된다. ex, ch ex, ch는 현재 폰트 사이즈에 의존한다. em, rem과 다른 점은 두 단..

[이산수학] RSA 암호화 및 복호화 알고리즘 [내부링크]

PKI(Public Key Infrastructure): 비대칭키 암호 시스템 평문(데이터)를 공개키로 암호화하면 개인키로 복호화가 되고 반대로 개인키로 암호화하면 공개키로 복호화가 가능한 것이 핵심이다. 공개키 : 외부에 공개 가능한 키 개인키 : 외부에 공개 불가능한 키 이 두 키를 가지고 있으면서 소유자를 증명하는 것이 PKI 인증서이다. 통신주체는 PKI 인증서를 모두 갖고 있어야한다. 기본적인 비대칭키 암호화 알고리즘은 다음과 같이 수행된다. 철수와 영희는 서로 공개키를 교환한다. 철수는 영희의-공개키로 데이터를 암호화하여 영희에게 보낸다. 영희는 자신의 개인키로 데이터를 복호화 한다. 영희는 철수에게서 받은 철수-공개키로 암호화하여 철수에게 보낸다. 철수는 자신의 개인키로 데이터를 복호화 ..

[데이터베이스시스템] 관계형 모델 [내부링크]

관계형 모델의 개념 릴레이션의 특성 데이터베이스 모델링 과정 개념적 데이터 모델링의 결과 논리적 데이터 모데링 단계 1. DBMS에서 사용하는 데이터 모델에 맞추어 데이터를 표현하는 과정 2. 데이터 정의 언어로 기술된 개념 스키마 생성 3. 관계형 모델(relational model) 1969년 에드가 F.코드에 의해 제안 릴레이션으로 데이터를 표현하는 모델 데이터 표현이 단순하고 직관적 구조화 모델 현재 대다수 DBMS의 기초 관계형 모델을 사용하는 관계형 DBMS(RDBMS) Oracle, DB2, PostgreSQL, MySQL, MSSQL 등 릴레이션의 구성 두 개의 메타 데이터를 표현해서 하나의 데이터 값을 데이터화 시키는 과정에 최적화되어 있다. 릴레이션의 특징 레코드의 유일성 : 중복된..

[JavaScript] 오류(Error) 원인 찾기 [내부링크]

Uncaught SyntaxError: missing ) after argument list JS가 요구하는 규칙대로 프로그램을 작성하지 않을 경우 발생한다. Uncaught TypeError: Cannot read property 'classList' of null at ~ 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생. 1. script 태그를 이전에 넣는다. 2. html 태그에 해당 요소가 있어야 한다.

[데이터베이스 시스템] 모델링 [내부링크]

데이터베이스 모델링의 이해 데이터베이스 모델링의 개념 데이터의 의미를 파악하고 데이터와 관여하는 업무 프로세스를 개념적으로 정의하고 분석하는 작업 모델링 단계(아래 과정) 모델링의 필요 1. 비즈니스적 관점 : 어떤 데이터를 저장해야 하는가? 2. 컴퓨터 프로그래머 관점 : 어떻게 데이터를 저장해야 하는가? 데이터베이스 모델링 단계 내부스키마를 만들어내기 위해 사용자의 요구 사항 분석, 개념적 논리적 물리적 데이터 모델링을 진행한다. 이때, 논리적 데이터 모델링을 통해 만들어진 개념스키마가 전체적인 데이터 구조를 가지고 있다. > 애플리케이션 설계 과정에 반영됨으로써 구체적인 아키텍처가 나오도록 만들 수 있다. 내부스키마 : 어떤 데이터가 어떻게 데이터 베이스 내부에 저장되어야하는지의 결과 1. 개념..

[m1 / VS Code] m1에서 C/C++ 개발환경 구축하기 [내부링크]

프로그램 개발 단계 프로그램이란 컴퓨터로 하여금 특정 작업을 수행하도록 하는 명령어들의 집합이다. 프로그램을 작성하는데엔 아래와 같은 단계를 거쳐야한다. 프로그램 목적 정의 요구 분석과 시스템 분석을 통하여 프로그램이 가져야 할 기능 정의 프로그램 설계 분석된 기능을 처리할 수 있도록 구조 설계 소스 코드 작성 설계를 기반으로 에디터를 사용하여 작성 컴파일 / 링킹 소스 코드를 실행 가능한 코드로 변환 및 문법 검사 프로그램 실행 테스트와 디버깅 에러 검사 및 디버깅 유지 보수 에디터 : 소스 코드(source code)를 쉽게 작성해 기억장치에 저장할 수 있도록 도와주는 도구. 컴파일러 : 에디터를 사용하여 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 바꾸어주는 번역 소프트웨어. C프로..

[이산수학] 집합론 [내부링크]

논리학과 집합론 논리합 p(c) ∨ g(c) = 합집합 A ⋃ B 논리곱 p(c) ∧ g(c) = 교집합 A ⋂ B 집합과 원소 무정의 용어 정의 없이 사용하는 용어 직관적으로 이해할 수 있으나 다른 용어로 정의하기 힘든 대상을 표현하기 위해 사용 Georg Cantor의 집합 : 우리의 직관이나 사고로부터 한정적이고 분리된 객체들의 전체 M에서의 수집 집합의 표기법 S가 하나의 집합이라고 한다. > a를 S의 원소이고, b를 S의 원소가 아니라고 할 때 : a ∈ S, b ∉ S 집합의 표기 방법 S는 중괄호 ( {, } )로 표시함 원소나열법 조건나열법 집합의 크기 : | S | 부분집합 부분집합(subset) A의 모든 원소가 B의 원소이면 A는 B의 부분집합이라 하고 A ⊆ B 또는..

[17 Project] kit drum [내부링크]

[새로 알게된 것] 1. 키보드 키코드 더보기 KEY KeyCode ASCII KEY KeyCode ASCII 0 48 48 Numpad 0 96 48 1 49 49 Numpad 1 97 49 2 50 50 Numpad 2 98 50 3 51 51 Numpad 3 99 51 4 52 52 Numpad 4 100 52 5 53 53 Numpad 5 101 53 6 54 54 Numpad 6 102 54 7 55 55 Numpad 7 103 55 8 56 56 Numpad 8 104 56 9 57 57 Numpad 9 105 57 A 65 65 Multiply 106 42 B 66 66 Add 107 43 C 67 67 Enter 13 13 D 68 68 Subtract 109 45 E 69 69 Decim..

[17 Project] Calculator [내부링크]

[새로 알게 된 것] 1. onclick 메서드와 value 값만으로 계산기를 간편하게 만들 수 있다는 것을 알았다. 2. value = ' ' 로 값을 비우게 해 Clear 로 만들 수 있다. 3. eval() : 문자로 표현 된 Js코드를 실행하는 함수 eval(string) eval is evil? 사용을 지양하자! eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수다. ES5부터 eval을 직접 호출하지 않고 간접적으로 사용한다면, 지역 범위가 아니라 전역 범위로 동작한다 (!) 때문에 제3자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있다. 그리고 느리다! eval()을 사용하면 브라우저는 코드에 해당 변수가 있는지 확인하고 값을 대입하기 위해 일일이 검색해야..

[이산수학] 증명 [내부링크]

정의 공리(axiom) 어떤 다른 명제들을 증명하기 위해 전제로 사용되는 가장 기본적인 가정으로, 별도의 증명 없이 참으로 이용되는 명제 증명(proof) 특정한 공리들을 가정하고, 그 가정하에 제안된 명제가 참임을 입증하는 작업 정리(theorem) 공리로부터 증명된 명제 1) 보조정리(lemma) : 정리를 증명하는 과정 중에 사용되는 증명된 명제 2) 따름정리(corollary) : 정리로부터 쉽게 도출되는 부가적인 명제 증명 방법 직접 증명법 직접 증명법(direct proof) 공리와 정의 그리고 정리를 논리적으로 직접 연결하여 증명 다른 말로 연역법(deduction)이라고 함 * 연역법 : 이미 증명된 하나 또는 둘 이상의 명제를 전제로 하여 새로운 명제를 결론으로 이끌어내는 것 명제..

[이산수학] 논리 [내부링크]

명제 명제(Proposition) : 참과 거짓을 구별할 수 있는 문장이나 수학적 식 명제의 진리값(truth value) 참(true), T : 명제가 타당한 경우 거짓(False), F : 명제가 타당하지 않은 경우 6은 2의 배수다 : 명제 (진리값이 참) 2, 3, 6은 소수이다 : 거짓 (F) 논리 연산 합성명제(compund proposition) 하나 이상의 명제와 논리연산자 그리고 괄호로 이루어진 명제 1) 논리합(disjunction; or, ᵛ) 둘 중 하나라도 참이면 진리값은 참이다. 2) 논리곱(conjunction: and, ＾) 둘 중 하나라도 거짓이면 진리값은 거짓이다. 3) 부정(negarion; ~, ㄱ) 1항 연산, not 4) 배타적 논리합(exclusive or..

[웹디자인 기능사] 0. 실기 준비 [내부링크]

필기는 2019년 9월에 합격해서 올해 안에 반드시 실기까지 따야한다. 그래서 4월 16일 1회차 시험을 치기로 했다. 8시 반까지 시험장에 들어가야해서 새벽에 일어나야할 것 같다ㅠㅠ 앞으로 실기 연습문제 풀면서 슬라이드 구현하는데에 집중할 예정이다. 한국 산업인력공단 울산지사 에디터: 브라켓, 노트패드++, 에디트플러스, 드림위버 포토샵 및 일러스트레이터: CS6 참고도서: 이기적 2019년도 웹디자인 기능사

[17 Project] Digital Clock [내부링크]

[새로 알게된 것] getHours getMins getSeconds textContent는 innerContent와 비슷하지만 반환 시 여백도 그대로 가져온다. 1. 아직 h = (h < 10) ? "0" + h : h; 를 이해 못했다,, 없어도 잘 돌아가는데 ㅋㅋㅋ 다시 계산해봐야겠다. 2. 폰트 적용이 안돼 ~~ 디지털 느낌이면 더 좋을텐데 아숩아숩 [내가 짠 코드]

[17 Project] Stopwatch [내부링크]

[새로 알게된 것] 클론코딩만 하니 실력이 전혀 늘지가 않아 직접 알고리즘을 연구하며 하나씩 만들었다. 아직 코드는 엉망이지만 내 손으로 뭔갈 만드는 재미가 있다. 이제야 제대로 마주하는 기분이다!! 진짜 재밌다. 1. 리팩토링 하기 2. 숫자가 바뀌는걸 위에서 아래로 돌아가도록 구현 해보기 [내가 짠 코드] 참고 : mikkeg

공부 순서도 [내부링크]

공부할 건 많고 이것저것 건들다간 어중이떠중이가 될 것 같은 기분이다. 선택과 집중을 필요로 하는 일이 많아져서 하는 정리. 1. 컴퓨터과학 - 학과 공부 데이터베이스 시스템 이산수학 > 선형대수 알고리즘(2학기) 자료구조(2학기) C언어: 다른언어의 토대인 만큼 학교에서 배우는 만큼만 이해 해놓을 것 Java: 필수 .. 디지털 논리회로, 컴퓨터 구조, 인터넷 사회 등 : 기본 지식 수준으로 알아놓을 것, 가볍게 정리, 과제에 집중 2. 프론트엔드 개발 - 취업 준비 HTML, CSS, JavaScipt > 17 자바스크립트 프로젝트, 웹디자인 기능사 실기, 웹 개발 순으로 공부할 것 React, typescript등 > 프레임워크, 라이브러리 사용 경험, React 주무기로 삼을 것. Java, ..

[정규 표현식] 패턴과 플래그 & 문자 클래스 [내부링크]

️ 패턴과 플래그 정규 표현식(regular expression)은 문자 검색과 교체에 사용되는 패턴으로 강력한 기능을 제공한다. 자바스크립트에선 RegExp 객체와 문자열 메서드를 조합해 정규표현식을 사용할 수 있다. 정규 표현식 정규 표현식(‘regexp’ 또는 'reg’라고 줄여서 사용)은 패턴(pattern) 과 선택적으로 사용할 수 있는 플래그(flag) 로 구성된다. 정규식 객체를 만들 땐 두 가지 문법이 사용된다. 긴 문법 regexp = new RegExp("pattern", "flags"); 짧은 문법은 슬래시(빗금) "/"를 사용한다. regexp = /pattern/; // 플래그가 없음 regexp = /pattern/gmi; // 플래그 g, m, i가 있음 슬래시 "/"는 자바..

[이산수학] 이산수학의 개요 [내부링크]

️ 이산수학 이산수학(discreate mathematics): 이산적인 수학구조에 대해 연구하는 학문. 이산적인 값(0과 1)을 다루는 디지털 컴퓨터가 데이터를 처리하는 과정에 필요하다. 연속수학(continuous mathematics): 연속적인 성질을 연구하는 수학. 미적분학, 위상수학 등이 여기에 속한다. 이산(discreate) : 불연속적인 상태를 나타내는 것. 연속(continuous) : 중단 또는 급격한 변화가 없는 상태 모델링과 추상화 문제 해결을 위한 수학 도구: 수학의 정의와 정리 기법: 근의 공식, 소거법, 일차연립방적식 등 방법론: 상황에 다라 가장 효과적이고 효율적으로 도구와 기법을 선택하는 것 수학적 모델링: 수학적 도구, 기법, 방법론을 이용해 문제 해결을 하기 위해 수..

[Core JS] 변수와 상수 [내부링크]

변수와 상수 대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다. 변수는 이러한 정보를 저장하는 용도로 사용된다. 온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보 채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보 ️ 변수 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 다. let : 변수를 선언 하는 키워드 = : 할당 연산자. 변수 안에 데이터를 저장 한다. let message; message = 'Hello'; // 문자열을 저장한다. alert(message); // 변수에 저장된 값을 띄워 보여준다. let message = 'Hello!'; // 변수를 한 줄에 정의하고 값을 할당 할 수 있다. alert..

[Core JS] 엄격 모드 [내부링크]

️ 엄격 모드 자바스크립트는 기존에 작성한 코드는 절대 망가지지 않는다. 자바스크립트는 창작자의 실수나 불완전한 결정이 언어 안에 영원히 박제된다. ECMAScript5(ES5)가 등장하기 전까지 지속됐지만 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 하위 호환성 문제가 생길 수 있어 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict를 사용할 때 변경사항이 활성화되게 해놓았다. ️ use strict "use strict", 'use strict'가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. "use strict"는 함수 본문 맨 앞에 올 수도 있으며 오직 해당 함수만 엄격 모드로 실행된다. 엄격 모드는..

[Core JS] 자바스크립트 기본(1) [내부링크]

️ Hello, world! 'script' 태그 모던 마크업 외부 스크립트 자바스크립트는 CSS처럼 외부서 작업한 파일을 불러올 수 있다. src 속성을 사용해 HTML에 삽입한다. /path/to/script.js는 사이트의 루트부터 파일이 위치한 절대 경로를 나타낸다. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼 현재 페이지에서 상대 경로를 사용하는 것도 가능하다. URL 전체를 속성으로 사용할 수도 있다. 복수의 스크립트를 HTML에 삽입하고 싶다면 태그를 여러 개 사용하면 된다. … ℹ️ 주의 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다. 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하..

2020년 : 개(발하는)(디)자이너가 쓰는 회고록 [내부링크]

나는 올해 이뤄놓은게 없다고 생각해서 회고록을 적지 않으려고 했다. 그래도 여태 경험을 비추어보아, 모든 일엔 발자취를 남기는게 좋을 것 같다는 생각이 들어 2020년 회고록을 쓰기로 했다. 좋은 일보단 안좋은 일이 대부분이었지만 하반기에 부쩍 늘어난 행복한 날들이 2021년에도 이어지면 좋겠다. (+ 다른 분들이 쓰시는거에 자극도 엄청 받았다!) 1월 수습 기간 없이 들어간 회사였지만 3개월차 신입이었다. 다들 연봉 협상한다고 불려갈 때 나는 사장님 두 분과 면담하며 인생 이야기를 들었다. 이제 나도 학생이 아닌 '프로 디자이너' 로써 일한다는 자각을 가지고 있으라며. (졸업도 안했는데..) 그렇게 온갖 스트레스를 받으며 1인 디자이너로 일을 했으나 사실 오래 있으려고 들어간 회사는 아니었다. 알바보단..

[Git clone] 파일이 원하지 않는 경로에 들어왔을 때 [내부링크]

문제발생 기존 Desktop 하위에 있던 파일A를 새로 당기고자 clone을 실행했다. 이때, 경로를 A파일에서 불러와버려서 경로가 Desktop/A/A(1) 이 되어버렸다. 나는 A(1)을 다시 A와 합치거나, 아니면 기존에 있는 파일은 지우고 새로 불러온 A(1)에서 다시 작업을 하고자 했다. 해결 1. A(1)을 불러온 위치에서 그대로 작업을 한다. push를 해도 gitgub과 연결이 되어있기 때문에 상위 파일이 딸려가지 않고 merge 된다. 2. A(1)을 밖으로 꺼내고 A를 지운다. 1번과 마찬가지로 별개로 존재하기 때문에 아무런 영향이 없다. 원하는 곳에 파일을 옮기고 push 한다. 결론 clone시에 꼭 파일을 불러오고자 하는 위치에서 실행 했는지 확인하자. 이미 불러온 경로라고 뜬다면..