CSS의 단점

1. 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다.
2. 유지보수가 어려워질 뿐만 아니라 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사&붙여넣기'만 주구장창 해야되는 수준
3. 선택자(selector)를 만들때 매번 불필요한 부모요소 선택자를 적어야함
4. function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야함

이외의 여러가지 불편한 요소들이 있어, 이 단점을 해결해 줄 수 있는게 scss이다!

SCSS란

scss는 Syntactically Awesome StyleSheet의 약어이며 코드 재활용성을 올리고 가독성을 올리는 등 CSS의 단점을 보완하고, 개발 효율을 올리기 위해 등장한 CSS 전처리기 언어이다. CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다.

CSS전처리기(Preprocessor) 언어란?

css전처리기는 Sass, Less, stylus 이다. 전처리기 언어는 css문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산등 표준 css보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지하는데 도움을 준다.

사용 방법

sass, Less, Stylus 같은 전처리기 언어는** 직접 동작시키는게 아니다.** 웹은 css밖에 모르기 때문에 전처리기 언어 문법으로 코딩하고, CSS로 컴파일해서 웹으로 동작 시켜야한다.

전처리기 언어 즉, Sass는 css의 대체 언어가 아닌 확장 전처리기 언어이고, 이는 결국 css코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.

/*scss로 작성했을 때*/
$gray: #333;
.header {
    color: $gray;
    &__inner {
        border:1px solid red;
    }
 }


/* 컴파일 됐을때 */
.header {
    color: $gray;
  }
.header__inner {
       border:1px solid red;
   }

Sass(scss)의 장점

1. css보다 심플한 표기법으로 css를 구조화 하여 표현할 수 있다.
2. 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
3. css의 태생적 한계를 보완하기 위해 scss는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• import (모듈화)
• nesting (선택자 반복 작성 줄여주는 기능)
• Mixin (함수 개념)
• Extend/Inheritance (확장/상속)

4. 선택자의 중첩(nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일 수 있다.
5. 변수(Variable)을 사용해서 css 속성값을 통일해서 관리 할 수 있다.
6. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 css 관리가 가능하다.
7. 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

장점 말고 단점은 전처리기를 위한 도구가 필요하며, 컴파일 시간이 소요된다는 점...

Sass & SCSS 차이점

1. 확장자 Sass와 Scss는 다른 파일이다 (.sass, .scss)

2. 구문 스타일 Sass는 파이썬과 같이 들여쓰기를 사용한다. scss는 css와 같이 중괄호{}, 세미콜론(;)을 사용한다.

   /*sass 사용*/
   $color: red
   $color2: blue
   

a color:$color &:hover color:$color2

/scss 사용/ $color: red; $color2: blue;

a{ color:$color; &:hover{ color:$color2; } }

3. mixin
sass는 `= 로 선언하고 +로 적용`시킨다.
scss는 `@mixin으로 선언하고 @include로 적용`시킨다.

```css
/*sass*/
$main-font:"noto"

=title($font)
    font-size:30px
    font-family: $font

 #header
     +title($main-font)


 /*scss*/
 $main-font:"noto";

@mixin title($font) {
    font-size:30px;
    font-family: $font;
 }
 #header{
     @include title($main-font);
 }

SCSS설치 & 컴파일 방법

1. CLI를 이용한 실행

• 우선 CLI를 사용하기 위해 아래의 명령어로 sass를 설치해준다.

  $ npm install -g sass
  or 
  $ yarn add -g sass
  

- 작성한 css파일명을 common.css 라고 가정했을때 아래와 같은 명령어로 컴파일 해준다.
```bash
$ sass common.scss:common.css

• 만약 특정 디렉터리 내의 모든 scss 파일을 css파일로 일괄 트랜스파일링해서 지정한 디렉터리에 저장하려면 다음과 같이 인풋 디렉터리와 아웃풋 디렉터리를 지정해야된다.

  $ $ sass src/sass:dist/css

  
  
  

2. VScode Extension을 이용한 실행 (이방법이 가장 쉽고 추천!)

• VScode > Extension > Live Sass Compiler 설치하면 된다.
• 설치가 끝나면 하단에 Watch my Sass라는 아이콘이 생기는데 이를 클릭하면 sass파일을 css파일로 컴파일 해준다. watch my sass를 끄게 되면 파일을 수정해도 업데이트가 안되니 이 부분 꼭 확인!

* scss / css 폴더 분리 설정에서 scss에서 컴파일된 css파일은 (css)폴더에 저장 되게 처리하면 프로젝트 트리 구성을 정리하는데 도움이 된다.

setting.json을 열고 아래와 같은 코드를 추가해준다.

{
    "liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css" //CSS 경로 설정 
    }
    ],
    "liveServer.settings.donotShowInfoMsg": true
}

