elice/토끼성장일지 20

[엘리스 AI트랙] 07-04 Flask 기초 2

1. 데이터베이스 데이터를 저장하는 공간 관계형 데이터베이스(RDB)와 NoSQL(Not Only SQL)로 나뉘어져 있음 관계형 데이터베이스(RDB) 키(key)와 값(value)들의 간단한 관계를 테이블화 시킨 데이터베이스 DML을 사용해서 데이터 간 결합, 제약조건 등의 설정을 통해 데이터를 추출할 수 있음 테이블 간의 데이터 관계를 설정할 수 있음 각 컬럼마다 데이터의 형태가 동일, 정형화된 데이터를 가짐 SQL 질의어(쿼리)를 사용 클라이언트와 서버 사이에서 일어나는 일 2. Flask와DB 연동하기 순서 1) SQL import 하기 2) 데이터베이스 연결하기 con = sqlite3.connect("database.db") 3) 데이터를 불러올 수 있는 cursor 객체 만들기 cur = ..

elice/토끼성장일지 2021.11.11 (1)

[엘리스 AI트랙] 06-04 SQL 2

1. 데이터 그룹 짓기 - GROUP BY SELECT user_id, COUNT(*) FROM rental GROUP BY user_id; # 그룹의 기준 컬럼 보통 limit, order by, group by가 SQL문의 맨 끝에 옴 2. 데이터 그룹(GROUP BY절)에 조건 적용하기 - HAVING # rental 테이블에서 user_id가 같은 2개 이상의 데이터가 몇 개 있는지 검색 SELECT user_id, COUNT(*) # GROUP BY의 기준 컬럼 및 검색할 컬럼 FROM rental GROUP BY user_id # 그룹의 기준 컬럼 HAVING COUNT(user_id) > 1; # 조건 3. 여러 테이블의 정보를 한번에 조회하기 - JOIN 1) INNER JOIN문의 기본 ..

[엘리스 AI트랙] 07-02-01 ~ 07-02-02 Flask 기초 1

1. Flask Framework란? 파이썬을 사용해서 웹 서버를 만들수 있게 도와주는 Web Framework 파이썬의 패키지 micro framework 기본적인 기능만 제공 Flask의 장점 나만의 서버를 쉽게 작성 가능 간단한 코드로 빠르게 실행 가능 원하는 기능을 유연하게 확장하기 편리함 2. Flask로 Web server 만들기 from flask import Flask app = Flask(__name__) @app.route("/") def home(): return "hello world!" if __name__ == "__main__": app.run() __name__은 파일이 다른 파일에서 실행됐는지, 아니면 직접 실행했는지 알게 해줌 app.route(url) 아래의 함수는 ur..

[엘리스 AI트랙] React Hook으로 상태관리 하기

1. useState 단순한 하나의 상태를 관리하기에 적합함 const [state, setState] = useState(initState | initFn) 리액트는 state가 바뀌면 state를 사용하는 컴포넌트를 리렌더함 useEffect와 함께, state에 반응하는 hook을 구축 패턴 상위 컴포넌트에서 state와 state 변경 함수를 정의 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려줌 state가 변경되면 중간에 state를 넘기기만 하는 컴포넌트들도 모두 리렌더링됨 ➡️ 상태와 상태에 대한 변화가 단순하거나, 상대적으로 소규모 앱에서 사용하기에 적합 2. useRef 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 ➡️ 상태가 UI의 변경과 관계없을 때 사용 리..

[엘리스 AI트랙] 05-04 React UI

1. 리액트와 사용하기 좋은 Styling 도구 종류 1) CSS Module CSS 파일의 확장자를 .module.css 로 지정해서 사용 장점 단점 class, id 등에 random string을 달아주기 때문에 선택자가 겹치지 않음 스타일 충돌을 방지하고 코드를 격리하여 CSS 설계가 가능 스타일링을 일일히 직접 해야함 //App.jsx import styles from "./app.module.css" export default function App() { return ( Pink Hello world Normal Hello world ); } /* app.module.css */ h1 { font-size: 1.5rem; } .title { font-size: 2.5rem; color: pa..

