Carpe Diem Carpe Diem

Voila 장점: 노트북에서 쉽게 프로토타입을 만들 수 있음 단점: 대시보드처럼 레이아웃을 잡기 어려움 기존 코드를 조금만 수정해서 웹 서비스를 만드는 것이 목표 웹 서비스를 만드는 과정 데이터 분석가가 웹 서비스를 작업하는 Flow Jupyter notebook에서 코드 만들기 Python script에서 복붙 Flask app을 사용, HTTP 요청, callback, JS...등등 유지하기 힘들다 데이터 Product로 중요하게 된다면 프론트엔드/PM 조직과 협업 requirements 작성 웹 화면 Layout HTML, css, python, react 등으로 앱을 코드업한다. 수정이 힘들다 다른 조직의 도움 없이 빠르게 웹서비스를 만드는 방법: Streamlit! Streamlit의 대안 R의..

낙타표기법(camelCase) 사용 (변수 생성시 구분을 위함) ex) helloWorld, parkYoungWoong JS 데이터 종류 문자 데이터: const stringData='Hello world' 숫자 데이터: const numberData=1234 불린 데이터: const booleanData=true/false Null 데이터: let numberData=123, numberData=null 객체 데이터: const objecData={ key: ~~, name:~~~, age:~~~} console.log(objectData.name) 배열 데이터: const arrayData=[9,8,7,6] console.log(arrayData[0]) JS 변수와 예약어 const 변수: 값을 다시..

종류 태그 선택자 (type selector): html 태그 이름으로 선택 ex) li { color: red; } 클래스 선택자 (class selector): html class의 속성의 값으로 선택 ex) .orange{ color: red; } 하위 선택자 (descendant combinator): html 요소의 하위 요소를 선택 ex) div .orange{ color: red; } 가상 클래스:hover (pseudo-classes :hover): html 요소에 마우스 커서가 올라가 있는 동안 선택 ex) a:hover{ color: red; } 가상 클래스:active (pseudo-classes :active): html 요소에 마우스를 클릭하고 있는 동안 선택 ex) a:activ..

#언어 #출력 구조 태그 h1: 글자 태그 br: 줄바꿈 태그 img: link element: 경로의 css 파일 연결 script element: 경로의 js 파일 연결 상자 요소(box elements): 레이아웃을 만들기위한 요소, 한줄에 하나만 출력 가능(가로너비 최대), 상자 크기 지정 가능 ex) div, h1, h2, p, ul, header 등 글자요소(inline elements): 글자를 만들기 위한 요소, 한줄에 여러개 출력 가능, 상자 크기 지정 불가능 ex) span, a(다른 페이지로 이동), img 등

HTML Hyper Text, Markup Language 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 CSS Cascading Style Sheets, 실제 화면에 표시되는 방법(색상, 폰트 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현 JS JavaScript 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 settings.json "emmet.variables": { "lang": "ko" } 추가 해주면 한국어 설정 완료 Tag / Element div, span 등