✏️ DevLog/Devcourse21 [DevCourse] 생성형 AI 활용 백엔드 데브코스 17일차 오늘부터는 그동안 배운 내용을 바탕으로 본격적인 팀 프로젝트를 진행하는 일정이 시작됐다.짧은 기간 안에 프론트엔드만 구현하는 프로젝트라 아쉬운 점도 있지만,그래서 오히려 더 집중해서 임해야겠다는 생각이 들었다.📌 오늘 한 일 정리프로젝트 아이디어 확정팀원들과 함께 아이디어를 논의하고 최종 주제를 선정했다.기획서, 요구사항 명세서, 기능 명세서, 와이어프레임 작성프로젝트 전체 흐름과 화면 구성을 정리하고, 필요한 기능과 요구사항을 문서화했다.역할 분담각자 맡을 부분을 정하고, 이 내용을 기능 명세서에 작성했다.🧪 내 담당 업무팀 페이지 제작WBS(Work Breakdown Structure) 제작기능 명세서 작성요구사항 명세서 작성프로젝트 및 Git 초기 세팅레포지토리 생성 및 기본 구조 세팅폴더 구조.. 2025. 4. 27. [DevCourse] 생성형 AI 활용 백엔드 데브코스 16일차 오늘은 React나 jQuery 같은 라이브러리를 사용하지 않고,Vanilla JS(기본 JavaScript)만으로 DOM을 조작하고 UI를 구현하는 실습을 중심으로 진행됐다.기본기가 탄탄해야 어떤 도구를 쓰든 흔들리지 않는다는 말처럼, 이번 실습들은 단순하지만 꽤 의미 있는 시간이었다.📌 오늘 배운 주요 개념 정리DOM 제어 기본 HTML 요소를 직접 조작하는 방식 익힘getElementById, addEventListener, textContent, classList 등을 활용해jQuery vs Vanilla JS 비교코드 길이의 차이와 명확성의 차이를 비교할 수 있었다같은 동작을 두 방식으로 구현해 보며,fetch API로 JSON 불러오기.then()과 .catch()를 통해 데이터를 비동기적으.. 2025. 4. 24. [DevCourse] 생성형 AI 활용 백엔드 데브코스 15일차 오늘은 처음으로 TypeScript(타입스크립트)를 접했다.그동안 자바스크립트로만 작업하면서 “타입이 없어서 편하다”는 생각도 있었지만,실제로 프로젝트 규모가 커질수록 코드의 구조를 명확히 표현할 수 있는 도구가 필요하다는 걸 오늘 실습을 통해 제대로 느꼈다.📌 오늘 배운 내용 요약1. TypeScript 개요와 기본 문법TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입을 추가해 코드의 안정성과 유지보수성을 높여준다.string, number, boolean 같은 기본 타입 선언 방식부터, "north" | "south"처럼 리터럴 타입, interface를 통한 객체 구조 정의, 함수 매개변수 및 반환값에 명확하게 타입을 지정하는 방식까지 실습했다.2. React.. 2025. 4. 23. [DevCourse] 생성형 AI 활용 백엔드 데브코스 14일차 오늘은 드디어 React로 외부 API를 불러오고, 실제 데이터를 화면에 출력해 보는 실습을 진행했다.뉴스 API를 연동해서 카테고리별 뉴스를 보여주는 뉴스 뷰어 페이지를 직접 만들면서,그동안 배워왔던 개념들이 어떻게 연결되는지를 실감할 수 있었다.📌 오늘 배운 주요 내용 정리1. 비동기 처리의 개념과 흐름setTimeout으로 구현된 콜백 패턴 → Promise → async/await 순으로 비동기 처리 방식의 흐름을 정리했다.async/await를 활용하면 복잡한 비동기 로직도 동기 코드처럼 읽히기 쉽게 작성할 수 있어, 실제로 써보니 정말 깔끔하다는 인상을 받았다.2. 뉴스 API 연동 실습axios를 이용해 뉴스 데이터를 비동기적으로 불러오고,카테고리 선택에 따라 데이터를 조건부로 출력하는 뉴.. 2025. 4. 22. [DevCourse] 생성형 AI 활용 백엔드 데브코스 13일차 지난 12일 차 수업은 건강 문제로 수업에 참여하지 못했지만,다행히 오늘 수업 시작 전 지난 시간 개념을 다시 복습하는 시간이 있어 큰 무리 없이 따라갈 수 있었다.React의 Hook 개념과 Router 구조를 배우고, Todo 리스트와 SPA를 직접 구현하는 실습을 하면서조금씩 React의 실전 활용 방식이 감 잡히기 시작했다.📌 오늘 배운 주요 내용 정리1. React의 다양한 Hook 활용법useState와 useEffect는 이제 익숙해졌고,오늘은 여기에 더해 useReducer, useMemo, useCallback, useRef 같은실전에서의 상태 관리와 최적화를 위한 고급 Hook을 배웠다.특히 useReducer는 상태가 여러 개이거나 복잡한 폼 로직에 유용하다는 걸,직접 예제를 따라 .. 2025. 4. 21. [DevCourse] 생성형 AI 활용 백엔드 데브코스 11일차 오늘은 React를 사용하면서 “화면이 반응하고 바뀌는 흐름”을 실감할 수 있었던 날이었다.그동안은 정적인 UI만 구성했다면, 이제는 사용자의 입력에 따라 컴포넌트가 변하고, 상태가 업데이트되고, 이벤트가 발생하는 흐름을 경험했다.예제를 하나씩 따라 하면서 React가 어떤 구조로 동작하는지를 점점 더 구체적으로 이해하게 되었다.📌 오늘 배운 내용 간단 정리1. state와 이벤트 처리useState()로 컴포넌트 내부의 상태값을 관리하고버튼 클릭, 입력 변화 같은 사용자 이벤트에 따라 상태를 업데이트상태가 바뀌면 자동으로 다시 렌더링 된다는 구조가 처음엔 낯설었지만,사용해 보니 굉장히 명확하고 직관적이었다2. 클래스형 컴포넌트 vs 함수형 컴포넌트클래스형에서는 this.state와 this.setSt.. 2025. 4. 17. 이전 1 2 3 4 다음 반응형