[엘리스 AI트랙] 06-02-01 ~ 06-02-02 SQL 1

1. 데이터베이스 여러 사람이 공유해 사용할 목적으로 통합하여 관리되는 데이터의 모음 ex) Maria DB, Oracle DB 등 SQL: 데이터베이스에 접근, 조작하기 위한 표준 언어 Structured Query Language 1) 관계형 데이터베이스 / 비관계형 데이터베이스 관계형 데이터베이스: 하나 이상의 테이블로 이루어지며 서로 연결된 데이터를 가지고 있음 SQL을 통해 제어 가능 비관계형 데이터베이스: 데이터들간의 연결이 없음 2) 테이블의 구성 요소 ⬇️컬럼(Column, 열)⬇️ ⬇️컬럼⬇️ ⬇️컬럼⬇️ 레코드(Record)➡️ 사번 이름 성별 레코드➡️ 001 철수 남성 레코드➡️ 002 영희 여성 컬럼: 주제, 제목 레코드: 내용, 값 모든 테이블은 고유의 이름으로 구분 명령어 1)..

[엘리스 AI트랙] 04-04-01 React 심화 1

1. 자바스크립트 비동기의 등장 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음 AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 😮‍💨 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨 2. 자바스크립트는 single-threaded language 자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기..

elice/토끼성장일지 2021.10.22 (2)

[엘리스 AI트랙] 리액트 라우터(React-Router)

Declarative Routing for React 공식 문서에서는 React Router를 Declarative Routing for React로 정의하고 있다 이게 머야,,,싶어서 검색한 끝에 잘 설명해주는 글 발견 (🙋‍♀️ 멋진 코드 예제들이 있어요!) https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js Difference between declarative and imperative in React.js? Recently I've been studying a lot about the functionality and the ways to use the Faceboo..

[엘리스 AI트랙] 04-02-01 ~ 04-02-02 React 기초 3

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. form 태그 작성할땐 type들을 잘 작성해주는것이 좋다 2. 함수가 선언됐는지(존재하는지) + 타입 확인을 한번 더 함으로써 에러 방지! if(typeof onInsert === "function" && inputValue) { // onInsert가 정상적인 함수인 지 확인하여 에러 방지 onInsert(inputValue); } 3. 리액트에서 style은 object로 표현해야한다 {name}님 안녕하세요 반갑습니다. 위와 같은 inline style의 property name은 camelCase로 적는다 첫번째 중괄호는 자바스크립트 표현을 사용하겠다는 의미 두번째는 object의 중괄호 SPA와 라우팅 Single Pa..

[엘리스 AI트랙] 03-05-01 ~ 자료구조

1. 자료구조 자료를 저장하는 방법과 자료에 적용할 수 있는 연산을 구체적으로 제공한 것 각각 장단점이 있으며 구현하고자 하는 프로그램의 성능을 고려하여 알맞은 자료구조를 선택해야함 2. 추상적 자료형 어떤 자료와 그 자료에 대한 연산(동작)들의 수학적인 정의 이 정의를 구현하는 방법은 명시되어 있지 않음 추상적 자료형을 구체적으로 구현한 결과가 자료구조 3. 리스트 (추상적 자료형) 순서가 존재하며, 일렬로 나열된 값들이 들어있음 (1) 배열 (구현) 인덱스 가지고 있음 특정 위치의 자료 탐색 유리 (2) 연결 리스트(구현) 일렬로 저장된 값들이 노드의 형태로 저장되어 있음 자료의 삽입, 삭제에 유리 (3) 해시 테이블 충돌 해결 방법: 오픈 어드레싱 충돌이 발생했을 때 자료를 저장하기 위해 빈 공간을..