위 이미지랑 똑같은 내용으로 좀 더 간략하게 보면 아래와 같다.

중요 포인트! 객체타입은 const 상수로 선언해도 프로퍼티의 값을 수정할 수 있다.

const obj = {
    name: 'eugene';  
};  

obj = {
    name: 'james';  
};  
//이렇게 레퍼런스 변경은 불가능하다.

obj.name = 'james'
//그러나 레퍼런스가 갖고있는 프로퍼티의 값은 변경이 가능하다. 

자바스크립트를 공부하다보면 자연스럽게 익히게 되는 부분이었다고 생각했는데 코드가 복잡해지면서 안다고 생각했던 것도 꼬이고 헷갈리게 돼서 이미지로 정리해본다.

함수 선언문은 함수리터럴과 function키워드, 함수명, 매개변수, 함수 몸체로 동일하게 이루어져 있다.

// 함수 선언문과 함수 리터럴의 구성 요소 
function 함수명(매개변수) {
    함수 몸체
}

<javascript>
// 함수 선언문(기명함수) 
function speak(name) {
    console.log(`hello ${name}`);    
}

// 함수 선언문에 함수명을 없애면 
function(name) {
    console.log(`hello ${name}`);    
} //SyntaxError

함수 리터럴

리터럴은 값을 생성하기 위한 표기법이다. 쉽게 말해 값을 생성함과 동시에 변수 선언을 해준다고 생각하면 될 듯 하다. (값은 변수가 있어야만 하니까)

//좌항이 변수, 우항에 위치한 값들이 리터럴이다. 

//일반적인 리터럴
const a = 1;

//함수 리터럴
const b = function funName(parameter) {
    return parameter;    
};

//객체 리터럴
const c = {
    cName1: cValue1,
    cName2: cValue2
};

함수 선언문과 함수 리터럴 구분법

함수 리터럴이 단독으로 사용되었으며, 기명 함수이면 함수 선언문으로 인식된다. 간단히 생각하면 함수에 변수가 선언됐느냐, 안됐느냐로 구분하면 쉬울 것 같다. 변수가 없다면 함수 선언문으로, 변수가 있다면 함수를 값으로 할당 가능한 함수 표현식으로 작동한다.

//함수 선언문 (함수 리터럴 단독, 기명 함수 조건을 충족했다.)
function speak(name) {
    console.log(`hello ${name}`);    
}

speack('yujin'); //hello yujin


//함수 리터럴(변수 선언문이자 함수표현식이다. 즉,익명함수가 가능하다. 함수명을 생략할 수 있다.)
const b = function speak(name) {
    console.log(`hello ${name}`);        //함수가 변수의 값으로 할당되었다.
};

b('yujin'); //hello yujin

참조: JavaScript | 함수 선언문 vs. 함수 리터럴

allowed

let userName :: camelCase라는 띄어쓰기가 없는 소문자+대문자 문법을 사용한다. let ageGroup5:: 숫자 사용이 가능하다. let $kindOfSpecial :: 시작 부분에 달러 특수문자 사용 가능하다. (어느 위치에서도 사용 가능하다.) let _internalValue :: 시작 부분에 언더바 사용이 가능하다. (어느 위치에서도 사용 가능하다.)

not allowed

let user_name :: snake case라는 html/css에서 사용되는 문법은 권장하지 않는다. let 21Players :: 시작 부분이 숫자여서는 안된다. (변수/상수 공통) let user-b :: $와 언더바를 제외한 모든 특수문자는 사용 불가하다. 띄어쓰기도 불가하다. 언더바는 위치에 상관없이 사용할 수 있지만 시작 부분에만 사용하는 것을 권장한다. let let :: 변수/상수에 사용되는 키워드 사용이 불가하다. (키워드인지 변수 이름인지 구분이 안되기 때문)

String

'(defaultResult + 10) * 3 / 2 -1'; = 백틱(defaultResult + 10) * 3 / 2 -1벡틱; ㄴ '' 또는 "" 또는 백틱 안에 있는 코드는 전체가 문자열이다.

'(' + defaultResult + ' + 10) * 3 / 2 -1'; = 백틱(${defaultResult} + 10) * 3 / 2 -1백틱; ㄴ 문자열 사이에 데이터 값을 넣는 경우 ㄴ 백틱으로 가독성을 높일 수 있다.

컴퓨터 파일 경로는 바탕화면>>폴더1>>폴더2>>파일 순으로 뒤로 가기/앞으로 가기 라고 표현하지만 터미널에선 위/아래로 간다라고 표현한다. 즉, 최하단이 가장 최신 정보.

단, Log는 역순

