takeU

프로젝트 세팅우선 하나의 프로젝트로 진행하고 추가로 다른 프로젝트를 진행할 때 세팅을 또 하지 않아도 되도록 모노레포로 구성추후 다시 세팅하는 상황을 고려해 최대한 상세히 기록해 놓으려 함2024.10.14 - 아래 코드는 온전히 동작하지 않는 부분이 있으니, 참고만 하세요. 추후 재작성 예정입니다.터보레포 생성npx create-turbo@latest playground패키지 매니저는 기존에 사용하던 pnpm 선택.Vite + React + TypeScript 프런트엔드 생성pnpm create vite@latest apps/maplem.gg/frontend --template react-tsFastify 백엔드 생성mkdir -p apps/maplem.gg/backendcd apps/maplem.gg..

기존에 진행하고 있던 프로젝트가 앞선 게시물에서 언급했던 것 처럼백엔드와 배포를 둘 다 netlify를 통해서 진행했어서 DB도 없고, 배포가 되는 과정을 모르는게 아쉽다 생각했음.아래는 v1을 개발했을 때의 스택- Frontend - react / vite- Backend - netlify serverless functions / DB 없음- hosting - netlify새롭게 v2를 만들 계획을 하면서 이전에 v1스택을 정하게 된 이유에 대해 먼저 간략히 말하자면,회사에서 개발을 하다보면 오래전부터 이어져온 코드이기도 하고, 컨벤션이나 룰이 있다지만 아무래도 개개인이 작성하는 코드기 때문에, 통일이 안되어있는 부분에서 해소되지 않는 답답함이 있어서 가장 미니멀한 스택으로 기능만 구현하자라..

SSH 설치설치sudo apt install openssh-server실행 & 종료 & 실행 상태 조회# SSH 실행sudo service ssh start# SSH 종료sudo service ssh stop# SSH 실행 상태 조회sudo service ssh statusSSH 접속 포트 설정기본적으로 SSH의 기본 포트는 22번인데 그대로 사용하면 브루트포스의 타겟이 되기 좀 더 쉬워지기 때문에, 변경해주는 것이 좋음sudo vi /etc/ssh/sshd_config위 커맨드를 통해 편집기를 연 후에 본인이 기억할 수 있는 포트 번호를 지정하고 저장하면 됨.Port 2199 # SSH 서버가 사용할 포트를 설정합니다. 기본값은 22입니다.ListenAddress..

부팅해보니 윈도우 11프로가 정품키 인증까지 되어있는(??!) 상태였는데 나중에 언젠가 쓸날이 생길지도 모르니 키는 저장해 두고 우분투 설치.LTS 버전인 24.04 버전을 usb에 받아서 설치했음.원래는 우분투 서버로 깔려했는데, 처음이다보니 좀 후달려서 데탑버전으로 설치iso 파일 링크 https://releases.ubuntu.com/noble/rufus로 부팅유에스비 구웠음 https://rufus.ie/ko/설치할때 전부다 영어버전으로 설치하니까 한글 설정이 안돼서 아래 게시글 보고 수정https://staraube.tistory.com/105유선 이더넷이 안잡혀서 검색하다보니 우분투 24에서 안된다는 사람들이 꽤 있는듯..lspci | grep -i Ethernet// 02:00.0 Ether..

미니 PC 구매사이드 프로젝트를 react에 서버리스로 DB없이 개발을 진행하다가 기능 확장과 더불어 개인 서버가 가지고 싶다는 생각이 들어서 알아보기 시작함.하드웨어 지식은 전무해서 조사해본 결과 n100이 무난해보였음.구매한 제품은SOYO M2 PLUS 에 스스디512 램16까지해서 78.21불 > 93500원 정도에 구매완료.배송은 약 일주일 정도만에 왔는데 그냥 잘 켜지는거 봐서는 불량이 아니겠지싶어서 그냥 쓰려고 함.

부모에서 props로 컴포넌트를 내려주고, 자식 컴포넌트에서 해당 props를 받아 그려줄 때추가적인 property나 props를 할당해주고 싶은 경우에 cloneElement의 두번째 인자를 통해 속성을 내려주면 됨// 부모}/>// 자식import { cloneElement } from 'react';const Child = ({ componentProp }) => { return ( {cloneElement(componentProp, { value: 0 })} )}

netlify serveless(functions)를 사용할 때 키를 감추기 위해 프록시 사용CRA로 설계했다가 Vite로 마이그레이션하는 과정 중에 설정하는 법 정리Create React App (CRA)src 폴더 내 setupProxy.js 생성const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( "/.netlify/functions", createProxyMiddleware({ target: "http://localhost:9999", changeOrigin: true, }) );};Vitevite.config.js 파..

이번 회고는 작년과 다르게 두서가 없다.원래 진작에 썼어야 됐는데, 이거 쓰려고 앉기만 하면 졸려서..생각을 너무 안하고 살았더니, 어떤 말을 써야할지조차 잘 안떠오른다.일년동안 생각없이 하고 싶은 것 다 하고, 먹고 싶은 것 다 먹고, 사고 싶은 것 다 샀다.  딱히 어떤 보상을 받아야만 하는 명분은 없지만, 그래도 온전한 성인이 되었다는 본인을 자축하는 의미로 한 해를 보냈다. 아무래도 배부르고 등따시니까 절박함은 사라졌고,  내가 계획하지 않아도 매일의 스케줄이 고정으로 짜여있으니 좀 나태해지지 않았나 싶다. 상반기엔 좀 새로운 내가 되어보겠다고 "열심히" 살았다.  생각하지 않고 그냥 하고싶은대로 움직였다.아침에 눈뜨면 운동가고, 술먹고 싶으면 술먹고, 공연보고 싶으면 공연보러 가고 ...건..

3. 리액트 훅 깊게 살펴보기 3.1. 리액트의 모든 훅 파헤치기 3.1.1. useState 함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해주는 훅 const [state, setState] = useState(initialState) useState의 초깃값에 함수를 넣는 것 - 게으른 초기화 (lazy initialization) 게으른 초기화 함수는 state가 처음 만들어질 때만 실행 초깃값이 복잡하거나 무거운 연산을 포함할 때 사용 3.1.2. useEffect 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 function Component() { useEffect(() => { // code }, [props, state]) 첫 번째 인수..