✅ var

1. scope : 전역 범위/함수 범위

1. 함수 외부에서 선언될 때는 전역 범위 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도우 상에서 사용할 수 있음

2. 함수 내에서 선언될 때는 함수 범위 해당 함수 내에서만 사용 및 접근 가능

  var greeter = "hey hi";

    function newFunction() {
        var hello = "hello";
    }

위 코드에서 hello는 함수 범위, greeter는 전역 범위

    var tester = "hey hi";

    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

hello는 newFunction() 함수 밖에서 사용할 수 없으므로 에러 발생

2. 재선언 허용

같은 범위 내에서면 var를 중복으로 선언하여 수정이 가능

     var greeter = "hey hi";
    var greeter = "say Hello instead";

    var greeter = "hey hi";
    greeter = "say Hello instead";

3. 호이스팅

호이스팅이란 변수와 함수 선언이 맨 위로 끌어올려져 먼저 실행되는 자바스크립트 매커니즘

       console.log (greeter);
    var greeter = "say hello"

위 코드를 자바스크립트는 아래처럼 해석하여

    var greeter; // 변수 선언이 맨 위로 호이스팅
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

var 변수는 범위 내에서 맨 위로 올라가고, 값은 undefined로 초기화

4. 문제점

     var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) // "say Hello instead"

times>3가 true를 반환하여 greeter는 "say Hello instead"로 재정의 된다. 의도적으로 하지 않았을 경우 문제가 되기도 하고, 이런 var의 특성은 많은 버그를 발생시킬 수 있기에 ES6에서 let과 const가 등장하게 되었다.

✅ let

1. scope: 블록범위

{}로 바인딩된 코드 덩어리를 의미하며, 중괄호 안에 있는 것은 모두 블록 범위다. let으로 선언된 변수는 해당 블록 {} 내에서만 사용 가능하다.

    let greeting = "say Hi";
       let times = 4;

       if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
       console.log(hello) // hello is not defined

if문 안에서 선언된 hello는 if문 블록 밖에서 사용할 수 없다.

2. 재선언 불가

let은 해당 범위에서 업데이트는 가능하지만, 재선언은 불가하다.

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error:         Identifier 'greeting' has already been declared

다른 블록 범위에서는 같은 이름의 변수를 선언할 수 있다.

3. 호이스팅

var 처럼 let 선언은 맨 위로 호이스팅 되지만, var와 다르게 undefined로 초기화되지 않는다. 선언 이전에 let 변수를 사용하려 하면 Reference Error가 발생한다.

✅ const

1. scope : 블록 범위

let과 동일

2. 업데이트 및 재선언 불가

const로 선언된 변수는 일정한 상수 값을 유지하기 때문에, 값을 변경할 수도 재선언할 수도 없다. 그렇기에 선언과 동시에 초기화가 되어야 한다.

const 개체는 업데이트할 수 없지만, 개체의 속성은 업데이트할 수 있다.

아래처럼 const greeting을 선언 및 초기화 했다면,

    const greeting = {
        message: "say Hi",
        times: 4
    }

아래처럼 greeting 객체의 속성을 직접 업데이트하는 것은 불가하지만,

     greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

아래처럼 하는 것은 가능하다.

    greeting.message = "say Hello instead";

3. 호이스팅

let처럼 const 선언도 맨 위로 호이스팅만 되고 초기화 되지는 않는다.

💭 총 정리

📌 scope : var는 전역/함수범위고 let과 const는 블록 범위다. 📌 업데이트/재선언 : var는 둘 다 가능하고 let은 업데이트만 가능하고 const는 둘 다 불가하다. 📌 호이스팅: 셋 다 최상위로 호이스팅 되지만, var 변수만 undefined로 초기화 된다. 📌 const만 선언과 초기화를 동시에 해야한다.

출처

freeCodeCamp

• git repository에서 브랜치를 관리하기 위한 일관된 워크 플로우를 제공하는 브랜치 전략이다.
• 이 전략은 소프트웨어 개발에 대한 구조화된 접근 방식을 장려하여 개발 프로세스의 다양한 측면을 더 쉽게 추적하고 관리할 수 있도록 한다.
• 특정 목적과 언제, 어떻게 브랜치를 만들고, 병합하고, 관리해야 하는지에 대한 지침을 통해 장기적인 브랜치 집합을 정의합니다.

Branch types

1. Master branch

• master 브랜치는 안정적이고 배포 준비가 완료된 상태를 나타낸다.
• 철저한 테스트를 거쳐 배포할 준비가 된 코드만 포함해야한다.
• 직간접적으로 다른 모든 브랜치는 결국 master 브랜치에 merge되어야 한다.

2. Develop branch

• 진행 중인 개발 작업을 위한 주요 통합 브랜치다.
• 이곳에서 기능 브랜치를 병합하고 함께 테스트한다.
• 항상 프로덕션에 사용할 수 있는 상태는 아니지만 비교적 안정적인 상태를 유지해야 한다.

3. Feature brances

• 특정 기능이나 개선 사항을 개발하기 위해 만들어진다.
• 개발 브랜치에서 만들어지고 기능이 완성되면 다시 개발 브랜치로 merge된다.
• 명확하고 설명적인 이름을 가져야 한다.

