01. 일반적인 데이터 압축 기법 (Generic Data Compression Techniques) RLE(Run Length Encoding) 빈도 종속 인코딩(Frequency-dependent Encoding) 차등 인코딩(Differential Encoding) 사전 기반 인코딩(Dictionary Encoding) LZW 압축 알고리즘(Lempel-Ziv-Welsh Compression Algorithm) 데이터의 저장이나 전송을 위해 원래 정보를 유지하면서 데이터의 크기를 줄이는 것이 필수적이다. 각 분야에 맞게 고안된 압축 기법들이 있다. 01. 일반적인 데이터 압축 기법 (Generic Data Compression Techniques) 데이터 압축 방법은 무손실(lossless) 압축 ..

01. 문제점 파이썬에서 정수의 저장 02. 해결방법 비트 마스크(Bit Mask) 파이썬 내장 메소드 to_bytes, from_bytes 01. 문제점 컴퓨터 과학 총론을 공부하면서 컴퓨터가 2의 보수 체계를 어떻게 적용하는지 공부했다(여기를 참조) . 이를 파이썬에서 직접 적용시켜 보기로 했는데 난관에 부딪혔다. 파이썬에서 정수를 표현하는 bit 수는 할당된 메모리 크기에 의해 제한되는 것이 아니라 정수의 크기에 따라 유동적으로 변화할 수 있었다. 즉 저장할 메모리의 크기를 직접 할당해 줘야 하는 C언어나 여타 저수준 프로그래밍 언어와 달리, 파이썬에서는 int형를 사용할 때 overflow나 memory leak 같은 memory 관련 문제에 신경 끄고 온전히 프로그래밍에만 집중할 수 있도록 해주..

01. 2의 보수 ( Two's Complement ) 02. 소수의 표현 ( Fractions in Binary ) 0과 1로 표현되는 2진법 체계는 컴퓨터에서 보편적으로 사용된다. 2진법의 표기, 덧셈 같은 기초적인 내용은 건너 뛰도록 한다. 01. 2의 보수(Two's Complement) 2의 보수는 컴퓨터가 음수를 저장하기 위해 사용하는 정수 표현 체계 중에 하나이다. 4개의 bit로 구성된 머신이 있다고 하자. 이 머신은 2^4개의 경우의 수를 나타낼 수 있으므로 0 ~ 15 범위의 수를 저장할 수 있다. 하지만 음수를 표현해야 한다면 어떨까? 이를 위해서 범위의 절반을 음수에 할당한다. 그렇게 되면 4bit 머신의 경우 -8 ~ 7까지의 수를 저장할 수 있다. 또한 최상위 비트는 부호를 나타..

컴퓨터는 데이터를 저장하기 위해 수많은 비트를 저장할 수 있는 회로들을 가지고 있다. 이 회로 안에 비트를 저장할 수 있고 이 비트 저장소를 컴퓨터의 주기억장치(Main Memory)라고 한다. 01. 메모리의 구성(Memory Organization) 주기억장치는 8bit로 이루어진 셀(cell)이라는 기초 단위들로 구성된다. 8bit로 된 열은 바이트(byte)라고 부르며, 메모리의 한 셀은 보통 1byte의 용량을 갖는다. 가전제품에 내장된 컴퓨터의 메모리는 수백 개의 셀을 갖지만, PC나 스마트폰의 경우 메모리 안에 수십억 개의 셀을 가질 수도 있다.(1billions cell = 약 1GB) 우리는 메모리 셀 안의 비트들이 한 줄로 배열되어 있다고 생각할 수 있는데, 이때 개념적으로 비트의 가장..

어떤 컴퓨터 관련 수업이든 처음은 bit의 이해부터 시작한다. bit(binary digit)는 컴퓨터 안에서 정보를 나타내기 위한 최소 구성 단위로, 0과 1로 이루어져 있다. 여기까지만 들었을 때 '0, 1로 이루어진 숫자구나'라고 생각하기 쉽지만 사실 전류가 끊겼다 이어졌다 하는 전기적인 신호를 우리가 알아보기 쉽게 0과 1로 나타낸 것 뿐이다. 그래서 bit를 0, 1로 나타낸 것과 마찬가지로 False, True로 나타낼 수도 있다. 아무튼 컴퓨터는 비트의 패턴(Patterns of bits)들을 이용해서 정보를 표현한다. 이 비트의 패턴, 즉 정보는 알파벳과 같은 문자를 나타낼 수도 있고 이미지나 소리를 나타낼 수도 있다. 01. 부울 연산(Boolean Operations) 논리(logic)..

