d-rami.log

아이패드 "듀얼모니터" 사용

Tue, 07 Mar 2023 05:11:19 GMT

아이패드는 있지만 ~~맥북💻은 없다!~~ LG그램에 연결해서 듀얼모니터로 사용하는 방법 👀

1. Splashtop Wired XDisplay HD 앱 다운

App Store에서 "Splashtop Wired XDisplay HD" 앱다운

앱 실행 후, "Install the agent on your computer" OK 클릭!

PC에서 연결 시켜 줄 프로그램을 찾아라!

2. PC 프로그램 설치

https://www.splashtop.com/wiredxdisplay

PC용 다운로드 클릭!

설치 후, Framerate & Quality는 "High"로 변경

⭐ "Unable to connect to ipone/ipad!" 경고창이 뜬 경우!

PC에 iTunes가 설치되어야 정상적으로 듀얼모니터 사용 가능! iTunes를 누르면 자동으로 다운.

3. 노트북 ↔ 아이패드 USB 연결 후, 앱 실행.

🔎 참고자료

🔗 https://balsamic-egg.tistory.com/21

내가 보려고 만든 페이지😂

진짜 진짜 어쩔 수 없이 듀얼모니터가 필요할때.... 마우스도 너무 느리고 확실히 화면이 작으니깐 답답😣 (🍠🍠🍠X백만개)

[VSCode] 유용한 Extension

Mon, 16 May 2022 15:38:30 GMT

⭐ Extension(확장 플러그인) 설치방법

좌측 사이드바 하단 Extension 아이콘 버튼 클릭(Ctrl + Shift + X) 후, 사용하고자 하는 확장 플러그인을 검색하여 설치 Install .

2. Live Server

프로젝트 가상의 웹공간(로컬)에서 업데이트 된 모습 확인 가능.

VS Code 하단 Go Live를 누르고 localhost:5500 접속.
.HTML 파일을 열고 마우스 오른쪽 버튼 클릭. Open with Live Server
단축키 Alt + L ,O

3. Auto Rename Tag

< > 여는 태그와 닫는 태그 중 하나를 수정하면 동시에 다른 한쪽 태그도 자동으로 수정.

4. Auto Close Tag

Auto Rename Tag와 함께 사용하면 유용. < >여는 태그만 입력하면 자동으로 닫는 태그가 완성.

5. HTML CSS Support

HTML id/class에서 css 선택자 요소를 쓸 때 자동 완성 기능.

6. CSS Peek

HTML id/class에 적용된 CSS파일로 바로 이동. Ctrl 키를 누른 상태에서 id 또는 clss명 위를 마우스로 클릭. CSS파일 내용을 팝업창으로 볼 수 있다. 팝업창에서 수정한 내용은 CSS파일에서도 바로 적용되어 수정.

8. Code Spell Checker

코드 맞춤법 검사기. 사전 파일에 없는 단어에는 구불구불한 밑줄이 표시됩니다.

9. Prettier - Code formatter

사용자 편의를 위해 코드의 줄 간격, 행을 자동으로 정리.

✅ 설치 완료 후, 에디터 밑부분에 Prettier:✔ 표시가 되어있다면 활성화된 것.

10. CodeSnap

명령 팔레트(Windows 및 Linux의 경우 Ctrl+Shift+P, OS X의 경우 Cmd+Shift+P)를 열고 CodeSnap.
스크린샷을 찍고 싶은 코드를 선택.
원하는 경우 스크린샷의 너비를 조정.
셔터 버튼을 클릭, 스크린샷을 디스크에 저장.

✅ 코드를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 CodeSnap을 클릭, CodeSnap을 시작할 수도 있다. ✅ 저장하는 대신 클립보드에 복사하려면 이미지를 클릭하고 복사 키보드 단축키(기본값은 Windows 및 Linux의 경우 Ctrl+C, OS X의 경우 Cmd+C)를 누르거나 설정에서 바인딩 codesnap.shutterAction

⭐ 작업 환경 테마

⭐ 파일별 아이콘 테마(생동감 있는 아이콘)

ETC

open in browser: 기본 브라우저나 애플리케이션에서 현재 파일을 열 수 있는 플러그인.
Color Highlight: rgb 또는 16진수의 색상 코드로 입력하면 해당 색상 코드 색상을 배경 색상으로 보여주는 플러그인.
Path Intellisense: 파일이나 이미지 등 경로를 지정할 때 자동으로 경로를 보여주며 선택, 지정할 수 있는 플로그인.

내가 보려고 만든 페이지😂

가볍게 찾아보면서 추가한 플러그인...계속 추가되겠지....?

[CSS] flexbox

Thu, 28 Apr 2022 11:11:42 GMT

flexbox 박스 & 아이템들을 행/열로 배열

부모요소 container, 자식요소 item 중심축(main axis), 교차축(cross axis)

🔎 참고자료

🔗 1분코딩
🔗 드림코딩_CSS Flexbox 완전 정리
🔗 CSS Tricks for Flexbox

내가 보려고 만든 페이지😂

[개발자도구] Error_2. Failed to load resource: the server responded with a status of 404 (Not Found).

Thu, 28 Apr 2022 03:18:04 GMT

💬 연습용으로 이미지 슬라이더 만들다가 개발자도구(크롬 기준) 콘솔에서 에러 발생 확인!! 이미지가 뜨지 않는다... 구글링해 봅니다.

💢 에러내용.

Failed to load resource: the server responded with a status of 404 (Not Found).

결국 그냥 단순한 나의 실수🙄 였다고 한다. 이미지 경로를 제대로 지정해주지 않아 생긴 해프닝... 이랄까

✅ 해결방법.

이러한 오류는 대부분 작업하다 경로를 지정해주지 않았거나 수정을 안했을 때 나타난다고 한다. 페이지 안을 잘 살펴보고, 경로 수정을 잘하자.

[Velog] 마크다운(Markdown) 사용법

Thu, 21 Apr 2022 13:29:18 GMT

🧐 마크다운(Markdown)이란?

일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. - 워키백과

파일 확장자 .md
인터넷 미디어 타입 text/markdown
웹사이트 https://daringfireball.net/projects/markdown/

🧐 마크다운 쓰는 이유