4. Release Branches

• 개발 단계가 완료되고, 소프트웨어가 릴리즈 될 준비가 되면 만들어진다.
• 최종 테스트, 버그 수정 및 배포를 준비할 수 있다.
• 일반적으로 개발 브랜치에서 분기되어 마스터 브랜치와 개발 브랜치 모두에 merge된다.

5. Hotfix Breanches

• 제품 코드에 있는 치명적인 이슈들을 해결하기 위해 생성된다.
• 릴리스된 코드의 문제를 해결하기 위해 마스터 브랜치에서 분기됩니다(갈라져나온다).
• 핫픽스가 완료되면 마스터 브랜치와 개발 브랜치 모두에 병합됩니다.

Closing

Git 흐름 전략은 소프트웨어 개발에 대한 체계적이고 조직적인 접근 방식을 제공하므로 여러 기능, 릴리스 및 핫픽스를 보다 쉽게 관리할 수 있다.

이 전략은 코드 품질, 안정성 및 원활한 릴리스 프로세스를 보장하는 데 도움이 된다.

Git 플로우를 구현하려면 Git 플로우 관리 도구를 사용하거나 Git 명령을 사용하여 수동으로 프로세스를 따를 수 있다.

개발 워크플로에서 Git 흐름 전략의 사용을 간소화하도록 설계된 Git 확장 및 플러그인도 있다.

이 세 개의 용어는 git에서 근본적으로 같은 merge 과정을 말한다. 하나의 브랜치에서 바뀐부분을 가져오고, 다른 브랜치와 합치는 것도 해당된다.

두 브랜치 사이에서 충돌이 발생할 때, Git은 three-way merge를 실행한다.

그리고 three-way merge는 브랜치의 공통의 조상과 각 브랜치의 변경 사항을 고려하여 가능한곳의 충돌을 자동으로 해결한다.

이 merge 프로세스의 결과는 두 브랜치의 변경 사항을 합치는 새로운 commit 메시지이다.

그리고 merge commit은 일반적으로 각각의 브랜치에서 하나씩 가져온 두 개의 부모 commit을 가지고 있다.

이 merge는 git merge 명령어로 실행된다.

이 용어들은 같은 개념을 의미하기 때문에 자주 상호교환적으로 사용된다.

이 프로세스에는 common ancestor(공통 조상), the source branch(소스 브랜치), the target branch(대상 브랜치) 라는 세 가지 주요 요소가 포함되므로 ‘Three-way merge’라는 용어가 사용된다.

2. Fast-Forward Merge

대상 브랜치를 소스 브랜치의 끝으로 직접 업데이트할 수 있을 때 발생하는 기본 병합의 한 유형이다. 이 경우 새 merge commit이 생성되지 않는다.

소스 브랜치가 생성된 이후 대상 브랜치에 새 커밋이 없을 때 발생한다. 결과적으로 브랜치는 단순히 새 commit을 가리키게 된다.

Use Case

• 독립적으로 개발 중이지만 이제 메인 브랜치에 통합할 준비가 된 기능 브랜치가 있는 경우 사용한다.
• 기능 브랜치가 생성된 이후 메인 브랜치에 새로운 커밋이 없는 경우 사용한다.
• 브랜치가 갈라진 경우에는 사용 불가하다.

Scenario

cssCopy code
A---B---C---D (main)
           \
            E---F (feature-branch)

Fast-forward merge:

cssCopy code
A---B---C---D---E---F (main, feature-branch)

+ Basic Merge와 Fast-Forward Merge의 차이점

basic merge는 새 merge commit을 항상 생성하지만, fast-forward merge는 그렇지 않다.

3. Rebase

Use Case

• 선형적(직선)이고 더 깨끗한 commit history를 만들고 싶을 때 사용한다.
• 여러 개의 작고 점진적인 commit이 있는 기능 브랜치를 하나의 기능 브랜치로 결합하고 싶을 때 사용한다.

Scenario

cssCopy code
A---B---C (main)
     \
      D---E---F (feature-branch)

Rebase:

cssCopy code
A---B---C---D'---E'---F' (main, feature-branch)

Scenario를 보면 D, E, F commit들이 main 브랜치로 선형적이고 더 깨끗한 history를 만들면서 rebase된 것을 알 수 있다.

4. Squash Merge

Use Case

• 기능 브랜치의 모든 변경사항을 대상 브랜치(targe branch)에 대한 하나의 포괄적인 commit으로 결합하고 싶을 때 유용하다.
• commit history를 깔끔하고 간결하게 유지하도록 돕는다.

Scenario

1. 여러개의 작고 점진적인 commit이 있는 기능 브랜치(feature-branch)가 있다고 가정해보겠다.

cssCopy code
A---B---C (main)
     \
      D---E---F (feature-branch)

1. commit history를 더 간단하게 만들기 위해서, feature-branch를 main 브랜치에 squash merge하기로 한다.

cssCopy code
A---B---C---G (main)

1. G commit은 feature-branch 의 모든 변경사항(D, E, F)을 단 하나에 커밋에 합친다.

5. Octopus Merge

Use Case

