morgankim

0. 프로젝트 시작 프로젝트는 4명이 한 팀으로 구성되어 약 4주간 진행됐다. 기획부터 개발, 배포, 발표까지 꽤 많은 범위를 다루었는데, 특히 기획 단계에서 어떤 주제를 가져가야 할지 오랜 고민의 시간을 보냈다. 팀원 모두가 컴퓨터를 전공한 사람들이어서 금융에 대한 깊은 지식이 없었고, 투자도 아주 얕게만 하고 있는 수준이어서 현재 논의 중인 주제가 정말 의미가 있는가- 에 대한 토의가 계속 이루어졌다. 실제로도 여러 번 주제를 엎어서, 다른 팀들이 기능 명세나 ERD 를 작성하기 시작할 때도 우리는 기획에만 매달리고 있었다 .. 으악 1. 아이디어 기획 결국 평일 이틀 내내 아무 결론을 내리지 못하고 주말동안 더 디벨롭 해오자 ! 하고 헤어졌는데, 주말동안 다들 열심히 새로운 기획 + 원래의 기획..

저번 시간 내용 복습✨함수형 컴포넌트를 사용하는 데 집중해보자! hook을 사용해서 사이드 이펙트 처리props: 컴포넌트 자체에서 변화시킬 수 없다state: 컴포넌트 내에서 저장되고 변화시킬 수 있는 값react hook: 모든 컴포넌트를 독립적으로 재사용 가능component 가 변경되면 해당 컴포넌트 함수를 다시 실행 = 다시 그린다 useEffect(effectCallback:Fn, deps:Array): state 가 변경되면 전체 컴포넌트가 다시 실행된다 - 인자가 변경되면 첫 번째 인자의 함수를 다시 실행하는 것 실습을 위한 예제 문제)아래와 같이 작성하면, 1초에 한 번씩 깜빡이는 텍스트를 만들 수 있다. 연습문제4)버튼을 클릭할 때마다 "ON"과 "OFF"로 상태가 바뀌는 토글 버튼..

저번 시간에 이어서 .. 실습을 이어가겠다 .. 🥺 화이팅화이팅 연습문제2)금융서비스 키워드로 다음 뉴스 리스트 가져오기 - 가져올 데이터 (제목, 신문사, 요약설명, 날짜, URL)1. Daum뉴스탭의 URL을 분석한다.2. 해당 URL에 Request를 보낸다.3. Response를 분석한다4. Parsing하여 문서 구조를 분석한다.5. 해당하는 문서에 원하는 값들을 뽑아서 저장한다. (JSON으로 저장한다.) 심화1. 3페이지까지 가져온다.심화2. 이미지 URL도 함께 수집한다.import * as cheerio from "cheerio";import * as fs from "fs";// const keyword = "금융서비스";// const url = `https://search.daum...

3. 브라우저를 위한 JavaScript1. 브라우저를 위한 자바스크립트 1) document 객체와 주요 함수document 객체: 현재 웹 페이지에 대한 진입점 역할을 하며, 문서의 내용, 구조, 스타일 정보에 접근할 수 있다 2) 이벤트(Event): 이벤트는 웹 페이지 상에서 사용자의 동작이나 브라우저의 특정 활동에 반응하여 발생하는 신호 또는 알림: 즉, 사용자가 웹 상에서 하는 모든 행동을 말함 3) 이벤트 리스너와 이벤트 객체: 이벤트 리스너는 특정 이벤트가 발생했을 때 호출되는 함수: 이벤트 객체는 이벤트 type, target요소, 이벤트와 관련된 데이터 포함 element.addEventListener element.onClick = () => {} : 한 번만 등록이 가능하고 복수의 ..

들어가기에 앞서 저번 시간 정리✨실행은 브라우저, 노드제이에스 환경 두 가지에서 실행할 수 있다문법적 차이는 없으나, 이용할 수 있는 리소스에 차이가 있다 function outer() { let count = 0; function inner() { count++; return count; } return inner;}const counter = outer();console.log(counter()); // 1console.log(counter()); // 2 count 는 outer() 가 호출된 이후에 접근할 수 있고, 바깥에서 조작할 수 없기 떄문에 이걸 클로저 라고 함안쪽에서는 바깥쪽이 보이지만, 바깥쪽에서는 안쪽이 보이지 않는다는 점을 이용한 것임 ..

1. JavaScript 소개 및 설치1. 프로그래밍 언어 - JavaScript 1) JavaScript 란?: 객체 기반의 스크립트 프로그래밍 언어최초의 브라우저는 넷스케이프에서 만듦단순하고 간단하다플랫폼 독립적인 오픈소스 (Node.js) -무료에다가 어느 운영체제든 사용 가능(Windows, Linux, Mac OS)다양한 프로그래밍 패러다임 지원 - 절차, 객체지향, 함수형방대한 라이브러리 - 웹 개발, 게임 개발, 데이터과학 등 범용언어 특히 웹 개발에서는 절대적인 지위를 가지고 있음이름설명대표 언어절차지향 프로그래밍(Procedural Programming)명령을 순차적으로 실행. 함수, 변수 위주.C, Pascal객체지향 프로그래밍(Object Oriented Programming)객체(데..

1. 웹 구성요소 알기 1) 웹이란 : 전 세계가 연결된 정보의 공간 : 우리는 웹을 통해 문서, 이미지, 비디오, 애플리케이션 등의 다양한 콘텐츠에 쉽게 접근하고 공유할 수 있다: 하이퍼링크를 통해 문서 간 이동이 가능하며, 이로 인해 웹은 거대한 연결 구조(Navigation Network)를 형성한다 2) 웹을 만드는 3가지 언어HTML (HyperText Markup Language) 웹 페이지의 구조를 정의하는 마크업 언어 - 사용자뿐 아니라 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 데도 도움이 된다 웹 페이지에 있는 모든 콘텐츠는 HTML을 통해 구성됨 - 이는 상호 연결을 가능하게 함(하이퍼링크) 를 사용하여 각 요소의 구조와 역할을 구분 CSS (Cascading Style Sheets)웹..