신한투자증권 프로 디지털 아카데미 (프디아) 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 27 (20250604) TypeScriptI/O가 대부분의 병목을 차지함자바스크립트에서 Type을 추가한 언어이다. (자바스크립트인데 타이핑을 지원하는 언어이다)컴파일 언어 : 컴파일 언어로 작성한 경우 컴파일을 하면 컴파일러에 의해 기계어로 변환된 파일이 생성되고, 프로그램을 실행시킬 때 컴퓨터는 변환된 파일을 실행함 스크립트 언어 : 스크립트 언어로 작성된 경우 인터프리트를 하면 인터프리터에 의해 번역할 파일을 받고 코드 한줄 한줄씩 기계어로 번역한 후 실행시킴 자바스크립트는 메모리를 항상 실행 시점에 할당 시킴cf. 컴파일 언어와 스크립트 언어의 차이점 typescript 설치 방법전역적으로 설치n..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 26 (20250602) 복습요청이 똑같으면 응답이 똑같다응답이 다르면 요청도 다르다 연습문제 (1)어제 한 실습 중에서 이미 한 작업을 또 하지 않게 하기 위해 캐시로 저장하는 방법을 쓰면 조금 더 효율적으로 할 수 있었다 연습문제 (2)금융서비스 키워드로 다음 뉴스 리스트 가져오기 [순서]1.Daum뉴스탭의 URL을 분석한다.2.해당 URL에 Request를 보낸다.3.Response를 분석한다4.Parsing하여 문서 구조를 분석한다.5.해당하는 문서에 원하는 값들을 뽑아서 저장한다. (JSON으로 저장한다.)가져올 데이터 (제목, 신문사, 요약설명, 날짜, URL) 심화1. 3페이지까지 가져온다.심화..

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다Day 25 (20250530) 3. 브라우저를 위한 자바스크립트BOM (Browser Object Model)document 객체와 주요 함수document 객체: 현재 웹 페이지에 대한 진입점 역할을 하며, 문서의 내용, 구조, 스타일 정보에 접근할 수 있습니다.161P이벤트이벤트는 웹 페이지 상에서 사용자의 동작이나 브라우저의 특정 활동에 반응하여 발생하는 신호 또는 알림자바스크립트와 HTML에서 이벤트는 웹 애플리케이션과 상호작용하는 주요 방법 중 하나. 이벤트를 이해하고 적절히 사용하는 것은 동적인 웹 페이지를 구성하는 데 필수.스크롤을 내릴 때마다 (스크롤다운 이벤트가 발생하고 있는것. 지금 위치가 어느정..