• 한 번에 여러개의 브랜치들을 하나의 대상 브랜치에 merge하고 싶을 때 사용된다.
• 다양한 기능 브랜치나 함께 merge 되어야 하는 다른 브랜치들을 가지고 있을 때 도움이 된다.

스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위를 정의하는 프로세스이다. 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정한다.

CSS(Cascading Style Sheets)라는 이름에서 볼 수 있듯, cascading는 CSS의 핵심이라고 할 수 있다.

CSS 캐스케이팅의 핵심 개념

원천 유형(Origin types)

🔹사용자 에이전트 스타일시트 (User-Agent Stylesheets)

브라우저 자체가 기본적인 스타일을 정의한다. 이러한 스타일은 웹 페이지에 브라우저별로 일관성을 제공한다.

🔹저자 스타일시트 (Author Stylesheets)

웹 페이지의 저자 또는 디자이너가 정의한 스타일 규칙이 포함된 스타일 시트이다. 이러한 규칙은 웹 페이지의 디자인을 결정하는 데 사용된다.

🔹사용자 스타일 시트( User stylesheets)

사용자가 브라우저 설정에서 사용자 지정 스타일시트를 정의할 수 있다. 이러한 스타일은 사용자가 웹 페이지의 스타일을 원하는대로 변경할 수 있게 한다.

Cascading 순서

1. 중요도(Importance): !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.
2. 명시도(Specificity): 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.
3. 소스 순서(Source Order): 동일한 특성 값과 특정성을 가지는 규칙은 마지막에 선언된 규칙이 먼저 선언된 규칙을 덮어씁니다. 즉, 나중에 선언된 규칙이 우선순위가 높습니다.

예시 코드

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="red-text">This is a paragraph.</p>
</body>
</html>

여기서, p 요소의 텍스트는 파란색이다. 왜냐하면 내부 스타일 시트의 규칙이 적용되었기 때문이다. 소스 순서에 따라서, 내부 스타일 시트의 규칙이 먼저 선언되었다. 이제 외부 스타일 시트를 추가해보겠다.

Copy code
p.red-text {
    color: red;
}

이제 p 요소의 텍스트는 빨간색으로 변경된다. 외부 스타일 시트의 규칙이 내부 스타일 시트의 규칙을 덮어쓴다. 이것은 특정성(Specificity)의 차이에 의한 결과입니다.

명시도(Specificity)

CSS 규칙을 우선 순위에 따라 적용하는 데 중요한 개념이다. 명시도는 선택자의 구체성을 나타내며, 스타일 규칙이 어떤 요소에 적용되는지 결정한다. 구체적인 규칙이 높은 특정성을 가지므로 더 높은 우선순위를 갖게 된다.

명시도 계산 방법

1. 인라인 스타일(Inline Styles): 인라인 스타일은 HTML 요소의 style 속성을 통해 정의된다. 인라인 스타일은 가장 높은 특정성을 가진다. 특정성 값은 1,000,000
2. ID 선택자: ID 선택자는 HTML 요소의 id 속성을 사용하여 정의된다. ID 선택자의 특정성 값은 1,000
3. 클래스 선택자, 속성 선택자, 가상 클래스 선택자: 클래스 선택자, 속성 선택자, 가상 클래스 선택자 등은 요소의 클래스, 속성 또는 상태를 기반으로 정의된다. 이러한 선택자들의 특정성 값은 100
4. 요소 선택자: 요소 선택자는 HTML 요소의 유형(예: div, p, a 등)을 기반으로 정의된다. 특정성 값은 10

명시도는 선택자에 나오는 각 요소 유형(인라인 스타일, ID 선택자, 클래스 선택자, 속성 선택자, 가상 클래스 선택자, 요소 선택자)에 대한 값의 합으로 계산된다.

예를 들어, 다음 선택자는 특정성 값이 0,0,1,3입니다

예시 코드

div#myDiv.myClass a:hover