CSS방법론은 대규모 프로젝트나 팀 작업에서 css코드의 _유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미_한다.

방법론을 사용하면 좋은 점

1. CSS의 복잡성을 관리하고 코드의 구조를 표준화 할 수 있음
2. 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있음

CSS방법론에는 크게 _OOCSS, BEM, SMACSS_로 나눠져있다.

OOCSS

OOCSS(Object Oriented CSS) CSS를 모듈(module)방식으로 작성하여 중복을 줄이는 방식의 방법론

OOCSS의 주요 원칙

1. 구조와 스타일 분리 스타일의 구조(레이아웃)과 테마(스킨)을 분리해야한다. ex) 버튼의 기본 레이아웃과 버튼의 테마(배경색, 테두리)를 분리하여 스타일링 해야함

2. 컨테이너와 콘텐츠 분리 스타일은 특정 위치나 컨테이너에 의존적이지 않아야한다. ex) 사이드바에만 사용되는 특정 스타일 대신 일반적으로 재사용 가능한 스타일을 만들어야한다.

OOCSS의 장점

1. 재사용성 중복된 디자인 요소를 따로 빼내어 작성하기 때문에 코드 중복을 줄이고 일관된 디자인을 유지할 수 있다.

2. 확장성 새로운 테마나 레이아웃 추가하기가 쉬워진다.

3. 유지보수 변경사항이 발생할 때, 특정부분만 수정하면 되므로 유지보수가 용이하다.

4. 최적의 성능 코드 재사용성이 높아져 적은 코드량으로 최적의 성능을 보여준다.

OOCSS 단점

1. 클래스의 과다 사용

• 다중 클래스 사용으로 인해 코드 가독성이 떨어짐

2. 학습 곡선

• 팀원 모두가 OOCSS원칙에 익숙해져야 효과적으로 사용 할 수 있음

<!-- 기존 방식 -->
<div class="header_btn header_skin">haeder</div>
<div class="footer_btn footer_skin">footer</div>

<!-- OOCSS 적용 -->
<div class="btn skin hader">hader</div>
<div class="btn skin footer">footer</div>

.btn > 공통 버튼 스타일 정의
.skin > 공통 스킨 스타일 정의

BEM

BEM(Block Element Modifier) 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식 각 부분을 __와 --로 구분하여 짓게 된다. 어떻게 보일지에 초점을 두기 보단, 어떤 목적인가에 초점을 두어 이름을 짓는다.

Block (블록)

블록은 웹페이지의 독립적인 구성 요소를 의미하며, 헤더, 메뉴, 버튼 등과 같이 재사용 가능한 높은 수준의 컴포넌트를 나타난다

.header {..}
.menu {..}
.button {..}

element(요소)

블록 내부의 구성 요소로, 해당 e3블록의 일부로만 의미를 가지며,BEM에서는 블록과 요소 사이에 __(더블 언더스코어)를 사용하여 연결한다.

.header__tap {..}
.menu__item {..}

Modifier (상태)

블록 또는 요소의 다양한 상태와 변형을 나타나는데 사용한다. 상태 표현할 때 --(더블대시) 을 사용한다.

.header__tap--active {..}
.menu__item--disabled {..}

SMACSS

SMACSS (Scalable and Modular Architecture for CSS) 대규모 웹 사이트와 애플리케이션의 CSS를 유지 관리하기 쉽게 만드는 데 초점을 맞춘 CSS 설계 방법론이다. SMACSS의 핵심은 CSS를 여러 카테고리로 나누어 관리 및 확장성을 높이는 것을 목표로 한다.

SMACSS는 작성할때 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩기법을 제시한다.

SMACSS의 주요 구성 요소

• 기본 (Base) 기본 스타일은 초기값 설정을 의미하며, reset.css 같은 초기화 파일도 이에 포함된다. 대부분 하나의 요소(elements)로 이루어져있으며 속성 선택자, 가상 클래스 선택자, 후손 선택자, 자식 선택자 등으로 구성되어 있다.
• 기본 스타일은 클래스 또는 아이디 선택자를 포함하지 않는다.
• 기본 링크 스타일, 기본 폰트 스타일과 바디의 배경 선언 등이 이에 포함된다.
• 기본 스타일을 정의할때 !impotrtant는 허용하지 않는다.

  body, form, p, table, button, fieldset, input ... {
      margin: 0;
      padding: 0;
  }

