Tiny Bunny

본문 바로가기

전체 글113

[CS/ IT용어 정리] 블록체인 ; NFT, 샤딩, 차등프라이버시, 스테이블코인 블록체인: 중앙 서버없이 네트워크 참여자들 간에 거래정보를 공유 & 관리하는 분산형 데이터베이스 기술 (= 분산형 DB기술 ) 블록 형태로 묶어 체인처럼 연결하여 각 블록은 이전 블록과 연결됨.변경 및 위 변조가 어렵도록 설계됨.DID : 중앙 기관 없이 개인의 신원을 관리하는 기술암호화폐 장점중개자 제거로 인한 비용 절감보안성(변경 불가) → ‘체인 형태’ 결합각 블록은 이전 블록의 해시값을 포함하고 있어서,하나라도 변경시 전체 체인이 깨진다.투명성 단점개인키 해킹 및 분실 시 해결 어려움데이터 수정 어려움대용량 저장 공간 필요성확장성 문제 ; 전송되는 거래를 처리하는 속도의 저하→ 비트코인과 이더리움의 초당 처리량은 각각 7건과 30건으로,초당 수 천건을 처리하는 visa 카드에 비하면 현저하게 처리.. 2025. 6. 20.

[CS/ IT용어 정리] AI ; RAG, MCP, 제로샷- 원샷- 퓨샷 (IT용어 정리) MCP (Model-Context- Protocol)MCP : AI 모델이 시스템의 중심이 되는 개발 방식모델 중심 (O) 구조 중심 (X)모델 정확도 향상→ 피드백 루프 등 활용 각종 구조를 AI 모델의 성능 개선에 집중모델 성능 모니터링모델 실험, 운영 환경 간 격차 줄이기https://docs.anthropic.com/ko/docs/agents-and-tools/mcp 모델 컨텍스트 프로토콜(MCP) - Anthropic프로토콜에 대해 자세히 알아보고, 서버와 클라이언트를 구축하는 방법, 그리고 다른 사람들이 만든 것들을 발견해보세요.docs.anthropic.com RAG(Retrieval Augmented Generation, 검색 증강생성) → 검색된 결과로 생성형 AI 모델을 보완하여 .. 2025. 6. 18.

[Vercel] Vercel로 React 프로젝트 배포하기 React로 개발한 프로젝트를 실제 배포하여 다른 사람들과 공유하고 싶을 때, Vercel은 매우 간편하고 강력한 배포 플랫폼이다. React 프로젝트를 Vercel을 통해 배포하는 과정을 단계별로 정리해보자. 💻 1. Vercel이란?Vercel은 프론트엔드 프레임워크와 정적 웹사이트를 빠르고 쉽게 배포할 수 있도록 도와주는 클라우드 플랫폼이다.Next.js의 제작사인 Vercel에서 운영하며, GitHub와의 연동을 통해 CI/CD 파이프라인을 자동으로 구성해준다.즉, SW의 자동화된 개발 및 배포 단계를 진행해줌! + 선택 이유1. 별도의 서버 설정이나 복잡한 배포 과정 없이, 회원가입 후 손쉽게 배포가 가능해서 2. 수정사항 생길 시 github에 push만 해도 자동반영 됨. 2. .. 2025. 6. 4.

[Server] Vercel vs. Tomcat vs. AWS Vercel, Tomcat, AWS는 모두 웹 서비스를 배포할 수 있는 방법이지만, 사용하는 방식과 목적, 복잡도, 대상 사용자층이 다르다. 나는 이전에 Tomcat, AWS 를 통해 프로젝트를 배포한 경험이 있었다.최근에 Vercel을 통해 프로젝트를 배포하며 서버들에 대해 정리를 하고 넘어가보고 싶어졌다.Aka. 프로젝트 별 최적의 서버를 찾아... 각 서버 플랫폼을 기능, 편의성, 유연성, 성능, 사용 사례 측면에서 비교해보자 ☺️ Vercel특징: 서버리스(Serverless) 기반 플랫폼. 정적 사이트 및 프론트엔드 프레임워크에 최적화.장점:React, Next.js 프로젝트에 최적화되어 있음GitHub 연동으로 자동 배포 (CI/CD 내장)무료 플랜 제공서버 설정 없이 배포 가능단점:.. 2025. 6. 4.

