[포스코 x 코딩온] 웹 개발자 부트캠프 5주차 수업 회고

🐯  포스코 x 코딩온 웹개발자 부트캠프 5주차 수업 회고 

 

1. GIT Branch

 

branch를 통해 기존 master의 내용을 유지하면서 새로운 작업영역을 열어 작업을 할 수 있으며 생성한 branch에서의 작업사항은 master에 영향을 끼치지 않는다.

branch를 통해 원하는 기능을 개발하고 완성이 되면 추후에 merge기능을 통해 master로 합치면 된다.

git branch // 브랜치 목록 및 현재 브랜치 확인

git branch branchname // branchname 브랜치 생성

git switch branchname 또는 git checkout branchname // branchname 브랜치로 이동

git branch -m branchname newbranchname // branchname 이름을 newbranchname으로 변경

git branch. -d branchname // brnachname 브랜치 삭제

 

2. GIT Merge

생성한 브랜치의 변경 사항을 master에 합칠 때 사용한다.

 

//merge는 main에서 진행

git merge branchname // branchname 브랜치의 내용을 master로 합치기

 

3. Conflict

Conflict는 merge 하려고 할 때, master의 코드와 branch의 코드가 동일한 곳에서 다를 때 (기존 내용과 둘다 다를 때 어떠한 변경사항을 적용해야 할지 git이 알 수 없음) 발생한다.

다른곳에서 다른 경우 사용자가 Edit한 것으로 판단하여 conflict가 발생하지 않는다.

conflict 발생 시 vscode에서 Current Change와 Incoming Change를 통해 어떠한 변경 사항을 적용할 지 정하여 간편하게 수정할 수 있다.

코드 수정으로 끝이 아니라 변경 사항으로 커밋을 해줘야 merging이 완료된다!

 

3. Git pull

Git pull을 통해 repository에 적용된 변경 사항을 자신의 local branch에 적용 시킬 수 있다.

프로젝트에서 작업을 하기전 pull을 받아 repository와 코드를 동기화 한 후 작업을 진행하는 것이 좋다.

 

4. Git rebase

rebase는 두개의 공통 base를 가진 브랜치에서 한 브랜치의 base를 다른 branch의 최신 commit으로 base를 옮기는 작업이다.

merge는 변경 사항을 하나의 브랜치에 병합한다면 rebase는 base 자체를 최신 commit으로 옮기며 최신 이력을 가져올 때 commit 이력을 남기지 않는다.

 

5. Local Storage

브라우저에서 key 와 value값을 저장 할 수 있다. 객체의 경우 JSON.stringify()를 통해 JSON으로 변경하여 저장 할 수 있다.

 

