2019/08
[해커톤] 👨💻 한·중 해커톤 및 해외교육
[해커톤] 👨💻 한·중 해커톤 및 해외교육
2019.08.302019.08.23 ~ 2019.08.28 5박 6일동안 진행된 한·중 해커톤 및 해외교육에 대한 후기글입니다. 과거에 작성했던 2019 오픈핵에서 기회를 얻어 5박 6일동안 중국의 닝보, 항주로 한·중 해커톤과 해외교육을 다녀왔다. 여름 방학동안 인턴을 하게되어서 전날인 22일까지 인턴 일정을 마치고 다음날 인천 공항으로 향했다. 2019 닝보 오픈소스 한·중 해커톤 우리팀은 오픈핵때 내가 속한 팀이였던 Keyboard Hunter팀의 나와 지은이와 WICO팀의 준모, 준식, 지인이가 섞이게 되면서 중국에 가기 전까지 구체적인 주제를 결정하지 못했다. 오프라인에서 만난 지는 얼마 안 되었지만 팀의 캐미가 잘 맞아서 첫 날 새벽까지 회의를 한 결과 "유기된 반려동물을 줄이자"는 좋은 주제를 찾게 되었다...
노션으로 개발자 포트폴리오를 만들어 보았다.
노션으로 개발자 포트폴리오를 만들어 보았다.
2019.08.29작년 말에 "나만의 개발자 포트폴리오 만들기"라는 개발자 포트폴리오 관련 글을 작성했었다. 진행한 프로젝트라고는 하나밖에 없었지만 미리미리 준비해야겠다는 마음에 여러 레퍼런스들을 보고 만들었던 기억이 난다. 그 이후로 개인프로젝트와 팀프로젝트를 진행하고, 대문짝만하게 풀스택 개발자라고 써놓았는데 프론트엔드 엔지니어로 확실하게 노선을 정했으니 포트폴리오를 수정해야했는데 너무 예전에 만든 프로젝트라 빠른 시일 내에 내가 원하는 결과를 내기는 어려워보였다. 그래서 예전에 잠깐 노션Notion을 이용해서 포트폴리오를 만든 예시를 봤던 기억이 났다. 팀 협업 도구과 개인 생산성 도구로 계속해서 노션을 이용해왔기 때문에 노션으로 포트폴리오를 만들어보기로 결정하고, 하루정도를 투자해서 포트폴리오를 완성했다. 완성하면..
[Vue.js] 🖖 Vue.js 기초 지식
[Vue.js] 🖖 Vue.js 기초 지식
2019.08.22[Vue.JS 2.0] 소개 및 시작하기 Vue는 다른 프레임워크나 라이브러리에 비해 신생언어 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다. 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다. 처음 시작하는 단계의 과정이 복잡하다. 한글화가 잘 되어있다. React보다 성능이 뛰어나다. React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.) 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다. SSR이 지원된다. HTML Hello, {{ name }} JS var app = new Vue({ el: '#app', data: { name: "geon" }, }); [Vue.JS 2.0] Dir..
🕵️♂️ 자동완성 모듈의 법칙
🕵️♂️ 자동완성 모듈의 법칙
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..