h_h.log

팀 개발을 위한 Git, GitHub 입문(1)-Git&GitHub 시작하기 feat.CLI

Tue, 05 Apr 2022 02:59:02 GMT

💡Git과 GitHub 없이 개발한다는건

->저장하지 않고 게임하는 것,폰에서 하던 게임을 PC에서 할 때 처음부터 다시 시작해야하는 것 같은 팀 끼리 usb에 게임 상태를 저장해서 돌려가며 조금씩 플레이 하는것

Git-따로 조금씩 작업하다 내가 원할 때 코드를 합칠 수도 있고, 백업도 쉽게 가능! 코딩할 때 단순히 ctrl+z를 눌러 이전 상태로 되돌리는 것이 아니라, 원하는 시점마다 깃발을 꽂고(버전을 만들고) 이들 간에 자유롭게 돌아다닐 수 있다.

내가 만든 버전 뿐만 아니라 동료가 만든 버전으로 이동가능,버전 비교 후 최신본으로 코드 업데이트 가능 ! Git은 저장할 공간만 있다면 어디서나 사용가능-클라우드,서버

Git을 사용하는 방법-CLI(command 명령어를 직접 쳐서 깃을 다루는 것) / GUI(Grapic /버튼을 클릭해서 깃을 다루는 것)

🟣GitHub에 코드를 올리는 과정

1.내 컴퓨터 프로젝트 폴더에 ‘여기에서 Git을 쓸거다!’ 라고 명령->git init 2.코딩하기 3.내가 변경한 파일 중 올리길 원하는것만 선택-> git add 4.선택한 파일들을 한 덩어리로 만들고 설명 적어주기-> git commit-m “첫 페이지 저장’ 5. GitHub사이트에서 프로젝트 저장소 만들기(블로그 만드는것과 동일) 6.내 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기-> git remote add 7.내 컴퓨터에 만들었던 덩어리 GitHub에 올리기-> git push

이 폴더에서 Git으로 버전 관리를 하고 싶어! 1.원하는 폴더에서 Git 초기화를 하면 그때부터 가능 -> git init 2.git 초기화를 하면 . git이라는 숨겨진 폴더가 만들어진다. ->이게 ‘로컬저장소’ 3.로컬저장소에 내가 만든 버전 정보,원격 저장소 주소 등이 저장된다. 4.원격 저장소에서 내 컴퓨터로 코드를 받아오면 로컬 저장소가 자동으로 생긴다. 5.한 폴더에 하나의 로컬 저장소만 유지해야 한다

1.내 컴퓨터 프로젝트 폴더에 ‘여기에서 Git을 쓸거다!’ 라고 명령->git init

터미널에서 폴더를 이동하는 명령어->cd (change directory)

터미널들어가서 git 입력-cd documents-cd programming(폴더이름)-cd boxcitingcat(폴더이름)-git init(git을 입력할것이다)-확인하기 위해서 ls(폴더에 있는 모든 파일과 폴더를 보여주는 명령어) 입력-숨겨진 폴더라 아무것도 안뜬다면 ls-a 입력

2.코딩하기

3.내가 변경한 파일 중 올리길 원하는것만 선택-> git add

4.선택한 파일들을 한 덩어리로 만들고 설명 적어주기-> git commit-m “첫 페이지 저장’

🟣덩어리란? 커밋(commit)=하나의 버전 커밋을 짧게 만들어 놓으면 시간여행을 간편하게 할 수 있다.->최신버전이 맘에 안들면 버전1로 다시 돌아가 시작할 수 있다는 의미,

커밋으로 만들길 원하는 파일만 선택:애드 (add)

🟣리눅스 터미널 명령어

ls : 현재 위치 파일/폴더 리스트 보기 (-a 숨긴파일 보이기)

cd : 디렉토리 이동 change directory

pwd : 현재 디렉토리 print working directory

rm : 삭제 remove

cp : 복사 copy

mv : 다른 디렉토리로 이동하며 이름 변경 가능 -> 현재 디렉토리로 이동시 이름바꾸기로 활용 move

mkdir : 디렉토리 생성

rmdir : 디렉토리 삭제

cat : 파일 내용보기

head/tail : 파일 처음/마지막만 보기

clear : 터미널 창 초기화

Git사용자 정보 등록

git 전역 사용자 설정(GitHub의 닉네임과 이메일을 입력) git config —global user.name “John Doe” git config —global user.email johndoe@example.com

