일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 스코프
- AWS
- MongoDB
- JS
- 네비게이션
- 네이티브
- 알림
- scope
- navigation
- 디자인
- 레이아웃
- 배포
- graphql
- 면접
- EC2
- Notification
- Express
- NATIVE
- 카카오
- ubuntu
- 후기
- 자바스크립트
- React
- Background
- 리액트
- Python
- github
- 변수
- Push
- JavaScript
- Today
- Total
어서와, 개발은 처음이지?
jenkins는 CI 도구로, 지난 글에 이어서 이번에는 github과 jenkins를 연동하여 push 완료 후 배포 작업이 실행되도록 구성하겠습니다. 1. Jenkins 설치 우선 공식 다운로드 페이지에 접속하여 원하는 버전을 선택하고 설치방법을 따릅니다. 저는 ubuntu를 사용하고 있으므로 아래 명령어를 사용하겠습니다. $ wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add - $ deb https://pkg.jenkins.io/debian-stable binary/ $ sudo apt-get update $ sudo apt-get install jenkins 2. 포트 설정 젠킨스는 8080번 포트..
자바스크립트는 웹페이지를 동적으로 변화시키기 위해 태어났고, 이러한 태생 덕분에 필연적으로 비동기처리 형태를 갖게됐습니다. dom 조작을 위해 javascript 코드가 동작하는 와중에도 웹 페이지가 멈추지 않도록 해야했기 때문이죠. 이번 글에서는 자바스크립트에서 비동기를 처리하는 방식인 callback과 callback의 문제점, ES6에 포함된 promise가 이를 어떻게 해결하는지에 대해서 알아보겠습니다. (비동기가 어떻게 동작하는지에 대한 내용은 추후에 따로 다루겠습니다. 이번 글에서는 callback과 promise에 대한 부분만 살펴보겠습니다.) 1. 비동기와 callback 자바스크립트는 싱글 스레드로 동작합니다. 그럼에도 javascript가 병렬적으로 비동기 코드를 실행하는 것처럼 보이는..
지난 글에 이어서, 이번에는 master 브랜치에 직접 push를 방지하고, pull request에서 리뷰어들의 동의(approve)를 얻었을 때 merge 할 수 있도록 설정하는 과정을 알아보겠습니다. 1. 개요 협업 문화가 활발해지면서 유지보수성(maintainable)의 중요성 또한 높아졌습니다. 이에 따라서 코드 스타일을 통일하고, 리뷰 문화를 통해서 개발에 대한 생각과 철학을 일치시켜, 마치 '팀'이 하나의 지성체가 되어 개발하는 듯한 환경을 만들기 위해 개발자들은 여러가지 협업 프로세스를 만들어나가고 있습니다. 이전 글에서는 git을 통한 형상관리 프로세스에서 코드 스타일(컨벤션)을 일치시키고, 테스트 코드 작성을 장려하는 프로세스를 구축하는 방법에 대해 알아봤는데, 이번 글에서는 push를..
최근에 시간적 여유가 생겨서 개발 외에 다른 사항에도 투자할 시간이 생겼습니다. 그에 따라 이번에는 node 프로젝트의 배포 프로세스를 구성하는 과정을 기록하고자합니다. 1. 개요 오픈소스가 등장하고, IT 업계의 생태계 규모, 성숙도, 접근성이 높아지면서 바야흐로 협업의 시대가 도래했습니다. 그에 따라 컨벤션, 테스트 코드 등의 개발 요소에 대한 중요성도 높아지게 됐는데, 아직도 통상 '귀찮다' 라는 이유로 마음 한 구석의 불편함을 무시한 채 잠재적 기술 부채를 키워가는 사람들이 많고, 저 또한 그랬습니다. 하지만 고맙게도, 우리는 협업 단계에서 이런 중요한 요소들을 지킬 수 있는 환경을 형상관리 도구를 사용하여 쉽게 구축할 수 있습니다. 지금부터 git 환경에서 이런 사항들을 자동으로 검증할 수 있는..
이전 글에 사용한 ftp-kr이 이래저래 사용성이 좋지 않아서 다른 플러그인을 사용하게됐는데,이번 글에서는 vscode에서 SFTP 플러그인을 사용하여 서버와 코드를 동기화 할 수 있도록 하는 방법을 알아보겠습니다. 1. SFTP 플러그인 설치 vscode의 extensions 메뉴에서 sftp를 검색하여 설치합니다. [extensions 검색] 2. 설정파일 생성 다음으로 서버와 동기화 할 폴더를 workspace에 추가해줍니다.이 글에서는 sftp-test라는 이름으로 진행하겠습니다. [workspace 추가] 다음으로 F1 키를 눌러서 상단 검색창을 활성화 한 뒤, sftp 키워드를 입력하면 설정파일을 생성해주는 Config 명령을 선택할 수 있습니다. [sftp config] 위 Config를 클..
이전에 플러스 친구와 외부 API 연동에 관한 글을 작성한 적 있습니다.하지만 지난 2년동안 플러스 친구에 많은 변화가 생겼는데요. 카카오 플러스 친구의 명칭이 카카오 채널로 바뀌고, 챗봇 세팅 방식이 기존 [카카오 플러스 친구 - 외부 API 연동] 구조에서 오픈빌더가 추가되어 [카카오 채널(구 플러스 친구) - 카카오 i 오픈빌더 - 외부 API 연동] 구조로 바뀌었습니다. 이번 글에서는 오픈빌더의 챗봇 시나리오 관리 기능을 간단히 소개하고 외부 API를 연동하는 예제를 다뤄보겠습니다.(연동파트는 5번 항목부터 보시면 됩니다.) 1. 블록 블록은 오픈빌더에서 질의/응답을 관리하는 최소 단위로, 사용자의 발화와 챗봇의 대답을 입력할 수 있습니다. 예를들어 인사라는 블록을 만들고 인사에 해당하는 사용자 ..
간만에 기획 카테고리에서 일반 자바스크립트 글로 돌아왔습니다. 당분간 프로토타입(Prototype), 비동기 : 콜백(Callback)/프로미스(Promise), 제네레이터(Generator), async await에 대한 내용을 작성할 예정인데, 이들에 대해서 일반적으로 다루지 않는 지식들을 좀 더 깨우치면 기획 카테고리에 추가로 작성하겠습니다. 1. 프로토타입 명세에 따르면 자바스크립트 객체에는 [[Prototype]] 이라는 내부 프로퍼티(프로토타입 링크)가 있고, 다른 객체를 참조하는 레퍼런스로 사용합니다. 객체에서 프로퍼티를 탐색할 때 객체 내에 프로퍼티가 존재하지 않으면 undefined를 출력하고 끝나는게 아니라 [[Prototype]] 참조를 따라가면서 프로퍼티가 존재하는지 탐색합니다.(프..
2 0 1 9 . . . 연말에 하는 드라마가 시상식에서 수상할 확률이 높듯, 작년을 돌이켜보면 가장 큰 이슈는 이직이 아니였나싶다. 결론적으로 현 직장을 계속 다니는 중이지만 성장을 위해 다음으로 나아갈 방향에 대해 고민과 정보를 얻을 수 있었다. 연차는 쌓여가는데 천상계를 보고있자면 아직도 심해 탈출은 먼 길처럼 느껴진다. 해야할 일은 많고 흘려보낸 시간도 많다. 앞으로는 좀 더 계획적으로 살아보자. 그 시작으로, 스스로 편승하지 않기위해 공개된 장소에서, 나에게 약속하는 마음으로 회고와 목표를 작성해본다 1. 오픈브레인(Open Brain) 1-1. 총평 지난 1년 동안 일상에 빠짐없이 스며들었던 일을 꼽자면 오픈브레인 스터디 활동이다. 오픈브레인은 2018년 설립되어, 개발과 관련된 tech 정보..
이번 글에서는 자바스크립트 this가 어떻게 동작하는지 알아보겠습니다. 프로토타입을 먼저 쓸지, this를 먼저 쓸지 고민했는데 아무래도 this가 좀 더 쉬울 것 같네요 1. 오해 흔히(java에서) 클래스 내에서 사용하는 this 문법은 클래스(자세히는 인스턴스화 된 객체) 자기 자신을 뜻합니다. javascript에서도 this문법이 존재하는데, 하필 'java' script라는 비슷한 이름에, this가 존재하니 클래스 내 this처럼 동작을 할 것 같은 오해를 불러일으킵니다. (자바 안쓴지 너무 오래되서 용어 혼란이 있을 수 있습니다. 잘못된 부분은 댓글로 남겨주세요!) 물론 javascript에서 function과 this 문법, new 키워드를 사용해서 '클래스와 객체 생성' 형태를 묘사(다..
이번 글에서는 자바스크립트의 클로저(Closure) 현상에 대해서 알아보겠습니다. 일전에도 클로저에 대한 글을 작성한 적 있는데, 할머니가 이해할 수 있도록 리팩토링 하는 차원에서 새로 작성해보겠습니다. 1. 지극히 통상적인 설명 통상 클로저에 대한 예를 대표하는 코드는 아래와 같습니다. var name = "홀롤롤롤롤"; function outer() { /* 아우터 */ var name = "yuddomack"; function inner() { /* 이너 */ return name; } return inner; } var innerFunc = outer(); var myName = innerFunc(); console.log(`name : ${myName}`); // name : yuddomack ..