time to wander

끝과 시작 항해99를 수료했다! 연휴를 포함하면 101일이었다. 101일 동안 드라마틱한 변화가 있었는지는 아직 체감하기 어려우나 가장 큰 수확은 역시 궁금한 게 많아졌다는 점이 아닐까. 당연한 말이지만 나는 특히 더 내가 관심 있어 하는 일 외에는 일절 관심이 없다. 궁금증이 잘 일지도 않는다. 그런데 항해99를 하는 동안 공부를 하면 할수록 지식이 채워져서 궁금한 것들이 줄어드는 게 아니라 점점 더 알고 싶은 게 많아지고 있다는 걸 느꼈다. 지금도 해보고 싶은 게 너무 많아서 조바심이 들 정도다. 항해99 초반의 뭘 모르고 있는지도 모르는 상태에서 뭘 모르는지 알고, 궁금증을 해소하기 위해서 무엇을 해야 하는지 어느 정도 알 수 있는 상태가 되었다는 건 나에게 있어 좋은 변화라고 생각한다. 누군가 항..

Link: https://programmers.co.kr/learn/courses/30/lessons/42889 코딩테스트 연습 - 실패율 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스 programmers.co.kr 문제 설명 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 ..

밈글밈글 프로젝트 코드를 리팩토링 하려고 보는데 로그인 상태 여부를 확인해서 조건부 렌더링하는 컴포넌트가 굉장히 많았다. 그런데 로그인 상태를 전역에서 관리하면서 컴포넌트에서 구독하고 있는 게 아니라 각 컴포넌트마다 웹스토리지에 유저 정보가 있는지 확인하여 로그인 상태인지, 로그아웃 상태인지를 연산하는 작업을 하고 있었다. 이미 상태 관리 툴로 리덕스를 사용하고 있었지만 사실상 서비스 운영은 종료돼서 공부하는 김에 React에서 기본적으로 제공하는 Context API를 사용하여 로그인 상태를 전역으로 관리하고, 로그인 상태가 필요한 컴포넌트에서는 구독할 수 있도록 수정해보았다. Context API란? React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로, 즉 단방향으로 흘러야 한다. 컴포넌트 dep..

깃허브 페이지로 레주메를 만들고 블로그에만 링크를 심어 놓기는 했는데..미미하겠지만 그래도 유저 트래킹을 하고 싶어서 구글 애널리틱스를 사용하기로 했다. 나는 react-ga 라이브러리를 사용했기 때문에 이전 버전인 유니버셜 애널리틱스 속성으로 계정을 생성하였다. 1. 구글 애널리틱스 계정 생성하기 계정을 생성할 때 두 번째 속성 설정 단계에서 고급 옵션의 유니버셜 애널리틱스 속성만 만들기를 선택한다. 2. index.html에 트래킹 스크립트 삽입하기 계정을 생성하고 나면 트래킹 ID가 포함되어 있는 스크립트 코드가 주어진다. 해당 스크립트를 index.html의 head 안에 삽입한다. 3. react-ga 라이브러리 설치 및 설정 react-ga 라이브러리 설치 후 실행 파일에 아래와 같이 설정한다..

문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데,..

실전 프로젝트에서 HTTPS를 도입하기 위해 AWS의 ACM과 Cloudfront를 사용하였고, Github Actions를 사용하여 워크플로우 자동화 단계에 프로덕션 환경으로의 빠른 반영을 위해 Cloudfront 캐시를 무효화 해주는 단계를 추가했었다. 그런데 막상 Cloudfront에 대해서는 잘 모르고 있어 정리해 보고자 한다. Cloudfront란? 아마존은 Cloudfront 서비스에 대해서 이렇게 설명하고 있다. Amazon CloudFront는 뛰어난 성능, 보안 및 개발자 편의를 위해 구축된 콘텐츠 전송 네트워크(CDN) 서비스입니다. CDN은 Content Delivery Network의 약자로, 해석 그대로 콘텐츠 전송 네트워크를 의미한다. 지리적으로 분산된 여러 서버가 있어 사용자로..