본문 바로가기

전체 글

개발자에게 전달하는 핸드오프 피그마로 핸드오프 링크 만들기 핸드오프 전용 페이지 제작 개발자가 봐야하는 레이어들만 따로 저장 Zeplin으로 핸드오프 링크 제작하기 zeplin.io 접속 후 무료 계정 으로 회원가입 및 로그인 다시 피그마로 가서 community에서 zeplin 플러그인 다운 connect zeplin account 를 누르면 오른쪽과 같은 문구와 함께 새로운 브라우저가 열린다. zeplin으로 export zeplin 앱 다운로드 처음 open zeplin 을 클릭하면 프로젝트가 없다고 나오므로 프로젝트를 생성한다. 그리고 다시 프레임을 선택하고 export를 해주면 만든 zeplin 프로젝트에서 확인이 가능하다. 피그마의 핸드오프와 달리 zeplin에서 아이콘을 사용하기 위해서는 피그마에서 선작업이 필요하다. .. 더보기
피그마 프로토타이핑 적용하기 프로토타이밍의 목적 1. 사용자 테스트시 활용 2. 팀원들과 커뮤니케이션을 위해 위와 같은 과정으로 프로토타입 타이핑이 완성된 것을 지인에게 링크로 공유할 수 있ㄷ다. 적용하기 프로토타입 탭을 선택 후 시작 프레임 선택 위와 같은 과정으로 어디로 연결시켜 줄지 설정 더보기
종합 실전 예제 3. 이커머스 앱 UI 디자인 오픈소스 템플릿을 활용한 UI 디자인 기초 작업 아이폰 11 기준 프레임 설정 community에 ios ui kit 또는 android ui kit 또는 web design ui kit으로 검색 필요한 컴포넌트를 복사 붙여넣기로 가져온다. 기본 아이콘은 Father Icons 라는 플러그인 사용 Alt 키를 눌러 가운데 정렬을 편하게 한다. 위와 같은 방식으로 중간 점검 가능 홈화면으로 시안 작업하기 기본적으로 대표 프레임을 하나 선택한 후 완성하고 다른 프레임 화면들을 구성 백그라운드 컬러를 약간 아주 약간 회색으로 두고 탭bar를 완전 흰색 으로 입력폼에 그림자를 입히면 가시성이 좋다. 텍스트와 도형을 그룹화 하려면 cmd+ g 디자인 시스템 만들기 제품 상세 페이지 디자인 상단 인디케이터 위치 고.. 더보기
AWS 람다 사용하기 이번에는 S3에 올린 이미지를 리사이징한 후 줄어든 이미지를 다시 S3에 저장해보겠습니다. 사용자가 사이즈가 너무 큰 이미지를 올렸을 경우, 적절한 크기와 용량으로 이미지를 변경하는 것입니다. 이미지 리사이징은 CPU를 많이 사용하는 작업이어서 람다로 분리했습니다. nodebird 폴더 외부에 aws-upload 폴더를 만든 후 package.json을 작성합니다. handler 함수가 람다 호출 시 실행되는 함수입니다. 매개변수로 event와 context, callback이 주어집니다. event는 호출 상황에 대한 정보가 담겨 있고, context는 실행되는 함수 환경에 대한 정보가 담겨 있습니다. 직접 console.log해서 어떠한 정보들이 들어 있는지 확인해보는 것이 좋습니다. callback.. 더보기
AWS S3 사용하기 이 장에서는 서버리스 아키텍처와 노드를 함께 사용하는 방법을 소개합니다. 이미지를 업로드한 후, 리사이징해서 클라우드 저장소에 업로드할 것입니다. 선호하는 클라우드 서비스에 따라 16.2절(AWS)이나 16.4절(GCP) 중 하나를 선택해서 진행하면 됩니다. 서버리스 이해하기 서버리스는 영어로 ‘serverless’입니다. ‘server(서버)+less(없는)’이지만, 사실 서버가 없는 것은 아닙니다. 서버를 클라우드 서비스가 대신 관리해주므로 개발자나 운영자가 서버를 관리하는 데 드는 부담이 줄어든다는 의미입니다. 즉, 개발자는 자신의 서비스 로직을 작성하는 데만 집중할 수 있게 되는 것입니다. 서버리스 컴퓨팅을 할 때는 이전 장의 AWS EC2나 구글 컴퓨트 엔진(Google Compute Engin.. 더보기
AWS light sail 사용해서 배포하기 aws의 light sail 로 들어가서 create instance 클릭 인스턴스 위치 선택 화면에서 원하는 지역을 고릅니다. 기본적으로 서울이 선택되어 있는데, 여러분의 위치와 가까울수록 속도에 이점이 있습니다. 블루프린트는 노드를 선택하면 됩니다. 인스턴스 화면에 나오는 퍼블릭 IP에 브라우저로 접근하면 Congratulations! 화면이 뜹니다. 기본적으로 비트나미(Bitnami) 서버가 실행되고 있는데, 이 서버를 종료하고 우리의 NodeBird 서버를 띄울 예정입니다. 인스턴스 화면에서 Connect using SSH(SSH를 사용하여 연결) 버튼을 누릅니다. 브라우저 새 창에서 Lightsail용 콘솔이 실행됩니다. 이제 이 SSH를 사용해 명령어를 입력합니다. 이 SSH는 Lightsai.. 더보기
서비스 운영을 위한 패키지[redis, nvm] connect-redis 멀티 프로세스 간 세션 공유를 위해 레디스와 익스프레스를 연결해주는 패키지입니다. 기존에는 로그인할 때 express-session의 세션 아이디와 실제 사용자 정보가 메모리에 저장됩니다. 따라서 서버가 종료되어 메모리가 날아가면 접속자들의 로그인이 모두 풀려버립니다. 또한, Warning: connect.session() MemoryStore is not designed for a production environment, as it will leak memory, and will not scale past a single process라는 경고 메시지도 발생합니다. 이를 해결하기 위해 세션 아이디와 실제 사용자 정보를 데이터베이스에 저장합니다. 이때 사용하는 데이터베이스가 레.. 더보기
서비스 운영을 위한 패키지[pm2, winston, helmet, hpp] pm2 이 패키지는 ‘개발할 때 nodemon을 쓴다면, 배포할 때는 pm2를 쓴다’는 말이 있을 정도로 유용합니다. 가장 큰 기능은 서버가 에러로 인해 꺼졌을 때 서버를 다시 켜주는 것입니다. 또 하나 중요한 기능은 바로 멀티 프로세싱입니다. 멀티 스레딩은 아니지만 멀티 프로세싱을 지원해 노드 프로세스 개수를 한 개 이상으로 늘릴 수 있습니다. 기본적으로는 CPU 코어를 하나만 사용하는데, pm2를 사용해서 프로세스를 여러 개 만들면 다른 코어들까지 사용할 수 있습니다. 클라이언트로부터 요청이 올 때 알아서 요청을 여러 노드 프로세스에 고르게 분배합니다. 그럼 하나의 프로세스가 받는 부하가 적어지므로 서비스를 더 원활하게 운영할 수 있습니다. 단점도 있습니다. 멀티 스레딩이 아니므로 서버의 메모리 같은.. 더보기

티스토리툴바