분류 전체보기 검색 결과

해당 글 777건

왜 Web Component를 사용하는가?

SPA 유행이 말해준 것은 SPA가 중요한 것이 아니라 component drive development가 중요하다는 것이었다. SPA의 단점을 극복한 Post-React 시대의 대안 중 주목 받는 것이 Web Component를 기반으로한 기술이다. Web Components HTML이 기본으로 제공하는 엘리먼트는 브라우저와 운영체에제 따라 다르게 보이는 경우도 있고, 발전하는 웹 환경에 대응하기에 한계가 있습니다. 여기서 js 기반 컴포넌트(예를 들어 naver에서 만든 jindo js)가 대안으로 제시되었으나 JavaScript 컴포넌트를 사용하려면 스크립트 파일과 CSS 파일을 포함하고 특정한 마크업 구조를 사용해야 하며, JavaScript 컴포넌트는 상당한 크기의 JavaScript 덩어리라 ..
미분류/Tip 2020. 11. 14. 16:59

TTFB(Time to First Byte)란 무엇인가?

TTFB(Time to First Byte)는 HTTP 요청을 했을때 처음 byte (정보) 가 브라우져에 도달하는 시간을 의미합니다. TTFB가 중요한 이유는 당연히 (1) 유저가 첫 접속 후 내용을 빠르게 받아볼 수 있어 유저 경험에 좋다 (사실 TTFB가 빠르다고 해서 first-meaningful-page가 빠르다고는 할 수 없죠. 다만 서버의 성능속도를 보여주는 척도라고는 할 수 있습니다.), (2) 우선적으로 검색 순위를 결정할 때(SEO) TTFB가 중요한 요소임 (moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte) 당연히 TTFB에 영향을 미치는 TTFB 속도는 서버 프로세싱, DNS, TCP, 내가 사용하는 ..
웹 전반, 브라우저/🔎 SEO 2020. 11. 12. 22:57

Lighthouse 사용법 SEO 체크 및 LCP, CLS

Lighthouse 설치 및 구동 아래 문서를 참고하여, 웹을 진단하는 것까지 진행합시다. 간단합니다. developers.google.com/web/tools/lighthouse?hl=ko Lighthouse | Tools for Web Developers | Google Developers Learn how to set up Lighthouse to audit and improve your web apps. developers.google.com 생각보다 처참하군요 그리고 항목을 살펴보니 Accessibility 배경과 전경이 충분한 색대비가 없음 ("더보기 부분") element does not have a [lang] attribute SEO index 생성을 막는 robots.txt가 27번째 ..
웹 전반, 브라우저/🔎 SEO 2020. 11. 12. 22:34

Active Record 패턴 vs Data Mapper 패턴

Active Record 패턴 In TypeORM you can use both the Active Record and the Data Mapper patterns. Using the Active Record approach, you define all your query methods inside the model itself, and you save, remove, and load objects using model methods. 즉, Model.find({}), Model.remove(), Model.save() 꼴로 사용할 수 있는 거죠. Active record 패턴에 대한 일반적 정의는 위키피디아를 참고합시다. All active-record entities must extend the Ba..
DB, ORM/🧊 typeORM 2020. 11. 10. 19:52

조인 없이 관계 테이블의 fk 조회하기 + @RelationId