가장 최신 정보가 최상단에 노출된다. (History(과거) 위에 현재진행형으로 계속 쌓이는 구조) 커밋 여러 개가 쌓여있는걸(History가 쌓이면) 로그라고 한다.

Commit history :: 시간에 대한 이벤트, 타임라인

맨 밑에 있는 커밋이 가장 오래됐으며 근본. 즉, Main이다.

Branch

Main branch는 제일 최초에 생성된다. 이 Main branch를 시작으로 새로운 브랜치들 복사, 파생된다. 협업 관점에서 함부로 건드리지 않는다. (단, 이름이 Main일 뿐 어떠한 의미나 기능이 있는건 아니니 착각X)

Origin

origin은 핀포인트 개념으로 이해하면 쉽다. Push할 때 마다 위치가 바뀐다. Push란 내가 이 때 github에 백업했다는 의미이다. 그렇기에 HEAD(로컬 위치)와 origin(깃헙 위치)의 위치가 다를 수 있다.

자주 사용하는 여러 명령어는 개인 노션에 정리했으니 필요할 때 마다 참고하기.

그동안 노션이나 velog 등 개발자들이 주로 사용하는 툴들을 보면 딱히 에디터를 이용하지 않고도, 코딩하듯 <tag>로 바로바로 마크업하듯 글 쓰는 행위에 대한 정확한 명칭을 몰랐는데 MarkDown문법이였다.

readme.md는 MarkDown 문법으로 이루어져있다. h1~h6은 #~######으로. <u>은 밑줄, <ol>, <ui>은 목록, <a>는 링크, <img>는 이미지 등 HTML 마크업 동일하다. 단, 모든 HTML 마크업을 대신하지 못한다.

(Grave)가 1개만 있는게 인라인 코드 강조

(Grave)가 3개있는게 블럭 코드 강조

