탕구리's 블로그

오늘은 리액트에서 발생하는 다양한 이벤트를 어떻게 등록하고 관리하는지에 대하여 알아보는 시간을 갖도록 하겠습니다. 과연~? 리액트에서는 어떻게 이벤트를 처리할까요? 간단한 예제를 만들어보며 차근차근 확인해보도록 하겠습니다. 이벤트 등록하기 우선 간단하게 counter를 생성하고 버튼을 통해 count 값을 증가시켜주는 예제를 만들어 보겠습니다. import React, { Component } from 'react' class App extends Component { render() { return ( count BUTTON ) } } APP 컴포넌트는 카운트 값과 카운트를 증가시켜줄 버튼을 하나 가지게 됩니다. 이제 count를 관리할 수 있게 state를 선언해주고 버튼 클릭 시 이벤트를 발생시킬 ..

위키 백과를 살펴보면 라우터의 사전적인 의미는 다음과 같아요. # 라우터의 사전적 의미 라우터(router[a]혹은라우팅기능을 갖는 공유기)는 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장치이다. 간단하게 해석해보면 경로를 찾아주는 역할을 합니다. 리액트(SPA)에서의 라우터는 클라이언트 사이드에서 다양한 페이지에 접근이 가능하도록 합니다. 리액트에서 가장 많이 사용하는 패키지는 "react-router-dom"이며 해당 패키지의 사용법에 대해서 알아보겠습니다. # 설치 yarn add react-router-dom npm install react-router-dom "react-router-dom"의 문서를 확인해보면 기능은 ..

1.React 컴포넌트 컴포넌트? const ex = (컴포넌트); 컴포넌트는 반드시 하나의 Element만 리턴해야 합니다. (아래와 같은 코드 작성 불가) const ex = ( 1번 2번 ); 만약, 여러 개의 컴포넌트를 Return 하고 싶을 때에는 다른 태그로 한번 감싸주거나, 혹은 Fragment를 사용하도록 한다. 각각의 컴포넌트는 독립적으로 작동. const ex = ( 1번 2번 ); 함수형 컴포넌트 props만 받아서 사용이 가능하다. (state사용 불가능) life-cycle 함수가 존재하지 않습니다. 클래스형 컴포넌트에 비교하여 속도가 빠르다. ** 현재는 react-hook을 통해 함수형 컴포넌트에서 "state"를 사용, 관리가 가능하며 life-cycle과 비슷한(?) 기능 ..

원래 회고 작성을 할 계획은 없었지만 우연치 않은 기회로 회고를 작성하게 되었다. 2019년 하반기부터 2020년 한 해 동안은 정말 많은 일들이 있었다. 이직이라는 큰일이 있었고 그 안에서 벌어진 다사다난했던 일들이 많았다. 약 1년의 기간동안 나에게 어떤 일들이 있었을까? 회사에서는 가장 기본적인 업무 파악 외에도 이벤트 같이 존재했던 IF KAKAO 발표 등 많은 일들이 존재했다. 개인적으로는 쉬고 있었던 봉사활동도 다시 시작하게 되었고 매일 하지는 못했지만 나름 공부도 꾸준히 했던 한 해가 아니었나 싶다. 2020년을 회고하며 하나씩 되새겨보는 글을 적어보자. 회고! 시작합니다. [회사] 현재 회사의 입사는 2019년 10월 15일, 나의 두 번째 회사에 입사하게 되었다. 기존에 하던 개발 업무와..

ECS 사용법에 대한 포스팅을 계속해서 이어가려고 합니다. ECS에서는 Service와 Task라는 중요한 두개의 개념이 있으며, 지난번 포스팅에서는 Task가 무엇인지 ECS에서 사용하는 Task-Definition 방법에 대하여 알아보았습니다. Task에 대해 궁금하신 분은 지난 포스팅을 참조해주세요 우선, ECS 아키텍쳐를 살펴봅니다. Service를 살펴보면 중간에서 Target Group과도 연결되어 있고 task-definition, 여러개의 task들 등.. 시스템 중앙에서 무언가를 관리하는 역할을 하는 것 처럼 보입니다. 실제로 Service는 우리가 등록한 테스크를 관리하며 배포된 시스템이 정상상태로 유지하도록 하는 역할을 하고 있습니다. Service 설정 과정을 살펴보며 어떤 기능들을..

