개발자 지망생의 블로그

안녕하세요~ 블로그 이전했습니다. 친오빠와 같이 운영하는 개발 블로그인데, Unity, C# 위주로 포스팅 올릴 예정입니다! 많이 방문해주세요 :) Joe Brothers We are independent dev team. blog.joe-brothers.com

안녕하세요~ 회사 다니느라 오랜만에 포스팅하네요. 준비하던 자바스크립트 게임 개발 강의가 오픈되어 홍보차 글을 씁니다 🥳 여러분은 '뱀파이어 서바이벌'이 자바스크립트로 개발된 게임이라는 것을 아시나요? 심지어 뱀파이어 서바이벌의 경우 게임 개발자는 단 한 분이라는 것..! 유명한 게임 엔진인 유니티, 언리얼을 쓰지 않더라도 충분히 게임을 개발할 수 있습니다! 비전공자에 웹 프론트엔드만 공부하던 저도 일주일만에 뱀파이어 서바이벌을 간단히 클론코딩할 수 있었기 때문이죠 😎 제 강의에서 뱀파이어 서바이벌을 함께 클론해보며 HTML5 게임엔진인 Phaser 3와 JavaScript를 활용해 게임을 개발하는 과정을 배우실 수 있습니다. 웹 프론트엔드, 백엔드 또는 다른 개발 분야를 공부하며 JavaScript(E..

[React, Vite] 개발 모드에서는 되고 배포하면 에러 날 때 React + Vite + TypeScript 프로젝트를 하다 에러가 발생했다. 로컬에서는 화면이 정상적으로 나왔는데 배포한 사이트에서는 빈 화면만 떴다. 에러 메시지는 다음과 같았다. create-react-app, vite 등에서 제공하는 build 기능은 코드를 경량화 및 난독화해 준다. 따라서 'ao'라는 식별자가 무엇인지 알아볼 수 없다. 개발 모드에서는 잘 실행되었으므로 build 한 결과물에 에러가 있을 것이다. 어느 부분에서 에러가 났는지 확인하기 위해 minify 옵션을 꺼야 한다. vite.config.ts 파일에서 build: { minify: false } 를 추가해주자. build를 실행한 뒤, index.html..

Vite 프로젝트를 GitHub Pages에 배포했을 때 빈 화면이 뜨는 에러 Vite + React + TypeScript로 프로젝트를 진행하던 중 오류가 발생했다. 배포 스크립트를 추가하고 push 했는데 build, deploy 모두 success로 표시되지만 페이지에 빈 화면만 떴다. Actions 탭에 들어가 Artifacts를 다운로드 받아 확인해 봄으로써 문제 원인을 파악할 수 있었다. (Artifacts : 런타임 동안 만들어진 파일들) script 태그의 src 경로와 link 태그의 href 경로가 절대 경로로 표시되어 있다. 해결 방법은 간단하다. vite.config.ts 파일에서 base: ''를 추가해주면 된다. 그러면 이렇게 상대 경로를 참조하는 것을 확인할 수 있다. vite..

프로그래머스 2단계 문제인 '숫자의 표현'을 C++로 풀어보았다. [문제 설명] Finn은 요즘 수학공부에 빠져 있습니다. 수학 공부를 하던 Finn은 자연수 n을 연속한 자연수들로 표현 하는 방법이 여러개라는 사실을 알게 되었습니다. 예를들어 15는 다음과 같이 4가지로 표현 할 수 있습니다. 1 + 2 + 3 + 4 + 5 = 15 4 + 5 + 6 = 15 7 + 8 = 15 15 = 15 자연수 n이 매개변수로 주어질 때, 연속된 자연수들로 n을 표현하는 방법의 수를 return하는 solution를 완성해주세요. [제한사항] n은 10,000 이하의 자연수 입니다. 투포인터를 사용해서 풀었다. (0) first와 last를 1로 초기화한다. (1부터 1까지의 합부터 시작) (1) first부터 ..

[React, TS, MUI] 여러 컴포넌트에 일괄적으로 커스텀 스타일 적용하기 최근 React + TypeScript + MUI로 랜딩 페이지를 만들기 시작했다. 센드버드의 랜딩 페이지를 클론하는 것을 베이스로, 조금씩 변화를 주면서 구현하고 있다. 위 화면 하단의 아이콘이 일렬로 정렬된 부분을 클론하면서 MUI의 Material Icons를 사용했다. 아이콘 컴포넌트를 담는 배열을 만들었고, 컴포넌트 각각의 sx prop에 fontSize를 전달했다. 💡 sx prop이란? The sx prop is a shortcut for defining custom styles that has access to the theme. (ref) mui 컴포넌트에 커스텀 스타일을 적용할 수 있는 prop이다. sx가..

[프론트엔드] 브라우저 렌더링 과정 정리 | 렌더링 엔진, CRP 브라우저 렌더링 과정에서 일어나는 일들을 프론트엔드 위주로 자세히 정리해보았다. 브라우저 먼저 브라우저의 아키텍처를 살펴보자. (⚠️ 브라우저마다 다른 아키텍처로 이루어져 있으므로 각 브라우저의 동작과 완벽하게 일치하지 않을 수 있다.) 브라우저의 주요 구성 요소는 다음과 같다. User Interface : 주소 표시줄, 뒤로/앞으로 가기 버튼, 홈 버튼, 북마크 버튼아 등이 포함된다. 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분을 표시한다. Browser engine : UI와 렌더링 엔진 사이의 Rendering engine : 요청된 콘텐츠 표시를 담당한다. 예를 들어, 요청된 콘텐츠가 HTML인 경우 렌더링 엔진은 ..

자바스크립트 비동기를 제대로 이해해보자 | async, await 💡 다음 코드를 실행하면 콘솔에 출력이 어떤 순서대로 나올지 예측해보자. const test = async () => { console.log("hello"); const result2 = test2(); const result3 = test3(); console.log("world"); await sleep(2500); console.log(result2); console.log(result3); }; const test2 = async () => { console.log("a"); await sleep(2000); console.log("b"); return "test2"; }; const test3 = async () => { con..

[네트워크] L2 스위치 | 2계층 지난번 네트워크 2계층 포스팅에 이어 L2 스위치에 대해 알아보자. [네트워크] 2계층 | MAC 주소, Ethernet 프로토콜, Frame [네트워크] 2계층 | MAC 주소, Ethernet 프로토콜, Frame 네트워크 2계층, Data Link Layer에 대해 알아보자. 2계층에서 하는 일 2계층은 하나의 네트워크 대역, 즉 같은 네트워크 상에 존재하는 여러 장 choar816.tistory.com 💡 스위치(switch)란? 네트워크 단위들을 연결하는 통신 장비이다. 스위치의 사용 목적은 허브와 유사하지만, 스위치는 훨씬 향상된 네트워크 속도를 제공한다. 스위치는 입력 단자로부터 프레임을 받아 적절한 출력 단자(포트)로 보내 준다. 이를 스위칭(switch..

[네트워크] 2계층 | MAC 주소, Ethernet 프로토콜, Frame 네트워크 2계층, Data Link Layer에 대해 알아보자. 2계층에서 하는 일 2계층은 하나의 네트워크 대역, 즉 같은 네트워크 상에 존재하는 여러 장비들 중에서 어떤 장비가 어떤 장비에게 보내는 데이터를 전달하는 역할을 한다. 이때 하나의 네트워크 대역에 존재한다는 것은 같은 LAN 대역에 존재함을 의미한다. 추가적으로 오류제어, 흐름제어를 수행한다. 오류제어 : 데이터 전송 중 발생되는 에러를 검출, 보정하는 메커니즘 흐름제어 : 송신측이 수신측의 처리 속도보다 더 빨리 데이터를 보내지 못하도록 제어해 주는 것 2계층만 사용해서 통신하려면 하나의 네트워크(LAN) 대역에 있는 장비들과만 통신할 수 있다. 다른 네트워크(다..