본문 바로가기

개발이야기

 (27)
GraphQL In Action | GraphQL 소개 GraphQL 소개 발명은 필요에서부터 시작된다. 페이스북이 그래프QL을 만들기로 한 이유는 모바일 애플리케이션 개발 시 발생하는 여러 기술적인 문제를 해결하기 위해서였습니다. 하지만 현재 그래프QL이 인기를 얻고 있는 이유는 기술적 문제보다는 커뮤니케이션 문제를 해결하기 때문이다. 커뮤니케이션은 아주 어려운 기술이다. 커뮤니케이션 능력을 키우면 다양한 방면에서 삶이 윤택해진다. 마찬가지로 소프트웨어의 각기 다른 부품 간에 발생하는 커뮤니케이션의 품질을 향상시키면 해당 소프트웨어를 이해하기 쉬워질 뿐만 아니라, 개발, 유지관리, 확장도 쉬워진다. 그래프QL이 판도를 바꿀 수 있다고 생각하는 것도 이 때문이다. 서로 다른 소프트웨어 (프론트엔드와 백엔드)가 커뮤니케이션하는 방법을 바꿔버리는 게임 체인저이다..
CodeDeploy Ubuntu 22.04 오류 CodeDeploy를 사용해서 Github develop 브랜치에 변경이 가해졌을 때 자동으로 배포를 해주는 사이클을 만들어보자. AWS CodeDeploy는 EC2, 서버리스 Lambda 함수 또는 Amazon ECS 서비스로 애플리케이션 배포를 자동화해주는 배포 서비스이다. 1개의 어플리케이션은 여러개의 Deployment 그룹을 가질 수 있다. EC2 인스턴스 Ubuntu 18.04 버전을 선택했다. (22.04 버전으로 이틀동안 삽질을 한 결과 22.04 버전에서 돌아가긴하지만 인증 이슈가 있었다.) EC2 인스턴스에 IAM 역할을 부여했다. 부여한 역할은 위와 같다. + Elastic IP (탄력적 IP)도 부여하고 ssh 접속을 완료했다. 접속한 후에는 EC2 인스턴스 기본 세팅( node, ..
Pre-rendering 기본적으로 Next.js는 모든 페이지를 pre-render한다. client-side JavaScript가 페이지의 HTML을 다 그리는 것이 아니라 미리 각 페이지를 위한 HTML을 생성한다. 각각 생성된 HTML페이지는 최소한의 자바스크립트와 연관되어있는데, Client Side에서는 브라우저에 페이지가 로드되었을 때, 자바스크립트가 페이지를 완전히 완성시킨다. 이 과정을 hydration이라고 한다. hydration 페이지가 브라우저에 로드되고 자바스크립트 코드가 실행되면서 페이지가 인터렉티브 하게 동작하는 상태가 되는 과정 Pre-rendering 방식을 제공하는 Next.js는 우선 HTML 파일을 통해 정적인 화면을 먼저 보여준다. 이후 JS 파일을 로드해와서 화면에서의 클릭 등의 이벤트 ..
객체지향의 사실과 오해 | 7장 코드와 모델을 밀접하게 연관시키는 것은 코드에 의미를 부여하고 모델을 적절하게 한다. - Eric Evans 개념관점(Conceptual Perspective)에서 설계는 도메인 안에 존재하는 개념과 개념들 사이의 관계를 표현 명세 관점(Specification Perspective)에 이르면 사용자의 영역인 도메인을 벗어나 개발자의 영역인 소프트웨어로 초점이 옮겨짐. 명세관점은 도메인이 아니라 실제로 소프트웨어에서 살아 움직이는 객체들의 책임에 초점을 맞춤. 구현 관점(Implementation Perspective)은 실제 작업을 수행하는 코드와 연관돼 있다. 구현 관점의 초점은 객체들이 책임을 수행하는데 필요한 동작하는 코드를 작성하는 것이다. 클래스는 위 세가지 관점을 모두 수용할 수 있도록 개념..
객체지향의 사실과 오해 | 6장 유일하게 변하지 않는 것은 모든 것이 변한다는 사실뿐이다. - Heraclitus of Ephesus 객체지향은 자주 변경되는 기능이 아니라 안정적인 구조를 기반으로 시스템을 구조화한다. 역할,책임,협력을 기반으로 시스템의 기능을 구현하는 책임-주도 설계의 본질을 이해하는 데도 도움이 될 것이다. 기능 설계 대 구조 설계 모든 소프트웨어 제품의 설계에는 두 가지 측면이 존재. 하나는 기능 측면의 설계이고, 다른 하나는 구조측면의 설계이다. 설계의 가장 큰 도전은 기능과 구조라는 두가지 측면을 함께 녹여 조화를 이루도록 만드는 것. 훌륭한 기능이 훌륭한 소프트웨어를 만드는 충분조건이라 한다면 훌륭한 구조는 훌륭한 소프트웨어를 만들기 위한 필요조건이다. 미래에 대비하는 가장 좋은 방법은 변경을 예측하는 것이..
iOS input 태그 focus시 자동 zoom-in 막기 충남대학교 채팅 웹을 개발하면서, ngrok을 이용해 내 핸드폰을 보며 모바일에서 레이아웃을 잡던 중에 신기한 현상을 발견했다. input 포커스시에 자동으로 zoom-in이 먹힌다는 점! 우선 해결방법부터 보자. head태그에 meta 태그를 넣어주면 된다. 페이지가 모바일 크기에 완전히 최적화되어 만들어졌다면 meta 태그를 사용하여 줌을 막을 수 있다. 이제 완전히 해결된 것 같지만, 이렇게되면 페이지의 확대자체가 불가능해진다. 페이지 확대 자체가 불가능하다는 것은 사용자 경험이 좋지 못하다. 다르게 해결해보자. 더 좋은 해결방법은 폰트 크기를 자동 줌인이 발생하지 않은 최소 크기인 16px이상으로 맞추는 것이다. 나는 보통 rem 상대 단위를 사용하는데, html에 font-size:10px을 줘..
객체지향의 사실과 오해 | 5장 의도는 '메시징'이다. 훌륭하고 성장 가능한 시스템을 만들기 위한 핵심은 모듈 내부의 속성과 행동이 어떤가보다는 모듈이 어떻게 커뮤니케이션하는가에 달려있다. - Kay 자율적인 책임 객체지향 공동체를 구성하는 기본 단위는 '자율적'인 객체이다. 자율성이란 자기 스스로의 원칙에 따라 어떤 일을 하거나 자신을 통제해서 절제하는 성질이나 특성이다. 자율적인 객체란 스스로 정한 원칙에 따라 판단하고 스스로의 의지를 기반으로 행동하는 객체이다. 요청을 처리하기 위해 객체가 수행하는 행동을 책임이라고 한다. 적절한 책임이 자율적인 객체를 낳고, 자율적인 객체들이 모여 유연하고 단순한 협력을 낳는다. 협력에 참여하는 객체자 얼마나 자율적인지가 전체 애플리케이션의 품질을 결정한다. 객체지향 세계는 자율적인 객체들의 공..
객체 지향의 사실과 오해 | 4장 우리 모두를 합친 것보다 더 현명한 사람은 없다. - Ken Blanchard 협력이라는 문맥이 객체의 행동 방식을 결정한다. 개별 객체가 아니라 객체들 사이에서 이뤄지는 협력이다. 협력이 자리를 잡으면 저절로 객체의 행동이 드러나고 뒤이어 적절한 객체의 상태가 결정된다. 객체의 모양을 빚는 것은 객체가 참여하는 협력이다. 어떤 협력에 참여하는지가 객체에 필요한 행동을 결정하고 필요한 행동이 객체의 상태를 결정한다. 개별적인 객체의 행동이나 상태가 아니라 객체들 간의 협력에 집중하라. 협력 협력의 본질은 요청과 응답으로 연결되는 사람들의 네트워크이다. 다른 사람으로부터 요청을 받은 사람 역시 자신에게 주어진 일을 처리하던 도중 다른 사람의 도움이 필요할 수 있다. 결과적으로 협력은 다수의 요청과 응답으로..

티스토리툴바