Update README.md

README.md

@@ -3,6 +3,8 @@
 ## 주제: D3.js 튜토리얼 및 공공 데이터를 이용한 실습 
 
 ## 0. D3.js
+![image](/uploads/3026b08568a7835e94facff4cdd02867/image.png)
+
 D3.js (Data-Driven Documents)는 데이터 시각화를 위한 자바스크립트 라이브러리로, HTML, SVG, CSS를 사용하여 데이터를 동적으로 시각화하는 데 사용된다. D3는 데이터와 DOM(Document Object Model) 요소를 바인딩하고, 데이터를 기반으로 문서의 요소를 만들고 변형하는 데 필요한 강력한 기능을 제공한다.
 
 ### 주요 특징과 기능
@@ -88,28 +90,46 @@ SVG 좌표계를 이해하고, 각 요소의 속성을 설정할 때 상대적
 - SVG(Scaleable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 위치와 크기를 설정할 때 특정 좌표계를 사용한다.
 일반적으로 좌상단이 원점(0, 0)이며, x는 좌에서 우로 증가하고, y는 위에서 아래로 증가한다.
 
+### 문제점 3: CORS 문제
+외부 파일에서 데이터를 바인딩을 하거나 연동을 하면 CORS 문제가 발생하여, 처음에는 굉장히 당황했다. 해결하면서 SERVER를 직접 설치하고, 실행하는 과정을 거치면서 해결할 수 있었다. 
+
+```
+# http-server 전역 설치 (-g 옵션) 
+npm install -g http-server
+
+# 로컬 디렉토리에서 http-server 실행
+http-server
+```
+
+해결 방법:
+하지만 이 방법은 초보자 대상 실습에서 진입장벽을 제공하기 때문에, 서버를 설치하는 대신 HTML 파일 안에 직접 데이터를 넣어 코드를 작성하는 방법으로 진행했다. 이 방법은 실습을 더 간편하게 하기 위한 선택이었다.
+
+
 ## 3. 동영상 제작 과정
 ### 1. D3.js 소개 및 SVG 설명 및 실습
 - `svgtest.html`
 - **내용:** D3.js 소개와 SVG 기본 요소인 rect, circle, line, polygon 등을 설명하고 실습.
 - **학습 목표:** D3.js와 SVG의 기본 개념을 이해하고, 간단한 SVG 요소를 활용하여 기본 도형을 그려보는 것을 목표로 하했다.
-
+![image](/uploads/8d25c3062e7f2b55e54ce68ee685bcd7/image.png)
 
 
 ### 2. 막대 그래프 구현 실습
 - `bar.html`
 - **내용:** 데이터 배열을 바인딩하고, 각 데이터 요소에 대해 rect 요소를 추가하여 그래프를 구성. 각 막대는 데이터 값에 따라 위치와 크기가 결정됨을 설명하고 실습
 - **학습 목표:** 데이터 바인딩과 rect 요소를 활용하여 막대 그래프를 구현하는 방법을 익히고, 데이터 시각화의 기본 개념을 이해하는 것을 목표로 했다.
+![image](/uploads/638d2d65b2e86baf9fa674ea175c5ea7/image.png)
 
 ### 3. 산포도 그래프 구현 실습
 - `scatter.html`
 - **내용:** 데이터 배열을 바인딩하고, 각 데이터 요소에 대해 circle 요소를 추가하여 그래프를 구성. 각 점은 데이터 값에 따라 위치가 결정됩니다. x축과 y축을 설정하여 데이터의 범위를 시각적 표현함을 설명하고 실습
 - **학습 목표:** 산포도 그래프를 구현하는 방법과 축 설정 방법을 익히고, 데이터를 시각적으로 표현하는 방법을 이해하는 것을 목표로 했다.
+![image](/uploads/98c29e2f288bdece4042c53cf044c594/image.png)
 
 ### 4. 공공데이터 이용한 막대 그래프 구현 및 지도 svg 사용 실습
 - `car.html`, `map.html`
 - **내용:** 공공 데이터를 활용하여 지역별 전기차 수를 막대 그래프와 지도로 시각화.
 - **학습 목표:** 공공 데이터를 활용하여 실제 데이터를 시각화하는 방법을 익히고, 다양한 SVG 요소를 활용하여 지도를 표현하는 방법을 이해하는 것을 목표로 했다.
+![이미지4](/uploads/bac08b40da96bf710a2c2b4ffed70fb1/화면_캡처_2024-06-23_224942.jpg)
 
 
 ## 4. 참고 자료