koreacat

AWS GameDay? “GameDay에 참여한 사람들은 Unicorn Rentals라는 가상의 회사에 속한 엔지니어들입니다. 회사의 대표가 부재 중일 때 하필 회사에 문제가 발생합니다. 어떤 가상의 서비스가 동작 중인데 각 팀에 주어진 것은 AWS 콘솔 접근 권한 하나 뿐입니다. 각 팀은 이 서비스의 현재 상태를 진단하고, 앞으로 다가올 큰 트래픽과 예기치 못한 장애상황을 이겨내 서비스를 안정적으로 운영해야만 합니다.” 회사 인프라 동아리 활동 중 AWS GameDay에 참여할 수 있는 좋은 기회가 생겼다. 가상의 회사 유니콘 사에 입사하여 실제 환경에서 생기는 문제들을 체험하고, 해결해 점수를 가장 많이 얻는 팀이 우승하는 행사였다. 팀이 4인 1조로 구성되었고,일정 시간마다 TREND가 쌓여 SCO..

잡다의 회원 가입 수를 늘릴 방법을 고민하던 중 placeholder에 대한 흥미로운 내용을 발견했다. HTML의 input 태그를 사용할 때 placeholder 속성을 사용하는 것은 사용자 인터페이스(UI)의 가독성을 높이는 방법이다. placeholder는 일종의 짧은 힌트를 제공하여 사용자가 입력 필드에 입력해야 하는 내용을 이해하는 데 도움이 된다. 그러나, placeholder만으로 label을 완전히 대체하는 것은 좋지 않다. input 태그에 label 없이 placeholder 로 설명을 대체하는 경우 사용자 경험이 떨어질 수 있다는 내용이었다. label 대신 placeholder만 쓰면 UI도 깔끔하고 신경쓸 것도 줄어드는데 사용자들에겐 왜 안좋을까? 화면 읽기 도구나 보조 기술을 사..

EventSource는 SSE(Server Sent Events)를 처리할 수 있는 좋은 방법입니다. 하지만, EventSource는 get 방식 만을 지원하기 때문에 post 방식으로는 EventSource를 사용할 수 없습니다. post 방식으로 SSE 처리를 하고 싶다면 fetch api와 body.getReader() 를 사용할 수 있습니다. 기본 구조 fetch(getUrl(channelUid), { method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' }, // body: ..., }) .then(response => { return response.body; }) .then(body => { // body: ..

SSE(Server-Sent Events)와 WebSocket 통신은 웹 애플리케이션에서 실시간 데이터 푸시와 통신을 구현하는 두 가지 주요 방법입니다. SSE(서버-센트 이벤트) SSE는 서버에서 클라이언트로 단방향 통신을 위한 웹 기술입니다. 주로 서버에서 클라이언트로 실시간 업데이트를 보내는 데 사용됩니다. SSE는 기본 HTTP 프로토콜을 사용하며, 특별한 서버 설정 없이 사용할 수 있습니다. 클라이언트는 서버에 연결한 후 서버가 업데이트할 때까지 연결을 유지하며 데이터를 기다립니다. 서버에서 데이터가 전송되면 클라이언트의 이벤트 리스너를 통해 데이터를 처리할 수 있습니다. 주로 실시간 뉴스, 주식 가격 업데이트, 알림 시스템 등에서 사용됩니다. WebSocket 통신 소켓 통신은 양방향 통신을 ..

마이크로 프론트엔드의 기법서버 측 템플릿 조합(Server-side template composition): 서버 측에서 개별 마이크로 프론트 엔드를 HTML 템플릿으로 조합하는 방법입니다. 이 방식은 서버에서 모든 컴포넌트를 하나로 묶어 최종 HTML 페이지를 생성하며, 클라이언트 측에서 추가 작업이 필요하지 않습니다.빌드 타임 통합(Build-time integration): 빌드 프로세스 중에 여러 마이크로 프론트 엔드를 하나의 번들로 통합합니다. 이 방식은 성능과 최적화 측면에서 이점이 있을 수 있지만, 각 마이크로 프론트 엔드 간의 느슨한 결합을 유지하기 어려울 수 있습니다.iframe을 통한 런타임 통합(Run-time integration via iframe): 각 마이크로 프론트 엔드를 독..

리액트 context와 custom hook의 기능 구분 리액트에서 커스텀 훅과 컨텍스트를 구분해서 사용해야 하는 경우에는 목적과 요구사항을 분석하여 어떤 기능이 더 적합한지 판단해야 합니다. 로직 재사용: 커스텀 훅 커스텀 훅은 로직의 재사용에 초점을 맞춥니다. 여러 컴포넌트에서 동일한 로직이 필요한 경우, 이를 커스텀 훅으로 분리하여 사용합니다. 특정 상태 관리나, 이벤트 핸들러 등을 여러 곳에서 사용해야 할 때 유용합니다. 전역 상태 공유: 컨텍스트 컨텍스트는 데이터의 전역 공유에 초점을 맞춥니다. 전체 애플리케이션 또는 특정 컴포넌트 트리에서 공통으로 접근해야 하는 데이터가 있는 경우 사용합니다. 상위와 하위 컴포넌트 간에 직접적인 props 전달 없이 데이터를 공유해야 할 때 유용합니다. 커스텀..

HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. HTML5에는 1991년부터 이어져내려온 수많은 태그들이 있다. 오랜시간을 거쳐온 만큼 HTML 태그 하나하나에도 시대의 유행과 역사가 담겨있다. 예를들어 HTML5에는 과 같은 이름만 봐도 의미가 명확한 태그들이 있다. 반면에 과거에 만들어진 태그인 와 같은 태그는 처음보는 사람이라면 무슨 태그인지 전혀 모를 것이다. 는 anchor, 는 bold에서 줄여진 것을 보아 그때 당시 유행이 축약문을 쓰는 것이었음을 짐작할 수 있다. 현재로써는 상상도 할 수 없는 일이다. 의미있는 태그를 중요시하는 현시점에서 과거의 태그들이 어떤 의도와 의미로 만들어졌는지, 어떻..

프론트 개발이라고 한다면 막연히 자바스크립트를 사용하고 페이지의 외형 만든다고 생각하기 쉽다. 하지만 조금 자세히 살펴보면 프론트 개발은 세가지 영역으로 나뉘어져 있는 것을 알 수 있다. 웹퍼블리셔, UI / UX, 프론트엔드 영역이다. 여기서 주목해봐야 할 것은 웹퍼블리셔와 프론트엔트 개발자가 두는 가치의 중심이다. 프론트엔드 개발자는 웹퍼블리셔에 비해 백엔드 개발자와 가깝다. 백엔드 개발자와 직접 데이터를 주고 받는 개발자이다. 웹퍼블리셔는 개발자와는 조금 다르다. 웹 + 퍼블리셔 뜻 그대로 생각해보면 웹페이지를 문서화해 출판하는 사람이다. 다시 말해 콘텐츠 제작자이다. 태그 하나하나의 의미를 생각하며 마크업하는 것이 개발자에게는 불필요해보일 수는 있겠지만 웹퍼블리셔에게는 아주 중요한 가치인 것이다...