분류 전체보기
🕵️♂️ 자동완성 모듈의 법칙
🕵️♂️ 자동완성 모듈의 법칙
2019.08.22자동완성 모듈의 법칙 글자를 알 수 있는 값으로 자동완성하는 모듈은 겉으로 보기에는 쉬워보인다. 그러나 많은 UI들이 이를 제대로 수행하지 못하고 있다. 이에 대해 개별적으로 불만을 제기하기 보다는, 주로 지켜지지 않는 몇 가지 법칙들을 적어보려한다. 이러한 법칙들이 최선이 아닌 경우가 있을 수도 있다. 그러나 이러한 법칙을 지키지 않는 경우에는 합당한 이유가 있어야한다. (예를 들어, 미국의 주의 리스트처럼 어떠한 법칙은 입력 영역이 고정된 집합 안에 있는 값으로 채워지지 않으면 적용하지 않는다.) 이러한 법칙들을 따른다면, 적어도 정상 수준의 경험을 줄 수 있을 것이다. 정확하게 일치하는 것들은 항상 먼저 배치한다. 만약 사용자가 찾으려는 대상을 정확하게 입력했다면, 다른 대상들은 항상 사용자가 입력..
[블록체인] 🔑 공개키 암호 방식
[블록체인] 🔑 공개키 암호 방식
2019.08.17공개키 암호 방식 블록체인을 공부하면서 많이 나오는 개념인 공개키 암호 방식에 대해 정리한 내용이다. 블록체인 플랫폼에 대한 글을 보다보면 공개키 암호 방식Public-key Cryptography에 대한 내용이 많이 나온다. 해당 암호화 방식에 대해 간단하게 알아보자. 대칭키 암호 방식 우선 공개키 이전의 암호 방식이었던 대칭키 암호 방식Symmetiric-key Cryptography에 대해 알아보자. 대칭키 암호화 방식은 말 그대로 암호화 키와 복호화 키가 같은 암호화 방식을 뜻한다. 대칭키 암호 방식은 암호화한 내용을 누군가에게 보내는 과정에서 내용을 확인하기 위해 암호키도 같이 보내게 된다. 그러나 이 암호키를 보내는 과정에서 암호키가 노출될 경우 바로 정보를 해독할 수 있기 때문에 보안이 매우..
Prisma와 Docker로 간단한 GraphQL 서버 만들기
Prisma와 Docker로 간단한 GraphQL 서버 만들기
2019.08.16해당 글은 prisma-postgres-docker-boilerplate를 기반으로 작성되었습니다. 글을 쓰기 까지 프론트 엔지니어가 토이 프로젝트를 진행할 때 가장 막히는 부분이 바로 백앤드 부분이다. 백앤드는 언어도 다양하고, 프론트앤드와 같은 언어를 쓴다고 Express를 쓴다고, 일이 쉽게 풀리지는 않는다. DB도 짜야하고 서버 설정도 해야하고... 토이 프로젝트 하나 하자고 배보다 배꼽이 커지는 격이 된다. 나도 이번 인턴 프로젝트를 하면서 같은 문제를 겪었다. 프론트로 짤 수 있는 건 다 짰고, 데이터의 저장과 읽기만 할 수 있으면 됐다. 물론 프론트만 이용해서 .json 파일을 데이터베이스처럼 사용할 수도 있지만 그래도 실제 데이터베이스는 써야하지 않을까라는 자그만한 오기가 있었다. 그러다 ..
[디자인 패턴] 👆 Monorepo란?
[디자인 패턴] 👆 Monorepo란?
2019.08.16👆 Monorepo tutorial Monorepo란? 다양한 모듈을 여러개의 레포지터리로 관리하지 않고, 하나의 레포지토리로 관리하는 것을 의미한다. Monorepo를 쓸 상황이 어떤 것이 있을까? 일단 가장 간단한 예시로는 프론트 엔드와 백엔드를 하나의 레포지토리에서 관리하는 것이 있다. 다음으로는 각 프로젝트에서 NPM 모듈 만들어가면서 프로젝트를 진행하는 경우도 있다. 마지막으로 웹과 앱을 만들때 웹 혹은 앱에서 사용했던 로직 혹은 모듈을 공유하기 위해 Monorepo를 쓰기도한다. Monorepo의 장점 통일성이 생긴다 - 여러개의 리포지토리로 관리될 경우 다른 리포지토리의 로직을 보게될 기회가 많이 없기 때문에 코드가 통일되지 않고 중구난방이 된다. 여러 리포지토리로 관리될 경우 같은 기능을 ..
[Docker] 🐋 Docker 훑어보기
[Docker] 🐋 Docker 훑어보기
2019.08.10Docker란 무엇인가? Docker는 container 기반의 가상화 도구이다. 계층화된 파일 시스템을 사용하여 가상화된 container의 변경사항을 모두 추적하고 관리한다. 이를 통해 container의 특정 상태를 항상 보존해두고, 필요할 때 언제 어디서나 실행할 수 있도록 도와주는 도구이다. docker는 가상 머신의 단점은 극복하면서 장점만을 극대하는 결과로 나온 가상화 어플리케이션이다. Docker는 단순 가상 머신을 넘어서 환경에 구애 받지 않고 어느 플랫폼에서나 재현가능한 Application Container를 만드는 것이 목표이다. 예를 들어보자, OSX를 사용할 때 내가 현재 사용하지 않는 ruby, node, mysql 같은 것들이 뒤에서 돌아가면서 내 메모리와 CPU 파워를 차지..
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
2019.08.10Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Functional Programming 이전까지 가장 유명한 코딩 패러다임은 OOP(Object Oriented Programming)이었다. JavaScript에서 Function의 종류는 다음과 같다. Pure Functions 전역 변수를 건드리지 말아야한다, parameter는 reference로 넘어가기 때문에 mutate되지 않는다. High Order Functions reusability를 위해 쓰이는 함수로, 내가 parameter를 집어 넣었을 때 비로소 완성되는 함수이다. Callbacks and Higher Order Functions Higher-order funct..
19.08.01
19.08.01
2019.08.01
[JavaScript] JavaScript의 기본 원리
[JavaScript] JavaScript의 기본 원리
2019.08.01Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Principles of JavaScript Global Execution Context ( 전역 실행 환경 ) const num = 3; function multiplyBy2 (inputNumber) { const result = inputNumber*2; return result; } const name = "Will" 해당 코드를 실행하면 어떤 일이 일어나는가? num이라는 변수 3을 저장한다. multiplyBy2라는 함수를 생성한다. ( 함수 안으로는 절대 들어가지 않는다 호출하지 않는 이상 ) name이라는 변수에 "Will"을 저장한다. JavaScript의 Thread Sing..
[HTML] WAI-ARIA란?
[HTML] WAI-ARIA란?
2019.07.30최근 Vue.js로 Auto Completion(혹은 Auto Suggestion)모듈을 만드는 과정에서 여러 라이브러리에서 WAI-ARIA 이라는 키워드가 계속 나와서 이를 정리해보았다. WAI-ARIA란? WAI-ARIA의 정의를 위키피디아에서 찾아보자. WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아 가장 중요한 키워드는 접근성(Accessibility, A11Y)이다. 과거 사이트를 조작하기 위..
[해커톤] 👨💻 오픈핵 2019
[해커톤] 👨💻 오픈핵 2019
2019.06.292019.06.26 ~ 2019.06.29 3박 4일동안 진행된 오픈핵 2019에 대한 후기글입니다. 🙋 오픈핵 오픈핵은 SW중심대학의 학생들을 대상으로 하는 해커톤이다. 내가 군대 갔다 온 사이에 학교가 SW중심대학이 되어버려서 참여하게되었다. 오픈핵은 최근에 참여했던 네이버 핵데이와 좀 다른 방식으로 진행되었다. 네이버 핵데이는 멘토가 선정한 주제를 바탕으로 아이디어를 키워나가는 방식이다. 따라서 어느 정도 ML, Web, App 등 기술 스택이 정해져 있는 상태로 개발을 시작한다. 대신 해당 분야를 정말 잘 아는 참가자들이 많이 지원하고 선발되어 참가한다. 오픈핵은 큰 주제도 없다. 그냥 만들고 싶은 것을 만드는 해커톤이다. 운영진에서도 의미있는 것 만드려고 노력하지 말라고 강조하기까지해서 여러 팀..
Q. 정렬 알고리즘에 대해 설명해주세요.
Q. 정렬 알고리즘에 대해 설명해주세요.
2019.06.03Q. 정렬 알고리즘에 대해 설명해주세요. Goal 정렬 알고리즘의 개념을 설명할 수 있다. 정렬 알고리즘의 종류에 대해 설명할 수 있다. 정렬 알고리즘의 개념 정렬 알고리즘이란 데이터들이 주어졌을 때 이를 정해진 순서대로 나열하는 것 얼마나 효과적으로 해결하는 지가 정렬 알고리즘의 핵심 정렬 알고리즘이 중요한 이유 데이터가 정렬되어 있으면 이진탐색이라는 강력한 알고리즘을 사용할 수 있다. 대표적인 정렬의 종류 실제 응용에서는 상황에 따라 두 가지 이상의 정렬 방법을 사용하는 경우가 많다. 정렬 대상이 특정 크기 이하로 단편화될 때까지는 퀵 정렬을 쓰다가, 삽입 정렬을 쓴다던가, 특정 횟수 이상 재귀호출이 발생하면 O(nlgn)의 힙 정렬을 사용한다. 버블정렬(Bubble Sort) 방법 1번째와 2 번째..
[JavaScript] Synchronous, Asynchronous, Blocking, Non-blocking
[JavaScript] Synchronous, Asynchronous, Blocking, Non-blocking
2019.06.02Simplified matrix of basic Linux I/O models 해당 주제 관한 가장 유명한 표입니다. x축, y축의 각각의 의미를 알아보고 둘의 조합에 해당하는 예시를 이용해서 이해를 해보겠습니다. Blocking / Non-blocking Blocking / Non-blocking은 호출된 함수가 바로 return을 하는 지 마는 지가 관심사입니다. Blocking I/O Model 호출된 함수가 자신이 할 일을 모두 마칠 때까지 제어권을 계속 가지고서 호출한 함수에게 제어권을 바로 돌려주지 않으면 Blocking입니다. Wait Queue에 들어갑니다. Non-blocking I/O Model 호출된 함수가 자신이 할 일을 채 마치지 않았더라도 바로 return해서 제어권을 건내주어 ..