프로그래밍을 하다가 트러블이 생기면 항상 해결한 뒤 이쁘게 포장해서 글을 올리곤 했다. 하지만 글 하나를 쓰는데 시간이 너무 오래 걸리기 때문에 짧게 핵심만 담을 카테고리가 필요했다. 👀 문제 정의 이번 팀 과제는 프론트엔드를 바닐라 자바스크립트만을 이용해 구현한다. 일부 DOM 엘리먼트를 변화시키고 싶을 때 getElementById나 querySelector로 특정 요소를 지정해야 하는데, 만약 어떤 DOM 엘리먼트가 로딩 되기 전에 엘리먼트를 선택하려고 하면 아래와 같이 친숙한 오류를 볼 수 있다. 이벤트리스너를 붙이려고 보니 null값이네? 라는 오류다. 해당 라인으로 가서 어떤 코드인지 보자. document.getElementById("btnLogout").addEventListener("cl..

Python기반 백엔드 과정을 배우고 있지만 프로젝트를 하면서 필수적으로 프론트엔드를 구현해야 하기 때문에 자바스크립트를 다루게 됐다. 기초가 없는 상태에서 필요한 자바스크립트 코드들을 구글링한 뒤 머리 깨져 가면서 커스텀하는 건 굉장히 비효율적이다. 그래서 자바스크립트를 기초부터 차근차근 공부해 볼 생각이다. 이 카테고리는 python 등 기본적인 프로그래밍 언어를 알고 있다는 가정 하에 (나한테) 필요한 부분만 정리해서 올릴 예정이다. 00. What is JavaScript? 넷스케이프에서 일하던 브랜든 아이크가 10일만에 설계해 첫번째 버전을 만든 언어인 자바스크립트는 이것저것 허점이 많고 불편해서 당시에는 묻힐 뻔하다가 지속적인 보완과 Ajax, jQuery의 등장으로 지금은 웹개발을 하는데 없..

피그마에는 작업을 도와주는 다양하고 강력한 플러그인들이 있다. 꿀 플러그인 몇가지를 소개해볼까 한다 05. 플러그인 플러그인은 네모와 마름모 등으로 된 저 아이콘을 선택하고 플러그인탭을 선택한 뒤 필요한 플러그인을 검색해 Run버튼을 누르면 실행된다. 1. Open Iconic Icon Set by Iconduck 다양한 아이콘을 제공 이외에도 플러그인에 icon이라고 검색하면 다양한 플러그인이 있으니 필요한 svg파일을 제공하는 아이콘 플러그인을 찾아보는 것을 권장한다. 2. unsplash 더미데이터에 넣을 다양한 사진을 제공 이렇게 사진이 들어갈 요소를 전부 선택한 뒤 프리셋 탭에서 선택해주면 랜덤으로 선택된 카테고리의 이미지가 들어간다 3. Content Reel 카테고리에 따른 더미 텍스트와 다..

이번엔 Figma를 쓰는 가장 큰 이유인 스마트 셀렉션과 오토 레이아웃을 알아보자. 03. 스마트 셀렉션(Smart selection) 생각해보니까 메인 옆에 바로 가성비 카테고리가 있는 것보다 최신 카테고리가 먼저 있는 게 좋을 것 같다. 그럼 어떻게 수정해줘야 할까? 피그마에서는 요소들 간의 간격이 같다면 위 그림처럼 하나 빼서 공간 만들어 주고 그 공간에 다시 넣어주고 할 필요가 없다. 아래를 보자 그냥 드래그해서 전체를 잡아주고 가운데 생긴 분홍색 원을 잡고 드래그해서 위치만 바꿔주면 된다. 이게 피그마에서 지원하는 스마트 셀렉션 기능이다. 드래그한 요소들 사이에 간격이 전부 동일하다면 피그마에서 자동적으로 요소들 간의 관계를 파악해준다. 가운데 |를 드래그하면 요소들 사이의 간격도 조절할 수 있..

네이버를 리뉴얼하기 위해 메인 컬러와 서브 컬러를 이용해 열심히 와이어프레임을 만들었다고 생각해보자. 각 UI요소마다 색상도 열심히 넣어서 완성했는데 알고보니 색상코드가 #0ECC62가 아니라 #03C75A였다. 다시 하나씩 클릭해가며 전부 색상을 바꿔야할까? 아니다. 피그마는 색상을 전체적으로 관리하기 위한 Color Style 기능을 지원한다. 02. 컬러 스타일(Color styles) 간단하게 샘플 사이트 Travlr의 와이어프레임을 만들었다. 사이트 제목과 버튼, 그리고 카테고리 메뉴, 별에 메인 컬러를 주고 싶다. 근데 아직 메인 컬러를 못 정해서 색을 바꿔가면서 느낌을 보고 싶다. 그럴 땐 컬러 스타일을 지정하면 된다. 바꾸고자 하는 요소 하나의 색을 적당히 지정해 준 뒤 Fill탭에서 점 ..