// 데이터 저장 및 불러오기
window.localStorage.setItem("name","jiwon") // local storage에 name key를가진 "jiwon" 저장
console.log(window.localStorage.getItem("name") // 불러오기

//객체 데이터 저장
const jiwon = {
	name: "jiwon",
	isOld: false,
	hobby: ["축구시청", "잠", "풋살", "게임"],
};
const jsonObj = JSON.stringify(jiwon); // JSON 형태로 객체 저장
  window.localStorage.setItem('jiwon', jsonObj); // JSON 형태의 객체 localstorage 에 저장
const obj = JSON.parse(window.localStorage.getItem('jiwon')); //JSON.parse를 통해 객체 형태로 불러오기
console.log(obj);

// key 삭제하기
window.localStorage.setItem('jiwon', 'jiwon!'); 
window.localStorage.setItem('pororo', '뽀로로에요!'); 
window.localStorage.removeItem('pororo'); 
console.log(window.localStorage); // pororo key 삭제
window.localStorage.clear(); // local storage 전체 삭제

// 저장된 데이터 개수 구하기
window.localStorage.setItem('jiwon', 'jiwon!'); 
window.localStorage.setItem('pororo', '뽀로로에요!'); 
console.log(window.localStorage.length); // 2

//키 이름 찾기
window.localStorage.setItem('jiwon', 'jiwon!'); 
window.localStorage.setItem('pororo', '뽀로로에요!'); 
console.log(window.localStorage.key(0)); // jiwon
console.log(window.localStorage.key(1)); // pororo

 

6. SCSS

SASS는 Syntactically Awsome Style Sheets의 준말로 css를 효율적으로 작성할 수 있게 해주는 전처리기 이다.

SCSS는 SASS보다 뒤에 나왔으며 css와 비슷한 문법을 가지고 있고 css와 완전히 호환되도록 새로운 문법을 도입한 전처리기 이다.

SCSS파일을 CSS파일로 변환하여 사용하고 넓은 범용성과 css와의 호환성 때문에 SCSS의 사용을 권장한다.

 

SCSS 사용을 위해 Node.js 가 설치되어 있어야 하며 명령어를 통해 scss파일을 자동으로 css파일로 변환 시켜 줄수 있다.

npx sass --watch test.scss test.css
// test.scss 파일을 지켜보다가 변경 사항이 있으면 test.css로 자동 변환 적용 시켜줌

 

두번 째 방법으로 vscode의 확장 프로그램인 Live Sass Compiler를 사용해 자동변환을 시킬 수 있다. 확장 설치 후 scss 파일로 간후 

watch sass 버튼을 누르면 변경 사항에 따라 자동으로 css파일로 변환 된다.

 

scss에서 import를 통해 다른 파일을 가져올 수 있는데 @import"path/filename"으로 가져올 수 있으며 부분 파일은 보통 파일명 앞에 _를 붙인다.

확장자 없이 파일이름만 치면 해당파일이름.scss or sass 또는 _해당파일이름.scss or sass 를 import 한다.

_reset.scss / nav.scss / section.scss import

7. SCSS 문법

Nesting : {}를 통해 요소 간의 상하 관계를 편하게 작성 할 수 있다. 각각의 자식 요소를 {}안에 넣어주면 넣어줄 수 있다.

& : 자기 자신 선택자로써 {}안에서 자신을 선택할 때 사용 할 수 있다. modifier를 생성하거나 hover, after 등을 걸어줄 때 사용한다.

 

$ : 변수를 저장하여 변수명으로 속성들을 사용 가능하다. (주로 색상, font등을 지정하여 사용, 모든 속성 값 사용 가능)

@mixin : JS의 객체 처럼 속성값들을 저장하여 사용할 수 있다. _mixin.scss파일 생성 후 @mixin 이름(){}으로 선언 하고 본래의 SCSS 파일에서 mixin을 import하여 사용하고 원하는 속성에  @include 이름();으로 사용한다.

* 매개변수 및 default 값도 사용 가능하다!

 

이 외에도 @for @each @if도 scss를 통해 사용 가능하다

@for를 이용해 1~4 자식 선택

@each를 통해 style 요소 순회

 

@if 를 통해 조건에 따라 h2,p 태그의 글자 색 변경

 

8. 영상 기반 랜딩 페이지 만들기

배경에 영상을 넣고 레이아웃을 적용해 예쁜(?) 랜딩 페이지를 실습으로 만들어 보았다.

배경은 video tag를 사용하여 넣었고 스타일은 scss를 사용해 보았으며 font awsome, google font를 통해 아이콘 및 텍스트를 꾸며 만들었다.

https://jiwonvideolandingpage.netlify.app/

 

9. 뮤직 플레이어 페이지 만들기

css의 transform 속성과 javascript를 통해 뮤직 플레이어 페이지를 만들어보았다.

https://jiwon-player.netlify.app/

 

 

10. 팀 프로젝트 : test-world

팀 프로젝트로 픽셀 이미지 컨셉의 심리검사, 반응속도 테스트, 다른 색 찾기 를 각각 나눠맡아 진행하게 되었다. 나는 반응속도 테스트를 작업하게 되었고 작업 하면서 레이아웃, 폰트 등을 서로 맞춰가고 기능 구현 후에 한번 더 맞춰보기로 하였다. 또 메인 페이지는 각 기능 구현 후 함께 작업하기로 계획하였다.

주제도 재미있고 컨셉도 귀여워서 흥미가 생기고 프로젝트 기간동안 재미있게 할 수 있을 것 같다!

 

이번 주 느낀 점

- 협업 시 필요한 여러가지 git 스킬을 배울수 있어서 좋았고 배울땐 이해가 됬지만 막상 실습과 프로젝트에 적용해보니 헷갈리고 push를 하기가 두려웠던 것 같다. 프로젝트를 해보며 반복숙달 해서 협업 시 git 사용을 능숙하게 할 수 있었으면 좋겠다.

 

- scss, bootstrap의 이름 정도만 들어보았는데 직접 사용해보며 유용함과 편리함을 느껴볼 수 있어서 좋았다. 

 

- 또 랜딩페이지, 뮤직 플레이어를 만들어 보았는데 동적인 페이지를 만들어 보니 js 기능구현 연습도 많이 되었고 기능을 하나하나 구현해 나갈 때 성취감을 많이 느꼈던 것 같다.

 

- 마지막으로 팀 프로젝트를 시작했는데 팀원들도 좋고 주제도 마음에 들어서 재미있게 진행 할 수 있을 것 같다. 첫 팀 프로젝트라서 쉽지는 않겠지만 열심히 해서 재밌는 웹앱을 만들어 보고 싶다.