💡 개발자들이 주로 사용하는 버전관리/협업도구/메모장 도구에서 마크다운 언어를 사용하면 구조적으로 읽기 쉽고, 쓰기 쉬운 텍스트를 작성하는 데 도움을 준다.

문법이 간결하고 쉽다.
지원하는 플랫폼이 많다. (Notion, Git, Discord 등)
대부분의 환경에서 작성 가능. (메모장에서도 가능)
텍스트로 저장되기 때문에 용량이 적어 보관이 용이.

⭐ 마크다운 작성법

마크다운(Markdown)에선 Enter Key를 누른다고 빈 줄이 추가되지 않는다. 또한 Space Bar를 눌러도 단어 사이 간격이 늘어나지 않는다.

1. 문단(Paragraph)

문단과 문단 사이에 한 줄(enter) 비워두는 것으로 구분.

👆 종류	✍ 입력
줄 바꿈	또는 Enter 2번
단어 사이 간격
기호표기(역방향 슬래시 사용) * _ - . ! # + () [] \	`\` `\* \_ \- \. \! \# \+ \() \[] \\`

#의 개수로 h1부터 h6까지 표현 가능. Velog 오른쪽 리스트엔 h3까지 표시된다.

✍ 작성

# h1
## h2
### h3
#### h4
##### h5
###### h6

💻 결과

h1

h2

h3

h4

h5

h6

3. 글꼴 스타일(Text-style)

*, _, ~을 이용하여 기울이기, 강조, 취소선 등 기본적인 스타일을 나타낼 수 있다.

✍ 작성	💻 결과
`볼드`	볼드
`__볼드__`	볼드
`이텔릭체`	이텔릭체
`_이텔릭체_`	이텔릭체
`*볼드+이텔릭*`	*볼드+이텔릭*
`___볼드+이텔릭___`	*볼드+이텔릭*
`~~취소선~~`	~~취소선~~

3-2. HTML 꾸미기

HTML 태그를 이용하면, 글자를 좀 더 다양하게 작성 할 수 있다.

✍ 작성	💻 결과
`제목`	제목
`밑줄`	밑줄
링크 `velog`	velog
글자색상 1 `green`	DodgerBlue
글자색상 2 `#44398A`	#44398A
글자색상 3 `rgb(255, 255, 255)`	rgb(51, 153, 102)
글자배경`글자배경`	글자배경

💡 참고 색상표

Color	RGB	Hex Color
Black	(0, 0, 0)	#000000
White	(255, 255, 255)	#FFFFFF
Gray	(128, 128, 128)	#808080
Red	(255, 0, 0)	#FF0000
Blue	(0, 0, 255)	#0000FF
Green	(0, 128, 0)	#008000
Yellow	(128, 0, 128)	#ffd33d
출처: Velog 글씨를 내 마음대로 바꿔보자! (색상, 형광펜)

4. 코드(Code)

4-1. 인라인 코드

텍스트 앞뒤로 백틱(`)을 감싸면 간단한 인라인 코드 작성 가능.

✍ 작성 `인라인 코드 이렇게 작성하세요 :) `

💻 결과 인라인 코드 이렇게 작성하세요 :)

4-2. 코드블럭

백틱(`) 또는 ~을 세 개 사용하여 문단의 시작과 끝에 표기. 코드가 여러 줄인 경우, 줄 앞에 4개의 공백 또는 1개의 'Tab'을 추가하면 된다.

