AMRD CODING

리액트 프로젝트를 위한 koyeb 백엔드 배포 세팅법 리액트로 채팅앱을 만드려다가, 백엔드 구성에 너무 힘을 주고 싶지는 않기도 하고 AWS로 배포하기에 부담이 되어 알아보던 중 많은 분들이 Koyeb을 사용하는 것을 알고 백엔드를 이에 맞춰 구성하기로 했습니다. 배포 서비스를 Koyeb으로 설정한 이유는 간편하게 백엔드 서비스를 배포하고 관리할 수 있으며, 무료로 사용할 수 있어 비용 부담이 없기 때문입니다. 또한, GitHub 연동을 통해 코드 변경 시 자동으로 빌드 및 배포가 가능해 효율적인 개발 환경을 지원합니다. 오늘은 koyeb으로 백엔드를 초기 세팅하고 간단하게 배포하는 방법에 대해 포스팅 해보겠습니다. 이에 앞서 프론트엔드와 백엔드를 어떻게 구성했는지 알려드릴게요. 프로젝트 구성제 프로젝트는 React로 만든 프론트엔드와 No.. backend 2024.09.09  1

Electron에서 React의 특정 페이지를 로드하는 방법 오늘은 제가 electron.js와 react를 연동하는 어플리케이션을 만들면서 여러번 삽질했던 내용 중 하나인, react의 특정 페이지를 electron.js내에서 불러온 뒤 팝업시키는 방법에 대해 포스팅 해보겠습니다. 아래서도 언급하겠지만 hash router를 사용하는 것이 핵심입니다. electron.js와 react를 연동하는 초기 세팅 방법에 대해서는 아래 링크를 참조하세요. electron.js와 react 연동하기 이후 나올 내용은 리액트와 Electron.js를 사용하여 특정 페이지를 팝업으로 띄우는 방법입니다. 1. React Router 설정우선 저희는 리액트에서 HashRouter를 사용해야 합니다.리액트에서 라우트를 설정할 때 HashRouter를 사용하여 다음과 같.. frontend 2024.08.06  0

vscode에 tortoise svn 연동하기 (next.js 이용 버전) 아래는 내가 시행착오를 겪으며 알게된 vscode에 svn을 연동하는 방법이다. next.js를 이용한 프로젝트를 만듦과 동시에 svn에 연동도 하는 그런 최적의 루트를 찾아야 하는데 블로그를 찾아봤지만 나와 비슷한 사례를 발견하는 것도 어려웠고(당연하다..) tortoise 홈페이지를 봐도 내가 찾는 부분은 안나오니 답답했었다. 그냥 이것저것 시도해보면서 내게 가장 잘 맞는 프로세스를 찾아서 공유해보겠다. vscode에 tortoise svn 연동하기 (next.js 이용 버전) 1. vscode에 svn 익스텐션 잘 설치하기. 2. 원하는 경로에 원하는 이름으로 svn에 연동할 폴더 하나 생성. 3. svn 저장소 브라우저에 체크아웃 할 폴더 만들기(create folder) -> 경로 복사 4. v.. 알아두면 유용한 것들 2023.10.09  0

React에서 useState로 상태 업데이트시 콜백 함수 방식을 사용해야 하는 이유 늘상 사용하던 코드에 대해 의문을 갖지 않다가 인강을 들으며 왜 이렇게 사용해야 하는지 이해하고 있습니다. 오늘은 리액트에서 useState를 사용하여 상태 업데이트를 할 때 왜 콜백함수인 (prevUserInput) => { ... } 와 같은 형태로 써야 하는지에 대해 포스팅 하겠습니다. 우선 오늘 배운 코드는 아래와 같습니다. import { useState } from "react";export default function UserInput() { const [userInput, setUserInput] = useState({ initialInvestment: 10000, annulInvestment: 1200, expectedReturn: 6, duration: 1.. Udemy 리액트 완벽 가이드 2024 2024.08.25  4

[C++]C++ 객체 수명 주기: 소멸자와 메모리 관리 이해하기 메모리 관리와 프로그램 성능 최적화에 있어서 매우 중요한 C++에서의 변수 저장 및 함수 인자 전달 방법, 소멸자에 대해 알아보겠습니다. C++에서의 변수 저장 방식 1. 직접 저장기본적으로 C++에서는 변수가 메모리에 직접 저장됩니다. 이 경우 변수는 그 타입에 따라 정해진 크기만큼 메모리를 차지합니다.직접 저장의 특징은 다음과 같습니다. - 수정자 없음: 타입에 특별한 기호가 없습니다.- 크기: 변수는 자신의 타입에 맞는 크기만큼 메모리를 차지합니다. Cube c; // Cube 객체를 메모리에 직접 저장int i; // 정수를 메모리에 직접 저장uiuc::HSLAPixel p; // 픽셀을 메모리에 직접 저장 이 예시에서 c, i, p는 .. 카테고리 없음 2024.08.08  0

자바스크립트 콜스택 쌓이는 순서 확인하는 방법 자바스크립트를 잘 이해하기 위해선 콜스택이 쌓이는 방식을 눈으로 직접 확인해보는 것이 좋습니다.콜스택이 쌓이는 순서를 확인하기 위한 두 방법을 먼저 소개해 드리겠습니다. loupe 사이트 이용하기 아래는 콜스택을 시각화된 자료로 보여주는 loupe라는 사이트입니다. 아래 링크에서 콜스택을 시각화된 자료로 확인할 수 있습니다. 콜스택 시각화 예시 바로가기 개발자도구 snippet 활용하기위 사이트 말고도, 크롬 개발자도구의 상단 탭에 있는 Sources탭에 snippets를 추가하여 콜스택을 확인할 수도 있습니다. snippet에서 콜스택을 확인하는 순서는 아래와 같습니다. 1. snippets 탭에서 new snippet 추가2. 중앙 탭에서 콜스택을 확인할 코드 작성3. .. frontend 2024.08.27  0

티스토리툴바