명시도는 왼쪽에서 오른쪽으로 읽히며, 각 요소 유형의 특정성 값을 합한다. 위의 예시에서, ID 선택자(#myDiv)가 1,000, 클래스 선택자(.myClass)가 100, 가상 클래스 선택자(:hover)가 1, 요소 선택자(div, a)가 각각 10의 특정성을 가지므로 특정성 값은 0,0,1,3이 된다.

명시도를 이해하면 CSS 규칙이 어떻게 우선 순위를 갖고 스타일을 결정하는지 더 잘 파악할 수 있다. 이것은 CSS 코드를 작성하고 디버깅할 때 유용한 개념이며, 스타일 충돌을 다루는 데 도움이 된다.

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 

**top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

Values

📌static

• 요소를 일반적인 문서 흐름에 따라 배치
• z-index 속성이 아무 영향도 주지 않음
• default 값( position을 따로 지정하지 않으면 전부 static으로 자동 설정됨)

📌relative

• 요소를 일반적인 문서 흐름에 따라 배치
• 원래 위치 기준으로 top, right, bottom, left의 값에 따라 offset을 적용
  • offset은 요소의 위치를 나타내는 수치
• 원래 자기 위치만큼 크기를 차지함
• offset은 다른 요소에는 영향을 주지 않음
• z-index가 auto가 아니면 새로운 쌓임 맥락(stacking context) 생성 → 다른 요소들보다 앞에 위치
  • 쌓임 맥락(stacking context)은 페이지에서 요소들간의 앞뒤가 있다는 것

📌absolute

• 요소를 일반적인 문서 흐름에서 제거
• 원래 자기 위치만큼 크기를 차지하지 않음
• 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  • display: absolute; 를 주고 싶은 요소의 부모요소(가장 가까운 상위 요소)에 display: relative;를 주는 것이 관례
• 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼음
  • 컨테이닝 블록은 position** 속성 값이 static 이 아닌 (fixed , absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역이 됨

📌fixed

• 요소를 항상 고정된 위치에 배치
• 요소를 일반적인 문서 흐름에서 제거
• 원래 자기 위치만큼 크기를 차지하지 않음
• 대신 뷰포트(viewport)의 초기 컨테이닝 블록을 기준으로 삼아 배치
  • 뷰포트(viewport)는 현재 브라우저 전체화면
• 항상 새로운 쌓임 맥락을 생성 → 다른 요소들보다 앞에 위치

📌sticky

• 스크롤 전까지는 relative, 스크롤 후에는 fixed
• 요소를 일반적인 문서 흐름에 따라 배치
• 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 offset적용
• 항상 새로운 쌓임 맥락을 생성 → 다른 요소들보다 앞에 위치
• "스크롤 동작"(overflow가 hidden, scroll, auto ,overlay)이 존재하는 가장 가까운 조상에 달라붙음

2023.08.27

오늘 읽은 범위

에피소드 6 ~ 에피소드 10

책에서 기억하고 싶은 내용을 써보세요.

#에피소드 6: 왜 나만 오류가 자꾸 생길까?

오류에 대응하는 방법 세 가지

1. 문제가 생겼을 때 나 자신을 문제에서 빼지 마라. 코드가 작동하지 않은 이유는 나 때문이다라고 생각하며 시야를 넓히자.

2. 오류부터 고치려고 무작정 달려들지 말 것 오류 발생 원인부터 파악하고 해결방법을 찾자.

3. 오류 메세지를 읽자 ❗❗❗ 이 부분 진짜 공감한다. 코딩 입문일 때 오류 메시지를 제대로 읽지 않고, 삽질했던 시간이 많다. 오류 메시지만 잘 읽어도 오류의 절반은 금방 해결할 수 있는 것 같다.

프로그래밍 초보자가 하기 쉬운 실수

1. 공부만 한다. 공부만!
2. 준비만 한다. 준비만!

그냥 배운 걸 활용해 쉬운 것부터 무작정 만들어보자!

#에피소드 7: 파이썬은 왜 이렇게 인기가 많을까?

이유1: 파이썬은 영어와 매우 닮았기에 친숙하다. 이유2: 활용 법위가 넓다. 이유3: 어마어마하게 큰 커뮤니티가 존재한다. 이유4: 업무 자동화(scripting)에 찰떡이다.

#에피소드 8: 파이썬이 C언어보다 느린 이유는?

인터프리트 언어는 중간에 동시 통역사 역할을 해주는 인터프리터가 0과 1을 사용해서 프로그래밍 언어를 실시간으로 번역해준다. 예시로는 JS와 python이 있다.

컴파일 언어는 번역가가 양쪽의 말을 전부 듣고 한꺼번에 번역해준다. 예시로 C언어가 있다.

파이썬은 컴퓨터에게 실시간으로 0과 1로 이뤄진 문장을 통역해주기 때문에, 작업해야 하는 횟수가 코드 양에 비례하여 증가한다. C언어는 완성된 코드를 한꺼번에 묶어서 통번역하므로 작업 횟수가 한정적이고, 속도가 더 빠르다.

#에피소드 9: 자바스크립트는 웹 개발에만 쓰는 언어일까?

50억개 이상의 사이트가 자바스크립트를 사용한다.

자바스크립트로 할 수 있는 것들은 다음과 같다.

1. 하이브리드 앱, 크로스 플랫폼 앱 한 번에 개발로 아이폰, 안든로이드폰 모두 사용할 수 있는 앱을 만들 수 있다. 하이브리드 앱은 아이오닉(Ionic)을, 크로스 플랫폼 앱은 리액트 네이티브(React Native)라는 도구를 해야 한다.

2. 윈도우, 맥, 리눅스를 위한 데스크톱 소프트웨어 일렉트론(Electron)은 HTML, CSS, JS를 가져다 컴파일해서 윈도우, 맥, 리눅스에 설치할 수 있는 소프트웨어를 만들어 주는 도구다. VScode, slack, skype, gitHub, Atom도 전부 일렉트론(electron)으로 만든 것이다.

3.게임 phaser.js, impact.js라는 도구를 사용하여 게임도 만들 수 있다.

4. 3D, 가상 현실, 증강 현실 개발
5. 머신 러닝

#에피소드 10: 코틀린은 정말로 자바와 100% 호환될까?

100% 호환

자바로 개발한 시승템에 코틀린 코드로 유지 보수가 가능하는 것

호환

호환이란 자바 코드에서 코틀린 코드를 부를 수도 있고, 반대로 코틀린 코드에서 자바 코드를 부를 수도 있어야 한다는 것이다.

컴필레이션

코드 전체를 받아서 한 번에 기계어로 해석하는 것

인터프리테이션

코드를 실시간으로 기계어로 해석하는 것

둘의 속도 비교

컴필레이션 기반 코드가 인터프리테이션 기반 코드보다 빠르다.

하지만 컴필레이션은 플랫폼에 의존하기에, 코드가 실행될때 플랫폼이 달라지면 개발자가 컴파일 과정을 한 번씩 실행해줘야한다. 반대로 인터프리테이션은 인터프리터가 실시간 번역을 아라서 해주므로 새로 컴파일할 필요가 없다.

컴필레이션과 인터프리테이션을 다 활용하는 자바

자바는 개발자가 코드를 작성하면 컴파일을 하여 자바 바이트 코드를 만들고, 이 코드는 각각의 운영체제에서 실행될 때 자바 가상 머신(JVM)이 해석해서 각각의 기계어로 번역해준다.

코틀린을 자바 바이트 코드로 컴파일하기만 하면 되기에, 코틀린은 자바와 100% 호환이 가능하다.

코틀린을 써야하는 이유?

1. 코틀린은 null에서 안전한(null safety) 언어다. 자바에서는 널을 허용하기에 프로그램 실행 도중 널때문에 오류가 발생할 수 있지만, 코틀린은 코드 실행 전에 널이 있으면 미리 개발자에게 알려준다.

2. 코틀린은 코루틴을 지원한다. 코루틴(coroutine) 문법은 많은 일을 한 번에 실행할 수 있게 한다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

파이썬, 자바스크립트가 내가 생각했던 것보다 더 많은 분야에 쓰일 수 있다는 게 너무 신기했다.

자바스크립트로 게임도 만들 수 있다니? 전부터 재밌는 게임을 만들어보고 싶었는데, 이번에 버킷리스트에 추가해야겠다. 웹개발 때문에 코딩 공부를 시작했지만, 잘만하면 웹개발 말고도 내가 하고 싶은 것들에 다양하게 접목이 가능해서 너무 배우길 잘했다는 생각이 든다.

shakespeare 언어를 개발한 개발자는 진짜 대단한 것 같다. 코딩을 문학과 접목시키다니 천재인가? 본인의 흥미와 관심사를 프로그래밍 언어로 표현하는 것 너무 멋있다. 나도 프로그래밍에 더 재미를 붙이고 몰입하는 시간을 늘려야 겠다는 생각이 든다.

💙오늘도 포기하지 않고 책을 읽고 TIL을 기록하는 나와 다른 챌린저들에게 많은 응원을 보내본다!

개발은 재능보다는 포기하지 않는 것이다. 무언가를 만들기 위해 필요한 언어를 배우자. 새 언어를 배우고, 익히면 개발 실력이 는다.

TIL (Today I Learned) 날짜

2023. 8. 26

오늘 읽은 범위

에피소드 1 ~ 에피소드 5

#에피소드 1

개발자는 논리적으로 생각하기를 좋아하고 문제 해결을 즐기는 성향이 필요하다.

암기력이 좋은 것 보다는 개발 과정을 잘 이해할 수 있는 것이 좋은 개발자가 되기 위해 더 필요한 것이다.

개발은 재능이 아닌 끈기의 영역이다.

#에피소드 2: 어떤 언어부터 공부해야 할까?

프로그래밍으로 뭘 하고 싶은 지 생각하고, 그것에 필요한 언어를 배우는 게 좋다.

나는 웹애플리케이션을 만들고 싶기 때문에, 자바스크립트를 배우고 있다.

언어별로 잘 쓰이는 분야

• C언어: 가전 제품에 이식되는 프로그램
• 자바: 시스템 유지 및 보수, 안드로이드 앱 개발
• 파이썬: 웹 개발, 인공지능 개발
• 자바스크립트: 웹 개발

  #에피소드 3: 새 언어를 쉽게 배우는 노하우?

1. 공식 문서 살펴보기
2. 문법 확인
3. 다른 언어와 비슷한 특징 집중해서 보기
4. 새 언어로 코딩 시도하기
5. 공식문서 튜토리얼 시작하기
6. 나만의 프로젝트 만들기 (본인이 해봤던 주제의 프로젝트로 시작)

조만간 타입스크립트 공부를 시작할 때 이 방법을 꼭 시도해봐야겠다.

#에피소드 4: 언어 이름은 왜 그렇게 지었을까?

언어 이름의 기원들이 대부분 큰 의미가 없고 단순한 것들이라 가장 재밌게 읽은 부분이었다.

자바는 개발자가 좋아하는 커피 종류을,

코틀린은 러시아의 섬이름을,

자바스크립트는 당시 유행했던 자바의 이름을,

C언어는 당시 유명했던 B언어의 이름을,

루비는 Pearl 이라는 언어의 이름에 영향을 받아서.

파이썬은 코미디 쇼 <몬티 파이썬> 의 이름을,

고는 구글이 만든 언어기 때문에 구글의 이름을,

러스트는 곰팡이(rust)를 따와서 지었다.

Go가 구글에서 만든 언어인 줄 몰랐는데, 새롭게 알게 되어 재밌었다.

#에피소드 5: C, C++, C#은 이름처럼 비슷할까?

C언어는 셋 중 가장 오래된 언어로, 메모리를 효율적으로 쓰면서도 실행 속도가 빠르다.

C++은 C언어를 포함한 슈퍼셋(super set) 언어로, 둘이 비슷한 부분이 있다. 다만 C는 절차 지향인 반면 C++은 절차 지향과 객체 지원을 모두 지원한다.

C#은 마이크로소프트에서 만든 언어로 C와 C++과 완전 다르며, 실행 속도는 셋 중 제일 느리다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

어렵지 않게 빠르게 읽을 수 있어서 좋았다. 챌린지 완주를 목표로 꾸준히 TIL 남길 것이다. 화이팅!

노마드 코더 북클럽 챌린지 1일차

앞으로 2주동안 꾸준히 읽어봐야지 꾸준히 독서하고 TIL 기록하는 습관 만들어 보자

📧 코딩테스트 안내 메일

지원서 마감은 8/8(화) 자정까지였고, 코딩테스트 안내 메일은 8/10(목)에 받았다. 감사하게도 코딩테스트에 응시할 수 있는 기회가 생겼고, 시간이 얼마 없었지만 모던 자바스크립트 Deep Dive 라는 책을 틈틈히 읽으면서 준비했다.

코딩테스트는 lv2를 무난히 풀 수 있을 정도면 걱정하지 않아도 된다고 쓰여있던데 ... lv2는 아직 나에게 너무 어렵기에 그 밑에 레벨들을 풀면서 연습을 했다.

테스트 기본 사항

⏳ 응시 시간 : 3시간 (오후 3시~6시)

응시 시간 95분 후에 퇴실 가능했다. 대신 그전까지는 이동도, 음식 섭취도 절대 불가했다.

✏️ 문항 : 객관식 20문제, 코딩테스트 3문제

🗃️ 준비물 : 핸드폰, 충전기, 인터넷이 잘 연결된 컴퓨터, 신분증, 핸드폰 거치대나 삼각대

시험을 응시할 때, 핸드폰으로 본인과 모니터를 촬영하면서 봐야하므로 위의 준비물들이 꼭 필요하다. 책상 위에 응시 준비물 말고는 전부 치우라고 하여 이번에 시험을 보기 위해 급하게 책상정리를 했다.

듀얼모니터도 사용 금지라서 모니터 연결 해제하고, 모니터에 담요를 덮어두고 시험에 응시했다.

객관식 문제 20개

🔎 난이도

어렵지 않았다. 물론 다 맞았을 거라는 확신은 없지만, 자바스크립트 기초 지식 문제였기 때문에 전에 자바스크립트 책을 읽고 기초 강의를 들었다면 절반 이상은 무난히 맞출 수 있었을 것 같다.

코딩테스트 문제 3개

🔎 난이도

첫 번째 문제

첫 번째 문제는 쉬웠다. 체감상 프로그래머스 lv0 정도였다.

두 번째 문제

두 번째 문제는 너무 어려웠다. lv0은 절대 아니었다.

세 번째 문제

마지막 문제는 어느 정도 풀 수 있을 것 같았는데, 결국 못 풀었다. 어떤 흐름으로 풀면 될 것 같다고 머릿 속에 생각은 나는데, 어떻게 노가다로 하면 될 것 같았는데~ 못 풀었다. 너무 아쉽다. 문제를 다시 볼 수 있다면... 어떻게든 답을 알아내고 싶다!

시간 분배

객관식 문제랑 첫 번째 문제는 20분도 안 걸려서 다 풀고, 나머지는 전부 세 번째 문제를 푸는 데 썼다. 두 번째 문제는 읽자마자 이건 못푼다 생각하고 바로 패스했다.

💡 응시 팁

공식 문서 참조 가능

응시 화면에 오른쪽 바에 보면 공식문서로 가는 버튼이 있다. 물론 공식 문서는 전부 영어지만, JavaScript에서 사용할 수 있는 함수들이 잘 적혀 있으므로 살펴보면 큰 도움이 될 것이다. 원문을 해석해주는 크롬 익스텐션같은 것을 사용하면 부정행위로 간주되니 조심하기!

응시 환경 세팅은 미리 미리하기

책상 정리, 앱 다운로드, 신분증 촬영 등 은근히 세팅해둘 것이 많다. 미리 미리 해두자.

응시 주의 사항 여러번 정독하기

원격으로 진행되는 시험이니 만큼, 부정행위로 간주되는 행동도 많이 있다. 응시 주의 사항을 꼼꼼히 체크하여 부정행위로 탈락하는 경우는 절대 없도록 하는 게 좋겠다. 특히 듀얼 모니터쓰는 사람들이 많은데, 미리 HDMI 선 연결 해제해두고 담요로 덮어둡시다. 나도 까먹고 있다가 시험 3분전에 급하게 덮었다.

🎙️전체적인 소감

데브코스 지원 준비하고 테스트 보는 과정에서 내가 많이 부족함을 뼈저리게 느꼈고, 앞으로 더 열심히 해야겠다는 생각밖에는 안 들었다. 나 코딩테스트를 너무 소홀히 했다. 내일부터 당장 코딩테스트 강의 듣기 시작해야지. 이번에 새로 한 경험들 절대 잊지 말고, 더 발전하는 내가 되자.

웹 프엔을 독학하면서 막막함을 느낄 때가 많다. 너무 방대한 공부 범위, 외로움, 동료 및 멘토의 부재 등등등 나는 혼자일 때보다 다른 그룹에 속해있을 때, 소속감을 느끼는 환경 속에서 뭐든 더 열심히 한다는 것을 알고 있다. 너무 자유로운 환경 보다는 어느 정도 틀이 있는 환경에서 자기 주도적으로 잘 하는 편이라는 것도 알고 있다. 훈련과정을 수강하면 독학할 때의 막막함을 보다 해소하고, 팀원들과 소속감을 느끼며 제대로 배울 수 있을 거라는 생각에 훈련과정을 알아보았다.

그러다 우연히 유튜버 임효성님의 영상을 보게 되었고, 프로그래머스에서 진행하는 프론트엔드 데브코스를 알게 되었다.

전에 웹개발 풀스택 국비를 수료했었기에, 아무 훈련과정이나 들었다가는 엄청나게 시간을 낭비할 수 있다는 것을 알고 있었다.

❗국비학원 수료자로서 느꼈던 국비 과정의 한계

1. 코딩테스트나 기초지식 면접이 없는 학원은 동료들의 의지/열정이 부족할 확률이 매우 크다.

나중에 팀프로젝트 하다가 분명히 탈주하는 팀원들이 발생한다. 우리 팀에서도 프론트엔드 담당자 분이 도중에 나가셔서 곤란했던 상황이 있었다.

2. 6개월이라는 짧은 시간동안 너무 많은 것을 가르친다.

풀스택 같은 경우 html/css, JavaScript, Java, Jquery, Ajax, react, jsp 등... 너무 많아서 하나도 제대로 배운 것 같지가 않다.

3. 학원 강사님이 많은 학생들(3-40명)을 전부 케어하다보니 1:1 피드백이 터무니 없이 부족하다.

그래서 프론트엔드 개발자가 되기 위해 필요한 핵심적인 역량만 가르치는 커리큘럼, 최소한의 진입 장벽을 통과한 열정있는 동료들, 학습 방향을 제대로 코치해줄 멘토님이 있는 과정을 듣고 싶었다.

이 조건에 전부 부합하는 것이 프로그래머스의 훈련과정이라고 생각했고, 시간이 부족했던 탓에 지원 마감일에 맞추어 아슬 아슬하게 지원서를 제출했다.

📝 데브코스 지원서 문항

1. 지원 동기

솔직하고 담백하게 적었다.

2. 데브코스와 별개로 원래의 계획

이것도 정말 솔직하고 꾸밈없이 나의 꿈까지 합쳐서 적었다.

3. 개발자가 되고 싶은 이유

급하게 써서 조금 부족했지만 솔직하게 적었다.

4. 프엔 선택 이유

이것도 급하게 써서 조금 부족했던 것 같다.

5. 프엔 진로를 위해 그동안 해 온 노력

이 부분을 쓰면서, 앞으로 노력을 부단히 해야겠구나 반성을 많이 했다. 500자 채우는 게 쉽지 않았다.

6. 향후 학습 계획

내가 생각하는 이상적이고 모범적인 학습 계획을 적었다.

7. 자유 문항(자기 어필)

여기서 내 학창시절 얘기까지 꺼내면서 최대한 간절하게 적었다.

🎙️ 지원서 쓰면서 느낀 점

지원서 문항들을 보면 되게 기초적이면서 뻔한 문항인데도, 적는 게 그리 쉽지 많은 않았다. 내 자신에게 질문을 던지고 답변을 받는 과정에 시간이 꽤 걸렸던 것 같다. 누구든 개발자가 되고 싶은 사람이라면 내가 왜 정말 개발자가 하고 싶은 지, 왜 해야 하는 지 등을 다시금 곱씹어 보는 과정이 꼭 필요한 것 같다. 지원서를 작성하면서 역시 프로그래머스답게 아무 지원자나 받지 않는 구나 라는 걸 다시금 느꼈다. 내가 서류를 통과할 수 있을 지는 모르겠지만, 남은 시간동안 최선을 다해 적고 고치고를 반복했다.

🤔 과연 코딩테스트까지 갈 수 있을 것인가?

다행히도 코딩테스트까지 갈 수 있었다. 데브코스 코딩테스트 응시 후기는 새로운 글로 적도록 하겠다.

DOM means Document Object Model

Structed representation of HTML documents. Allows JavaScript to access HTML elements and styles to manipulate **them. ❗manipulate** means - changing text, HTML attributes, and even CSS styles.

THE DOM TREE🌳 STRUCTURE

<html>
    <head>
        <title>A Simple Page</title>
    </head>
    <body>
        <section>
            <p>A paragraph with a <a>link</a></p>
            <p>A second paragraph</p>
        </section>
    </body>
</html>

Dom always starts with the DOCUMENT element from the very top.

📃DOCUMENT

Special object that is the entry point to the DOM. ex) document.querySelector()

HTML

usually has two child elements, head and body

As we keep going deeper into the nested HTML structure, we keep adding more and more children to the DOM tree.

head

has title element

body

has section element

section

has p element

p

has a element

DOM !== JAVASCRIPT🤦‍

MANY PEOPLE THINK 🤔

DOM Methods and Properties for DOM Manipulation are part of JS. But it's not the case.

Remember that 😊

JavaScript is actually just a dialect of the ECMAScript specification,and all this DOM related stuff is simply not in there.

Then how does this all work?

The DOM and DOM methods are actually part of something called the web APIs.

Web APIs

The web APIs (Application Programming Interface) are like libraries that browsers implement and that we can access from our JavaScript code.

Besides the DOM, there are a ton more web APIs, such as timers, the fetch API, and many more.

source from : The Complete JavaScript Course 2023 by jonas in Udemy

문제 설명

정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.

제한 사항

1 ≤ n ≤ 100

입출력 예

풀이

const solution = n => {
    // 정답 담을 배열 생성
    let arr = [];
    // i는 1부터 n까지 1씩 증가함
    for(let i = 1; i <= n; i++) {
        // i를 2로 나눴을 때의 몫이 1이면. 즉 i가 홀수라면
        if(i % 2 === 1)
        // arr배열 마지막에 i값을 추가한다.
        arr.push(i);
    }
    return arr;
}

매개변수

1) 첫 번째 분수의 분자 numer1 2) 첫 번째 분수의 분모 denom1 3) 두 번째 분수의 분자 numer2 4) 첫 번째 분수의 분모 denom2