조인 없이 그걸 어떻게 해? 라는 의문이 들지만 typeORM에서 구현해 놓았으므로 사용할 수 있습니다. 예를 들어 place라는 엔티티가 user와 relationship이 형성되어있다고 가정합시다. relationship이 설정된 후 관련 테이블을 가져오는 방식은 아래와 같이 Place 엔티티 중에서 관계성을 가진 컬럼을 클래스 메서드의 option 부분에의 realtions 값으로 넘겨주면 됩니다. 자세한 건 공식 문서 (typeorm.io/#/relations-faq/how-to-load-relations-in-entities) 를 참고하면 됩니다. const place = await Place.findOne({ id: args.placeId }, {relations: ["user"]}); * 참..
DB, ORM/🧊 typeORM 2020. 11. 10. 12:32

AWS EC2 .pem key 없이 유저-암호 방식 접근 허용

EC2 생성시 접속을 위한 .pem이 발급되고 해당 키를 통해 SSH 접속을 하는 것이 일반적이다. 이는 brutal-force 공격에 의해 암호가 탈취되는 것을 막기 위한 보안 조치이다. 그러나 여러 사람이 협업을 할 때 .pem을 가지고 있지 않은 외부인이 프로젝트에 참여할 때 편의성을 위해 임시적으로 유저를 생성하여 유저-비밀번호 방식으로 EC2에 SSH 접속 방식이 가능하게끔 만들어야 할 때가 있다. 키를 공유하는 것도 방법이지만 유저를 생성하는 방식으로 관리하는 것이 권한 문제에 있어 더욱 쉽다. 문제는 보안이다. AWS를 한 번 털려본 경험이 있는 나로서는 보안에 민감할 수밖에 없어 잠깐만 열어 놓았다가 다시 닫았다... 1. 우선 처음 접속할 때는 .pem을 이용하여 접속해야 한다. 2. 유..
AWS/☁️ AWS 2020. 11. 9. 02:01

psql 명령어

제타위키 보십쇼. 짱짱 zetawiki.com/wiki/PostgreSQL,_PAS PostgreSQL, PAS - 제타위키 다음 문자열 포함... zetawiki.com 강의도 보십쇼 www.gurubee.net/lecture/2943 DATABASE 수정 및 삭제 ALTER DATABASE ALTER DATABASE ‘name’을 입력하여 DATABASE를 변경합니다. ALTER DATABASE name [ [ WITH ] option [ ... ] ] where opt.. www.gurubee.net 공식문서를 찾거나 \?를 통해 사용하고자 하는 명령어를 찾는 것이 좋다. 여기서는 자주 사용되는 커맨드만 정리하였다. \h : SQL command 관련 도움말 \? : psql Command 관련 도..
DB, ORM/🧊 PostgreSQL 2020. 11. 7. 22:47

SEO를 위한 robots.txt와 sitemap.xml 추가

Next 기반에서 작업했지만 Next라는 게 딱히 중요하지는 않습니다. robots.txt 공식문서(nextjs.org/docs/basic-features/static-file-serving)에 따르면 public 폴더 안에 두는 것이 좋다고 합니다. 관리자 페이지와 같이 크롤러가 접근하면 안되는 부분은 막아둬야겠죠. robots.txt 구성방법은 naver 측에 잘 정리가 되어 있습니다. searchadvisor.naver.com/guide/seo-basic-robots robots.txt 설정하기 robots.txt는 검색로봇에게 사이트 및 웹페이지를 수집할 수 있도록 허용하거나 제한하는 국제 권고안입니다. robots.txt 파일은 항상 사이트의 루트 디렉터리에 위치해야 하며 로봇 배제 표준을 따 ..
웹 전반, 브라우저/🔎 SEO 2020. 11. 6. 07:32

github-action 개요

code, issues, pull request는 종종 사용해왔습니다만 저 Actions는 사용할 일이 없어서 방치해두었습니다. 그러던 중 GitHub Actions를 이용해서 매일 오전 9시마다 정보를 가져와 README와 자체 웹 페이지를 업데이트 해주는 서비스가 있어서 Actions의 기능이 궁금해져서 공부해보았습니다. github action? push, pull request, issue의 발행과 같은 이벤트에 따라 특정 기능을 트리거할 수 있는 도구입니다. 대개 CI 기능을 위해 사용합니다. 단순 CI 뿐만 아니라 test 코드 결과를 SMS 서비스를 통해 발송하기, test 돌리기, 배포하기 등으로 응용할 수 있습니다. 말 그대로 'action'인 셈이죠. github 측에서도 action을..
Ops, Infra, etc/배포 자동화 (CI, CD) 2020. 11. 5. 22:10

inner join, outer join / union과 in/not in

join에 대해서는 mysql 전반을 다룬 포스트에서 이미 한 번 다룬 바가 있습니다. darrengwon.tistory.com/5 본 포스트에서는 inner join, outer join, self join 등에 대해 알아보는 등 조금 더 깊게 들어가볼까 합니다. inner join 일반적으로 join이라고 하면 inner join을 말합니다. inner 를 생략하고 join만 쓰면 inner join으로 간주하고 join됩니다. table1의 입장에서 table2를 join합니다. FROM INNER JOIN ON 조인될 조건 [WHERE 검색조건] 예를 들어 아래와 같은 경우 buytbl의 입장에서 usertbl을 join합니다. 따라서 조인 결과 buytbl의 결과가 먼저 왼쪽에 위치하게 됩니다...
DB, ORM/🧊 MySQL 2020. 11. 4. 05:15