``` 옆에 언어를 지정해주면 Syntax highlighting가 적용된다.

✍ 작성 ``` java public class BootSpringBootApplication { public static void main(String[] args) { System.out.println("Hello, world"); } } ```

💻 결과

  public class BootSpringBootApplication {
      public static void main(String[] args) {
          System.out.println("Hello, world");
      }
  }

💡 Syntax highlighting(문법 강조)

언어 이름	작성 방식	언어 이름	작성 방식
Bash	bash	JSON	json
C#	cs	Java	java
C++	cpp	JaveScript	javascript
CSS	css	PHP	php
Diff	diff	Perl	perl
HTML, XML	html	Python	python
HTTP	http	Ruby	ruby
Ini	ini	SQL	sql

출처: 마크다운 왕초보 코드블록 사용가능한 언어 목록

5. 인용문(BlockQuote)

문단 앞에 >를 추가. 중첩이 가능하다.

✍ 작성

> 첫번째 블록
>> 두번째 블록
>>> 세번째 블록

💻 결과

첫번째 블록

두번째 블록

세번째 블록

6. 수평선(Horizontal Rule)

- * _ 등을 3개 이상 입력하면 생성 할 수 있다. 수평선을 사용할 때는 한 줄 띄어주고 사용. 글 쓰기를 종료하거나 페이지를 구분하고 싶을 때 유용.

✍ 작성

---
***
___

💻 결과

7. 목록(List)

7-1. 순서 있는 목록

숫자 뒤에 .(점)+공백을 입력하면 순서있는 목록으로 인식. 이때 1. 이후 오는 숫자가 연속적일 필요는 없지만 처음은 1.로 시작해야한다.

✍ 작성

1. 해오름달
2. 시샘달
3. 물오름달
1. 해오름달
1. 시샘달

💻 결과

해오름달
시샘달
물오름달
해오름달
시샘달

7-2. 순서 없는 목록

* + - (혼용 가능) 뒤에 공백을 두고 작성하면 순서 없는 목록으로 인식. Teb키나 Space bar를 이용해 들여쓰기가 가능.

✍ 작성

* 4월 잎새달
    - 0401
        - 0402
* 5월 푸른달
* `6월 누리달`

💻 결과

4월 잎새달
- 0401
  - 0402
5월 푸른달
6월 누리달

8. 체크박스(Check Box)

- 뒤에 빈 공간을 가진[]대괄호를 입력한다. [x] 박스 안을 체크하려면 빈 공간 대신 x키를 입력하면 된다.

✍ 작성

- [ ] 체크박스
- [x] 체크박스
* [ ] 체크박스2
+ [x] 체크박스3

💻 결과

체크박스
체크박스
체크박스2
체크박스3

9. 링크(Link)

URL, 인라인, 참조라는 세 가지 스타일의 링크 지원. 세 스타일 모두 링크 텍스트는 []대괄호로 구분된다.

✍ 작성	💻 결과
인라인 링크 [Title](link) `[Velog](https://velog.io/)`	Velog
URL	https://velog.io/
참조 링크 [참조 설명][참조 번호] [참조 번호]: link `[Velog][1] [1]: https://velog.io/`	[Velog][1] [1]: https://velog.io/

10. 이미지(Image)

10-1. 이미지 링크

앞에 !를 붙여주면 이미지를 불러오거나 링크할 수 있다.

✍ 작성

이미지 불러오기
![이미지 설명](이미지 링크)

이미지 링크
[![이미지 설명](이미지 링크)](연결할 url)

💻 결과

10-2. 이미지 크기조절

기존 이미지 코드 앞단을 img 태그로 수정하고, 링크가 끝나는 부분에 width height를 작성하여 이미지 크기를 조정한다.

✍ 작성

기존 이미지 코드
![](https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg)

크기조절 코드

💻 결과

10-3. 이미지 정렬

✍ 작성

가운데 정렬 


왼쪽, 오른쪽 정렬 

우

💻 결과

11. 표(Table)

행은 -(하이픈)으로 각 열은 |(수직선 기호)로 구분하며, 표 내에서 기본적인 글꼴 스타일 적용이 가능하다.

정렬의 경우, 행 구분선인 -(하이픈) 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙여 맞출 수 있다.

✍ 작성

| 이  름 | 나 이 | 생 일 |
|:---  |  :--:  |  ---:|
|길동 | 36 | 0625 |
| 철수 | 17 | 0505 |
| 영희 | 13 | 1009|

💻 결과

이 름	나 이	생 일
길동	36	0625
철수	17	0505
영희	13	1009

12. 이모지(Emoji)

이모티콘 이미지를 복사 → 붙여넣거나 단축키를 통해 불러올 수 있다.

💡 사이트 https://emojipedia.org/ https://getemoji.com/

💡 단축키 Windows : window key + 마침표(.) Mac : Command + Control + Space bar

🔎 참고자료

🔗 daring fireball

[Git, GitHub] Error_1. Pulling is not possible because you have unmerged files.

Wed, 20 Apr 2022 06:06:30 GMT

프로젝트 수정하고 VS Code에서 commit push 했는데, 에러가 났다...!!! 😥 당황...스럽다!! 뭐가 잘못된건지 삭제될까봐 무섭...

💢 에러내용.

Pulling is not possible because you have unmerged files.

> git pull --tags origin main error: Pulling is not possible because you have unmerged files. 
hint: Fix them up in the work tree, and then use 'git add/rm ' 
hint: as appropriate to mark resolution and make a commit. 
fatal: Exiting because of an unresolved conflict.

구글링 후,

git status git commit -am '커밋메시지'

다시 하면 된다고 해서 시도했는데, 병합충돌표시까지 합쳐져서 GitHub에 push됨;; 🙄 첫 시도 실패!

✅ 해결방법.

원격 저장소와 로컬 저장소 양쪽에서 파일의 동일한 부분을 변경한 경우, 두 변경 내용 중 어느 쪽을 저장할 것인지 자동으로 판단 할 수 없기 때문에 충돌이 발생. Git은 충돌이 발생한 파일 내용을 아래처럼 표시합니다.

병합충돌표시 ===== 로 구분된 윗 부분이 로컬 저장소, 아랫 부분이 원격 저장소의 변경 내용이라는 점!

이 부분을 우리가 직접 수정해 주어야 합니다. status에서 나오는 내용은 로컬 저장소의 현재 branch 에 마지막으로 commit 된 내용과 현재 상태를 비교한 내용이 나옵니다. 이 중 원하는 상태를 선택하고 다시 진행하면 문제 없음!

[스파르타] #웹개발 종합반 #4주차 개발일지👊🏻

Mon, 10 Jan 2022 16:56:11 GMT

🌼 Notion 강의자료

🚩수업 목표

Flask 프레임워크를 활용해서 API를 만들 수 있다.
'모두의책리뷰' API를 만들고 클라이언트에 연결한다.
'나홀로메모장' API를 만들고 클라이언트와 연결한다.

📝Flask_서버만들기

Flask 프레임워크 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.
flask 패키지 설치

flask 기초

app.py 파일 생성

flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/') def home(): return 'This is Home!'

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

👉 http://localhost:5000/ 접속, 오른쪽 클릭 → `Run app` 실행
![](https://images.velog.io/images/designer_rami/post/2fef3dbd-df69-44f4-801f-eb1ff3897c25/image.png)
- URL 나눠보기
```python
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'  # 인터넷 주소창 localhost:5000 검색

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'  # localhost:5000/mypage치면 이페이지로 이동

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

📝Flask_HTML파일 주기

기본 폴더구조

Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둡니다) ㄴtemplates 폴더 (html파일을 넣어둡니다) ㄴapp.py 파일
이렇게 세 개를 만들어두고 시작하세요. 이제 각 폴더의 역할을 알아봅시다! (꼭 참고!! venv는 실제로는 보이지만, 안보인다~라고 생각하세요! 기억하시죠?)

templates 폴더 안 index.html 파일 생성.




  
  
  
  Document


  서버를 만들었다!

flask 내장함수 render_template를 이용, html 파일 불러오기
```
from flask import Flask, render_template  
app = Flask(__name__)
```

URL 별로 함수명이 같거나,

route('/') 등의 주소가 같으면 안됩니다.

@app.route('/') def home(): return render_template('index.html') # templates 폴더의 index.html(CSS) 실행

if name == 'main': app.run('0.0.0.0', port=5000, debug=True)

***
## 📝Flask_본격 API 만들기
>**클라이언트가 요청 할 때에도, "방식"이 존재**
클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 것.

**GET, POST 방식**
여러 방식([링크](https://developer.mozilla.org/ko/docs/Web/HTTP/Methods))이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다. 
****
* GET → 통상적으로! **데이터 조회(Read)**를 요청할 때
  예) 영화 목록 조회
  → **데이터 전달** : URL 뒤에 물음표를 붙여 key=value로 전달
  → 예: google.com?q=북극곰


* POST → 통상적으로! **데이터 생성(Create), 변경(Update), 삭제(Delete) **를 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정
  → **데이터 전달 :** 바로 보이지 않는 HTML body에 key:value 형태로 전달

#### API 만들고 사용하기
1. 클라이언트와 서버 확인하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기
```python
from flask import Flask, render_template, request, jsonify  # request, jsonify 추가
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

### GET 요청 API코드 ###
@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')  # 'title_give'로 가져온 값 보여줘
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

"""
### GET 요청 확인 Ajax코드 ###
<--!>$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })
"""

### POST 요청 API코드 ###
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']  # 'title_give'로 가져온 값 보여줘
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

"""
### POST 요청 확인 Ajax코드 ###
$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })
"""

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

연습 1. 모두의 책리뷰

🔥 sparta → projects → bookreview 폴더 열고 시작! flask pymongo 패키지 설치.
flask 폴더 구조 만들기 static, templates 폴더 + app.py 생성. templates 폴더에 index.html 생성.

서버 app.py

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta

HTML을 주는 부분

@app.route('/') def home(): return render_template('index.html')

API 역할을 하는 부분

@app.route('/review', methods=['POST']) # 요청 URL = /review, 요청 방식 = POST def write_review():

### 클라이언트가 준 title, author, review 가져오기. 
title_receive = request.form['title_give']  # title_receive로 클라이언트가 준 title 가져오기
author_receive = request.form['author_give']  # author_receive로 클라이언트가 준 author 가져오기
review_receive = request.form['review_give']  # review_receive로 클라이언트가 준 review 가져오기

### DB에 정보 삽입하기.
doc = {
    'title':title_receive,
    'author':author_receive,
    'review':review_receive
}

db.bookreview.insert_one(doc)  # reviews에 review 저장하기

### 성공 여부 & 성공 메시지 반환하기.
return jsonify({'msg': '저장 완료!'})  # 응답데이터(JSON 형식)

@app.route('/review', methods=['GET']) # 요청 URL = /review, 요청 방식 = GET def read_reviews(): ### DB에서 리뷰 정보 모두 가져오기 reviews = list(db.bookreview.find({}, {'_id':false})) # 요청데이터 없음. return jsonify({'all_reviews': reviews}) # 응답데이터(JSON 형식)

if name == 'main': app.run('0.0.0.0', port=5000, debug=True)


- 클라이언트 index.html
```html



    
        
        모두의 책리뷰 | 스파르타코딩클럽

        
        
        

        
        

        
        
        

        
        

        

        
    

    
        
            
            
                읽은 책에 대해 말씀해주세요.
                다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?
                
                    
                        제목
                    
                    
                
                
                    
                        저자
                    
                    
                
                
                    
                        리뷰
                    
                    
                
                
                    
                
            
            
                
                    
                    
                        제목
                        저자
                        리뷰

연습 2. 나홀로 메모장

🔥 sparta → projects → alonememo 폴더를 열고 시작! flask pymongo requests bs4 패키지 설치.
flask 폴더 구조 만들기 static, templates 폴더 + app.py 생성. templates 폴더에 index.html 생성.

API 설계하기

✅ 포스팅API - 카드 생성 (Create)
① 요청 정보 - 요청 URL= /memo , 요청 방식 = POST - 요청 데이터 : URL(url_give), 코멘트(comment_give) ② 서버가 제공할 기능 - URL의 meta태그 정보를 바탕으로 제목, 설명, 이미지URL 스크래핑 - (제목, 설명, URL, 이미지URL, 코멘트) 정보를 모두 DB에 저장 *③ 응답 데이터 * - API가 정상적으로 작동하는지 클라이언트에게 알려주기 위해서 성공 메시지 보내기 - (JSON 형식) 'result'= 'success'

✅ 리스팅API - 저장된 카드 보여주기 (Read)
① 요청 정보 - 요청 URL= /memo , 요청 방식 = GET - 요청 데이터 : 없음 ② 서버가 제공할 기능 - DB에 저장돼있는 모든 (제목, 설명, URL, 이미지URL, 코멘트) 정보를 가져오기 *③ 응답 데이터 * - 아티클(기사)들의 정보(제목, 설명, URL, 이미지URL, 코멘트) → 카드 만들어서 붙이기 - (JSON 형식) 'articles': 아티클 정보

조각 기능 구현해보기

→ URL에서 페이지 정보 가져오기(meta태그 스크래핑)

메타 태그는, head /head 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들.
og:image / og:title / og:description 을 크롤링 할 예정

크롤링 기본 코드

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.

- 크롤링 연습 (meta_prac.py)
```python
import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

# 여기에 코딩을 해서 meta tag를 먼저 가져와보겠습니다.
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']

print(title, image, desc)

서버 app.py

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

import requests from bs4 import BeautifulSoup

from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta

HTML을 주는 부분

@app.route('/') def home(): return render_template('index.html')

@app.route('/memo', methods=['GET']) def listing(): articles = list(db.articles.find({},{'_id':false})) # articles는 aaa로 해도 무방 return jsonify({'all_articles':articles}) # articles는 aaa로 해도 무방

API 역할을 하는 부분

@app.route('/memo', methods=['POST']) def saving(): url_receive = request.form['url_give'] comment_receive = request.form['comment_give']

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url_receive,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="og:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']

doc = {
    'title':title,
    'image':image,
    'desc':desc,
    'url':url_receive,
    'comment':comment_receive
}

db.articles.insert_one(doc)

return jsonify({'msg':'저장이 완료되었습니다!'})

if name == 'main': app.run('0.0.0.0',port=5000,debug=True)


- 클라이언트 index.html
```html



    
        
        
        

        
        

        
        
        

        
        

        스파르타코딩클럽 | 나홀로 메모장

        
        
        

    

    
        
            
                나홀로 링크 메모장!
                중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다
                
                
                    
                
            
            
                
                    
                        아티클 URL
                        
                    
                    
                        간단 코멘트

👩‍💻 4주차 마무리하며.

🤍 코딩은 외워서 하는 것이 아니다, 가져다 쓰는 것! 🤍 [ ] / { } / " " / . → 맥락과 사용법을 익혀라! 🤍 헷갈리지 않게 "정렬(ctrl+alt+L)" 잘하기! 🤍 태그 짝 잘 맞는지 확인하기! 🤍 완벽하게 하려고 하지 않기 🤍 익숙할 정도로 반복/연습하기 🤍 구글링을 습관화 🤍 에러를 무서워하지 말고, 최대한 읽어보고 익숙해지려고 노력하기!

💜 게더(스파랜드)에서 스온스 진행 중 💜 11일 챌린지 도전 중 💜 개발일지 작성 중 (+복습) 💜 틈틈히 개별 프로젝트 아이디어

[스파르타] #웹개발 종합반 #3주차 개발일지👊🏻

Thu, 06 Jan 2022 12:08:12 GMT

🌼 Notion 강의자료

🚩수업 목표

파이썬 기초 문법을 안다.
원하는 페이지를 크롤링 할 수 있다.
pymongo를 통해 mongoDB를 제어할 수 있다.

📝파이썬(python)

파이썬을 설치한다는 것의 의미 일종의 파이썬 번역팩을 설치했다라고 생각. 컴퓨터는 101010001 과 같은 언어만 알아듣기 때문에 파이썬 문법으로 된 것을 101010001로 변환해줄 수 있도록, 번역 패키지를 설치하는 것.

파이썬 기초 문법

👉 변수 & 기본연산

a = 3      # 3을 a에 넣는다
b = a      # a를 b에 넣는다
a = a + 1  # a+1을 다시 a에 넣는다

num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다

# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게?

👉 자료형

숫자, 문자형

name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
num = 12 # 숫자가 들어갈 수도 있고,

is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.

#########

그리고 List, Dictionary 도 들어갈 수도 있죠.

- 리스트 형 (Javascript의 배열형과 동일)
```python
a_list = []
a_list.append(1)     # 리스트에 값을 넣는다
a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

# a_list의 값은? [1,[2,3]]
# a_list[0]의 값은? 1
# a_list[1]의 값은? [2,3]
# a_list[1][0]의 값은? 2

Dictionary 형 (Javascript의 dictionary형과 동일)

a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

a_dict의 값은? {'name':'bob','age':21, 'height':178}

a_dict['name']의 값은? 'bob'

a_dict['age']의 값은? 21

a_dict['height']의 값은? 178

- Dictionary 형과 List형의 조합
```python
people = [{'name':'bob','age':20},{'name':'carry','age':38}]

# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

# people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
# people[2]['name']의 값은? 'john'

👉 함수

def sum_all(a,b,c):
    return a+b+c

def mul(a,b):
    return a*b

result = sum_all(1,2,3) + mul(10,10)

# result라는 변수의 값은?

👉 조건문

if / else 로 구성!

def is_adult(age):
    if age > 20:
        print('성인입니다')    # 조건이 참이면 성인입니다를 출력
    else:
        print('청소년이에요')  # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)
# 무엇이 출력될까요?

👉 반복문

파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태.

fruits = ['사과','배','감','귤']

for fruit in fruits:
    print(fruit)

# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

people = [{'name': 'bob', 'age': 20}, 
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]

# 모든 사람의 이름과 나이를 출력해봅시다.
for person in people:
    print(person['name'], person['age'])


# 이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.
# 이름을 받으면, age를 리턴해주는 함수
def get_age(myname):
    for person in people:
        if person['name'] == myname:
            return person['age']
    return '해당하는 이름이 없습니다'


print(get_age('bob'))
print(get_age('kay'))

📝파이썬 패키지 설치

패키지? 라이브러리? → Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위입니다. 이런 패키지 의 묶음을 라이브러리 라고 볼 수 있습니다. 지금 여기서는 외부 라이브러리를 사용하기 위해서 패키지를 설치합니다.
즉, 여기서는 패키지 설치 = 외부 라이브러리 설치!

가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 = 라이브러리를 담아두는 폴더
pip(python install package) 사용 - 앱을 설치할 때 앱스토어/플레이스토어를 가듯이, 새로운 프로젝트의 라이브러리를 가상환경(공구함)에 설치하려면 pip 를 이용하게 됩니다. requests 패키지 설치
```
import requests # requests 라이브러리 설치 필요
```

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') rjson = r.json()

print(rjson['RealtimeCityAir']['row'][0]['NO2'])

- 모든 구의 IDEX_MVL 값을 찍어주자!
```python
import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row'] # 임의의 이름(gus)

for gu in gus:
    print(gu['MSRSTE_NM'], gu['IDEX_MVL'])

IDEX_MVL 값이 60 미만인 구만 찍어주자!(들여쓰기가 얼마나 중요한지 다시한번 확인)
```
import requests # requests 라이브러리 설치 필요
```

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus: if gu['IDEX_MVL'] < 60: print (gu['MSRSTE_NM'], gu['IDEX_MVL']) #'구'들 중 '미세먼지 수치'가 60 초과면 '이름', '미세먼지 수치' 표시

## 📝웹스크래핑(크롤링) 기초
> 크롤링(crawling) 혹은 스크레이핑(scraping)은 웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위.

`bs4` 패키지 추가설치
#### 크롤링 기본 세팅
```python
import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

#############################
# (입맛에 맞게 코딩)
#############################

Select / Select_one 사용법 태그 안의 텍스트를 찍고 싶을 땐 → 태그.text 태그 안의 속성을 찍고 싶을 땐 → 태그['속성']
네이버영화 페이지
```
import requests
from bs4 import BeautifulSoup
```

URL을 읽어서 HTML를 받아오고,

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers)

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

soup = BeautifulSoup(data.text, 'html.parser')

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr') # 갖고 오고 싶은 데이터 우클릭>Copy>Copy Selector

#old_content > table > tbody > tr:nth-child(2) > td.title > div > a #old_content > table > tbody > tr:nth-child(2) >

movies (tr들) 의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: # 중간의 구분선 등 값이 None인 값 제외 rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기 title = a_tag.text # a 태그 사이의 텍스트를 가져오기 star = movie.select_one('td.point').text # td 태그 사이의 텍스트를 가져오기

    print(rank,title,star)

#### beautifulsoup 내 select에 미리 정의된 다른 방법
```python
# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

📝DB(Database)개괄

DB의 두 가지 종류.
👉 RDBMS(SQL) 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사합니다. 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것입니다. 그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이할 수 있습니다. ex) MS-SQL, My-SQL 등
👉 No-SQL 딕셔너리 형태로 데이터를 저장해두는 DB입니다. 고로 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 됩니다. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있습니다. ex) MongoDB

