해당 포스트는 TypeScript로 AWS-S3와 presignedURL를 사용하는 방법에 대한 포스트입니다. TODO: .env, 엑세스 키 생성 방법, 제거, 복사, 이동 🔑 ACCESS_KEY, ACCESS_SECRET_KEY 구하기 두 개의 키들은 JS(TS)로 S3에 접근할 때 식별하기 위해 사용하는 Key입니다. 0️⃣ root...

본 포스트는 Node의 Express에 TypeScript를 이용한 백엔드 구축 세팅에 대한 포스팅입니다. 📃 설치 0️⃣ 필수로 설치할 패키지 npm i express npm i -D typescript nodemon @types/node @types/express concurrently typescript: 타입스크립트를 사용하기...

본 포스트는 코드스테이츠 부트캠프 프론트엔드 43기를 학습하면서 작성하는 WIL입니다. ( 1일차 ) 오늘은 코드스테이츠라는 곳에서 운영하는 프론트엔드 개발자 부트캠프의 첫날입니다. 첫날에는 HTML, CSS, JavaScript 같은 구체적인 코딩에 대해 수업하지 않고 커리큘럼에 대해 설명을 들었습니다. 구체적으로 출석, 구글 캘린더를 통...

react-router-dom의 replace에 대한 포스트입니다.state, useLocation()같은 다른 부분들은 다루지 않습니다. 🪧 react-router-dom react-router-dom가 어떤 역할을 하는지 알기 위해서는 React의 특징인 SPA에 대한 이해가 필요합니다. 0️⃣ SPA SinglePageApplicati...

본 포스트는 JS(TS)로 만든 웹 게임에 대한 마무리 포스팅입니다. ( 웹 사이트 링크 ) 📌 시작 목적 최근에 <canvas>에 관해 공부하기도 했고, 웹에 대한 흥미가 떨어져서 “웹으로 게임을 만들어보면 어떨까?” 라는 생각으로 웹 게임을 만들기 시작했습니다. 그리고 게임을 만든다면 마리오를 이용한 게임을 만들어보고 싶다는 생...

본 포스트는 React에서 스크롤 방향을 얻는 방법에 대한 포스팅입니다. 📌 쓰로틀링 헬퍼 함수 사용해도 동작에는 변화가 없으나 더 효율적으로 동작시키기 위해서 사용했습니다. throttle이란 일정주기내에 한 번의 이벤트만 발생하도록 해주는 기술을 의미합니다. 먼저 헬퍼 함수의 사용 이유에 대해 알아보겠습니다. 스크롤 ...

본 포스트는 JS(TS)로 만든 웹 게임에 대한 포스팅입니다.각 기능의 구현 방식에 대해서는 마지막 마무리 게시글에서 작성하겠습니다. 충돌 처리 매니저 클래스 구현 이전에 구현 방식은 플레이어를 기준으로 충돌 처리 메서드를 만들어서 충돌 처리를 했습니다. “플레이어와 블록”, “플레이어와 적” 이렇게 구현하는 데는 별 문제가 없었지만 적과 블...

본 포스트는 사용 이유를 제외하고 순수한 Redux에 대한 정리글입니다. ( React-Redux X ) 🫗 React에서 Redux를 사용하는 이유 React는 단방향 데이터 바인딩 원칙입니다. 항상 부모 컴포넌트에서 자식 컴포넌트로 props를 이용해서 데이터를 전달합니다. 소규모 프로젝트라면 단방향 데이터 바인딩으로 인한 불편함은 거의...

본 포스트는 OSI 7계층과 TCP/IP 4계층을 얕게 정리한 포스트입니다. 🧐 용어 정리 Host: 네트워크에 연결된 장치 Process: 실행중인 프로그램 NIC: LAN 카드 4️⃣ ( 4계층 )애플리케이션 계층 ( Application Layer ) OSI의 세션 계층(L5) + 표현 계층(L6) + 응용 계층(L7) ...

본 포스트는 JS(TS)에 OOP 적용 방법에 대한 포스팅입니다. OOP 1. OOP 사용 이유 웹 게임을 만들면서 특정 대상의 데이터를 관리하는 좋은 방법에 대해 고민을 했습니다. 예를 들어서 마리오라는 캐릭터에 의존한 데이터들( speed, position 등 )이 있다면 이 데이터들을 어떻게 그룹화하고 원하는 데이터만 변경시키는 방법에 ...