본문 바로가기

Develop63

패키지 매니저(npm, pnpm, yarn) 최근에 새로운 프로젝트를 들어가면서 초기 환경설정을 했는데 궁금한 게 생겼다.예전에 교육기관에서 하던 소규모 프로젝트에서는 CRA를 사용해서 리액트 프로젝트 환경설정을 했었다.그때는 아무것도 모르고 그냥 npx create-react-app 하고 npm start를 하면 되는구나 하고 넘어갔는데,왜 npx create-react-app을 하면 npm start가 됐는지, 지금 하는 프로젝트는 pnpm을 쓰는데 어떤 차이인 건지 궁금해졌다. 📦 패키지 매니저패키지 매니저는 외부 라이브러리를 쉽고 체계적으로 설치, 업데이트, 삭제, 관리해주는 도구다.명령어 한줄로 해결이 되니 개발 생산성도 높아지고 보안, 호환성, 협업 효율성 등 이점이 많다.오픈소스 생태계와 현대 소프트웨어 개발에 반드시 필요한 핵심.. 2025. 6. 28.
stream() - 함수형 프로그래밍 함수형 프로그래밍함수형 프로그래밍이란데이터를 바꾸지 않고, 함수에 값을 넣어서 결과를 얻는 것에 집중하는 프로그래밍이다.함수는 "입력"을 받아서 "출력"을 만들고 그 과정에서 프로그램의 다른 부분(변수 등등)에 영향을 주지 않는다.이렇게 되면 어떤 값이 주어졌을 때 항상 같은 결과를 반환한다. 함수형 프로그래밍은순수 함수 : 동일 입력에는 항상 동일 출력불변성 : 데이터를 변경하지 않고 새 데이터 생성고차 함수 : 함수를 인자로 전달, 함수 반환 가능선언적 프로그래밍 : "어떻게"가 아니라 "무엇을"에 집중이러한 특징이 있다. Stream()Stream()은 자바에서 제공하는 기능으로리스트나 배열 같은 데이터 묶음을 한 줄씩 반복하지 않고 한 번에 여러 작업(map, filter 등)을 함수처럼 연결.. 2025. 6. 22.
REST API 규칙 지금 백엔드 API를 개발하다 보면 기존 코드들을 많이 참고하고 있는데 기존 코드들에서 일정한 패턴이나 규칙이 반복되는 것을 발견하게 된다.처음에는 API 엔드포인트나 네이밍을 자유롭게 정해도 되는지 의문이 들었지만 실제로는 명확한 규칙이 존재한다.그래서 REST API의 네이밍과 설계 규칙에 대해 정리해보려고 한다.✅REST API ? REST는 HTTP 웹의 창시자 중 한 사람인 Roy Fielding의 2000년 논문에 의해서 소개되었다.웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍쳐를 소개했는데 그것이 바로 REpresentational State Transfer 이다.API는 Application Programming Interface의 약자고 서로 다른 시스템이 통신할 수 있게 해.. 2025. 6. 9.
useEffect useEffect 리액트의 대표적인 Hook들에는사이드 이펙트를 처리하는 useEffect,컴포넌트의 상태를 관리하는 useState,React Context를 구독하는 useContext 등등 많은 Hook들이 있다. useEffect는 React Hook 중 하나로, 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용된다.사이드 이펙트란 데이터 페칭(API 호출), 구독 설정(이벤트 리스너), DOM 수동 조작, 타이머 설정(setTimeout, setInterval), 로컬 스토리지 접근, 외부 라이브러리 사용 등 컴포넌트의 렌더링과 직접적인 관련이 없는 작업들을 말한다. 기본 문법 기본 문법은 useEffect(setup, dependencies?)로 이루어져 있.. 2025. 5. 25.
암호화/복호화 알고리즘 KISA_SEED_CBC 사용자에게 입력값을 받고, 해당 입력값을 DB로 저장시키는 단순 SAVE지만 입력값에 개인정보가 들어간다면 신경써야 할 것들이 많다.사용자가 새로운 계정을 등록하는데 예전에는 패스워드 정도를 암호화했다면 요즘엔 이름, 연락처, 생년월일까지 암호화 시켜서 저장하는 경우가 많다. 지금 하고있는 프로젝트에서도 개인정보를 저장해야 하는 일이 생겨서 알아보는 겸 정리해두기! 많은 암호화/복호화 알고리즘이 있지만 나는 KISA의 SEED CBC를 찾아봤다. SEED는 한국인터넷진흥원(KISA)에서 개발한 국산 블록 암호화 알고리즘으로128비트(16바이트) 블록 단위로 동작하며, 128비트(16비트) 키를 사용한다.또한 국제 표준(ISO/IEC 18033-3), 국내 표준(TTA, KISA)로 등록되어 있다고 한.. 2025. 5. 22.
webX React 18.2.0Vite 6.3.5TypeScriptscss npm create vite@latest prjtname -- --template react-ts && cd prjtname && npm install && npm install react@18.2.0 react-dom@18.2.0npm install -D sass//npm install -D typescript @types/react @types/react-dom @types/node 2025. 5. 17.

티스토리툴바