(Grave) `가 3개 있어도 문자의 양옆에 바로 붙으면 인라인 코드 강조로 사용가능하다.

앞으로 velog를 적을 때 MarkDown문법을 적극활용해보기.
참조 블로그-MarkDown 사용법 총정리

<h1>Array</h1>
<script>
    var squad = ["taeil", "jhonny", "taeyong", "yuta"]
 </script>
<h2>0번째 문자열 출력</h2>
<script>
    document.write(squad[0]);
</script>
<h2>문자열 갯수 출력</h2>
<script>
    document.write(squad.length);
</script>

ex) 변수보다 적게 반복 (0,1,2회 총 3번)
<ul>
  <script>
      document.write('<li>1</li>');
      var i = 0; 
      while(i < 3){
      document.write('<li>2</li>');
      document.write('<li>3</li>');
      i = i + 1;
      }
      document.write('<li>4 </li>');
  </script>
</ul>

ex) 변수 length보다 적게 반복 (더 효율적)
<h1>Loop & Array</h1>
<script>
    var squad = ['taeil','jhonny','taeyong','yuta'];
</script>
<h2>nct127</h2>
<ul>
    <script>
    var i = 0;    
    while(i < squad.length){    
    document.write('<li><a href="http://a.com/'+squad[i]+
    '">'+squad[i]+'</a></li>');
    i = i + 1;
    }    
    </script>
</ul>

참조 유튜브: 생활코딩-배열과 반복문

ex) true

<h1>1===1</h1>
<script>
    document.write(1===1);
</script>

ex) false

<h1>1===2</h1>
<script>
    document.write(1===2);
</script>

ex) true 

<h1>1&lt;2</h1>
<script>
    document.write(1<2);
</script>

ex) false

<h1>1&lt;1</h1>
<script>
    document.write(1<1);
</script>

1<2 = 1 Ampersand less then 2 -> 1>2

참조 유튜브: 생활코딩

if 조건문에는 불리언이 따라온다.

<script>
  document.write("1<br>");
  if(true) {
      document.write("2<br>");
  } else {
      document.write("3<br>");
  }
  document.write("4<br>");
</script>

1
2
4

<script>
  document.write("1<br>");
  if(false) {
      document.write("2<br>");
  } else {
      document.write("3<br>");
  }
  document.write("4<br>");
</script>  

1
3
4

조건문을 사용할 땐 중복을 줄이기 위해 리팩토링에 유의하면 좋음.

변수 variable ex) x = 1;과 같이 변할 수 있는 수. 우항에 따라 x엔 다른 결과가 들어갈 수 있다.

var name = 'song';
alert("hello, I'm"+name+"Nice to meet you!")

상수 constant ex) 1 = 2;은 불가능. 1은 변하지않고 항상 1이다.

=은 대입연산자.

BEM은 block, Element, Modifier를 뜻한다.

구조는 block__Element--Modifier이다. 이름을 연결할때는 block-name과 같이 하이픈 하나만 써서 연결한다.

Block 재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 부른다.

Element 블럭은 독립적인 형태인 반면, 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른데 쓸 수 없다.

Modifier 모디파이어는 블럭이나 엘리먼트의 속성을 담당한다.

<ul class="tab">
    <li class="tab__item tab__item--focused">탭 01</li>
    <li class="tab__item">탭 02</li>
    <li class="tab__item">탭 03</li>
</ul>

위 코드에서 --focused가 수식어에 해당한다. 저렇게 작성된걸 불리언(boolean)타입이라고 하는데, 그 값이 true라고 가정하고 사용한다.

원본 출처-css 방법론 - BEM 방식

내가 작업하면서 느꼈던 불편함이나 궁금증 중에는 좀 더 '효과적으로 클래스 명을 짓는 방법'이 있었다. 다른 사람이 봐도 바로 이해할 수 있는 범용적인 용어를 쓰는게 어려웠다. 이 부분은 디자인을 할 때 레이어 혹은 컴포넌트 이름을 정할 때도 똑같이 느끼는 부분이였다.

예를 들어 나는 디자인 회사에서 일할 땐 WEB 상단의 카테고리를 GNB로 불렀는데 코드 리뷰에선 'GNB가 무슨 뜻인지 모르겠다. Header라고 쓰는게 더 맞는 것 같다.' 라는 피드백이 돌아왔다.

그 외에도 내가 쓴 css코드가 길어지면 길어질수록 복잡해서 나도 cmd+f가 아니면 찾기 힘들다고 하자 semantic elements와 BEM을 공부해 적용해보라는 피드백을 들었다.

Semantic Elements 종류는 총 13가지

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

그동안 나는 <div class="header">로 사용했는데 semantic elements인 <header>로 더 간결하고 직관적으로 마크업이 가능하다.

그리고 semantic elements와 같이 reset css많이 사용한다.
reset css는 semantic elements가 가지고 있는 고유의 padding또는 margin등을 없애 마치 단어 그대로 _'어떤 의미의 용도로 사용한 태그'_를 완성시켜 준다.

*em은 부모에게 상속되는 값에 대한 배수. 작업량이 많아질수록 파악하기가 어렵고, 소수점으로 떨어져 지원안되는 경우도 있다.

*r(oot)em은 html에 적용된 폰트 사이즈를 기준으로 배수.

분명 단위가 두 가지라는 것은 em을 사용하는게 더 적절할 때가 있다는 말이지만 현재의 나로선 알수없으니 우선 em이 아닌 rem으로 작업해보기로 한다.

::before ::after가 맞지만 익스플로러 6, 7버전에 적용이 안되기 때문에 웹 표준화 및 최적화를 해야한다면 :before :after 싱글콜론으로 사용하길 권장한다고 한다.

a 태그에 title을 달고, 가상요소 content: attr(title)를 주면 title의 글이 변경돼도 디자인이 유지된다.

<div class="method">
    fadein
    <div class="method-list">
        <a class="text" title="글줄 길이가 이만큼 늘어나도 먹히나요?"></a>
    </div>
</div>

.method {
    font-size: 1.4rem;
    border-radius: 0.3em;
    background-color: #78c137;
    float: left;
    padding: 0.3em;
    color: white;
    line-height: 2.4;
    margin-right: 0.3em;
}
.method::before {
    content: '.';
    float: left;
}
.method-list {
    float: right;
}
.method-list::before {
    content: '(';
    float: left;
}
.method-list::after {
    content: ')';
    float: right;
}
.text::after {
    content: attr(title);
}
.type {
    white-space: nowrap;
}

숫자가 클수록 상단에 위치한다.

디자인으로 치면 레이어 위치를 위아래로 움직이는 느낌인 것 같다.

단, flex 사용시 객체들이 flex-item 처리가 되어 position 없이 z-index 단독 작용이 가능하다.

코딩 시 폰트 사이즈를 따로 주지않고 만약 font-size: 2em으로 할 경우 2배라는 뜻으로 32px의 폰트 크기를 갖게 된다.

검사를 살펴보면 폰트 크기보다 크게 잡히는데 이것이 리딩 영역을 위한 line height이다. 리딩영역은 폰트 종류별로 천차만별이다.

line height: normal이 폰트 고유의 리딩영역이고, normal이 아닌 1;로 할 경우 폰트 크기와 같은 line height를 가지게 된다.

ex)

.css { font-size: 2em; }

font-size는 32px < content는 NNpx

.css { 
    font-size: 2em;
    line height: 1;
    }

font-size 32px = content는 32px

위 img처럼 같은 크기의 다양한 종류의 폰트를 한 페이지에 사용해도 line height를 주게되면 동일한 line height 즉, 동일한 높이값(리딩영역)을 가지게 된다.