ALL

이번 글에서는 Canvas를 사용하여 캐릭터 이동을 구현한 경험을 공유해보려 합니다. 그저 이동 뿐 아니라, 캐릭터가 마치 걷는 듯한 애니메이션을 표현했습니다. (제일 어려웠어요..) Canvas? Canvas API는 JavaScript 및 HTML 요소를 통해 그래픽을 그리는 수단을 제공합니다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리에 사용할 수 있습니다. → 캐릭터 이동을 위해 동적 그래픽 조작이 필요하기 때문에 Canvas API를 사용합니다! useCanvas Hook 구현 먼저 canvas를 조작할 수 있는 환경을 마련합니다. // useCanvas.ts import { useRef, useEffect } from "react"; const useCanva..

최근 React에서 Socket.IO를 사용해 보았습니다. Socket.IO를 통한 실시간 통신을 구현해보며 Custom Hook을 이용하면 더 편리한 개발이 가능할 것이라 생각했습니다. 이에 대한 구현기를 공유해보려 합니다. Socket.IO? - HTTP의 한계 HTTP는 요청한대로 응답을 보내주기만 하는 단순한 프로토콜입니다. 이처럼 요청에 대해서만 응답을 보낼 수 있는 HTTP의 특징으로 채팅, 게임 등의 실시간 통신에 매우 비효율적이었습니다. 예를 들어, 채팅 서비스에서 계속 메시지를 받기만 하는 상황은 구현하기 힘들었습니다. 또한 HTTP는 매 요청과 응답마다 connection과 disconnection의 과정을 반복해야 하기에, 유사한 통신을 반복해야 한다는 문제가 있었습니다. - WebS..

안녕하세요 동쪽별입니다. 최근에 바닐라 자바스크립트로 SPA(Single Page Application)를 개발해보았습니다. 이와 관련하여 SPA 개발을 위한 컴포넌트를 구현한 경험에 대해 공유해보려 합니다. 컴포넌트? 컴포넌트는 리액트로 만들어진 앱을 이루는 가장 최소한의 단위로, 리액트(React)에서 가장 중요한 구성요소입니다. 그래서 컴포넌트가 정확히 무엇일까요? 실제 리액트 공식 문서의 Components and Props 부문을 보면 아래 문장이 명시되어 있습니다. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements d..

요즘 블로그 글을 쓰는 빈도가 현저히 적어졌다. 부스트캠프, 토익 스피킹 공부, 알고리즘 문제 풀이 등 으로 바쁘게 살다보니 그런 것도 있다. 하지만 무엇보다 결정적인 것은 '내가 좋은 글을 쓰고 있나?' 의문이 든다. (심하게) 이 전에 작성한 글쓰기 철학 글에서 다짐했던 '쉽고 재밌게 읽혀지는 글', '내 솔직한 생각 또는 감정이 담긴 글'을 잘 쓰고 있는가? 아니다. 그저 단순히 기술을 정리하고만 있다. "왜? 공부한 내용을 기록하는 것은 좋지 않나?" notion에 정리하면 되잖아 그럼. 실제로 아래 이미지와 같이 notion을 통해 학습한 내용을 기록하고 있다. 학습한 기술을 그저 정리하는 글이라면, 내 글보다 훨씬 좋은 글이 널렸다. 오히려 좋은 글이 노출되는 것에 방해가 되지는 않을까.. 내..

안녕하세요. 동쪽별입니다. 이번 글에서는 바닐라 자바스크립트로 모달을 직접 구현해본 경험을 공유하고자 합니다. 위 이미지와 같이 날짜 입력 아이템을 클릭시 캘린더 모달이 렌더링 되도록 구현했습니다. 모달은 position: absolute 스타일을 적용하여 쉽게 퍼블리싱할 수 있습니다. 그런다음 클릭 이벤트 발생시 모달 Element를 DOM에 추가하거나, display: none 이었던 모달 Element 스타일을 display: flex 로 변경하는 등의 방식으로 렌더링할 수 있겠죠. 문제는 모달 외 영역 클릭시 해당 모달을 제거하는 동작을 구현하는 것이었습니다. 또한, 모달 제거와 동시에 날짜 입력 아이템의 포커싱 또한 비활성화해야 했습니다. 첫번째 방법 : 상위 Element 에서 이벤트 전파 해..

