전체 글 (159) 썸네일형 리스트형 [Javascript] - 내장 클래스 확장하기 내장 클래스 확장하기 -Array, Map 같은 내장 클래스도 확장 가능하다 위 예제를 보면 filter, map 등의 내장 메서드가 상속받은 클래스인 PowerArray의 인스턴스를 반환한다. 이 객체를 구현할 땐 내부에서 객체의 constructor 프로퍼티를 사용한다. 즉 arr.constructor === PowerArray의 관계를 갖는다. arr.filter가 호출될 때 내부에선 기본 Array가 아닌 arr.constructor(PowerArray)를 기반으로 새로운 배열이 만들어지고 여기에 필터 후 결과가 담긴다 이렇게 되면 PowerArray에 구현된 메서드를 사용할 수 있다는 장점이 생긴다. Symbol.species 특수 정적 getter인 Symbol.species를 클래스에 추가할.. AWS를 이용하여 프로젝트 배포하기 (with pm2, NGINX) 이번에 개인 프로젝트를 진행하면서 배포도 진행을 하게 되었다 필자는 Next와 Express를 이용한 개인 프로젝트를 배포해야 했고 가비아에서 도메인을 구입한 상황이다 https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home ap-northeast-2.console.aws.amazon.com 위 링크에 들어가서 인스턴스 시작을 할 것이다. 인스턴스 시작을 누르면 생성창으로 이동하게 된다 os는 Ubuntu 22.04를 선택했다 여기서 주의 할 점은 프리티어 (회원가입 후 12개월 무료) 를 선택해야 과금이 되지 않는다 . 또한 인스턴스 유형도 t2.micr.. [회고] - MBTI 명탐정 (테오의 스프린트 14기) 우연히 좋은 기회로 시니어 프론트엔드 개발자 테오 님이 주관하시는 테오의 스프린트에 참여하게 되었다. 테오의 스프린트의 취지는 요약해서 이야기 하면 "5일간 좋은 사람들과 함께 잘 만들어진 협업 프로세스를 함께 경험한다." 이다 구글 스프린트라는 협업 프로세스를 표방하고 있고 예전부터 벨로그 트렌딩 글 등에서 참여했던 사람들의 후기를 보고 관심을 가지고 있었는데 기회가 왔고 참여하게 되었다. https://brunch.co.kr/@brunchjwshim/90 구글 스프린트를 아시나요? 한국형 스프린트, 퀵서클(Quick Circle) | 구글 스프린트란? 스프린트는 7명의 팀원들이 열린 토론을 통해 프로토타입을 제작하고 고객과 함께 아이디어를 테스트하여 중요한 문제들에 대한 답을 brunch.co.kr .. Chart.js를 이용한 차트 그리기 최근 참여하게 된 간단한 미니 프로젝트이다 해당 서비스는 친구들의 MBTI를 맞춰보고 친구들은 내 MBTI를 어떻게 생각하는지에 대한 통계를 보여주는 서비스이다. 응답에 대한 통계를 리스트 형태로 보여줄 지 아니면 차트 형태로 보여줄지 기획 단에서 꽤 많은 고민을 했는데 별도의 통계 페이지에서 두가지 방식 모두 구현을 하기로 했다 다음과 같은 형태다 리스트 목록의 경우는 구현이 간단하지만 이러한 파이 차트 는 직접 구현하기에는 공수가 많이 들 것 같아 chart.js 라이브러리를 사용했고 어떤 방식으로 사용하였는지 공유하려 한다. https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern w.. EC2에 대하여 일단 간단하게 적고 나중에 세세하게 정리한다 EC2(Elastic Computing Cloud) 버지니아 북부 지역이 모든 EC2를 지원하는 지역, 디폴트 운영체제 + 서비스운영에 필요한 자원 --> 설치 가능. AZ(Availability Zone): Region안에 여러개의 AZ가 존재. 하나의 AZ가 문제생겼을경우 다른 AZ에서 서비스 담당. 일종의 Disaster Recovery의 기능을 수행. EBS(Elastic Block Store): EC2에 부착되어있는 일종의 하드디스크 SSD군 Gerneral Purpose SSD(GP2): 1GB당 3IOPS 속도가 나옴. 가장 보편적으로 사용 IOPS: a unit of measure representing input/output operations.. [React] - 반응형 Resize 커스텀 훅 구현하기 반응형 웹 구현을 위해 화면 크기가 달라질 때마다 화면의 가로나 세로 길이를 구하고자 했다. 컴포넌트 내에서 window.innerWidth로 받아오면 처음 렌더링할 때의 가로 길이는 받아올 수 있었는데, 새로 고침을 하지 않고 화면 사이즈가 변경되었을 때는 동적으로 브라우저의 가로 길이를 받아올 수 없었다. 브라우저 화면 사이즈가 변경될 때마다 그 값을 리턴하고 리렌더링하는 리액트 커스텀 훅을 사용하여 특정 컴포넌트가 데스크탑 사이즈일 때만 보일 수 있도록 처리했다. import { useEffect, useState } from "react"; const useWindowSizeCustom = () => { // 초기 state 값은 undefined로 세팅한다. const [windowSize, s.. 데이터 모델링 (with Sequelize) 개요 최근 개인 프로젝트를 시작했다 참고로 프론트 뿐만 아니라 백엔드 서버 까지 내가 직접 구축해서 개발을 하기로 했다 본격적인 서버 구축에 이어 api 개발에 있어서 선행되어야 할것이 바로 데이터 모델링이다 필자는 MySQL을 데이터베이스로 사용하게 되었는데 sql까지는 아직 지식이 없어서 Sequelize를 사용하게 되었다 시퀄라이즈는 Node.js에서 MySQL을 쉽게 다룰 수 있도록 도와주는 라이브러리로 ORM으로 분류된다 SQL을 모르더라도 데이터베이스 관리가 가능하기에 필자는 시퀄라이즈를 사용하게 되었다. 테이블 세팅 모델링을 하기전 필자의 프로젝트에서 어떤 테이블이 필요한지 살펴보겠다 필자가 만들고자 하는 프로젝트는 트위터, 페이스북과 같은 커뮤니티형 SNS이다 게시판이 아마도 메인 기능이 .. React-Query와 Next.js 를 활용하여 서버 사이드 렌더링하기 Next.js의 Data Prefetching Next.js는 서버 사이드에서 데이터 Prefetching이 가능하다. Prefetch 하게 될 데이터는 HTML 페이지가 클라이언트에게 전송되기 전에 준비되어 HTML에 포함되어 렌더링된다. 따라서 한 번 사이트가 로딩된 후에는 로딩 시간이 크게 단축된다는 점, SEO에 좋다는 아주 유명한 장점이 있다. React-Query + Next.js 도입 배경 React-Query는 Next.js의 서버 사이드에서 데이터를 Prefetch하여 queryClient로 넘겨주는 기능을 제공한다. 개인 프로젝트를 개발하면서 서버로부터 Fetch한 데이터를 더 효율적으로 다룰 방법에 대해 고민해보았다. 먼저 사용자가 우리 서비스에 최초로 진입한 후, 가장 빠른 시간 안.. 이전 1 2 3 4 5 ··· 20 다음
