이 글은 알파코에서 진행 중인 [신한투자증권] 프로디지털아카데미의 과정에서 신윤수 강사님과 진행한 프로젝트를 기반으로 작성되었습니다 오랜만에 티스토리를 작성하게 된 것 같다. 미니프로젝트에 이어 본 프로젝트를 진행하고 있는데 자격증 준비하랴 프로젝트 하랴 바쁜 7월을 보내게 되어 시간이 이제야 나게 되었다. 프론트엔드 수업을 끝내고 미니프로젝트를 1주일동안 진행한 뒤 지금은 실무 프로젝트를 진행중이다.Open API를 활용한 금융서비스를 제공하는 웹 사이트 구축 이라는 주제로 프로젝트를 진행중이고 우리팀은 FOMC와 실적 발표를 하게 되었을 때 그 내용들에 대해서 최대한 빠르게 분석하고 요약하여 보여주는 서비스를 만들고 있다. 우리의 발표 슬로건은 FOMC와 실적 발표 직후, 가장 빠르고 정제된 한글 ..

프로젝트를 하다보면 깃허브에 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까지 비교하기 때문에 연산비용이 더 많이 들게 된다. 그래서 빠르게 처리하기 위해서 리액트에서는..