이번 프로젝트를 진행하면서 이전에 작성한 포스팅의 내용인 웹소켓 통신과 대용량 응답 데이터를 처리하는 다양한 방법 중 하나를 적용해보는 작업과 함께 새로 처음해보면서 알게되었던 기술인 aws cli 사용과 docker-compose 적용을 어떻게 했는지 적어보려한다. 웹소켓도 웹소켓이지만 이번 글은 더욱 나중의 나에게 도움이 될 것 같기에 작성하기로 하였다. 먼저, 이전글과 마찬가지로 aws가 뭐고~ docker가 뭐고~ docker-compose가 뭐고~ 이러한 내용은 작성하지 않으려고 한다. 다른 블로그에 개념에 대한 정리가 엄청나게 잘되어 있기 때문에 순수하게 기술에 대한 정의를 알고 싶다면 유용하지 않을 것이다. 이전의 프로젝트에서는 이미 작성된 Dockerfile과 docker-compose, ..
이번에 회사의 프로젝트를 진행하면서 지금까지 해본적 없던 기술들을 사용하면서 알게 된 내용을 기록하기 위해 오랜만에 블로그에 글을 작성하려고 한다. 이번 프로젝트는 기본적으로 웹소켓 통신을 통해 받아온 데이터들로 작동을 한다. 좀 더 자세하게는 다양한 코인들에 대한 정보들을 사용한다. 코인과 주식 등과 같은 데이터들은 너무나도 순식간에 값이 변경되고, 변경에 매우 예민하다. 따라서, 단 1초의 순간에도 어떠한 변경이 일어날지 모르기 때문에 더 철저하게 관리되어야 했다. 처음 프로젝트의 방향은 웹소켓 통신이 아닌 스냅샷 통신을 하고, 사용자가 필요로 할 때 새로고침을 통해 데이터를 받아오게 하는 방향으로 잡혀있었다. 하지만 그렇게 진행했을 때의 사용자가 가질 불편과 서비스의 메리트가 매우 떨어진다고 생각하..
제가 타입스크립트를 사용하면서 코딩을 하다보면 꼭 그냥 지나치는법이 없는 타입에러들이 있습니다. 고것은 바로 event, dom, useRef의 타입에러입니다. 이번 포스팅은 자주 사용되지는 않지만 꼭 발생했던 useRef 타입에러에 대해 공부해보고 에러없이 사용할 수 있도록 해보자. useRef가 무엇인지 모르시면 useRef 훅은 따로 공부하시는게 좋을 것 같습니다. 간단하게만 설명하자면 hook 중에 하나로, 지정한 초깃값을 객체의 .current 프로퍼티에 저장하는 것. DOM객체의 값을 직접 접근하거나, 변경할 때 사용한다. 주로 인풋 포커싱, 불필요한 리랜더링을 방지하기 위해 사용한다. 그럼 본론으로 넘어가서 useRef 타입에러 해결에 대해서 알아보자. useRef 에러 예시 코드 // Si..
이번 포스팅은 지난 회원가입 폼에 커스텀 훅을 넣어본 것과 같이 투두리스트에도 커스텀 훅을 적용해보기로 했다. 커스텀 훅에 대한 이야기와 왜 이러한 작업과 포스팅을 하는지는 지난 커스텀 훅 포스팅을 읽으면 될 것 같다. 회원가입 폼에 커스텀 훅 넣어보기 이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 jhbljs92.tistory.com 그럼 어떻게 작성하고 리팩토링을 진행했는지 적어보겠습니다. 이번 투두리스트도 마찬가지로 css에 대한 연습이 아니였기 때문에 매우매우 안이쁜점은 감안해주세여. 1. 분리없는 기본적인 코드 import { useEffect, useState..
이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 들어, 마침 비즈니스 로직 분리 (커스텀 훅 패턴)에 대해서 공부도 할 겸 미래의 입사테스트도 공부할 겸 겸사겸사 커스텀 훅을 활용한 회원가입폼과 투두리스트를 만들어서 포스팅을 해볼 생각이다. 이런걸 왜하냐 생각할 수도있지만 기본코드부터 시작해서 커스텀 훅 패턴을 검색없이 손에 익히기 위해서는 간단한것부터 적용해보는 것도 좋을 것 같다고 생각했다. 제 코드가 완벽하게 만들어진 것이 아닐테니 보완부분은 댓글로 알려주셔도 감사합니다 :) 커스텀 훅? 리액트 공식문서 상에서 커스텀 훅의 핵심 키워드는 반복되는 로직이다. 리액트 공..
저번 좋은 성능과 가독성을 위한 if-else문에 대해 포스팅 하던 중 일급 객체에 대해서 설명을 한 부분이 있는데, 모든 일급 객체에는 다른 함수의 리턴값으로 사용할 수 있어야한다는 부분이 있었다. 자바스크립트에서는 커링을 통해 함수의 리턴값을 호출할 수 있었는데, 그럼 커링이 뭐길래 그게 가능한건지 알아보기로 하였다. 좋은 성능과 가독성을 위한 if-else 문 (2) 더 좋은 성능과 가독성을 위한 if-else문을 작성할 수 있는 방법 4가지 중에 남은 2가지를 마저 작성해보자. 두가지의 방법을 먼저 작성했던 첫번째 포스팅 다음으로 남은 두가지의 방법을 알아보 jhbljs92.tistory.com 커링이라는 단어는 사실 어디서 많이 주워듣긴 했었다. 하지만 정확한 정의와 왜 사용하는지를 정확하게 알..
더 좋은 성능과 가독성을 위한 if-else문을 작성할 수 있는 방법 4가지 중에 남은 2가지를 마저 작성해보자. 두가지의 방법을 먼저 작성했던 첫번째 포스팅 다음으로 남은 두가지의 방법을 알아보고 포스팅을 해보려한다. 좋은 성능과 가독성을 위한 if-else 문 (1) 본론으로 들어가기 앞서서 제어문에 대해서 알아보자. 제어문 (control flow statements) 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다. 제어문에는 조건문, 반복 jhbljs92.tistory.com 1, 2번의 방법은 위에 올려놓은 이전의 포스팅에 올려놓았기 때문에 이번 글은 3번부터 시작하겠습니다잉 먼저, 오늘의 두가지 방법을 알기 위해서는 자바스크립트의 일급 객체에 대해서 간단하게라도..
본론으로 들어가기 앞서서 제어문에 대해서 알아보자. 제어문 (control flow statements) 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다. 제어문에는 조건문, 반복문 등이 포함된다. 우리는 코드를 작성할 때 제어문을 상당히 많이 사용한다. 그 중에서 다양한 조건을 설정할 수 있도록 if-else 문을 중첩하여 사용할 일이 아주 많다. 자주 사용하는 만큼 제대로 알고, 좋은 성능과 가독성을 챙기면 더욱 좋겠다 생각하여 if-else문을 더욱 좋은 성능과 가독성을 얻을 수 있는 코드작성 방법을 포스팅해본다. 총 4가지의 방법을 알아보려하는데 2개의 포스팅으로 나누어서 작성하려고 한다. 이유는 내 머리에 다 안들어오기 때문임. 조건문의 성능과 가독성을 위한 포스팅..