버전 생성 실습 1.편집기에서 READ.md,index.html 파일생성 2.원하는 파일만 생성하기

Git add README.md

3.메세지를 달아 커밋으로 만들기

git commit -m “프로젝트 설명 파일 추가”

4.생성한 커밋보기

git log

🟣커밋 -의미있는 변동사항을 묶어서 만든다. 단순한 ctrl+s 의 의미가 아님 ex)버튼 클릭 버그를 고치는데 5가지 파일을 수정 했다면 그 5가지를 묶어서 하나의 커밋으로 만든다. -동료 개발자(혹은 미래의 나)가 ‘버튼 클릭버그’를 고치는데 어떤 파일을 수정 했는지 손쉽게 파악가능 -커밋 메세지 적는게 귀찮아도 시간 조금이라도 들이기 ! 나중에 후회하지 않게 된다. -커밋은 기차 처럼 쌓인다. 즉 흐름을 알 수 있다.

5. GitHub사이트에서 프로젝트 저장소 만들기(블로그 만드는것과 동일)

6.내 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기-> git remote add

7.내 컴퓨터에 만들었던 덩어리 GitHub에 올리기-> git push

🟣만든버전 Github에 올리기 로컬저장소와 원격저장소) 내 컴퓨터의 로컬 저장소에서 버전 관리가 완벽하게 되고있음->이제 Github에 올려서 다른 사람들과 함께 버전관리를 할래(원격저장소) push 라는 명령어를 사용하여 우리가 만들었던 commit을 올릴 수 있음

🟣원격저장소 GitHub에서 만들고 커밋 푸시하기 1.GitHub에 로그인해서 Boxiting 저장소 생성 2.내컴퓨터 boxiting-cat폴더에 GitHub 저장소 주소 알려주기

Git remote add orgin https://github.com/아이디/이름.git

3.만든 커밋 푸시하기

Git push origin master

4.GitHub에 올라간 커밋확인

🟣다른 사람이 만든 저장소 받아오기

원격 저장소를 내 컴퓨터에 받아오기:클론(clone) 클론을 하면 원격저장소의 코드를 내컴퓨터에 받아 올 수있다. 로컬 저장소(.git 폴더)도 자동으로 생긴다.

1.GitHub의 Boxiting 저장소 받아오기 (새 폴더에서 명령어를 입력하기, 뒤에 점 붙이는걸 잊지 말기!)

https://github.com/아이디/이름.git .

2.app.js파일 생성 후 add->commit->push 3.GitHub에서 새 커밋 확인하기

원격저장소의 변경사항 내 컴퓨터에 받아오기 1.내 컴퓨터에 boxitingcat폴더로 이동 후 app.js없는거 확인 2.풀 명령어로 다른사람이 새로 올린 커밋

git pull origin master

3.새로 생긴 app.js 확인

teminal 새로운 탭->cmd+t 이전 폴더로 가기->cd ..

스파르타 코딩클럽_항해99 _웹개발 종합반_2주차

Mon, 04 Apr 2022 03:14:58 GMT

1.JQuery 시작하기

1) jQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!부트스트랩과 비슷한 개념
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드, 즉 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것 (그렇게 때문에, 쓰기 전에 "임포트"를 해야함-> 미리 작성된 Javascript 코드를 가져오는 것)
코드비교 Javascript코드)
document.getElementById("element").style.display = "none";

jQuery코드)->보다 간단하고 직관적임 $('#element').hide();

2) jQuery 사용하기

 와  사이에 넣으면 끝!

jQuery를 사용하는 방법 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있음 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class로 지칭 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 지칭함 ex)input-q1의 입력값을 가져온다(id로 지칭되어 있어야함)
let value = $('#input-q1').val()

2.JQuery 다뤄보기

JQuery가 할 수 있는 일은 매우 많으므로 외우는게 아닌 필요한 기능 구글링 하기 !

1)input 박스의 값을 가져와보기


    
    영화URL

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

// 입력할때는? $('#url').val('이렇게 하면 입력이 가능하지만!');

02)div 보이기 / 숨기기

// 크롬 개발자도구 콘솔창에 쳐보기 // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다. $('#post-box').hide();

// show()로 보이게 한다. $('#post-box').show();

03)태그 내 html 입력하기

-  ~ 
 내에,

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