[Git/SourceTree] Sourcetree '자식 커밋 쌍방향 재배치(Interactive Rebase) 안 뜸' 해결하기 커밋 메시지를 변경하기 위해 자식커밋쌍방향 재배치 를 클릭했는데 텅 비어있다. . Sourcetree에서 자식커밋 쌍방향 재배치(Interactive Rebase)가 나타나지 않는 이유 1. 브랜치가 HEAD 상태가 아닌 경우반드시 로컬 브랜치에 체크아웃되어 있어야 한다.Detached HEAD 상태에서는 해당 메뉴가 비활성화된다. → Sourcetree 상단에서 현재 브랜치가 정상적으로 선택되어 있는지 확인해야 한다. 2. 현재 브랜치에 커밋 수가 부족한 경우쌍방향 재배치는 최소 두 개 이상의 커밋이 존재해야 실행할 수 있다.커밋이 1개 이하일 경우, 메뉴가 나타나지 않는다. 3. 메인 브랜치(main/master)에서 실행한 경우 일반적으로 rebase는 기능 브랜치(featur.. 2025. 5. 30.

[Node.js] Node.js 초기 설정, 환경변수 설정하기 Node.js는 JavaScript를 사용하여 서버 사이드 애플리케이션을 개발할 수 있는 런타임 환경이다. 간결하고 유연한 개발 환경을 갖추기 위해, 프로젝트 초기 설정은 매우 중요하다. Node.js 프로젝트를 처음 시작할 때 필수적으로 진행해야 할 설정 과정을 정리해보자☺️ 1. Node.js 설치Node.js를 설치하기 위해서는 공식 웹사이트에서 설치 파일을 다운로드하거나, nvm(Node Version Manager)을 사용하는 것이 좋다. nvm을 사용하면 여러 버전의 Node.js를 쉽게 관리할 수 있다.# nvm 설치 (Mac/Linux 기준)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash# 원하.. 2025. 5. 28.

[React] useMemo (ft. 재연산 최적화) 💡최적화 코테를 준비하면서도, 애플리케이션 개발을 하면서도 항상 신경써야한다고 누누히 들은 코드 최적화.. ! 두둥.. 리액트 애플리케이션을 개발할 때 역시 마찬가지이다. 리액트에서는 '렌더링과 연산'이 성능에 큰 영향을 미친다.특히, 상태( state) 가 변경될 때마다 불필요한 연산이나 렌더링이 반복되면 전체 성능이 저하될 수 있다. 리액트 최적화를 위해 지양해야할 요소들은 아래와 같다. 1. 불필요한 렌더링2. 컴포넌트 내부의 불필요한 연산3. 컴포넌트 내부의 불필요한 함수 재생성 이중 useMemo 훅은 React의 불필요한 연산을 막아 최적화한다. 💡useMemo : 특정 연산의 결과를 메모이제이션(memoization) 하여 불필요한 연산(재연산)을 방지하는.. 2025. 5. 28.

[React] React.memo와 useCallback (ft. 리렌더링 최적화) 목차1. React.memo 메서드1-1. 커스텀 비교함수2. useCallback 💡1. React.memo 메서드저번에 useMemo 훅으로 불필요한 연산을 막았다면,React.memo는 불필요한 리렌더링을 막아주는 내장함수이다. : 함수형 컴포넌트를 메모이제이션(memoization) 하여, props가 변경되지 않으면 컴포넌트를 리렌더링하지 않는 기능을 수행한다. 기본형태는 아래와 같음.import { memo } from 'react';const MyComponent = (props) => { // ...};export default memo(MyComponent); props가 얕은 비교(shallow comparison)로 동일한 경우 해당 컴포넌트는 리렌더링되지 않는다. .. 2025. 5. 27.

[React] useReducer React에서 '상태관리'에 사용되는 hook에는 useState와 useReducer가 있다.useState는 간단한 상태관리를 위해 사용되지만,복잡한 로직이 있는 경우에는 useReducer를 사용하는 것이 더 구조적이고 관리하기 쉽다. useReducer의 개념과 적용한 예시 코드를 정리해보자 ! 💡useReducer 란?useReducer 는 상태(state)의 변경 로직을 컴포넌트 밖으로 분리해줌으로써 보다 명확하게 관리하는 Hook이다. → 컴포넌트 외부에 상태 관리 코드를 분리ex.function reducer(){ //...}function App(){ const [todos, dispatch] = useReducer(reducer); //...} 기본적인 사용 형태co.. 2025. 5. 26.

[React] useEffect (라이프사이클, Dependency array) 💡useEffect란?- React에서 컴포넌트의 라이프사이클을 다루기 위한 대표적인 Hook이다.- 생명 주기 별 특정 로직을 수행할 수 있도록 해준다.- 전통적인 클래스형 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있게 해주는 Hook임 = 주기별 사이드 이펙트(side effect)를 제어한다. * 리액트 라이프사이클 ( life-cycle ): Mount(탄생)- Update(변화)- Unmount(죽음) 으로 구성 아래의 예시 코드를 통해 useEffect를 정리해보자.// App.jsximport './App.css'import Viewer from "./com.. 2025. 5. 22.

[React] Props 전달 시 {} 사용하는 이유 / map() 함수 TodoList 앱 개발 중 간략하게 정리하면 좋을 내용이 생겨 정리하기:) 목차1. Props에 {} 전달하는이유2. map() 함수 1. Props에 {} 전달 하는 이유 일단 Props 란 리액트에서 부모 컴포넌트로부터 전달받는 데이터이다. 부모 컴포넌트로부터 props 를 전달받을 때 두 가지 방식이 있다. 1. Props 전체를 받음 const List = (props) => { console.log(props.todos); // 접근하려면 props.todos} 구조분해할당을 하지 않고 전달 props를 전달 받으면, 객체 형태(object)로 전달된다. { todos : [...] } 형태로 전달 되는 것이다.객체(object)는 key- value 쌍으로 구성되어 .. 2025. 5. 19.

[React] React Hook과 Custom Hook 목차1. React Hook2. custom Hook 1. React Hook💡Hook이란? Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다. Hook은 React 16.8에 새로 추가된 기능이며,Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. ⚙️ 대표적인 Hook 종류useState: 컴포넌트의 상태값(state)을 저장하고 변경useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등) useRef, useContext, useReducer, us.. 2025. 5. 14.

이전 1 2 3 4 ··· 10 다음

티스토리툴바