여름 방학을 맞으며 스스로를 게으름에서 벗어날 수 있게 하는 무언가에 던져버리고 싶었다. 그러다 부스트캠프 웹·모바일 7기 모집 공고를 보게 되었고 망설임 없이 지원했다. 두 번의 코딩테스트를 거쳐 합격! 코딩테스트 문제는 내가 생각했던 것보다 꽤 까다로웠다. ('힘들다' 라는 단어가 적절할 것 같다) 그렇게 부스트캠퍼가 되어 약 한 달간의 챌린지 과정을 경험했다. 부스트캠프 챌린지 과정은 공식 홈페이지에서 볼 수 있듯이 CS 지식 기반의 미션 해결을 수행한다. 평소 CS 지식에 자신이 없었던 나에게 너무나 좋은 기회였다. 사실 나는 부스트캠프를 꽤 만만하게 봤었다.. 그래서 기존에 진행했던 스터디 모임 활동들과 팀프로젝트를 병행하려 했었다 🤣 일주일도 안되어서 스터디 모임 활동 잠정 중단을 선언했다 ㅋ..

안녕하세요 동쪽별입니다. 오랜만에 자바스크립트 관련 글을 쓰네요 😁 이번 글에서는 자바스크립트의 가비지 컬렉션에 대해 완전 정복해보도록 하겠습니다! 메모리 누수 자바스크립트 메모리는 단순 변수에 사용되는 스택 메모리와 복잡한 객체에 사용되는 힙 메모리로 구분됩니다. 단순 변수(= 원시 타입) : String, Number, Boolean, Null, Undefined, Symbol, BigInt 등 힙 메모리에 저장된 객체의 주소값 또한 스택 메모리에 저장됩니다. 복잡한 객체(= 참조 데이터 타입) : Object, Array, Function 등 아래 그림의 왼쪽은 스택 영역으로 실행 컨텍스트와 원시 타입의 데이터를 저장하는데 사용되고, 오른쪽은 힙 영역으로 객체를 저장하는데 사용되는 것을 볼 수 있습..

미루고 미루었던 2022년 상반기 회고를 이제서야 한다. 본래 7월에 작성하려 했지만, 부스트캠프 챌린지 과정을 수행하다보니 시간이 없었다. (자기 합리화 😅) 어쨌든 간에.. 아래 문장으로 회고 글의 서두를 대변하며 글을 시작하겠다. "올해 상반기는 스스로가 가장 큰 성장을 할 수 있었던 시간이었다." 스터디 모임 활동 2022년 4학년을 맞으며 본격적인 취업 준비 활동을 시작했다. 바로, 스터디 모임 활동으로! 나는 스터디 모임을 정말로 좋아한다. 그 이유는 아래 다섯 가지 단어로 대변할 수 있을 것 같다. 공감, 피드백, 정보 공유, 재미, 강제. 2022년 초부터 지금까지 '알고리즘 문제 풀이 스터디', 'CS 스터디', '프론트엔드 스터디'를 진행하고 있다. CS 스터디는 그저 한 주제에 대해 ..

문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 & 자료구조 완전 탐색 (Brute Force) - 순열 BFS 비트 마스킹 (Bit Masking) 로직 아래 유튜브 영상을 참고하여 코드를 작성했습니다. 너무 어려워서 스스로의 힘으로 해결하지 못했거든요..😅 먼저 존재하는 카드 값에 따른 비트 마스킹을 수행합니다. 예를 들어, 1부터 3까지의 카드가 있다면 1111(15)이 되겠죠. (0의 비트는 기본으로 1로 설정합니다) 이때 비트 1을 카드가 제거된 상태로 정의하여, 카드 제거시 해당 비트를 1로 변환하고 모든 카드 값에 대한 비트가 모..

이전 글에 언급했듯 네트워크 계층은 SDN이 도입됨에 따라 Data Plane, Control Plane 두가지 계층으로 나뉘었습니다. 패킷은 SDN에 의해 remote controller에서 전체 라우팅을 결정하고 결정된 라우팅에 맞는 포워딩 테이블이 각 라우터에 뿌려짐으로써 포워딩이 결정됩니다. 여기서 포워딩을 관리하는 계층이 Data Plane, 라우팅을 관리하는 계층이 바로 Control Plane입니다. 그럼 이번에는 네트워크 계층의 control plane에 대해 살펴봅시다! 목차 라우팅 프로토콜 Link State 다익스트라(Dijkstra) 알고리즘 Oscillations posiible Problem Distance Vector 벨만-포드(Bellman-Ford) 알고리즘 Count-to..