• 레이아웃 (layout) 주요 레이아웃 컴포넌트를 스타일링 하는데 사용되며, 헤더, 사이드바, 컨텐츠 영역 등 페이지의 주요 섹션을 대상으로 한다. 주요 컴포넌트는 id, 하위 컴포넌트는 class를 사용하여 스타일을 작성한다. 클래스명을 사용할 때는 접두사로 l-, layout- 를 사용해야 합니다. ex) l-fixed : 유무에 따라 가변 폭으로 할지 고정 폭으로 할지 결정하는 레이아웃

  // 주요 요소 작성
  #header {
    width: 400px;
  }
  #aside {
    width: 40px;
  }
  

// 하위 요소 작성 .l-width #header { width: 650px; padding: 10px; } .l-width #aside { width: 100px }

* **모듈 (module)**
재사용 가능한 모듈 또는 컴포넌트를 스타일링하며, 버튼, 카드, 위젯 같은 UI요소가 해당된다.
모듈은 독립적으로 존재할 수 있도록 설계해야하며, 재사용을 위해 css선택자로 id,엘리먼트 선택자를 피하고 class명을 사용해야한다.

.module { ... } .module-name { ... } .module-number { ... }

* **상태 (state)**
요소의 상태 변화를 표현하고 접두사 is-, s- 를 사용해야 한다.
특정 모듈의 경우에는 모듈 이름을 뒤에 붙인다.

.is-error { ... } .is-hidden { ... } .is-disabled { ... } .is-tab-active { ... }

* **테마 (theme)**
테마 스타일은 전반적인 표현과 느낌을 결정하는 색깔이나 이미지를 정의한다.
테마 스타일 규칙만 따로 모아서 분리하면 테마를 쉽게 교체하고 재정의 할 수 있다.
적용 범위가 넓은 테마의 경우에는 접두사로 "theme-"를 붙여서 혼란을 피해야한다.