DB 설치 확인

크롬 창에 localhost:27017 이라고 쳤을 때, 아래와 같은 화면이 나오면 mongoDB가 돌아가고 있는 것.

📝pymongo로 DB조작하기

pymongo 패키지 설치

pymongo 기본 코드

from pymongo import MongoClient  # pymongo를 임포트 하기
client = MongoClient('localhost', 27017)  # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta  # 'dbsparta'라는 이름의 db를 만듭니다.

코딩 시작

- **pymongo(insert)** 데이터 넣기
```python
doc = {'name':'bobby','age':21}  
db.users.insert_one(doc)  # 'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.

db.users.insert_one({'name':'kay','age':27})
db.users.insert_one({'name':'john','age':30})

pymongo(find) 모든 결과 값을 보기

# MongoDB에서 데이터 모두 보기
all_users = list(db.users.find({}))

same_ages = list(db.users.find({'age':21},{'_id':False})) # MongoDB에서 특정 조건의 데이터 모두 보기

print (same_ages) #또는 for person in same_ages: print(person)

- **pymongo(find_one)** 특정 결과 값을 뽑아 보기
```python
user = db.users.find_one({'name':'bobby'})  # 이름이 bobby인 값이 여러 개라도 가장 상단의 값만 가져 옴

print(user)