꽤 오랜 시간 준비했던 IF KAKAO 영상이 저번 주 오픈됐다! 발표를 준비하면서도 촬영을 진행하면서도 정말 재미있고 떨리기도 많이 떨렸다. 그나마 다행인 부분은 오프라인이 아닌 온라인으로 진행된다는 점! 내가 맡게된 발표 세션은 "가디언 테일즈 글로벌 서비스 도전기!" 예전에 올렸던 포스팅은 발표준비를 하며 생각해본 내용에 대한 생각을 정리했던 글이다. 발표 내용은 다음과 같다 1. 가디언테일즈 소개 2. 글로벌 서비스 준비 과정 3. 게임 서버 구성 4. 클라이언트 안정성 확보 및 배포 5. 회고 국내 서비스 경험도 없다시피 한 내 입장에서 글로벌 서비스 오픈을 준비하기 위해서 필요한 요소들을 생각해내기는 정말 어려웠다. 아무생각이 나지 않으니 어떤 부분을 요점으로 발표를 준비해야 하는지도 많이 어..

AWS ECS에는 일전에 다루었던 Cluster 외에도 Service와 Task라는 개념이 존재한다. 우선 테스크란, ECS에서 우리가 생성한 컨테이너를 구동하는 최소 단위이다. 그렇다고 "컨테이너=테스크"라는 의미는 아니며 n개의 컨테이너 묶음을 하나의 Task로 지정할 수 있다. 예를 들어 우리가 하나의 웹 서비스를 구성하기 위해 was, db, redis 각각의 컨테이너를 사용한다고 가정해보자 이런 경우에 docker-compose를 사용해 하나의 묶음으로 배포할 수 있다. 테스크 또한 비슷하게 생각할 수 있다. 우리가 실행하고자 하는 컨테이너를 묶음으로 만들어 하나의 배포 단위로 만들 수 있다. 직접 테스크 정의를 해보자 1. 새 작업 정의 생성 우선 좌측 메뉴의 작업 정의로 이동해 "새 작업 정..

2020년 하반기 프리메드 23기 활동에 다시 참여하여 시작하게 되었습니다.짞짞짞! 하다가 분명 후회할 것 같지만 그래도 뭔가 시간을 좀 더 알차게 보내고 싶은 마음에 다시 시작했슴다! 우선, 프리메드에 대한 간략한 소개를 하자면프리메드는 대학생이 운영하는 "비영리 민간의료 단체"이며 NGO로 소속되어 있는 단체입니다.물론 저는 대학생이 아니지만 크흠....(처음 시작했던 2018년에도 학생이 아니었지만..) 무튼!! 23기 사업의 시작은 도화공원사업!동작구에 위치한 도화공원에서 "동작구 치매안심센터"와 함께 치매 고위험 고령 수혜자분들을 대상으로 치매 조기검진, phr 카드 제작 및 배부 그리고 감염예방 키트를 드리는 활동을 진행하였습니다 도화공원 사업이란?! 사업은 총3회에 걸쳐서 진행하였고, 저는 ..

게임서버들이 남기고 전송하는 로그들의 종류 게임서버 에러 로그 현재 : 서버 로컬에 파일로 남겨서 ELK로 전송 or S3를 통해 공유 플랫폼으로 전송하는 각종 로그 현재 : 게임서버에서 https 프로토콜로 플랫폼에 전송 게임로그 디비로 전송하는 게임 로그 현재 : 게임서버에서 로그디비로 인서트 고민 유저들에게 직접적으로 영향이 없는 게임데이터를 제외한 로그 전송 파이프라인을 하나로 통합 할 수는 없을까? 일반 로그를 https로 플랫폼에 전송 할 때 게임서버에 걸리는 부하를 줄이고 싶음. 게임서버 입장에서는 플랫폼 로그와 게임로그를 2중으로 남겨야 하는 부담감이 있음 게임서버에 남기는 모든 로그들의 형식을 공통화 하여 모든 게임들에서 일관된 로그 컬렉팅을 할 수 있게. 1. fluentd fluent..