두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요.

제한사항

0 <numer1, denom1, numer2, denom2 < 1,000

입출력 예

❗풀이

1. 분수의 덧셈

분모는 분모끼리 곱한 것을 넣고, 분자는 다른 분모와 각각 곱해서 더한 것을 넣으면 된다.

ex) 1/2 + 2/3 = (1 * 3) + (2 * 2) / (2 * 3) = 7 / 6  

2. 기약 분수

기약분수란? 분자와 분모의 공약수가 1뿐이어서 더이상 약분되지 않는 분수

ex) 1/3, 4/7

기약분수로 만드려면 분자와 분모를 최소 공배수로 나누면 된다.

3. 분자와 분모를 배열에 담아서 리턴

결과값을 배열에 담으면 끝

const solution = (numer1, denom1, numer2, denom2) => {
    // 분자 
    // (분자1 * 분모2) + (분자2 * 분모1)
    let topNum = numer1 * denom2 + numer2 * denom1;
    // 분모
    // (분모1 * 분모2)
    let botNum = denom1 * denom2;
    // 최소 공배수
    let maximum = 1;
    // 약분
    // i는 1부터 시작해서 분자의 값과 같아질 때까지 1씩 증가한다
    // 분자를 i로 나눠서 나머지가 없고, 분모를 i로 나눠서 나머지가 없을 때 최소 공배수에 i값을 넣는다.  
    for(let i = 1; i <= botNum; i++) {
        if(topNum % i === 0 && botNum % i === 0) {
            maximum = i;
        }
    }
    // 분모와 분자를 최소공배수로 나눈 값들을 배열에 담아 리턴한다.
    return [topNum / maximum, botNum / maximum];
}

