개발 블로깅
-
[2020.05.24] Docker 기초 - React을 Docker로 배포하기개발 블로깅/Server&DataBase 개념 2020. 5. 24. 15:35
작년 쯤 도커 개념과 컨테이너 실행 정도만 공부하고 블로깅 했었는데, 이번에 컨테이너 기반으로 다루는 기술의 중요성을 많이 깨닫고 Docker부터 다시 공부해보려고 한다. #도커라이징 현재 프로젝트 및 개발환경을 도커 이미지로 생성하는 작업이다. 우선 이와 같이 가볍게 express 서버를 하나 생성한다. 해당 서버 및 환경을 도커 이미지로 변경하기 위해서는 도커 파일을 생성하여 실행시켜야 한다. # 리액트 프로젝트 생성 리액트를 써본 개발자들에게 매우 익숙한 create-react-app을 이용해서 리액트 프로젝트를 하나 생성한다. $ create-reate-app react-docker // 도커 컨테이너로 올릴 리액트 프로젝트 생성 # Docker파일 생성 리액트 프로젝트 환경을 구성했으면, 해당 ..
-
[2020.05.13] AWS Online Summit 참여한 내용 간략 정리.개발 블로깅/기타 개념 2020. 5. 14. 09:34
오늘 AWS에서 온라인으로 세미나가 열렸다..! 평소 AWS에 관심이 많은데, 이번에 조금 더 깊게 알아볼 수 있고, 유용한 기술이 무엇이 있을지 알 수 있는 좋은 기회였다. (이것을 듣기 위해, 오늘 연차를 냈다...) 강연 일정 세션은 엄청 많았다. 우선 파트가 여러 개로 나뉘어 있고, 각 시간대 별로 세션 주제가 나뉘어 있다. 한 세션에 총 30분으로 진행되었고, 각 주제 별로 동시에 진행이 되기 때문에, 어떤 것을 들을지 정해서 참석을 해야 했었다. 진행 방식 AWS Online Summit 개막 인사를 해주시는 아마존 CTO. Dr.Werner Vogels 님. 개막 영상을 포함해서, 모든 세션 영상은 라이브가 아닌 녹화본으로 진행되고, 궁금한 점은 채팅이나 FAQ 창에 따로 작성을 하면, 전문..
-
[2020.04.26] Javascript 깊은 복사의 함정... 모르고 사용하다 뒤통수 맞았다...개발 블로깅/오늘의 TIL 2020. 4. 26. 22:32
사이드 프로젝트 진행 중, 내게 엄청나게 스트레스를 안겨준 요소가 있었다. Javascript의 깊은 복사의 함정.. 우선 이 깊은 복사의 함정을 설명하기 위해서, Object 복사의 개념에 대해 간단히 설명을 해보려고 한다. Javascript의 복사 개념 얕은 복사(Shallow copy) 우리가 흔히 알고 있듯이, 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. const person1 = {name:'inyong'}; const person2 = person1; person1.name = 'jung'; // result person2.name // 'ju..
-
[2020.03.14] Express + GraphQL API 기본적인 Apollo서버 구현 (with TypeScript)개발 블로깅/TypeScript 2020. 3. 14. 01:58
이번에 서브 프로젝트를 진행하기 위해, 백엔드를 Express 서버에 GraphQL을 사용하기로 했다. 트레바리에서는 GraphQL을 사용하기 때문에 평소에 많이 접하기는 하지만, 내가 직접 환경을 구성하지 않아 환경 구성을 어떤식으로 하는지는 몰랐는데, 이번 기회에 내가 직접 GraphQL을 사용하는 Express 서버를 구축해 볼 수 있는 좋은 기회였다. TypeScript를 이용한 Express와 GraphQL의 서버 환경을 구축하는 쉬운 튜토리얼을 찾아보려 했지만 그러한 글을 찾아보기가 힘들었던 것 같다. 그래서 이번에 내가 직접 서버를 구현해 보면서 진행한 과정을 이해하기 쉽도록 정리해보려고 한다. TypeScript를 사용하기 위한 기본적인 구성 프로젝트 세팅 우선 프로젝트로 사용할 폴더를 ..
-
[2020.03.10] React native cil IOS 기기에 배포까지 겪은 이슈사항 정리개발 블로깅/기타 개념 2020. 3. 11. 02:29
리액트 네이티브로 앱 개발은 처음 해보는 분야라서, 초반에 고생을 많이 할 것은 짐작하고 있었으나... ㅜㅜ 겨우 첫 예시 프로젝트를 아이폰에 배포하는 것부터 이틀이나 걸릴 만큼 빡셀 줄이야... (사실 말이 이틀이지, 자기 전에 한 두시간만 삽질한 거라..) 그럴리는 없겠지만, 혹시나 나와 같은 부분에서 고생하고 있는 사람들을 위해 내가 겪었던 이슈사항을 정리해보려고 한다. library not found for -lDoubleConversion XCode에서 Build 시, 위와 같은 library not found - IDoubleConversion 에러가 뜬다면, 아마 해당 XCode 프로젝트를 ".xcodeproj" 파일로 열어서 Build를 실행시켰을 것이다. 나 같은 경우에는 이 파일 대신,..
-
[2020.01.05] Next.js에서 document가 undefined으로 나타나는 이유개발 블로깅/Next.js 2020. 1. 5. 15:39
이번에 트레바리에서 각종 이벤트와 마케팅, 모임 안내 등 여러 수신 알림 채널을 계획 중이다. 기존에는 이러한 정보를 수신받기 위한 채널이 문자전송 밖에 없었는데, 앞으로는 문자뿐 아니라 이메일과 다른 요소 등 전송 채널을 더 넓혀서 유저들이 누릴 수 있는 유용한 정보를 놓치지 않고 더 최대한 많은 혜택을 누릴 수 있도록 하기 위함이다. 그래서 이러한 마케팅 정보 수신 안내를 기존 멤버들에게 알리고 동의를 받고자, '트레바리 마케팅 정보 통합 수신 동의' 기능을 구현하기로 했는데, 해당 기능을 구현 중 맞닥뜨린 이슈사항이 하나 있었었으니...바로 document가 undefined로 나타나는 것이었다.. 처음이 이러한 현상이 어떻게 일어날 수 있는지 몰랐으나, 알고보니 내가 CSR과 SSR의 동작원리에 ..
-
[2019.11.17] ES2019(ES10) 새로운 기능을 습득하자~!개발 블로깅/Modern script 2019. 11. 17. 17:31
# Object.fromEntries 배열로 가지고 있던 값을, 알맞게 매칭시켜서 obj 형식으로 변환시킨다. 첫 번째 배열 인자를 key, 두 번째 배열 인자를 value로 한다. 기존의 Object.entries 기능의 반대 기능을 한다. const entry = Object.entries({name:'inyong', age: 27, family: ['father', 'mother', 'brother', 'sister']}); console.log(entry); // [['name','inyong'],['age',27],['family',['father','mother','brother','sister' ]]]; const fromEntry = Object.fromEntries(entry); cons..
-
[2019.11.02] base64 Image Data를 File 객체로 변환하는 법개발 블로깅/오늘의 TIL 2019. 11. 2. 12:45
프로필 이미지를 적용하는 기능을 구현 중, 엄청나게 유용한 라이브러리를 찾아냈다. https://github.com/mosch/react-avatar-editor mosch/react-avatar-editor Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. - mosch/react-avatar-editor github.com 이 라이브러리를 쓰면, Input File 객체로 받은 이미지 데이터를, 유저가 지정한 부분만 Base64인코딩을 통해 잘라내어 반환하게 된다. 그러나 AWS S3 버킷에 저장하기 위해서는 File객체가 필요로 한데, 반환받은 Base64 ..