pymongo(update_one) 수정하기

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})  # 오타가 많으니 이 줄을 복사해서 씁시다!

pymongo(delete_one) 삭제하기

db.users.delete_one({'name':'bobby'})

pymongo 사용법. 코드요약

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})
# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False}))
# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

웹스크래핑 결과 DB에 저장하기

insert 연습하기

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?) client = MongoClient('localhost', 27017) # mongoDB는 27017 포트로 돌아갑니다. db = client.dbsparta # 'dbsparta'라는 이름의 db를 만듭니다.

URL을 읽어서 HTML를 받아오고,

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

soup = BeautifulSoup(data.text, 'html.parser')

select를 이용해서, tr들을 불러오기

movies = soup.select('#old_content > table > tbody > tr')

movies (tr들) 의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기 title = a_tag.text # a 태그 사이의 텍스트를 가져오기 star = movie.select_one('td.point').text # td 태그 사이의 텍스트를 가져오기 doc = { 'rank' : rank, 'title' : title, 'star' : star } db.movies.insert_one(doc) # db에 insert

- find, update 연습하기
```python
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta 

## 코딩 할 준비 ##

# '매트릭스' 평점 가져오기
target_movie = db.movies.find_one({'title':'매트릭스'})  # 하나만 찾기
print (target_movie['star'])

# '매트릭스'의 평점과 같은 평점의 영화 제목들을 가져오기
movies = list(db.movies.find({'star':target_star}))

for movie in movies:
    print(movie['title'])

#매트릭스 영화의 평점을 0으로 만들기
db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})

👩‍💻 3주차 마무리하며.

🤍 에러보는 꿀팁! 맨 마지막줄(에러에 대한 설명→구글링)과 바로 윗줄(에러난곳) 읽기
🤍 반드시 마우스 오른쪽 클릭! Run으로 실행하기! 🤍 차근차근 consol에 찍어보고, 나아가는 훈련! (코드쭈-욱 짜놓고 에러찾기 X) 🤍 코딩은 외워서 하는 것이 아니다, 가져다 쓰는 것! 🤍 { } / " " / . → 맥락과 사용법을 익혀라! 🤍 헷갈리지 않게 "정렬(ctrl+alt+L)" 잘하기! 🤍 태그 짝 잘 맞는지 확인하기! 🤍 완벽하게 하려고 하지 않기 🤍 익숙할 정도로 반복/연습하기 🤍 구글링을 습관화 🤍 에러를 무서워하지 말고, 최대한 읽어보고 익숙해지려고 노력하기!

💜 게더(스파랜드)에서 스온스 진행 중 💜 11일 챌린지 도전 중 ~12/31 💜 개발일지 작성 중 (+복습) 💜 틈틈히 개별 프로젝트 아이디어

[스파르타] #웹개발 종합반 #2주차 개발일지👊🏻

Sun, 26 Dec 2021 17:32:46 GMT

🌼 Notion 강의자료

🚩수업 목표

Javascript 문법에 익숙해진다.
jQuery로 간단한 HTML을 조작할 수 있다.
Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

JS 복습

짝/홀수 onclick 함수

📝JQuery

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리!

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장.
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드, 전문 개발자들이 짜둔 코드를 import하여 간단하게 쓸 수 있음.
```
// Javascript로 길고 복잡하게 써야 하는 것.
document.getElementById("element").style.display = "none";
```

// jQuery로 보다 직관적으로 작성. $('#element').hide();

#### jQuery CDN
 구글 CDN https://fonts.google.com/?subset=korean

**부트스트랩**을 사용할 경우, jQuery CDN이 임포트 되어있음.
`` 와 `` 사이에 작성.
```html