/공통 root 역할을 하는 main.css/ .box { border: 1px solid; //border type 만 공통으로 설정해놓고 }

/테마 별로 재정의 blue theme.css/ .box { border-color: blue; }

#### SMACSS 사용시 지켜야할 유의사항
1. 파생된 css 셀렉터 사용금지
2. id 셀렉터 사용금지
3. !important 사용금지
4. 단어는 하이픈(-)으로 구분
5. 다른 개발자들이 이해할 수 있도록 class 이름을 의미있게 지어야함


---
### 마무리
css를 익히는 과정에서 방법론에 대해 배워봤는데 이 외에도 다양한 방법론이 존재한다.
모든 방법론이 결코 정답은 아니며, 프로젝트 성향,팀의 요구사항에 따라 가장 잘맞는 방법을 선택하는게 우선시 되어야하며 어느 방법론으로 작성하는것이 좋을지 빠르게 생각해내는게 능력중 하나다!

• Gitlens
• Git graph

☑️ 연결방법

1. Sourcetree 최초 clone은 소스트리로 하는게 편하다.

2. bitbuket 비트버킷 소스트리 연동

3. ctrl + ' 로 터미널 열기

4. 기본셀 선택

5. git bash로 세팅 추가

6. 플러스 추가

7.bash 로 변경되면 터미널 셋팅 완료

☑️ Git grapth

1. 좌측하단에 git grapth 클릭 - 우측 상단에 설정아이콘 클릭

2. [User Details] 에서 계정추가하고, [Remote Configuration] 에서 remote 추가

3. remote 추가 할때 remote name은 origin으로 세팅

4. 저장소 복제

• editor.tabSize : 2
• format:Wrap Line Length: 0
  
  

☑️ HTML 관련

• Auto Close Tag (닫기 태그 자동 생성)
• Auto Rename Tag (닫기 태그명 동시 변경)
• Korean Language Pack for Visual Studio Code (한글적용)
• Live Server (브라우저 확인시 코드 자동적용)
• open in browser (브라우저 열기)
• Bookmarks (북마크 기능)
• Material Icon Theme (비쥬얼스튜디오 코드 아이콘 변경)
• Beauty (저장시 html 자동정렬)
• Rainbow Brackets(태그별 컬러 변경)
• html tag wrapper (ctrl + i 부모태그 추가 )

☑️ 추가세팅

• ctrl K + ctrl S
• json 선택 및 아래 리스트 추가

☑️ CSS관련

• Beauty (자동 줄 맞춤)
• px to rem (px -> rem 으로 자동 변환 / alt+z 단축키)
• IntelliSense for CSS class names in HTML (css 클래스명 html 표시)
• Autoprefixer (자동 크로스브라우징 설정)
  1. 사용법 : f1키 > Autoprefixer :Run

2.setting.json에 반영

"autoprefixer.options": {

        "grid": true,
        "browsers": [
            "last 4 versions",
            "ie >= 11",
            "> 5%"
        ]
    }

☑️ SCSS관련

• Ruby (ruby 플러그인)
• Sass
• Sass Lint
• Live Sass Compiler
  • 확장 설정 셋팅
  • ctrl+`
  • 사용자 > 확장 > Live Sass Compiler
  • Settings.json 에서 편집

    "liveSassCompile.settings.formats": [
      {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "~/../css" //CSS 경로 설정 
      }
    ],
    "liveSassCompile.settings.generateMap": 
    false,
    "liveSassCompile.settings.autoprefix": [
      "> 1%",
      "last 2 versions"
    ]

• 설치 완료 후 vscode 알림 영역에서 watch scss 클릭 시 scss 자동 컴파일

✔️ 리액트는 웹프레임워크 ✔️ 자바스크립트 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용하는 언어 ✔️ 페이스북이 제공하는 프론트앤드 라이브러리 라고도 볼 수 있음 ✔️ 현재 가장 많이 사용되고 인기 있는 라이브러리 ✔️ 쉽게 구축하기 위해서 컴포넌트로 구축

📌간단한 용어 설명

• 프레임워크 :개발을 하기 위해서 편리하도록 만들어 놓은 뼈대
• 라이브러리 : 사용자가 필요할 때 부분적으로 사용이 가능한 개발자를 위한 도서관
• 인터페이스 : 서로 다른 두 시스템,장비,소프트웨어 등을 서로 이어주는 접속 장치
• 컴포넌트 : HTML 태그를 반환하는 함수, 재사용 할 수 있는 코드

💡 특징

• 컴포넌트 (Component0 화면을 버튼, 카드, 헤더 같은 작은 조각으로 나누어 재사용성(Reusable)이 뛰어남
• 선언형(Declarative) “어떻게”보다 “무엇을” 보여줄지에 집중
• 가상 DOM (Virtual DOM) 화면 변경을 효율적으로 처리해 성능 향상
• 단방향 데이터 흐름 데이터 흐름이 예측 가능해서 버그 감소
• state와 props를 가짐

ex) 리액트 코드

function Hello() {
  return <h1>Hello React!</h1>;
}

💡리액트 기본 문법 JSX

JSX를 사용하기 전에 어떻게 리액트가 요소를 생성하는지 알아보고 넘어가자.

onst div = React.createElement('div', {className: 'test'}, ....attribute 지정);

위와 같이 React DOM을 통해 createElement() 내부의 파라미터를 입력함으로서 요소를 생성할 수 있다. 하지만 이러한 방법을 이용하면 코드량도 많아지고 가독성이 떨어지기 때문에 많은 개발자들이 JSX문법을 사용하는 것이다. 그렇다면 본격적으로 JSX문법을 알아보자.

💡JSX

📖JavaScript XML로 JavaScript에 XML을 추가하여 확장한 문법

리액트에서는 본질적으로 렌더링 로직이 UI로직과 연결된다는 사실을 받아들이기 위해 JSX를 사용한다. 이 말은 이벤트가 처리되고, 시간에 따라 상태가 변하며, 화면에 표시하기 위해 데이터가 준비되는 방식등을 이야기하는 것이다. JSX가 필수는 아니지만 대부분의 개발자들이 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 도움을 주기 때문에 가독성이 좋다.

⚡️ JSX 기본문법

//표현식 사용하기
const name = 'Mr.Hwang';

const TestElement = () => {
  return (
      <h1>Hello, {name}</h1>}
  );
};

위 코드는 name이라는 변수를 선언하고 JSX내에서 표현하기 위하여 중괄호{}를 이용하여 사용한 것이다. 이렇게 JavaScript 영역에서 html태그 안에 선언된 변수를 표현할 수 있다.

const TestComponent = () => {
  return (
    <div>
          <TestElement /> // 사용자가 정의한 컴포넌트 호출
      </div>
  );
};

또는 위와 같이 자식을 정의하여 사용할 수도 있다. 당연히 자식에게도 변수를 표현할 수 있다.

⚡️ 컴포넌트 정의(함수형) 이번에는 컴포넌트를 정의하고 JSX안에서 Event를 연결하는 문법에 대해서 알아보자. 위에서 설명한 함수형과 클래스형 중에 함수형을 다뤄보겠다.

//함수형 컴포넌트 선언
function App(){
      //카운트 변수 선언
      let conut = 0;
      //카운트 증가 함수 선언
      const setCount = function(){
        count++;
    }
      //return 영역 내에 JSX 작성
    return(
        <div>
              //태그 내 변수 표현
              <h1>Click count : {count}</h1>
            //이벤트 기능 구현
            <button onClick={setCount}>cilck</button>
          </div>
    )
}

컴포넌트를 정의할 때 중요한 부분은 우선 컴포넌트 명의 첫글자는 대문자를 사용하는 것이다. 그리고 return은 하나의 JSX만 반환할 경우 대괄호()가 필요없으나 여러 JSX를 반환할 경우에는 대괄호()로 묶어주어야한다. 변수는 위에 설명한 것처럼 중괄호{}로 감싸주며, 함수도 마찬가지이다. Event를 지정할 때에는 카멜기법을 정확히 준수하여 정의해주어야한다.(예 : onClick -> onclick으로 하면 오류가 난다.)

⚡️ 태그 속성 이번에는 태그에 속성을 부여할 때 주의해야하는 부분에 대해서 다뤄보자.

//일반적으로 태그에 속성을 부여하는 형태
function APP(){
    return(
        <div class="container">
              <label for="test">label</label>
          </div>
    )
}


//JSX문법으로 속성 부여
function APP(){
    return(
        <div className="container">
              <label htmlFor="test">label</label>:,, 
          </div>
    )
}

위 코드를 보면 일반적으로 HTML 태그에 속성을 주는 것 처럼 정의하면 리액트에서는 인식을 하지 못한다. 이러한 이유는 html의 속성을 구분해줘야하기 때문이다. 리액트에도 클래스형 컴포넌트가 있으니 class라고만 정의하면 인식에 장애가 발생하는 것이다.

기본적인 문법에 대해서는 알아보았다. 그렇다면 이렇게 선언된 컴포넌트는 어떻게 호출하는지 알아보자.

⚡️컴포넌트 호출

//....생략
<body>
  <div>
    <App /> <!-- 컴포넌트명을 태그로 감싸서 호출 -->
  </div>
</body>

같은 html 문서내에 script영역이 위치한다면 원하는 위치에 호출해주면 된다. 별도로 js 파일로 유지하는 경우 import를 하고 기타 등등 절차가 필요하니 해당 부분은 차후에 설명하겠다.

💬 달력만들기 기초부터 진행

📆 1) 콘솔창에 1부터 30까지 띄어쓰기로 구분해서 한줄로 출력하기

    var arr = '';

    for (var i = 1; i <= 30; i++) {
      arr += " " + i;
    }
    console.log(arr);

💻** 결과값**

📆 2) 1단계에서 30까지 출력했던걸, 30까지 출력하지 말고, 이 달의 마지막 날짜를 구해서 그 숫자까지 출력하기

ex) 1 2 3 4 … 31

    var arr = '';
    var date = new Date();
    var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    // var lastDate = new Date(year, month, 0).getDate();

    //해당 월
    var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다.";
    console.log(month);


    // 해달 월 일수 나열
    for (var i = 1; i <= days; i++) {
      arr += " " + i;
    }
    console.log(arr);

💻** 결과값**

📆 3) 2단계에서 출력한 날짜들을, 7칸 출력할 때마다 줄바꿈이 일어나도록 하기

ex) 1 2 3 4 5 6 7       8 9 10 11 12 13 14       …      29 30 31

    var arr = '';
    var date = new Date();
    var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

    //해당 월
    var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다.";
    console.log(month);


    // 해달 월 일수 나열
    for (var i = 1; i <= days; i++) {
      arr += " " + i;

      if (i % 7 == 0) {
        arr += '\n';
      }
    }
    console.log(arr);

💻** 결과값**

📆 4) 3단계에서 1일을 출력하기 전에, 빈칸을 2개 출력하고 1일을 출력하기 시작하기

• 빈칸은 눈에 안보이니까 [] 로 표기합니다.
• 그리고 7칸 출력할때마다 줄바꿈 (\n) 이 일어나야 합니다.

ex) [] [] 1 2 3 4 5       7 8 9 10 11 12       …      29 30 31

    var arr = '';
    var date = new Date();
    var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

    //해당 월
    var month = date.getFullYear() + "년" + (date.getMonth() + 1) + "월 입니다.";
    console.log(month);


    // 해달 월 일수 나열
    for (var i = 1; i <= days; i++) {
      if (i == 1) {
        arr += '[][]';
      }
      arr += " " + i;

      if (i % 7 == 0) { //  i가 1부터 시작했을때, 7로 나눈 나머지가 0일때 줄바꿈
        arr += '\n';
      }

    }
    console.log(arr);

💻** 결과값**

📆 5) 4단계에서 빈칸을 2개 출력했던것을, 2개 출력하지 말고, 이 달의 1일의 요일을 구해서 그 요일만큼의 빈칸을 출력하기

    var arr = '';
    var date = new Date();
    var toYear = date.getFullYear()
    var toMonth = date.getMonth();
    // var toMonth = 5;
    firstDay = new Date(toYear, toMonth, 1).getDay(); //1일의 요일
    lastDate = new Date(toYear, toMonth + 1, 0).getDate(); // 이달 마지막날


    //해당 월
    var month = toYear + "년" + (toMonth + 1) + "월 입니다.";
    console.log(month);

    // 첫번째줄 빈칸 숫자 알아내기 (10월 기준 5개)
    // 빈칸 뒤에 날짜 출력
    // 날짜를 요일에 셋팅

    // 첫번째 줄 빈칸 5개
    for (var bin = 0; bin < firstDay; bin++) {
      arr += "[ ]";
    }
    // console.log(bin);

    //날짜
    for (var i = 1; i <= lastDate; i++) {
      getday = new Date(toYear, toMonth, i).getDay(); // 요일을 얻어낸다. (일요일=0, 토요일=6)
      if (getday == 0) {
        arr += "\n";
      }
      arr += " " + i;
    }

    console.log(arr)

💻** 결과값**

📆 6) 콘솔창에 그려진 달력을 HTML문서로 나타내기

   var arr = '';
      var toYear = date.getFullYear();
      var toMonth = date.getMonth();
      // var toMonth = 11;

      //이달 구하기
      var firstDay = new Date(toYear, toMonth, 1).getDay(); //이 달 1일 요일 구하기
      var lastDate = new Date(toYear, toMonth + 1, 0).getDate(); // 이 달의 마지막 날짜 구하기
      var lastDay = new Date(toYear, toMonth, lastDate).getDay(); // 이 달의 마지막 요일 구하기

      console.log("1일 요일", firstDay);
      console.log("이달 마지막 날짜", lastDate);
      console.log("마지막 요일", lastDay);


      //해당 월
      var month = toYear + "년" + (toMonth + 1) + "월";
      $('.month').text(month);
      console.log('해당 월', month);

      // 첫번째 줄 빈칸 5개
      for (var bin = 0; bin < firstDay; bin++) {
        arr += "[ ]";
        $(".calendar-body").append("<li></li>");
      }
      console.log('빈칸', bin);

      //날짜
      for (var i = 1; i <= lastDate; i++) {
        $(".calendar-body").append("<li class='date'>" + i + "</li>");

        getday = new Date(toYear, toMonth, i).getDay(); // 요일을 얻어낸다. (일요일=0, 토요일=6)

        // 다음행 이동
        if (getday == 0) {
          arr += "\n";
          // $(".calendar-body").append("<br/>");
        }
        arr += " " + i;

      }

      console.log(arr);

💻** 결과값**

💬 단계별 과제로 for문 이용하여 만들었던 달력만들기       약간의 꼬임이(?) 있었지만 그래도 얼추 완성 되 가는거 같다^-^       다음 기록장에선 달력 버튼 추가되어 완벽한 달력 모습을 갖출 수 있는 기록을 해보겠다.       현재를 기록하기 위한 포스팅이라 가볍게 봐주시면 감사합니다😂

1) branch 생성

git branch 브랜치명

#git branch test

2) 생성한 Branch 로 이동

git checkout 브랜치명

#git checkout test

3) -b를 사용하여 생성후 바로 이동

git checkout -b 브랜치명

#git checkout -b test2

Branch 삭제

git branch -d 브랜치명

#git branch -d test2

생성된 Branch를 원격 Repository에 push 하기

1) 생성한 branch로 이동

#git checkout test
#git push

• 현재 원격 레포지토리 (github)에는 master branch 밖에 없는 상태이고, test branch 로 이동하여 push를 하면 오류가 발생한다.
• 로컬 레포지토리를 리모트 레포지토리로 처음 push 할때는 --set-upstream 옵션을 줘야 한다. 그래야 tracking 정보 설정이 되어 git push 만 해도 psuh 가 된다.
• 위에 메세지처럼 --set-upstream 옵션을 사용해보자!

#git push --set-upstream origin test

// 위에 명령은 아래와 같이 줄여서도 사용 가능
#git push -u origin test

    // ****
    // ***
    // **
    // *

    var star1 = '';

    for (var i = 4; i >= 1; i--) { //변수 i초기값 4 / i가 1보다 크거나 같으면 실행 / 1씩 감소

      for (var j = 1; j <= i; j++) { // 변수 j 초기값 1 / j가 i 보다 작거나 같으면 / j에 증가한다.
        star1 += "*"; // j가 하나 증가할때마다 star1 변수에 *를 더한다.
      }

      star1 += "\n"; // j의 조건이 끝나면 줄바꿈을 해준다.
    }
    console.log(star1);

2. 삼각형 출력하기

    // *
    // **
    // ***
    // ****

    var star2 = '';
    var num2 = "";
    for (var i = 0; i < 4; i++) { //i가 하나씩 증가되면 총 5번 반복한다.
      star2 += "*"; //i가 하나 증가할때마다 star 변수에 *을 더한다.
      num2 += star2 + '\n'; // *이 추가된 star 변수를 가져와서 줄바꿈을 한 후 num 변수에 담는다.  
    }
    console.log(num2); //num을 출력한다.

3. 피라미드 출력하기

//    * 1
//   *** 3
//  ***** 5     
// * ***** 7  

// 1번째 방식 -------------------------------------------------------------------
// var star3 = '';

// for (var i = 1; i <= 4; i++) {
//   for (var k = 4; k >= i; k--) { // 큰틀 / 4번 반복
//     star3 += " ";
//   }
//   for (var j = 1; j <= i; j++) {
//     star3 += "* ";
//   }
//   star3 += "\n";
// }
// console.log(star3);


// 2번째 방식 -------------------------------------------------------------------
var star3 = '';

for (var i = 1; i <= 4; i++) { // 4번의 라인 출력

  //공백
  for (var j = i; j < 4; j++) { // j는 i니까 j가 4보다 작으면 공백 출력
    star3 += " ";
  }

  // * 칸
  for (var k = 1; k <= (2 * i) - 1; k++) { // k는 1이고, k는 (i갯수*2) - 1만큼 별 출력
    star3 += "*";
  }
  star3 += "\n";
}
console.log(star3);


for (var i = 0; i < 5; i++) {
  console.log(i)
}

반복문에는 3가지가 존재한다. 그중에서 가장 많이 사용하는것이 for문! for문은 반복문의 종류중 하나이며, 반복문이란? 같은 동작을 반복하는 명령어를 뜻하는데 for문은 그중에서도 반복문의 대표라고 할 수 있다. for문은 조건이 3개씩이나 필요하여 정확하게 자세히 이해해야 한다는 점!

for문의 작동방식(흐름)

실행 순서

① 초기식이 제일 먼저 실행 된다. ② 초기식 실행 된 후 조건식을 평가해서 ③ true 일 경우 : 실행문 실행 / false이면 for문 종료 만약 실행문이 실행 되었다면 블록 내부의 ③ 실행문을 모두 실행 시키고 ④ 증감식을 실행 시킨 뒤 다시 ② 조건식을 평가한다.

for문 문법

//문법
for(초기화식; 조건식; 증감식){
    실행문; 
}

//사용법
var num = 0;
for(var i = 0; i < 5; i++) {
    num++;
    console.log(num);
}

이 코드를 실행하면 콘솔창에

결과) 1 2 3 4 5

으로 출력되는걸 확인 할 수 있다.num 이라는 변수를 1씩 증가 시켜 출력하는것!

1) 변수의 초기화

초기화는 변수에 값을 처음 저장하는 것을 말한다. 초기화이라 해서 0이나 ''과 같은 기본 값을 넣는 것이 초기화가 아니라 단순히 '처음' 값을 저장하는 것이 초기화라는 뜻이다. 만약 '0' 을 넣는다면 기본값으로 '초기화'한다라고 하는것이 정확하다.

2) 조건식

변수가 초기화 다음에 등장하는 것이 조건식이다. for문이 동작하는데 있어서 핵심이라고 할 수 있는데 이 조건식이 true(참) 이냐, false(거짓) 이냐에 따라 for문이 동작하거나 하지 않을 수 있기 때문이다. 조건식은 도착점 또는 반복 횟수 라고 표현 할 수 도 있다.

예시)

for (var i=0; i<5; i++) {

}

변수 i에 0을 집어 넣었으니 i는 0부터 시작, 위의 조건식은 i가 5보다 작을때(미만)까지는 계속 결과값이 true(참) *이라는걸 알 수 있다. 따라서 변수 i가 5가 되기전 (정수로는 4까지) 반복 한다는 뜻이다. 출력 될 숫자는 0,1,2,3,4가 출력이 될것이다. 그렇기때문에 *도착점으로는 4가 될 것 이고, 반복 횟수로는 5번이라는 것을 알 수 있다. for문에서 조건식 = 도착점, 또는 반복 횟수가 위와 같이 설명 해준다.

3) 증감식

마지막은 증감식이다. 증감식은 우리가 잘 알고 있는 ++ / -- 를 사용 하는 것인데 증감 연사자만 들어올 수 있는건 아니다. 대표적으로 ++ / -- 이지만 값이 증감하는 식은 어떤 것이든 들어 올 수 있다. 이 증감식에 따라 for문이 얼마나 반복 할지 결정 할 수도 있는데 일반적으로 ++/-- 를 사용하기때문에 1씩 증가한다고 생각하면 된다. 위에 예시에서도 i++ 이라고 작성 되어 i가 한 바퀴 돌때마다 1씩 증가하기 때문에 조건식에서 i가 0,1,2,3,4로 증가한것이다.

for문의 생략

int i=0;

//초기화식 생략
for (; i < 10; i++) {
   console.log("%d\n", i);
}

//조건식 생략(무한루프에 빠지게됩니다.)
for(int i=0;;i++){
    console.log("%d\n",i);
}

//증감식 생략(무한루프에 빠지게됩니다.)
for(int i=0;i<10;){
    console.log("%d\n",i);
}

//실행문이 한라인일 경우 { } 대괄호 생략 가능
for(int i=0;i<10;i++)
    console.log("%d\n",i);요

Branch : 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능 즉, 브랜치를 통해 하나의 프로젝트를 여러 갈래로 나누어 관리 할 수있으며, 각각 독립된 브랜치에서 마음대로 소스코드를 변경하여 작업 한 후 원래버전과 비교하여 또 하나의 새로운 버전을 만들 수 있다.

Branch 확인 하기

1) 현재 내가 위치한 브랜치 확인

$git branch : 깃 브랜치 확인 [****]master (현재는 master 브랜치만 존재 / master : 최초 레포지토리 생성후 커밋하면 자동으로 생기는 브랜치) [] 붙어있는 브랜치가 현재 활성화된 브랜치이다.

$git status : 깃 상태 확인 on branch master > 마스터 브랜치 위에 있다. your branch is up to date with 'origin/master'

2) 원격 저장소의 브랜치 확인

$git branch -r origin/master

3) 브랜치의 마지막 커밋 메세지 확인

$git branch -v master [깃넘버] [커밋메세지]

우리가 진행하는 버전 관리에 관한 내용들을 저장하는 공간! git을 통해 작업한 소스 코드의 히스토리나 기타 정보를 확인 할 수 있습니다. 그렇게 하기 위해 git은 과거의 소스 코드 또는 소스의 변화를 저장 해두는 공간!

따라서 git을 통해 버전관리를 하기 전에, 어떤 폴더에 대해 버전 관리를 시작할지 말해주고 해당 영역에 git 저장소를 만들어줘야 합니다.

먼저 저장소를 만들기 위해 사용 되는 명령어 정리!

• pwd　 : 어느 폴더에 위치해 있는지 확인

• mkdir　: 폴더 만들기
• cd　　 : 해당영역으로 이동
• git init : 깃 저장소 만들기

실전!

Git bash 실행

처음에 있는 화면에서 pwd 명령어 입력!

아래 사진 경우, 저는 C > Users > Bythem_Pub 라는 폴더에 위치 해있습니다.

mkdir & cd 명령어 실행

그리고 mkdir 과 cd 명령어를 통해 폴더를 만들어 위치를 이동시킵니다.

• 아래 이미지 명령 설명 순서
• • pwd : 현재 위치 확인
• • mkdir gitProject : 현재 위치에 gitProject 폴더를 생성
• • cd gitProject : gitProject 폴더로 이동
• • mkdir gitStudy : 현재 위치에서 gitStudy 폴더 생성
• • cd gitStudy : gitStudy폴더로 이동

git init 실행

현재 폴더를 깃 저장소로 만들기 위해 명령어를 입력합니다. 입력하면 아래 이미지와 같이 (master)가 생성되어야 제대로 저장소가 만들어진겁니다.

위의 이미지와 같이 git init을 입력하면 현재 디렉토리에서 .git이라는 폴더에 깃저장소(git repository)를 초기화 하였다고 알려줍니다.

이 방법과 같이 현재 git 저장소까지 생성하게 되었습니다. 다음 포스팅엔 git이 관리할 파일을 등록해보도록 하겠습니다.