카드가 붙는 div 에 id를 추가해주는 것이 핵심!
영화 제목이 들어갑니다

여기에 영화에 대한 설명이 들어갑니다.

⭐⭐⭐

나의 한줄 평을 씁니다

3.서버-클라이언트 통신 이해하기

1) 서버→클라이언트: "JSON"을 이해하기

JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 유사함. 껍데기는 가지고 있다가 데이터를 받아서 붙여주는것!

위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있음.

2) 클라이언트→서버: GET 요청 이해하기

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재함.
GET →통상적으로! 데이터 조회(Read)를 요청할 때
```
 예) 영화 목록 조회
```
POST →통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

GET https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 "?"가 쪼개지는 지점으로 나눌 수 있다. "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호]
서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: code=161967

GET 방식으로 데이터를 전달하는 방법 ? : 여기서부터 전달할 데이터가 작성된다는 뜻 & : 전달할 데이터가 더 있다 라는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

     위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
     q=아이폰                        (검색어)
     sourceid=chrome        (브라우저 정보)
     ie=UTF-8                      (인코딩 정보)

그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까? 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속!

프론트엔드: *"code라는 이름으로 영화번호를 주면 될까요?"* 백엔드: *"네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"*

4.Ajax 시작하기

참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 에러가 뜨게됨. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

Ajax 코드 해설 $.ajax({ type: "GET", // GET 방식으로 요청한다. url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요) success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })
type: "GET" → GET 방식으로 요청한다.
url: 요청할 url
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감 http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져감 data: { param: 'value', param2: 'value2' },

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

스파르타 코딩클럽_항해99_웹개발 종합반_1주차

Mon, 04 Apr 2022 02:27:41 GMT

◾웹의 동작 개념 (HTML을 받는 경우) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것이다. 즉, 브라우저가 하는 일은

1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이다. 1)->서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것 !

예) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

◾HTML과 CSS의 개념

HTML은 뼈대 , CSS는 꾸미기 ! 뼈대(HTML)+꾸미기(CSS)+동적역할을 수행하는 뇌(Javascript) = 웹사이트

◾HTML 기초

HTML은 크게 head와 body로 구성됨.

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등->웹페이지 내용에 들어가지 않는 구성요소 body는 웹페이지에서 우리가 눈으로 볼 수 있는 내용들을 담는다.

✅코드 생김새 파악, 오류 해결을 위해 정렬 습관화 하기 !

*코드 자동정렬 단축키->cmd+alt+L *코드 줄 정렬(오른쪽으로)->tab / (왼쪽으로)shift+tab

◾CSS 기초

cascading style sheet , 물흐르듯이 따라감 , 뭔가를 꾸민다는 것은 꾸밀 대상을 가리켜야 가능한 것 !

📣html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요, 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다!

◾CSS 사용법

1) ~ 안에 로 공간을 만들어 작성. 2)

로 CSS 적용할 부분을 묶고 클래스명 지정. 3) .클래스명 으로 원하는 클래스 선택 후 { } 안에서 CSS 적용. ex) mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 함 !

배경관련 background-color / background-image / background-size 사이즈 width / height 폰트 font-size / font-weight / font-family color 간격 margin padding

📣margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 - div에 색깔을 넣고, 직접 사용해서 차이를 비교해보기 !

✅가운데로 온다는 것은 양쪽 여백이 같아진다는 것 !

width를 주고, margin: auto를 사용하기! 그래도 안되면? display:block을 추가!

✅background은 항상 3줄이 같이 쓰인다고 생각 !

background-image background-size background-position

◾폰트,주석 ▪폰트적용 구글 웹폰트:https://fonts.google.com/?subset=korean

1)[ + Select this style ]을 클릭 2)link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣기

ex)

/* CSS에 이 부분을 추가하면 완성! */

{ font-family: 'Jua', sans-serif; }
{} --> 전체에 적용시키겠다.

▪주석 컴퓨터는 읽지 않지만 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을때, 코드에 대한 설명을 붙여두고 싶을 때 사용. 단축키->cmd+ /

◾부트스트랩 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많음)

->남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답!

https://getbootstrap.com/docs/5.0/components/buttons/

✅이미지 어둡게 하기(이미지 위에 텍스트 입력 시 잘보이도록) linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

✅이모티콘 모음 https://kr.piliapp.com/facebook-symbols/

✅그림자 효과 box-shadow: 0px 0px 3px 0px gray;

