프로젝트를 하다보면 깃허브에 db url이나 oken 정보와 같은깃허브에 올려서는 안되는 개인 정보가 있을 것이다. 만약에 openAI chatgpt api를 쓰기 위해 토큰을 발급 받고그 코드를 깃허브에 올린다? aws 정보를 깃허브에 올린다?그 순간 과금이 시작되고 만다. nodejs를 사용하는 프로젝트를 진행중에깃허브에 올리지 말아야 할 파일을 어떻게 관리하는지에 대해 설명하고자 한다. dotenv를 활용하여 어떻게 .env로 관리할 수 있는지에 대해 알아보겠다. (혹여나 깃허브에 이러한 개인정보를 올렸다면그 즉시 레포지토리를 삭제하는 것을 권장한다.) dotenv는 Nodejs에서 환경 변수를 효과적으로 관리해줄 수 있는 라이브러리다. dotenv 사용 dotenv 설치 npm instal..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 32 (202506012) 이전에 만들었던 Todo App에 스타일을 적용하고, TypeScript로 바꿔서 다시 만들어보는 과정을 진행하였다. TypeScript는 javaScript에 타입이 추가된 형태라고 생각하면 된다. TypeScript에 대한 기본 문법에 대해 알기 위해서 이전에 작성하였던 글을 첨부하겠다 (이전 글 참고) [신한투자증권 프로디지털아카데미] 클라우드 기반 프론트엔드 기초 프로그래밍 - 5 (TypeScript & Re신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 27 (20250604) TypeScriptI/O가 대부분의 병목을 차지함자..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 31 (20250611) 이전 게시글에 이어 Todo App 만들기와 심화 문제에 대해 작성해보겠다. 연습문제 9심화 (3) - 로컬스토리지에 저장하기새로고침해도 데이터가 사라지지 않도록 하기 위해 Storage API를 이용하였다. 개발자도구에서 application 들어가면 거기에 존재하는 저장소를 볼 수 있는데그 중에 가장 많이 사용되는 게 local storage, session storage 가 있다. 이전 게시글에 storage api에 대해 조금 더 자세하게 기록해두었다. 이전 게시글 참고 [신한투자증권 프로디지털아카데미] 클라우드 기반 프론트엔드 개발(React) 프로그래밍 - TodoApp신..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 30 (20250610) 어제 배운 개념 정리1. useMemo정의: 특정 값을 memoization(캐싱)하여 불필요한 재계산을 방지하는 Hook언제 사용?: 계산 비용이 큰 연산 결과를 저장하고 싶을 때조건: 의존성 배열(deps)의 값이 변경될 때만 다시 계산 const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 2. useCallback정의: 특정 함수를 memoization하여 불필요한 함수 재생성을 방지언제 사용?: 콜백 함수를 자식 컴포넌트에 props로 넘겨줄 때 → 리렌더링 최적화조건: 의존성 배열이 변경되지 않는..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 29 (20250609) 배운 개념 정리 1. 얕은 비교와 깊은 비교깊은 비교 : Collection Data(Array, Object 등)의 경우 개별 값들 모두 일일이 비교얕은 비교 : Collection Data(Array, Object 등)의 경우 참조값만 비교. (일반적인 메모리 주소값)리액트의 얕은 비교는 객체의 참조주소만 똑같은지 비교하는 방식이다. 리액트에서 얕은 비교를 사용하는 이유는 상태가 변할 때 페이지가 랜더링 되면 다른 상태값들이 일치하는지 체크하게 되는데 깊은 비교를 사용하면 안쪽 depth까지 비교하기 때문에 연산비용이 더 많이 들게 된다. 그래서 빠르게 처리하기 위해서 리액트에서는..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 28 (20250605) 궁금했던 점들 정리 1. main.jsx의 버그를 잡기 위해 랜더링을 두번 한다. 리액트는 순수함수가 아닐 경우에 예측 불가한 상황이나 오류가 생길 수 있어서순수함수임을 지켜줘야 하는데 StrictMode에서 두 번의 랜더링을 통해 동일한 값이 나오는지 비교하고그렇지 않으면 경고를 해준다.또한 useEffect의 사이클이 한번 더 돈다.또 문자열 ref 사용에 대한 경고, createRef 사용권장, 권장되지 않는 findDOMNode 사용경고, 레거시 contextAPI 검사 등의 기능을 하며개발환경에서 strict하게 개발하도록 도와주는 역할을 한다. 이 가 활성화 되어 있는 ..