takeU

부팅해보니 윈도우 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]) 첫 번째 인수..

2. 리액트 핵심 요소 깊게 살펴보기 2.1. JSX란? XML과 유사한 내장형 구문 페이스북에서 개발 자바스크립트 표준의 일부는 아님 자바스크립트 엔진이나 브라우저에서 직접 실행되거나 표현되지 않음 트랜스파일러로 변환이 필요 2.1.1. JSX의 정의 JSXElement JSX를 구성하는 가장 기본 요소 HTML의 element와 비슷한 역할 HTML 태그와 구분짓기 위해 대문자로 시작 (표준은 아님) JSXAttributes JSXElement에 부여할 수 있는 속성 JSXSpreadAttributes - 전개 연산자와 동일 JSXAttribute - 속성 JSXAttributeKey JSXAttributeValue JSXElement - 다른 JSX 요소가 들어갈 수 있음 ( 잘 안쓰임 ) JSXF..

React Hook 정리 개발하면서 끊임없이 훅으로 코드를 짜면서도 잘 모르고 사용하는 부분이 많아 정리를 해볼 필요가 있다 생각이 들음. 꼭 필요한 내용들 위주로 작성하려 함. React Hook 이란? 우선 Hook이 도입되기 이전의 방식인 Class형 컴포넌트의 문제점은 다음과 같다 생명주기 메소드를 사용할 때, 해당 메소드에 설계 의도 이외의 코드가 들어가는 상황이 빈번해지고, 이는 버그를 유발하고 무결성을 해치게 됨. this 는 재사용성과 구성을 복잡하게 함. 이러한 문제를 안고 React 16.8 버전에 추가된 React Hook의 특징 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있다. 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. Hook을 도입했지만, Class를 ..

예시로 파일 업로드를 하는 인풋에 새로운 커스텀 버튼을 달아 작동하게 하고 싶은 상황 input에 useRef를 통해 래퍼런스를 추가해준 상태에서 커스텀 버튼의 클릭 이벤트로 클릭을 발생시키는 상황을 만들면 기존 react-hook-form의 register.ref 위에 덮어씌워져 훅폼의 데이터에 추가가 되지 않는 상황이 생김. 즉, 추가 커스텀 버튼을 누르면 input file 선택 버튼이 클릭 되어야하고 그와 동시에 input file에 추가된 파일데이터가 훅폼에 추가가 되어야하기때문에 인풋의 ref에 커스텀 버튼 클릭을 위한 ref와 훅폼의 ref가 동시에 걸려야 함. import React from 'react'; import { useForm } from 'react-hook-form'; exp..

아이템 51 - 의존성 분리를 위해 미러 타입 사용하기 각자 필요한 모듈만 사용할 수 있도록 구조적 타이핑을 적용 즉, 의존성을 분리해 사용자가 사용에 용이하도록 함 작성중인 라이브러리가 의존하는 라이브러리의 구현과 무관하게 타입에만 의존한다면, 필요한 선언부만 추출하여 작성 중인 라이브러리에 넣는 것(미러링)을 고려해볼 수 있음 다른 라이브러리의 타입 선언 대부분을 추출해야 한다면, 차라리 명시적으로 @types 의존성을 추가하는 것이 나음 유닛 테스트와 상용 시스템 간의 의존성을 분리하는데도 유용 아이템 52 - 테스팅 타입의 함정에 주의하기 헬퍼 함수를 통한 테스팅 // lodash의 map import { map } from "lodash"; // 매개변수, 반환 타입 모두 체크 가능 functi..

아이템 41 - any의 진화를 이해하기 일반적인 타입들은 정제되기만 하는 반면, 암시적 any와 any[]타입은 진화할 수 있음 function range(start: number, limit: number) { const out = []; // Type is any[] for (let i = start; i < limit; i++) { out.push(i); // Type of out is any[] } return out; // Type is number[] } any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법 아이템 42 - 모르는 타입의 값에는 any 대신 unknown을 사용하기 함수의 반환값에 타입 선언을 강제할 수 없기 때문에, 호출한 곳에서 타입 ..