전체 글
-
Vue 개발자가 React로 사이트를 만들어 보았다카테고리 없음 2020. 1. 9. 19:04
들어가며 이용하는 서비스마다 비밀번호 규칙이 달라 오랜만에 접속하는 서비스는 비밀번호를 잊어버려 패스워드를 재설정하는 일이 빈번하게 발생했다. 명색이 개발자인데 서비스를 이용하는데 불편하면 안 되지 해서 패스워드를 관리하는 사이트를 만들기로 결심했다. 기능 정리 비밀번호를 관리하는 데 있어 제일 중요한 부분은 보안이다. 인터넷상에 비밀번호를 그대로 저장하는 것은 위험하니 비밀번호를 암호화 후에 필요할 때마다 복호화하는 기능과 아무나 내 비밀번호 리스트를 보이면 안 되니 로그인 기능이 필요했다. 필요한 페이지는 로그인, 새로 만들기, 목록, 수정/삭제의 4개의 페이지만 필요했고, Database, Auth는 Firebase로 구현했다. create-react-app my-password --template..
-
Mac automator snippet카테고리 없음 2020. 1. 5. 01:00
들어가며 Windows의 경우 응용프로그램 대부분이 Context menu에 편리한 기능을 자동으로 등록을 해주지만, Mac. 은 그런 기능이 거의 없다. 이번 글은 Mac Application에 있는 Automator를 사용하여 조금 더 편리한 작업 환경을 만들어 보는 방법에 대해 알아보고자 한다. Automator 등록 방법 Launchpad에 Automator를 열고(기타에 있을 수 있음) 파일 -> 신규 -> 서비스를 선택 Service Receives(서비스가 받는 선택 항목)를 files or folders(파일 또는 폴더)로 바꾼다. Finder에서 터미널 열기 보관함에서 Run apple script을 등록한다. tell application "Finder" set theWin to (qu..
-
API Response Data 처리의 3R카테고리 없음 2020. 1. 3. 04:23
들어가며 프로젝트 진행하며 가장 많은 시간이 소요되는 부분은 설계 Logic을 세워 개발을 하는 것보다 함수의 이름을 정할 때다. 짧은 일정 내에 결과물을 내놓는 것도 어려운데, 산출물 인계를 위해 함수/변수 이름도 잘 정해야 한다. 특히 API 개발할 때 변수 이름이 얼마나 중요한지 드러난다. API 개발은 Business logic의 따라 복잡도가 다르지만, 단순하게 보면 Query를 질의하여 얻은 Data를 요구 사항에 맞게 가공하여 출력하는 것이 전부다. 문제 파악 기능에 대한 이름 짓기도 어렵고, 일정도 촉박하니 함수 안에 2개 이상의 기능을 구현할 때가 많다. 이렇게 되면 추가/수정 시 다량의 Source code를 수정하게 되거나, 예상하지 못한 문제가 발생한다. 이 문제를 해결하기 위해 여..
-
프런트 개발에 유용한 유틸리티카테고리 없음 2020. 1. 2. 18:45
들어가며 자주 사용하지는 않지만, 특별한 상황에 필요한 유틸리티를 소개한다. Sample로 올려놓은 소스코드를 참고하여, 프로젝트 맞게 함수로 만들어 사용하면 좋다. Crypto-JS AES 활용한 암호화/복호화 주로 암/복호화 처리는 Backend 개발에서 담당하지만, 가끔 디버그 도구로 필요할 때가 있다. 일반적인 경우 Encrypt 된 문자 그냥 사용하기보다 Base64로 Encode 하여 사용한다. brix/crypto-js JavaScript library of crypto standards. Contribute to brix/crypto-js development by creating an account on GitHub. github.com Base 64 Encode/Decode 암호화 작업..
-
자주 사용하는 정규식 패턴카테고리 없음 2019. 12. 26. 19:59
들어가며 정규식은 문자열 검색과 치환 용도로 쓰이며, 회원가입이나 이력서 같은 양식 입력 등에 많이 쓰인다. 매번 정규식을 사용해서 개발하는 것이 아니다 보니, 개발자들 사이에서도 정규식을 다루는 사람이 드물고, 정신건강에 해로우니 필요할 때마다 찾아 쓰라고 조언하는 사람도 있다. 매번 찾기도 불편 하니 개발 시에 자주 사용했던 패턴들을 소개한다. URL Parse 크롤링 데이터 저장 시, API Cors, x-frame-option 등 URL Parse는 다양하게 사용된다. /^((\w+):)?\/\/((\w+)?(:(\w+))?@)?([^\/\?:]+)(:(\d+))?(\/?([^\/\?#][^\?#]*)?)?(\?([^#]+))?(#(\w*))?/g 전화번호에 "-" 입력 회원가입 시 전화번호 입력..
-
2020년 눈여겨 볼만한 프런트엔드 프레임워크카테고리 없음 2019. 12. 23. 18:51
Svelte최근 트렌드 분석을 하다가 알게 된 프레임워크다.공식 홈페이지에 방문하여, Tutorial를 통해 내용을 간략히 살펴보니,Vue의 SFC(Single file component) 제작방법과 유사하다. Svelte의 3가지의 장점은적은 코드 양Virtual dom이 없다.진정한 반응성을 제공한다.여기서 "Virtual dom이 없다"가 제일 관심 가는 내용이었다.최적의 Dom 트리 상태를 유지하기 위해 Virtual dom이 만들어졌는데,Svelte는 Dom과 이전의 데이터와 비교 연산에 많은 패널티가 있다고 말한다. 2019년도 갑자기 관심지수가 높아지고 있다.개인적인 생각으로는 요즘 디바이스 성능이 너무 좋아져서 사실 Virtual dom 이 있든 없든 성능의 차이는 크게 다르지 않다고 생각..
-
Duck typing으로 API를 만들어 보자카테고리 없음 2019. 12. 23. 12:42
이것은 어떤 동물일까? 꽥꽥 소리 내어 울고, 노란색 부리에, 뒤뚱뒤뚱 걸으며, 물갈퀴가 있다. 그렇다. 이건 분명 오리다. Duck typing은 인터페이스를 만들 때 많이 사용하는 방법이다. 인터페이스란 구현 부가 없는 기능에 대해서만 선언한 설계도 같은 것이다. API의 “I”도 interface의 약자이다. 누가 봐도… 나를 어렵게 만드는 말이 하나 있다. 누가 봐도 이해할 수 있는 변수/함수명 개발을 하는 사람이라면 누구나 공감하는 말이 아닐까 싶다. 개발을 잘하는 방법을 다룬 관련 서적에는 항상 등장하는 말이고, 상급자로부터 매번 듣던 말이다. 위문장에서 제일 어려운 부분은 “누가 봐도 ~” 다. 실제로 개발할 때 가장 많이 하는 실수가 기능과 이름이 맞지 않다던지, 어려운 영어 이름을 지어서..
-
내가 vue를 사용하는 이유카테고리 없음 2019. 12. 23. 12:22
“왜? vue를 사용하세요?” 이런 질문들을 종종 받는다. 이에 대한 답변과 제 생각을 정리 해 보고자 한다. 고교시절 홈페이지라는 단어를 처음 들었다. 인터넷이라는 공간에 내가 꾸미고 싶은 대로 만들 수 있고, 사람들과 이야기를 나눌 수도 있고, 이미지도 전송할 수 있고, 심지어 비디오, 오디오도 재생할 수 있다고 한다. 세상에….. 당장 만들어 보자!! 홈페이지를 만들기 위해 처음 배운 것이 html, css이었다. 별로 어렵게 느껴지진 않았다. 그냥 table로 표를 만들고 그 안에 이미지를 배치하면 홈페이지가 되었다. 어느 날, 메일 한 통을 받았다. 내 홈페이지를 보고 메일을 주셨다며, 같이 일을 해보자 하신다. 홈페이지를 만들고 돈을 벌었다. (신난다. 재미있다.) 만들다 보니 코드가 길어지고..