css에서는 선택지로 class, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨.

👉 input 박스의 값을 가져와보기

값 가져오기 $('#id값').val(); input값 입력하기 $('#id값').val('장영실');


    
        아티클 URL
        
    
    
        간단 코멘트
        
    
    


// 크롬 개발자도구 콘솔창에 입력.
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

👉 div 보이기 / 숨기기

나타내기 $('#id값').show() 숨기기 $('#id값').hide()


    
        아티클 URL
        
    
    
        간단 코멘트
        
    
    


// 크롬 개발자도구 콘솔창에 입력.
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

👉 css의 값 가져와보기

$('#post-box').hide();
$('#post-box').css('display'); // 예 display 속성 값 가져오기

$('#post-box').show();
$('#post-box').css('display');

👉 태그 내 텍스트 입력하기

텍스트 바꾸기 $('#id값').text('텍스트')

// input box의 경우
$('#post-url').val('여기에 텍스트를 입력하면!');

//다른 것들 - 예) 버튼의 텍스트 바꾸기
// 가리키고 싶은 버튼에 id 값을 준다음


$('#btn-posting-box').text('포스팅 박스 닫기');

👉 태그 내 html 입력하기

이어 붙이기 $('#id값').append(temp_html) back tick(`) - html처럼 생긴 문자열을 html로 변환.

~

 내에,
동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)

// 사이에 html을 넣고 싶은 태그에 id값을 준 다음

    
      
      
        여기 기사 제목이 들어가죠
        여기에 기사 내용이 들어가겠죠
        여기엔 코멘트가 들어갑니다
      
    
  

// 버튼 넣어보기
let temp_html = '';
$('#cards-box').append(temp_html);

// 버튼 말고, 카드 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// backtick을 사용하면 문자 중간에 Javascript 변수 삽입 가능.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `
                    
                    
                        ${title}
                        ${desc}
                        ${comment}
                    
                `;
$('#cards-box').append(temp_html);

JQuery 적용하기(나홀로메모장)

// 포스팅박스 열기 버튼에 id 값 주기, onclick 속성(attribute)을 추가.

[스파르타] #웹개발 종합반 #1주차 개발일지👊🏻

Wed, 22 Dec 2021 18:51:13 GMT

🌼 Notion 강의자료

🚩수업 목표

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
Javascript 기초 문법을 익힌다.

📝웹의 동작 개념

브라우저가 서버에 ① 요청을 보내고 서버로부터 ② 결과물을 받아서 그려주는 것.

요청을 보내는 곳은?

서버가 만들어 놓은 "API" 라는 창구에 미리 정해진 약속대로 요청을 보내는 것.
예)https://naver.com/
→ 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

HTML(파일)을 받는 경우
JSON (데이터)을 받는 경우 예) 티켓팅 때 새로고침하면 예매된 좌석과 예매되지 않은 좌석 색 변경

📝HTML 기초

HTML은 뼈대, 구역과 텍스트를 나타내는 코드, CSS는 꾸미기, 잡은 구역을 꾸며주는 것

HTML은 크게 head와 body로 구성. head안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 담습니다.

head 안에 들어가는 대표적은 요소들 : meta script link title 등 body를 제외한 모든 것.





    
    
    스파르타코딩클럽 | HTML 기초



    
    나는 구역을 나누죠
 
    나는 문단이에요
    
         bullet point!1 
         bullet point!2 
    

    
    h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.
    h2는 소제목입니다.
    h3~h6도 각자의 역할이 있죠. 비중은 작지만..
    
    span 태그입니다: 특정 글자를 꾸밀 때 써요 
    
    a 태그입니다:  하이퍼링크 
    
    img 태그입니다: 
    
    input 태그입니다: 
    
    button 태그입니다: 
    
    textarea 태그입니다: 나는 무엇일까요?

✋ 잠깐! 정렬의 중요성 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L 로 자동정렬 기능을 사용해보세요.

📝CSS 기초

HTML 부모-자식 구조 살펴보기 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음.

head ~ /head 안에 style ~ /style 로 공간을 만들어 작성. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억

만들어진 화면을 가운데로 가져오려면?

width를 주고, margin: auto를 사용, 그래도 안되면? display:block (글 속성→ BOX 속성 변경)을 추가!

📝폰트, 주석, 파일분리

구글 웹폰트 입히기

구글웹폰트 https://fonts.google.com/?subset=korean

/* CSS  사이에 이 부분을 추가하면 완성! */
* {
    font-family: 'Jua', sans-serif;
}

주석은 언제 사용하나요?

1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.

주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것! → 단축키 ctrl + / (슬래시)

CSS 파일 분리도 가능

style ~ /style 부분이 너무 길어지면 아래와 같이 파일을 분리해둘 수 있다.

📝부트스트랩

부트스트랩 컴포넌트(4.0) https://fonts.google.com/?subset=korean

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐.

📝Javascript 기초

프로그래밍 언어 중 하나로, 브라우저가 유일하게 알아들을 수 있는 언어. 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.

head ~ /head 안에 script ~ /script 로 공간을 만들어 작성. script ~ /script 내에 자바스크립트를 작성.

HTML 연결. 버튼을 클릭하면 경고창 뜨게하기

버튼에 함수 연결하기(버튼을 누르면 함수가 불림)

크롬 개발자 도구 콘솔 창(F12)

띄워놓은 페이지에서 빠르게 자바스크립트를 테스트 할 수 있는 개발자들을 위한 도구

console.log(변수)

개발자가 결과값을 보기 편하도록 콘솔 창에 괄호 안의 값을 출력해줌.

console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

👉 변수

let으로 변수를 선언. 변수는 값을 저장하는 박스, 한번 선언했으면 다시 선언하지 않고 값을 넣는다.

/* 사칙연산, 문자열 더하기가 기본적으로 가능 */

let a = 1 // a라는 박스를 꺼내서 그 안에 1을 담았다!
let b = 2 // 오른쪽에 있는 것을 왼쪽에 넣는 것(2를 b라는 변수에 넣는다)

a+b
3
a/b
0.5

let first_name = 'Bob' // '문자열' 작은따옴표
let last_name = "Lee"

first_name+last_name
'BebLee'
first_name+' '+last_name
'Bob Lee'
first+a // 문자+숫자를 더하면, 숫자를 문자로 바꾼 뒤 수행
'Bob1'

let first_name = 'Bob' // snake case
let firstName = 'Bob' // camel case

/* 변수명은 쉽게 알아볼 수 있게 쓰는게 중요(특수문자 또는 띄워쓰기 불가능) */

👉 자료형(list & dict)

순서를 표시하고, 정보를 묶을 수 있다(상호 호환 가능)

리스트: 순서를 지켜서 가지고 있는 형태

let a_list = ['수박','참외','배'] // 리스트를 선언. 대괄호 사용

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

a_list[0] // 0부터 시작 '수박' b_list[2] 'hey'

a_list.push('감') // 리스트에 요소 넣기, 소괄호 사용 b_list ['수박','참외','배','감']

b_list.length // 리스트의 길이 구하기 4


- 딕셔너리: 키(key)-밸류(value) 값의 **묶음** 
```js
let a_dict = {'name':'Bob','age':27} // 딕셔너리 선언. 중괄호 사용

a_dict['name']
'Bob'
a_dict['age']
21

a_dict['height'] = 180 // 딕셔너리에 키:밸류 추가
a_dict
{name: "Bob", age: 21, height: 180}

a_dict['fruits'] = a_list
(4)['수박','참외','배','감']
a_dict
{name: "Bob", age: 21, height: 180, fruits:Array(4) }

a_dict['fruits'][2] //리스트와 딕셔너리의 조합
'배'

리스트와 딕셔너리 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob' // names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7} names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] // names[2]['name']의 값은? 'john'

***
### 👉 **함수**
부르면 정해진 **동작**을 한다
```js
function sum(num1, num2) { // function 함수이름(필요한 변수들)
    return num1+num2 // 내릴 명령들을 순차적으로 작성
}

let result = sum(2,3)
result // 끝내고 나를 변신시켜줘!
5

기본함수
```
let a = 20
let b = 7
```

a % b // a를 b로 나눈 나머지 값 6 a < 50 // a는 50보다 작다 true a == 20 // a는 20과 같다 true a != 20 // a는 20과 같지 않다 false

let myname = 'spartacodingclub'

- 모든 알파벳을 대문자로 바꾸고 싶은 경우
```js
myname.toUpperCase()
'SPARTACODIGCLUB'

특정 문자로 문자열을 나누고 싶은 경우
```
let myemail = 'sparta@gmail.com'
```

mmyemail.split('@') (2) ['sparta','gmail.com']

myemail.split('@')[1] 'gmail.com'

myemail.split('@')[1].split('.') (2)['gmail','com']

myemail.split('@')[1].split('.')[0] // 어떤 도메인의 이메일인지 판별 'gmail'

***
### 👉 **조건문**
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
```js
if(age > 20){
  console.log('성인입니다')
} else {
  console.log('청소년입니다')
}
// '성입입니다'

let sex = '남성'

if(age > 20 && sex == '남성'){ // && AND
  console.log('성인 남성입니다')
} else {
  console.log('청소년입니다')    
}

if(age > 20 || sex == '남성'){ // || OR
  console.log('성인 남성입니다')
} else {
  console.log('청소년입니다')    
}

if (age > 20) {
  console.log('성인입니다')
} else if (age > 10) {
  console.log('청소년입니다')
} else {
  console.log('아동입니다') // if, else if, else if, else if else

👉 반복문

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99) // 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!

/* 반복문을 이용하면 단 세줄로, 출력*/

for (let i = 0; i < 100; i++) { //오타 조심!
    console.log(i);
}

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
    4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

// 와 같은 순서로 실행됩니다.
// i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
    console.log(people[i])
}

👩‍💻 1주차 마무리하며.

💜 게더(스파랜드)에서 스온스 진행 중 💜 11일 챌린지 도전 중 💜 개발일지 작성 중 (+복습) 💜 틈틈히 개별 프로젝트 아이디어

d-rami.log

아이패드 "듀얼모니터" 사용

1. Splashtop Wired XDisplay HD 앱 다운

2. PC 프로그램 설치

⭐ "Unable to connect to ipone/ipad!" 경고창이 뜬 경우!

3. 노트북 ↔ 아이패드 USB 연결 후, 앱 실행.

🔎 참고자료

🔗 https://balsamic-egg.tistory.com/21

내가 보려고 만든 페이지😂

진짜 진짜 어쩔 수 없이 듀얼모니터가 필요할때.... 마우스도 너무 느리고 확실히 화면이 작으니깐 답답😣 (🍠🍠🍠X백만개)

[VSCode] 유용한 Extension

⭐ Extension(확장 플러그인) 설치방법

⭐ 작업 환경 테마

⭐ 파일별 아이콘 테마(생동감 있는 아이콘)

ETC

내가 보려고 만든 페이지😂 가볍게 찾아보면서 추가한 플러그인...계속 추가되겠지....?

[CSS] flexbox

🔎 참고자료

🔗 1분코딩🔗 드림코딩_CSS Flexbox 완전 정리🔗 CSS Tricks for Flexbox

내가 보려고 만든 페이지😂

[개발자도구] Error_2. Failed to load resource: the server responded with a status of 404 (Not Found).

💢 에러내용.

✅ 해결방법.

[Velog] 마크다운(Markdown) 사용법

🧐 마크다운(Markdown)이란?

🧐 마크다운 쓰는 이유

⭐ 마크다운 작성법

1. 문단(Paragraph)

2. 제목(Header)

h1

h2

h3

h4

h5

h6

3. 글꼴 스타일(Text-style)

3-2. HTML 꾸미기

제목

제목

4. 코드(Code)

4-1. 인라인 코드

4-2. 코드블럭

5. 인용문(BlockQuote)

6. 수평선(Horizontal Rule)

7. 목록(List)

7-1. 순서 있는 목록

7-2. 순서 없는 목록

8. 체크박스(Check Box)

9. 링크(Link)

10. 이미지(Image)

10-1. 이미지 링크

10-2. 이미지 크기조절

10-3. 이미지 정렬

11. 표(Table)

12. 이모지(Emoji)

🔎 참고자료

🔗 daring fireball

🔗 이미지 크기 조절, 정렬

🔗 [Markdown] Velog 사용법

🔗 velog 마크다운(markdown) 작성법

내가 보려고 만든 페이지😂

이미지 크기, 정렬 미리보기에서만 보이고, 작성된 글에서는 왜 적용이 안될까? 표 안에 정렬도 미리보기에선 다 적용이 되는데...

[Git, GitHub] Error_1. Pulling is not possible because you have unmerged files.

💢 에러내용.

✅ 해결방법.

[스파르타] #웹개발 종합반 #4주차 개발일지👊🏻

🚩수업 목표

📝Flask_서버만들기

flask 기초

📝Flask_HTML파일 주기

서버를 만들었다!

URL 별로 함수명이 같거나,

route('/') 등의 주소가 같으면 안됩니다.

연습 1. 모두의 책리뷰

HTML을 주는 부분

API 역할을 하는 부분

읽은 책에 대해 말씀해주세요.

연습 2. 나홀로 메모장

API 설계하기

조각 기능 구현해보기

내가 보려고 만든 페이지😂

가볍게 찾아보면서 추가한 플러그인...계속 추가되겠지....?

🔗 1분코딩
🔗 드림코딩_CSS Flexbox 완전 정리
🔗 CSS Tricks for Flexbox

이미지 크기, 정렬 미리보기에서만 보이고, 작성된 글에서는 왜 적용이 안될까?

표 안에 정렬도 미리보기에선 다 적용이 되는데...