J'code daily

overflow 속성은 내용이 길어서 화면에 넘칠 경우 처리 방법으로, overflow-x, overflow-y 값을 설정.
적용 가능한 방법은 넘친 내용을 그대로 나두거나, 잘라내거나, 스크롤바 노출.

√ X,Y축 공통으로 사용 할 경우!
overflow : visible;
 - 전체 노출
overflow : hidden;
 - 화면 크기까지만 노출 후 나머진 잘라내기
overflow : scroll;
 - 크기 상관 없이 넓이와 높이 Scrollbar 생성
overflow : auto;
 - 크기에 따라 넓이와 높이 Scrollbar 생성

√ X,Y축 따로 사용 할 경우!
overflow-x : visible; overflow-y : visible;
 - 전체 노출
overflow : hidden; overflow-y : hidden;
 - 화면 크기까지만 노출 후 나머진 잘라내기

화면 꽉차게가 안되는 이유!
 - HTML 태그 기본 margin이 문제,
 - 따로 설정을 하지 않아도, 설정 값들이 들어있기 때문에, F12를 눌러 확인.

 - margin이 8px 들어가 있으며, 이것으로 인해 여백이 있음을 알 수 있음.
 - maring을 제거하기 위해서, html 또는 css에서 body에 maring : 0;을 입력

body maring을 0으로 주었을 경우 아래와 같다.

데이터 시각화의 필요성.

기업들은 회의를 통해 결과를 도출 할 때 차트들을 사용 합니다.  그 차트에는 매출액, 고객별 구매 니즈, 마케팅 성과 등 수 많은 데이터들을 나타내고 있습니다. 하지만 데이터가 너무 많아서 직원들은 데이터로부터 원하는 정보를 캐치하기 어렵습니다.

데이터 시각화란.

사용자에게 직관적으로 활용 가능 할 수 있도록 하는 그래픽 처리 기술.

데이터 시각화 장점.

1. 대용량 데이터를 그에 맞는 차트들로 나누어 보여주어, 많은 양의 데이터를 쉽게 인지 가능
2. 분석에 대한 지식이 없더라도, 원하는 데이터를 찾고, 활용 가능
3. 기존 차트 대비, 정확한 데이터 분석 가능과 분석한 데이터를 통해 의사 결정이 가능하며, 효율과적인 데이터 도출 가능

데이터 시각화 단점.

1. 데이터 활용 정보를 왜곡, 잘 못 전달하여, 사용자에게 혼란 야기 가능
2. 시각화에 빠져서 큰 데이터에 가려진 작은 데이터들을 인지하지 못 하고, 의사 결정 가능
3. 데이터 시각화는 사람이 만들었기에, 작업자의 실수로 잘 못 된 데이터 제공 가능

회사들이 어떠한 stack으로 개발을 진행하고 있고,
어떻게 개발을 진행하는게 맞는건지 고민하고 있을때,
도움이 되는 사이트 - stackshare

● 트렌드 읽는 방식
  ▶ 각 회사에서 사용하는 여러 쓰임새의 기술들
    ♣ 대표 기업에서 사용 기술과 유망한 스타트업에서 사용 하는 기술 확인

  ▶ 미래에 유망한 기술로 꼽히고 있을 기술들
    ♣ 트렌드는 변화하기에, 변화는 기준을 캐치
    ♣ 그렇게 하려면 여러분야에 대해 조사하고 이해 필요

  ▶ 공유가 잘 되는 기술들
    ♣ 공유가 잘 되는 기술은 문제점이 발생 하여도, 빠르게 해결 가능
    ♣ 막히고, 잘 모른다면, 정보를 주는 사람이 많으며, 여러 기업체에서 사용한다.

https://stackshare.io/stacks

Visual Code에서실행 취소 반대 방법은 [Ctrl + Shift + z] 또는 [Ctrl + y] 입니다.

실행 취소 한 것에 대해 다시 실행 시켜줍니다.

현상 : 출력을 할 경우 아래와 같은 현상 발생

해결 방법 : 1) https://nodejs.org/ko/

             
                2) 여기서 Node.js LTS 버전을 다운 받고, 설치 진행

                3)  VS Code를 재실행 하면 해결

JSON는 무엇인가?
json는 속성:값 또는 키(key):값(value)으로 이루어짐
 - “name” : “jcode”
비동기 브라우저/서버 통신을 위해 대체하는 주요 데이터 포맷
자바스크립트 언어에서 파생
자바 스크립트를 사용하여, 비동기적으로 서버와 통신을 하는 방식

