browserui&uxcssjavascriptnext.jsreacttroubleShootingdatabaseelasticsearchawshttpgatsbyaccessibilityarchitect

• browser / ui&ux / css2021-06-28

  WWDC 2021을 통해 미리 알아보는 사파리 15

  웹 개발자라면 크로스 브라우징에 대해 관심이 많으실 겁니다. 이번 WWDC 2021에서 사파리 15의 변경점과 이에 대한 대응 방안을 소개하는 영상이 있어 이를 간략하게 정리해 보고 사파리 15가 앞으로의 UI와 UX에 끼칠 영향을 나름대로 생각해 보겠습니다.

• javascript / next.js2021-06-20

  유명한 오픈소스에 기여하게 된 썰

  React 프레임워크로 가장 많이 사용되는 Next.js에 제 코드가 머지 되었습니다. 아주 적은 양의 코드지만 제가 참여한 코드가 사용된다는 점이 참 뿌듯합니다. 규모가 거대한 오픈소스인 만큼 코드 리뷰 절차와 테스트 과정이 굉장했습니다. 이러한 경험이 처음이다 보니 삽질도 많이 하였습니다. 그러나 이러한 삽질이 좋은 경험이 되었고 이 경험을 공유해보려 합니다.

• react / javascript2021-06-15

  왜 리액트를 사용하는 걸까?

  Catridge 프로젝트를 통해 리액트가 어떠한 불편함을 제거하기 위해 개발되었는지 몸으로 체험하게 되었습니다. 왜 모듈 단위로 설계하는지, 컴포넌트 단위 무엇인지, 상태와 생명주기가 무엇인지, 왜 JSX를 사용하도록 권고하는지 등 react에 대해 막연하게만 알고 있던 부분을 정리해 보겠습니다.

• troubleShooting2021-04-22

  2021-04-21 오류 보고(SyntaxError Unexpected end of JSON input)

  습관적으로 들어가 본 Techblogposts, 괜히 스크롤을 내려 보고 싶었습니다. 그리고 맞이하는 에러 발생 화면. 오류 내용은 SyntaxError Unexpected end of JSON input였습니다. SyntaxError Unexpected end of JSON input 에러는 JSON을 파싱 하려 시도했지만, 해당 문자열이 JSON 형식에 맞지 않을 때 발생합니다. 지금까지 잘 작동하던 코드가 갑자기 왜 오류를 발생시켰는지 그리고 어떻게 해결했는지 작성해 보았습니다.

• database / elasticsearch2021-03-23

  DynamoDB와 ElasticSearch 함께 사용하기

  DynamoDB를 사용하면서, 기존의 방식으로는 검색 기능과 특정 포스트 필터 기능을 정확하게 구현할 수 없었습니다. 결국 ElasticSearch를 도입하게 되었는데요, 프리 티어로 ElasticSearch를 사용하는 법과 그 과정에서 겪은 문제점과 해결 방법을 작성해 보았습니다.

• browser / css / javascript2021-02-21

  크롬과 사파리에서 겪은 크로스 브라우징 이슈

  얼마 전까지 개인 프로젝트를 진행할 때, 기존에 사용하던 크롬에서만 테스트하고 맥 환경은 전혀 신경 쓰지 않았었습니다. 하지만 남들에게 공개하며 사파리에서 이슈가 발생하고 있었음을 피드백 받을 수 있었습니다. 프로젝트 진행 중 겪은 몇 가지 이슈를 공유해 봅니다.

• database / aws / http2021-02-14

  TechBlogPosts의 크롤링 성능 개선하기

  DynamoDB는 25개의 프로비저닝된 읽기 용량 유닛을 프리 티어로 제공합니다. 하지만 기존에 크롤링 하던 로직으로는 데이터가 늘어날수록 읽기 용량 유닛의 사용량이 크롤링 사이트를 추가하기 부담스러울 정도로 빠르게 증가하기 시작했는데요, 그 이유와 개선 방법을 알아보았습니다.