문자열을 정수로 바꿔주는 parseInt() 함수를 사용하면 된다.

나머지 구하는 방법

나머지 연산자 %를 사용하면 된다.

Coding Challenge #1

Given an array of forecasted maximum temperatures, the thermometer displays a string with the given temperatures. Example: [17, 21, 23] will print "... 17ºC in 1 days ... 21ºC in 2 days ... 23ºC in 3 days ..." Your tasks:

1. Create a function 'printForecast' which takes in an array 'arr' and logs a string like the above to the console. Try it with both test datasets.
2. Use the problem-solving framework: Understand the problem and break it up into sub-problems! Test data: § Data 1: [17, 21, 23] § Data 2: [12, 5, -5, 0, 4]

문제를 해결하기 위해서는 다음과 같은 두 가지 스텝을 거쳐야 한다.

1. Understanding the problem 문제를 이해하기

2. Breaking up into sub-problems 작은 문제들로 쪼개기

1. 먼저 문제가 뭔지 이해해보자

• Array transformed to string, separated by ... 답 예시를 보면 스트링으로 변환되어 있고, ...으로 나누어져 있다.
• What is the x days? Answer: index + 1 x days가 무엇일까? 정답은 배열의 인덱스에 1을 더한 값이다.

2. 문제를 이해했으니, 작은 문제들로 쪼개보자

• Transform array into string
• Transfrom each element to string with ºC
• strings need to contain day (index + 1)
• Add ... between elements and start end of string
• Log string to console

위를 바탕으로 문제를 풀어보자.

// test data
const data1 = [17, 21, 23];
const data2 = [12, 5, -5, 0, 4];

// what we want to make as a result
console.log(`... ${data1[0]}ºC ... ${data1[1]}ºC ... ${data1[2]}ºC ...`);

// create a function which takes in an array 'arr' 
// and logs a string like the above to the console
const printForecast = function (arr) {
  let str = ''; // for문의 결과값을 연속해서 저장할 변수 선언
  for (let i = 0; i < arr.length; i++) {
    str += `${arr[i]}ºC in ${i + 1} days ...`;
  }
  console.log('... ' + str); // 콘솔에 출력
};
printForecast(data1);