JSON 구조
Number, String, Boolean, Array, Object, null
Number – C와 Java 8진수 16진수 표현한 방법은 지원안됨
String – “”(큰 따옴표)로 묶어야함
Boolean – true와 false
Array – [ ](대괄호)로 나타낸다. ,(쉼표)로 구분
Object – { }(중괄호)로 나타낸다.

장점
1) 텍스트로 이루어져, 사람과 기계 모두 읽고 쓰기 쉬움
2) 프로그래밍 언어와 플랫폼에 독립적, 서로 다른 시스템간 객체 교환 좋다
3) 자바스크립트 문법을 채용하여, eval 명령으로 사용 가능
4) 대부분 최신 웹 브라우저에는 JSON 전용 파서 기능을 내장하고 있다
5) 경량 데이터 교환 형식이기 때문 XML보다 빠르다

단점
1) eval 명령을 사용하면 외부 악성 코드가 유입 될 수 있다
2) 대용량 데이터 송수신에는 부적합

기초 중 기초 아무나 다 할 수 있는 파이썬 웹 크롤링

그전에 라이브러리인 pip install beauifulsoup4 requests를 설치 합니다.

BeautifulSoup을 통하여 크롤링을 한다.

ajax는 무엇인가?
ajax는 Asynchronous JavaScript and XML의 약자
자바 스크립트를 사용하여, 비동기적으로 서버와 통신을 하는 방식

비동기식이란?
- 데이터를 가져오는 동안 다른 일을 할 수 있도록 만들어 줍니다.

동기적이란?
- 비동기와 반대로, 작업이 시작되면 그 작업이 끝날 때 까지 지연이 발생하며 완료가 될 때까지 기다리고 있어야합니다.

장점
1) 페이지 이동 없이 빠르게(깜빡임 없이) 화면 전환 가능
2) 서버 처리 시 기다림 없이, 비동기적으로 사용 가능
3) 수신하는 데이터 양을 줄이고, 클라이언트에게 처리를 부탁 할 수 있음

단점
1) 오페라 7 이하, 익스플로러 4.0 이하 브라우저에서는 사용 불가
2) HTTP 클라이언트 기능이 한정
3) 페이지 이동 없는 통신으로 보안 문제 발생
4) 지원하는 Charset이 한정됨
5) 스크립트로 작성되 디버깅이 어렵고 간단하지 않다.
6) 요청 남발로 서버 부화가 발생 할 수 있다.
7) 동일 출처 정책으로 다른 도메인과 통신이 불가능

알고가기
1) Charset란?
데이터를 부호환 인코딩과 관련되어 있다. 글자가 안깨지 해준다.
 - 각 브라우저(크롬, 사파리, 익스플로우)등 여러 브라우저에서 글자가 정확이 보이게한다.
<meta charset=UTF-8/>
2) 동일 출처 정잭이란?
웹 애플리케이션에서 중요한 보안 모델이다.
어떤 출처에서 불러온 스크립트를 다른 출처에서 불러온 리소스와 상호작용을 제한하는 중요한 보안 방식
즉. 경로는 달라도, 프로토콜, 포트(명시한 경우), 호스트가 모두 동일해야 동일한 출처이다.



참조 사이트
https://ko.wikipedia.org/wiki/Ajax
https://ko.wikipedia.org/wiki/%EB%8F%99%EC%9D%BC-%EC%B6%9C%EC%B2%98_%EC%A0%95%EC%B1%85

<a>란?
1) anchor의 첫글자입니다.
2) herf(hyperlink)와 앵커를 정의 할 때 사용합니다.
   즉. 이동(링크)을 목적으로하는 속성

3) 속성으로는 href, hreflang, type, target, rel, ping, download가 있습니다.


<a> 속성?
1) href 속성
- 이동하고자 하는 페이지 URL을 지정하거나, 페이지 이동을 제어

href 문법

절대 주소

상대주소

구글로 이동하는 링크

상위 폴더 페이지 이동

같은 페이지 상단으로 이동
- 동일한 페이지 내 명시된 id로 이동

스크립트로 완료 누르면 메세지 박스 내용을 확인 가능

2) hreflang 속성
- 언어를 참고용으로만 사용합니다.
- href 속성이 있어야지 사용 가능합니다.

hreflang 문법

예) ko, en, zh

3) type 속성
- 링크한 문서의 타입을 어떤것으로 받을 것인가.

type 문법

3) target 속성
- 링크한 문서 클릭시 열릴 위치 지정

target 문법

예) _blank : 새로운 탭에서 오픈
     _self : 현재 프레임에서 오픈
     _parent : 부모 프레임에서 오픈

4) download 속성
- 링크 클릭하면 다운로드 가능하다 

download문법