GO WILD, SPEAK LOUD, THINK HARD

✔ 07주차. 웹 프론트엔드 II 클래스 컴포넌트와 함수 컴포넌트의 공통된 점과 차이점을 비교하여 상황에 맞게 사용할 수 있습니다. Hook을 사용해 함수 컴포넌트에서도 State의 값을 변경할 수 있습니다. State관리를 하는 방법과 구조를 이해하고 Redux를 사용하는 이유를 알 수 있습니다. [01 Redux란?] 1. Redux - Redux 등장배경 - 프로그램의 복잡성은 개발자와 코드를 관리하는 보안관리자의 사이를 멀어지게 하며 개발자들이 개발을 할 때 코드가 장황해지거나 애플리케이션 시스템을 제어하기가 매우 까다로워짐. Redux는 애플리케이션의 복잡성을 획기적으로 낮춰서 코드가 어떤 결과를 가져올지 예측가능하게 만들어주는 도구. - Redux 정의 : application 전체의 상태(s..

✔ 07주차. 웹 프론트엔드 II 클래스 컴포넌트와 함수 컴포넌트의 공통된 점과 차이점을 비교하여 상황에 맞게 사용할 수 있습니다. Hook을 사용해 함수 컴포넌트에서도 State의 값을 변경할 수 있습니다. State관리를 하는 방법과 구조를 이해하고 Redux를 사용하는 이유를 알 수 있습니다. [01 State Hook 사용하기] 1. Hook과 함수형 컴포넌트 - Hook은 React state를 함수 안에서 사용할 수 있게 함. (클래스 안에서 동작X) - Hook 사용하기 : 사용할 Hook을 import (ex. import React, { useState } from 'react'; ) // useState import import React, { useState } from 'react'..

✔ 07주차. 웹 프론트엔드 II 클래스 컴포넌트와 함수 컴포넌트의 공통된 점과 차이점을 비교하여 상황에 맞게 사용할 수 있습니다. Hook을 사용해 함수 컴포넌트에서도 State의 값을 변경할 수 있습니다. State관리를 하는 방법과 구조를 이해하고 Redux를 사용하는 이유를 알 수 있습니다. [01 Controlled Component 및 State 끌어올리기] 1. Forms - 폼(form) : 웹 페이지에서 사용자가 정보를 입력할 수 있도록 만든 HTML의 형태. (입력을 위한 양식) - Controlled Component(제어 컴포넌트) : 사용자가 state를 제어할 수 있는 컴포넌트. HTML에서 사용하는 폼 엘리먼트 , , 등을 Controlled Component를 통해 React..

✔ 06주차. 웹 프론트엔드 I React(리액트)에 대한 가장 기본적인 개념을 학습합니다. React를 사용해 다양한 컴포넌트를 만들고 이를 조합해 하나의 App을 구현합니다. Bootstrap(부트스트랩)의 기본 개념과 여러가지 요소를 활용하여 React 웹 사이트에 적용합니다. [01 부트스트랩이란?] 1. 부트스트랩(Bootstrap)의 개념 - Bootstrap : 트위터에서 만든 프론트엔드개발을 빠르고 쉽게 할 수 있는 프레임워크 📌 프레임워크(framework) : 재사용 가능한 요소의 집합과 툴, 확장 가능한 기반 코드 - Bootstrap을 사용하는 이유 ① 웹 사이트를 개발할 때, 웹 사이트 디자인으로 인해 개발 시간이 길어지는 문제를 해결하기 위해 ② 모바일 환경에 적합한 반응형 웹 ..

✔ 06주차. 웹 프론트엔드 I React(리액트)에 대한 가장 기본적인 개념을 학습합니다. React를 사용해 다양한 컴포넌트를 만들고 이를 조합해 하나의 App을 구현합니다. Bootstrap(부트스트랩)의 기본 개념과 여러가지 요소를 활용하여 React 웹 사이트에 적용합니다. [01 Props] 1. 컴포넌트의 재사용 - 코드의 재사용이 중요한 이유 : 코드 유지보수성 향상, 코드 재사용이 용이, 가독성 향상 - 컴포넌트 합성 : 컴포넌트 안에서 다른 컴포넌트 참조가능. function Hello(props) { return Hello, {props.name}; } function Greeting() { return ( ); } ReactDOM.render(, document.getElementB..

✔ 06주차. 웹 프론트엔드 I React(리액트)에 대한 가장 기본적인 개념을 학습합니다. React를 사용해 다양한 컴포넌트를 만들고 이를 조합해 하나의 App을 구현합니다. Bootstrap(부트스트랩)의 기본 개념과 여러가지 요소를 활용하여 React 웹 사이트에 적용합니다. [01 React란?] 1. React란? - React(리액트) : 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리. 선언적이고 효율적이며, 유연함. 또한 React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있음. - React를 왜 사용해야 할까 : 동적인 웹페이지를 만들기 위해서. 그리고 사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관..

✔ 05주차. 웹 백엔드 파이썬 웹 프레임워크를 활용해 웹 백엔드를 구현합니다. 웹 서버와 데이터베이스를 연동해 데이터를 저장하고 관리하는 방법을 배웁니다. REST API 서버를 구현하여 클라이언트와 서버간의 API 서비스를 구현합니다. [01 여러가지 연산자 알아보기] 1. 비교 쿼리 연산자 기호대체 문자열 의미 = $eq 같은 (equal) != $ne 같지 않은 (not equal) = gte 이상 (greater than equal) in $in $in안에 들어있는 값 중 하나를 찾음 not in $nin $nin 안에 값들이 아닌 값을 찾음 import pymongo connection = pymongo.MongoClient("mongodb://localhost:27017/") db = con..

✔ 05주차. 웹 백엔드 파이썬 웹 프레임워크를 활용해 웹 백엔드를 구현합니다. 웹 서버와 데이터베이스를 연동해 데이터를 저장하고 관리하는 방법을 배웁니다. REST API 서버를 구현하여 클라이언트와 서버간의 API 서비스를 구현합니다. [01 MongoDB CRUD I] 1. NoSQL - NoSQL : Not Only SQL or Not SQL. 한 가지 종류의 DB만을 뜻하지 않으며 DB마다 서로 각기 다른 종류가 존재 - NoSQL 종류 ① Document DB (MongoDB) : Document형태로 데이터가 저장. Column Oriented와 같이 스키마가 유동적 ② Key-Value DB (DynamoDB, Redis) : Key와 Value로 이루어진 간단한 데이터 구조. 속도는 빠르..

✔ 05주차. 웹 백엔드 파이썬 웹 프레임워크를 활용해 웹 백엔드를 구현합니다. 웹 서버와 데이터베이스를 연동해 데이터를 저장하고 관리하는 방법을 배웁니다. REST API 서버를 구현하여 클라이언트와 서버간의 API 서비스를 구현합니다. [01 Flask의 세계로] 1. 플라스크는 간결하다. - Micro Web Framework : 프레임워크를 간결하게 유지하고 확장할 수 있도록 만들었다는 뜻 → Micro : 가벼운 기능 제공, 가볍게 배우고 가볍게 사용할 수 있으며 확장성이 넓다. → Framework : 이미 작성된 코드의 모임인 라이브러리 그 이상의 의미, 어플리케이션을 개발하기 위한 일정한 틀을 제공해주는 기술 - Flask : 간단한 웹 사이트, 간단한 API 서버를 만드는 데에 특화 되어..

✔ 04주차. 파이썬 프로그래밍 프로그래밍에서 가장 많이 사용하는 함수를 효율적으로 작성하는 방법을 알아봅니다. 객체지향 프로그래밍의 개념과 파이썬을 활용해 웹 사이트에서 정보를 가져오는 방법을 익힙니다. 두개 이상의 모듈로 이루어진 패키지 단위의 프로그램을 작성할 수 있습니다. [01 크롤링의 기초] 1. 크롤링이란? - 크롤링 : crawling. 웹페이지에서 필요한 데이터를 추출해내는 작업. 크롤링을 하는 프로그램은 크롤러. - 크롤링을 위해 필요한 것 : 웹페이지의 HTML을 얻기 위해 requests 라이브러리를, 가져온 HTML을 분석하기 위해 BeautifulSoup 라이브러리 사용 2. BeautifulSoup - BeautifulSoup : HTML, XML, JSON 등 파일의 구문을 ..