✅약간의 모바일 처리를 해두기->모바일에서는 "가로 사이즈"가 가장 문제 ! -어디서나 500px 로 맞춰라 (width: 500px) -화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면? width: 95%; max-width: 500px;

◾자바스크립트 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

▪자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기

1)함수를 만들어두기 ex) function hey(){ alert('안녕!'); }

2) ~ 안에 로 공간을 만들기, 내에 자바스크립트를 작성

3)버튼에 함수를 연결하기. 버튼을 누르면 함수가 불린다.

[크롬 개발자도구]를 열어서, console 탭에 작성하기

그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능! 크롬 개발자도구 콘솔창은 어떤 의미? > 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구, 새로고침하면 모두 사라짐 !

단축키->alt(option) + command + i

▪console.log(변수) -console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해준다. 개발자가 결과값을 보기 편하도록! -console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있다.

▪변수 & 기본연산 -변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) -let으로 변수를 선언한다.

let num = 20 num = 'Bob'

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

✅사칙연산, 그리고 문자열 더하기가 기본적으로 가능함


let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

▪리스트 & 딕셔너리 ✅리스트: 순서를 지켜서 가지고 있는 형태

let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

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

b_list[1] // 2 를 출력 b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기 b_list.push('헤이') b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기 b_list.length // 5를 출력

✅딕셔너리: 키(key)-밸류(value) 값의 묶음 let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능

b_dict['name'] // 'Bob'을 출력

b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기

b_dict // {name: "Bob", age: 21, height: 180}을 출력

▪함수 // 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들);

▪조건문

function is_adult(age){

if(age > 20){ alert('성인이에요')

} else {

alert('청소년이에요')}
}
is_adult(25)

▪반복문 예를 들어 0부터 99까지 출력해야 하는 상황이라면! 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가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옴.

🍋느낀점 : CSS까지는 눈에 바로바로 보이니 너무 재밌었다. 기초강의지만 스피드 있고 딱 포인트만 알려줘서 지루하지 않고 하루만에 1주차 모두 완강 ! 특히 실습 할 수 있게 예제랑 수업자료가 잘 되어있어서 연습하기 수월했다. 자바스크립트 부터는 아예 처음 접해보는 개념이라 뭐가 뭔지 하나도 모르겠지만.....특히 함수,조건문,반복문 부분은 거의 눈뜨고 보기만 했다. 미세먼지 예제는 왜인지 적용이 안되서 답답했다😢 숙제하면서 CSS 배경크기 지정이 뜻대로 안되서 진땀났지만 구글링해보고 하면서 해결되니 뿌듯 ! 이거 때문에 개발하는 건가..?!싶었다. 모든게 처음이라 낯설고 힘들지만 이런 뿌듯함 감정 계속 느낄 수 있도록 열심히 공부해야지 !

h_h.log

팀 개발을 위한 Git, GitHub 입문(1)-Git&GitHub 시작하기 feat.CLI

💡Git과 GitHub 없이 개발한다는건

Git을 사용하는 방법-CLI(command 명령어를 직접 쳐서 깃을 다루는 것) / GUI(Grapic /버튼을 클릭해서 깃을 다루는 것)

1.내 컴퓨터 프로젝트 폴더에 ‘여기에서 Git을 쓸거다!’ 라고 명령->git init

2.코딩하기

3.내가 변경한 파일 중 올리길 원하는것만 선택-> git add

4.선택한 파일들을 한 덩어리로 만들고 설명 적어주기-> git commit-m “첫 페이지 저장’

5. GitHub사이트에서 프로젝트 저장소 만들기(블로그 만드는것과 동일)

6.내 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기-> git remote add

7.내 컴퓨터에 만들었던 덩어리 GitHub에 올리기-> git push

스파르타 코딩클럽_항해99 _웹개발 종합반_2주차

1.JQuery 시작하기

1) jQuery 란?

2) jQuery 사용하기

2.JQuery 다뤄보기

1)input 박스의 값을 가져와보기

02)div 보이기 / 숨기기

03)태그 내 html 입력하기

영화 제목이 들어갑니다

3.서버-클라이언트 통신 이해하기

1) 서버→클라이언트: "JSON"을 이해하기

2) 클라이언트→서버: GET 요청 이해하기

4.Ajax 시작하기

스파르타 코딩클럽_항해99_웹개발 종합반_1주차