• database / aws2021-02-07

  DynamoDB를 사용하기 전에 알았으면 좋았을 것들

  AWS에서 언제나 무료로 프리 티어를 제공하는 DynamoDB. TechBlogPosts를 개발하며 무료 DB가 필요해 선택하였지만 NoSQL의 장벽은 높았는데요, RDB만 사용해봤던 저에겐 '아니 이게 안된다고?'라고 울부짖게 만든 몇 가지가 있습니다. 이러한 경험으로 느낀 DynamoDB를 사용하기 전에 알았으면 좋았을 것들에 대하여 느낀 점을 공유해 봅니다.

• javascript / css2021-01-30

  CSS in JS는 무조건 더 좋을까?

  많은 웹 개발자분들이 CSS 작성을 힘들어합니다. 글로벌 스코프로 이루어지는 선택자와 동일한 클래스명의 자동 오버라이딩으로 인한 혼란은 규모가 커질수록 더욱 개발자를 괴롭게 합니다. 이러한 혼란을 해결하기 위해 Javascript로 CSS를 작성하고 클래스명을 중복되지 않게 생성해 주는 CSS in JS 방식이 떠오르고 있습니다. 이러한 CSS in JS 방식이 무조건 더 좋은지 알아보겠습니다.

• react / gatsby / next.js2021-01-20

  Gatsby VS Next.js

  처음 블로그를 만들 때 Create React App으로 만든 후 SEO에 대한 한계와 직접 페이지를 생성하는 부분이 생산성에 저하된다고 느껴 JAMStack으로 다시 만들었습니다. JAMStack을 만들 때 Gatsby로 시작할지, Next.js로 시작할지 엄청 고민이 많았는데요, 성능도 비슷하고 목적도 비슷하고 사용률도 비슷해 보였습니다. 그래서 직접 둘 다 사용해보고 글을 남기기로 했습니다.

• react2020-12-22

  React에 아직은 Class 형식이 필요한 이유(feat. Errorboundary)

  React Hooks가 대세가 된 요즘, Class 형식으로 작성된 컴포넌트를 보면 한숨부터 나오기 마련입니다. 그러나 아직까지는 Class 형식이 필요합니다. Errorboundary를 구현하며 왜 필요한지 알아보겠습니다.

• css / javascript2020-12-20

  CSS변수를 활용하여 다크 모드 구현하기

  모바일 활용이 점차 늘어남에 따라 웹 생태계도 PC 대신 모바일을 중점으로 맞춰지고 있습니다. 특히 모바일에서 어두운 테마를 사용하는 사용자가 많아짐에 따라 웹 페이지도 다크 모드를 지원하는 경우가 많아지고 있습니다. CSS 변수를 활용하여 다크 모드를 구현해 보겠습니다.

• accessibility2020-12-19

  웹 표준과 웹 접근성을 지키기 위한 노력이 필요한 이유

  인터넷 서핑을 하다가 마우스 스크롤 버튼으로 새 창에서 보기라든지 탭으로 다음 메뉴 선택하기 등 당연히 동작해야 하는 것들이 안되는 사이트를 만난 적이 있을 것입니다. 보통은 웹 표준을 지키지 않아 웹 접근성에 부합하지 않는 화면으로 개발되었기 때문입니다. 이러한 경험이 없어도 한 번쯤 들어봤을 웹 접근성이 대체 무엇인지, 왜 웹 접근성을 지켜야 하고 지키지 않으면 무슨 일이 벌어지는지 알아보겠습니다.

• architect2020-12-16

  Atomic Design으로 블로그 개발 시작하기

  React로 프로젝트를 시작하려고 마음먹은 뒤, React create app 혹은 Gatsby 등 프로젝트를 생성 후 이제부터 무엇을 어떻게 해야 할지 고민한 적이 있을 것입니다. 보통 가장 먼저 하는 건 앞으로 어떻게 설계된 내용들을 구현할지 아키텍처를 구성하는 일 입니다. 컴포넌트를 기반으로 쌓아올리는 React와 Figma는 Atomic Design이 가장 적격이라고 생각하여 이번에 시도해 보았습니다.