soojeong.log

CSS | perspective를 활용한 tarot card

Tue, 09 Nov 2021 17:43:33 GMT

3차원의 공간을 위해서는 원근감이 필요하다. 이때 사용할 수 있는 arribute는 perspective이다. 이전에는 사용 빈도수가 얼마나 될까? 라는 생각을 가졌다면, 최근에는 메타버스의 등장으로 더욱 주목받고 있는 arribute인 perspective에 대하여 학습하였다.

참고 문헌

1. perspective란?

perspective는 우리가 대상을 보는 거리

값이 적을수록 더 가까이 보게 되므로 효과가 더 극적으로 나타나게 된다. 예를 들어 같은 각도로 기울어진 물체를 멀리서 볼 때와 가까이서 볼 때, 가까이서 보게 되었을 때 그 기울어진 정도가 더 크게 느껴진다.

아래의 코드와 이미지를 통해서 이해를 해보자면,

css
.origin {
         width: 200px;
         height: 200px;
         border: 1px solid black;
         margin: 100px auto;
         /*첫 번째 그림*/
         perspective: 100px;
         /*두 번째 그림*/
         perspective: 400px;
     }

     .rotate-pannel {
         width: 200px;
         height: 200px;
         background: red;
         transform: rotateX(45deg);
     }

html

같은 각도로 rotateX(45deg) 되었지만, perspective의 값에 따라서 perspective: 100px;일 때와 perspective: 400px; 일 때의 원근감은 크게 나타남을 알 수 있게 되었다.

2. Y축의 소실점

이 화면은 아래의 코드를 입력하였을 때, 보이는 화면이다. 하나를 기준으로 rotate 할 때에는 몰랐는데, 여려 개의 박스에 적용하니 서로 다른 모습을 보이고 있다.

html



    
    
    
    perspective

그 이유는, perspective 속성을 부모 요소에 적용하였기 때문에 pannel들이 서로 다른 투영점(perspective) 즉, 다른 소실점(vanishing point)을 갖고 있기 때문이다.

3. 동일한 perspective 설정하기

3-1. 자식 요소에 transform 속성의 값으로 perspetive를 주고, 괄호 안에 수치를 입력

css
    .origin {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
        }

        .pannel {
            width: 200px;
            height: 200px;
            background: aqua;
            transform: perspective(400px);
            rotateY(45deg);
        }

3-2. 부모 요소에 perspective-origin 사용

소실점이 어디있는가를 나타내는 속성
기본 값은 perspective-origin: 50% 50%;

css 
        .origin {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
            perspective-origin: 50% 50%;
        }

        .pannel {
            width: 200px;
            height: 200px;
            background: aqua;
            transform: rotateY(45deg);
        }

4. perspective와 grid를 활용한 타로카드 뽑기

✏️ 설계

처음엔 perspective를 활용하여 어떻게 앞, 뒤를 나타낼 수 있을까 고민했다. 블로그에서 힌트를 얻어서 앞, 뒤를 나타내는 요소를 만들고 이를 하나의 카드처럼 보일 수 있게 위치 조정을 해주었다.
transform-style: preserve-3d는 이 perspective를 부모로부터 받아 자신을 통과해 자식까지 전달한다.
backface-visibility: hidden는 3D Transform에서 요소의 뒷면을 숨기는 역할을 한다. hidden 처리하지 않으면 앞면/뒷면이 함께 보이는 문제가 발생한다.
https://imjignesh.com/how-css-perspective-works/ 과 https://nykim.work/26 를 참고하여 구현하였다.
위치는 grid를 활용하여 한 줄에 5개의 카드가 나타날 수 있도록 하였다.

📒 나의 생각 역시 만들고 싶은 것을 만들면 더 열심히 그리고 재미나게 배울 수 있었다. 그리고 모든 것을 알지 못해도, 원하는 것에 대하여 구글링하며 참조하면 구현이 가능하다는 것도 또 다시 깨달았다. 여기서도 추가로 구현하고 싶은 것들이 생각이 났는데, JS를 적용하여 해당하는 카드를 클릭했을 때, 모달 창이 떠서 해당 카드에 대한 설명을 사용자에게 전달해주면 이게 바로..! 온라인 타로가 아닐까? 하는 생각과 함께 이걸 더 디벨롭하면 심리테스트나, mbti 같은 재미난 결과값을 보여주는 프로젝트를 만들 수 있을 것이라고 생각했다. 결론은 레이아웃 구성한 마크업에 JS를 달아보는 일을 꼭 하자는 것..!

CSS | display:grid; 그런데 mini-project를 곁들인

Tue, 09 Nov 2021 16:19:54 GMT

flex를 알면 더 수월하게 공부할 수 있다고 생각했던 grid, 막상 적용하려니 쉽지 않아서 mini-project를 통해서 연습해보았다.

참고문헌 : https://studiomeal.com/archives/533

1. Flex와 Grid의 차이점

Flex는 한 방향 레이아웃 시스템이고 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

2.Flex와 Grid의 공통점

display:grid; : 그리드 컨테이너와 아이템을 설정한다. = display:flex;
그리드 컨테이너 : 그리드의 가장 바깥영역 = display:flex;를 적용한 부모 요소
그리드 아이템 : 그리드 컨테이너의 자식 요소들 = flex item

3. Grid의 arrtibute

그리드 트랙 : 그리드의 행(row) 또는 열(column) mian, cross axis
그리드 셀 : 그리드의 한 칸 (개념적인 정의)
그리드 라인 : 그리드 셀을 구분하는 선
그리드 넘버 : 그리드 라인의 각 번호
그리드 갭 : 그리드 셀 사이의 간격
그리드 에어리어 : 그리드 셀의 집합

4. 실전 적용

그리드의 특징 : 컨테이너를 꽉 채우려고 한다.
display: grid; 만 적용한다고 변화하지 않는다. (item이 block인 경우) flex의 경우엔 부모 요소에 display: flex;만 적어줘도 수평으로 고르게 정렬되었는데, 아무런 변화가 없어서 그리드가 잘 적용된 건가? 하였다.
그리드 형태 정의 : grid-template-rows,grid-template-columns

컨테이너에 Grid 트랙의 크기들을 지정해주는 속성이다. 이때, grid-template-rows는 행(row)의 배치를 나타내며, grid-template-columns는 열(column)의 배치를 나타낸다.
```
css

/* 열의 개수 설정 */
/* grid-template-columns: 100px 100px 100px; */
/* grid-template-columns: 1fr 1fr 1fr; */

/* `grid-template-columns` : 열의 넓이 설정 */
/* `grid-template-rows` : 행의 높이를 설정 */
```
repeat 함수 repeat는 반복되는 값을 자동으로 처리할 수 있는 함수이다.
```
css
/* repeat`( 적용할 트랙의 갯수, 반복할 수치 ) 함수를 이용하면 그리드 트랙 별 수치 반복 설정 */
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 100px 100px;
```
위 예제 코드의 두번째 속성을 repeat 함수로 나타내어 보면, grid-template-rows: repeat(3, 100px); 로 나타낼 수 있다.

추가로,fr은 fraction의 약어로, 숫자 비율대로 트랙의 크기를 균일하게 나누어 준다.
gap : row-gap, column-gap, gap

margin과 유사하다.
단 fr 단위가 아닌 고정단위일때는 gap의 영역을 포함해서 작동하여 스크롤이 생긴다.
row-gap, column-gap의 축약형이 gap이다.

css
.container {
    row-gap: 10px;
    /* row의 간격을 10px로 */
    column-gap: 20px;
    /* column의 간격을 20px로 */
}

.container {
    gap: 10px 20px;
    /* row-gap: 10px; column-gap: 20px; */
}

.container {
    gap: 20px;
    /* row-gap: 20px; column-gap: 20px; */
}

각 셀의 영역 지정 Grid 라인 번호를 이용해서 column과 row의 범위를 결정한다. 한글과 컴퓨터의 셀 병합과 유사하다고 생각하면 이해가 쉽다.

grid-column-start : column 시작 번호
grid-column-end : column 끝 번호
grid-column : start와 end 속성을 한번에 쓰는 축약형
grid-row-start : row 시작 번호
grid-row-end : row 끝 번호
grid-row : start와 end 속성을 한번에 쓰는 축약형

css
/* grid-column-start: 1;*/
/*grid-column-end: 3; */

/* 축약형 */
/* grid-column: 1 / 3; */

/* row */
/* grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1/3;

/* span : 칸의 갯수 */
/* span 없다면 기존 그리드 라인과 동일함 */
/* 1번 라인에서 3칸 */
grid-row: 1/ span 3;

5. Grid를 활용한 계산기 만들기

✏️ 설계

숫자 값이 출력되는 input tag grid-column 적용하기
4 * 5 의 그리드 만들기
숫자 '0'에 grid-column 적용하기

💻 코드

html



  
  
  
  calculator

📒 나의 생각

실제 아이폰 유저인 나로서는 똑같은 UI인 계산기를 바탕으로 재미있게 grid를 실습할 수 있었다. 이후에는 JS를 활용해서 실제로 계산이 가능한 계산기를 만들어서 project를 더 빌드해야겠다는 생각을 하였다.

CSS |flex-basis, flex-grow, flex-shrink

Mon, 08 Nov 2021 16:02:28 GMT

flex를 심도 있게 공부하고 싶어서 레이아웃 잡는 것 외에 flex item에 적용하는 속성들에 대하여 학습하기로 하였다.

1. flex-basis

유연한 박스의 기본 영역. flex item들의 기본 점유 크기를 설정한다.
width, height 와 다른점은 axis 방향에 따라 달라진다는 것이다. (flex-direction이 row일 때는 너비, column일 때는 높이)
기본 값은 auto 이며, 이때에는 width, height 값은 가 적용된다. 반대로, flex-basis가 적용되어 있다면 width, height 값은 무시되어 컨텐츠의 크기를 갖게된다.

2. flex-grow

유연하게 늘리기
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성이다.
flex-grow에는 숫자값이 들어가며, 기본값인 0 보다 큰 값이 들어가면 해당 아이템이 빈 공간을 메우게 된다.
flex-grow에 들어가는 숫자값은 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.

css
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

여백의 비는 정확히 1:2:1이다. 정수 뿐 아니라 소수 비율도 가능하다.

3. flex-shrink

유연하게 줄이기
flex-shrink는 flex-grow와 쌍을 이루는 속성이다.
flex-shrink는 flex-basis의 값보다 작아질 수 있는지 결정하는 속성이다.
flex-shrink에는 숫자값이 들어가며, 0 보다 큰 값이 들어가면 해당 아이템이 flex-basis보다 작아진다.
기본값은 1 이기 때문에 적용하지 않았어도 아이템이 flex-basis보다 작다.
flex-shrink를 0 으로 적용하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 만들 수 있다. 이때, 고정 크기는 width로 설정한다.

css
.container {
    display: flex;
}
.item:nth-child(1) {
    flex-shrink: 0;
    width: 100px;
}
.item:nth-child(2) {
    flex-grow: 1;
}

4. flex-grow, flex-shrink, flex-basis의 축약형 속성

서로 관련된 속성이기 때문에, 축약형을 쓰는 것이 편리하다. 단, 주의할 점은 flex: 1; 과 같이 flex-basis를 생략해서 쓰면 flex-basis의 값은 0 이다.

css

.item {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
    flex: 1 1 auto;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    flex: 1 500px;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

참고 자료
https://studiomeal.com/archives/197

Algorithm | 신규 아이디 추천

Thu, 04 Nov 2021 08:33:40 GMT

문제

로또의 최고 순위와 최저 순위 문제 확인 👉 https://programmers.co.kr/learn/courses/30/lessons/72410

나의 풀이

function solution(new_id) {
  // 1단계
  new_id = new_id.toLowerCase();
  // 2단계
  new_id = new_id.replace(/[^\w\.\-]/g, '');
  // 3단계
  new_id = new_id.replace(/[\.]{2,}/g, '.');
  // 4단계
  new_id = new_id.replace(/^\./, '');
  // 4단계
  new_id = new_id.replace(/\.$/, '');
  // 5단계
  if (!new_id) {
    new_id = 'a';
  }
  // 6단계
  if (new_id.length >= 16) {
    new_id = new_id.slice(0, 15);
    new_id = new_id.replace(/\.$/, '');
  }
  // 단계
  if (new_id.length <= 2) {
    new_id = new_id.padEnd(3, new_id.split('').reverse().join(''));
  }
  return new_id;
}

문제를 보고, 1-7 단계를 하나씩 해결하자고 생각하였다.

1단계 소문자로 치환 : toLowerCase()
2단계 특정 문자 제거 : replace()
3단계 특정 문자 치환 : replace()
4단계 특정 문자 제거 : replace()
5단계 'a' 대입 : 직접 대입
6단계 조건문, 특정 문자 제거 : slice(), replace()
7단계 조건문, 특정 문자 추가(기존 문자열의 맨 끝) : padEnd(), split().reverse().join()

메서드들을 적용하기 전, array에 익숙해져 있어 String을 array안에 각각 담아서 적용하려고 했다. 하지만 array에 적용되는 메서드 말고 String에 적용할 수 있는 메서드를 찾아서 적용하였다.

그렇게 새롭게 알게된 javascript 메서드 padEnd()이었다. padEnd(), padStart()는 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 메서드 이름에서도 추론할 수 있 듯이, padEnd()의 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다. padStart()의 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다.

참고링크
padStart()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
padEnd()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

다른사람 풀이

function solution(new_id) {
  const answer = new_id
    .toLowerCase() // 1
    .replace(/[^\w-_.]/g, '') // 2
    .replace(/\.+/g, '.') // 3
    .replace(/^\.|\.$/g, '') // 4
    .replace(/^$/, 'a') // 5
    .slice(0, 15)
    .replace(/\.$/, ''); // 6
  const len = answer.length;
  return len > 2 ? answer : answer + answer.charAt(len - 1).repeat(3 - len);
}

✏️ 내 코드와의 차이점

모든 코드가 체이닝 기법으로 적용되었다.
정규 표현식을 사용하여 특정 문자를 제거하고, 치환하고, 대입하였다
나는 맨 마지막 문자열을 찾기 위해서 기존 문자열을 거꾸로 변환하여 반복하였다. 하지만 다른 사람의 코드에서는 맨 마지막, 7단계의 경우는 조건식을 return 하였다. 이때 적용된 메서드는 charAt(), repeat()로 적용하여 마지막 글자를 찾아서 반복되게 적용하였다.

참고링크
charAt()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charAt repeat()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

Algorithm | H-Index

Fri, 22 Oct 2021 11:53:30 GMT

문제

어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요.

제한사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다.

입출력 예

citations	return
[3, 0, 6, 1, 5]	3

입출력 예 설명 이 과학자가 발표한 논문의 수는 5편이고, 그중 3편의 논문은 3회 이상 인용되었습니다. 그리고 나머지 2편의 논문은 3회 이하 인용되었기 때문에 이 과학자의 H-Index는 3입니다.

풀이 문제를 이해 자체가 어려웠다. 아래 링크를 통해서 h-index에 대한 이해를 완료한 뒤 문제를 해결하니 이해할 수 있었다. https://www.ibric.org/myboard/read.php?Board=news&id=270333

✏️ point

내림차순 정렬(인용된 횟수가 큰 순서로 정렬)
피인용수(citations(i))가 논문수(i)와 같아지거나 피인용수가 논문수보다 작아지기 시작하는 숫자가 바로 h(=answer)이다!

function solution(citations) {

    let answers = 0;
    for (let i = 0; i < citations.length; i++) {
        if (i < citations[i]) {
            answers++;
        }
    }

    return answers;
}

CSS Attribute Selector(CSS 속성 선택자)

Fri, 15 Oct 2021 13:56:36 GMT

SCSS로 UI를 스타일링하면서 공통의 attribute가 있다면 이를 통하여 스타일 속성을 지정하는 것이 편리할 것이라고 생각을 하였다. class, lang, href 등 다양한 attribute를 적용할 수 있다.

속성 선택자 정리

-[attr] : attr이라는 이름의 특성을 가진 요소를 선택합니다. -[attr=value] : attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. -[attr~=value] : attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다. 즉, 여러 개의 class가 함께 지정되어 있어도 attr를 특성값으로 가졌다면 선택합니다. -[attr|=value] : attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 즉, 시작하는 요소로 선택하되, 하이픈이 붙어있는 요소들도 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다. -[attr^=value] : attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다. -[attr$=value] attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다. -[attr*=value] : attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다. -[attr operator value i] : 괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다) -[attr operator value s] : 괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)

속성 선택자 예제

a 태그를 예제로 보면,

CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

HTML


  Internal link
  Example link
  Insensitive internal link
  Example org link
  Example https org link

결과

참고문헌 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Core Javascript | 데이터 타입

Fri, 08 Oct 2021 06:53:44 GMT

코어 자바스크립트를 보며 공부한 내용입니다.

1. 데이터 타입의 종류

1-1. 기본형(primitive type)

불변값을 가진다.

Number(숫자)
String(문자열)
Boolean(T,F)
null
undefine

1-2. 참조형(reference type)

가변값을 가진다.

Object(객체)
- Array(배열)
- Function(함수)
- Date(날짜)
- RegExp(정규표현식)
  2. 데이터 타입에 관한 배경 지식
  모든 데이터는 바이트 단위의 식별자, 즉 메모리 주솟값을 통해 서로 구분하고 연결합니다.
  3. 변수 선언과 데이터 할당
  
  3-1. 변수
변수 : 변경가능한 데이터가 담길 수 있는 공간
식별자 : 그 변수의 이름
변수 선언?
1. 컴퓨터는 메모리의 빈 공간에 식별자 저장
2. 그 공간에 자동으로 undefine 할당
3. 그 변수에 기본형 데이터를 할 당하려고 하면 별도의 공간에 데이터를 저장
4. 그 공간의 주소를 변수의 값 영역에 할당

4. 기본형 데이터와 참조형 데이터

기본형 데이터

모두 불변 값이다.
즉, 한번 만든 값은 변경이 불가능하며 변경은 새로 만드는 동작을 통해서만 이루어진다.
한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

참조형 데이터

기본 적인 성질은 가변값인 경우가 많다. : 객체의 변수(프로퍼티) 영역이 별도로 존재하기 때문에, 참조형 데이터는 불변하지 않다(가변값이다).
하지만, 모두 가변값일 것 같지만 설정에 따라 변경이 불가하거나 아예 불변 값으로 활용하는 방법이 있다.
중첩 객체(nested object): 참조형 데이터의 프로퍼티에 다시 참조형 데이터를 할당하는 경우. 이때, 참조형 데이터를 재할당하는 경우 참조 카운트가 0이 되면 메모리 주소는 가비지 컬렉터의 수거 대상이 된다. -> 참조 카운트 : 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수 -> 가비지 컬렉터 : 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거한다. 이때 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.

변수 복사 비교

변수 복사 과정은 기본형, 참조형 데이터 모두 같은 주소를 바라보게 되는 저에서 동일하다.
복사 과정은 동일하나, 데이터할당 과정에서 이미 차이가 있기 때문에 변수 복사 이후 동작 차이가 있다.
자바스트립트의 모든 데이터 타입은 참조형 데이터이다.
기본형은 주솟값을 복사하는 과정이 한 번 만 이뤄지고, 참조형은 한단 계 더 거치게 된다.
참조형 데이터가 '가변'이라고 설명 할 때 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 내부 프로퍼티를 변경할 때만 성립하는 것이다.

5. 불변 객체

:값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우 필요

얕은 복사 : 바로 아래 단계의 값만 복사하는 방법
깊은 복사 : 내부의 모든 값들을 하나하나 찾아 전부 복사하는 방법

즉, 기본형 데이터의 경우 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티를 복사하기 때문에 깊은 복사가 필요하다.

6. undefined와 null

undefined와 null 은 없음을 나타내는 값

undefined : 어떤 변수에 값이 존재하지 않을 경우 다만, 본래의 의미에 따라 사용자가 없음을 표현하기 위해 명시적으로 undefined를 대입하는 것은 지양해야함.
null : 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값 주의점 ! type of null은 object이다. 따라서, 비교할 경우 동등연산자(==)이 아닌 일치연산자(===)을 써야 판별할 수 있다.

Core Javascript | 클래스

Wed, 06 Oct 2021 05:11:37 GMT

코어 자바스크립트를 보며 공부한 내용입니다.

0. 들어가며

** 자바스크립트는 프로토타입 기반 언어이다** => '상속'의 개념이 없어 상속에 대한 니즈가 발생하였다. => ES6에서 클래스 문법이 추가되었다.

1. 클래스와 인스턴스의 개념 이해

1-1. 클래스란?

어떤 사물의 공통 속성을 모아 정의한 추상적인 개념

상위 클래스(superclass) 같은 클래스에서 상위(superior)의 개념을 갖는 것
하위 클래스(subclass) 상위 클래스의 조건을 충족하면서 더욱 구체적인 조건이 추가된 것
1-2. 인스턴스란?

클래스의 속성이지니는 구체적인 사례

1-3. 프로그래밍 언어에서의 클래스

공통 요소를 지니는 집단을 분류하기 위한 개념
클래스가 먼저 정의 되어야 공통적인 요소를 지니는 개체들을 생성할 수 있다.
사용에 따라 추상적 or 구체적 개체가 될 수 있다.

2. 자바스크립트의 클래스

프로토타입 메서드 인스턴스에서 직접 호출 할 수 있는 메서드
스태틱 메서드 인스턴스에서 직접 접근할 수 없는 메서드 (생성자 함수를 this로 해야만 호출 가능)

1-3에서 언급한 "사용에 따라 추상적 or 구체적 개체가 될 수 있다."는 것의 의미는 아래와 같다.

1) Class가 프로토타입 메서드의 역할을 할 때에는 추상적 개체가 되고 2) Class가 스태틱 메서드의 역할을 할 경우, 클래스 자체가 하나의 개체로 취급된다.

3. 클래스 상속(ES6 이전)

클래스 상속을 흉내내기 위한 방법 3

전제조건 : constructor 프로퍼티가 원래의 생성자 함수를 바라보도록 조정해야한다.

SubClass.prototype에 SuperClass의 인스턴스 할당 => 다음 프로퍼티를 모두 삭제
빈 함수(Bridge)를 활용하는 방법
Object.create를 이용하는 방법

4. 클래스 상속(ES6)

var Rectangle = class {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }
    getArea () {
        return this.width * this.height;
    }
};

//ES6 클래스 문법 도입
var Square = class extends Rectangle {
    constructor (width) {
        super(width, width);
    }
    getArea () {
        console.log('size is :', super.getArea());
    }
};

class 명령어 뒤에 'extends'라는 키워드를 추가하면 상속관계 설정이 끝난다.
constructor 내부에서 super 라는 키워드를 함수처럼 사용할 수 있다. 이 함수는 SuperClass의 constructor를 실행한다
constructor 메서드를 제외한 다른 메서드에서는 super 키워드를 객체처럼 활용할 수 있다. 이때, 객체는 SuperClass.prototype을 바라보는데, 호출한 메서드의 this는 'super'가 아닌 원래의 this를 그대로 따른다.

Core Javascript | 클로저

Sun, 03 Oct 2021 23:03:45 GMT

코어 자바스크립트를 보며 공부한 내용입니다.

1. 클로저란?

: 클로저는 함수와 그 함수가 선언될 당시의 Lexical environment의 상호관계에 따른 형상 (MDN)

: 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상

: 외부 함수의 LexicalEnvironment가 가비지 컬렉팅 되지 않는 현상

LexicalEnvironment : 실행 컨텍스트 객체가 활성화 되는 시점에 수집된 정보 중 하나. 함수 실행 도중 변경되는 사항이 즉시 반영됨.

=> 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

외부로 전달하는 방법 1) return 2) 콜백 함수로 전달

2. 클로저와 메모리 관리

메모리 소모는 클로저의 본질적 특성
메모리 누수 : 개발자의 의도와 달리 어떤 값의 참조 카운트가 0이 되지 않아 가비지 컬렉터(Garbage Collector)의 수거가 되지 않는 경우
더 이상 사용하지 않게 된 클로저에 대해서 메모리 소모가 되지 않도록 관리해 줄 필요가 있음.
메모리 관리 방법 : 식별자에 기본 형 데이터(보통 null, undefined)를 할당

3. 클로저 활용 사례

1) 콜백 함수 내부에서 외부데이터를 이용하고자 할 때

2) 접근 권한 제어(정보 은닉) : 어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화해서 모듈간의 결합도를 낮추고 유연성을 높이고자 하는 현대 프로그래밍 언어의 중요한 개념 중 하나.

=> 접근 권한에는 public, private, protected이 있다.

3) 부분 적용 함수 : n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억 시켰다가, 나중에 (n-m)개의 인자를 넘기면 비로소 원래 함수의 실행 결과를 얻을 수 있게끔 하는 함수

4) 커링 함수: 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한 것

필요한 인자의 개수만큼 함수를 만들어 계속 리턴해주다가 마지막에 조합해서 리턴한다. 다만 인자가 많아질수록 가독성이 떨어진다는 단점이 있다.

ES6에서는 화살표 함수를 써서 간단하게 표기할 수 있다. => ES6에서는 화살표 함수를 써서 같은 내용을 단 한 줄에 표기 => 이해가 쉽다. => 각 단계에서 받은 인자들을 모두 마지막 단계에서 참조. 가비지 컬렉팅 되지 않고 메모리에 쌓였다가, 마지막 호출로 실행 컨텍스트가 종료된 후에야 비로소 한꺼번에 수거 => 지연 실행에 유용 : 당장 필요한 정보만 받아서 전달하고, 또 필요한 정보가 들어오면 전달하는 식으로 결국 마지막 인자가 넘어갈 때까지 함수 실행을 미루는 것 => 활용 방법 : config 파일 작성

// 기존 커링 함수
var curry3 = function (func) {
  return function (a) {
    return function (b) {
      return func(a, b);
    };
  };
};

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8)); // 10
console.log(getMaxWith10(25)); // 25

// ES6 화살표 함수
var curry = func => a => b => c => d => e => func(a, b, c, d, e);

Algorithm | K번째수

Thu, 16 Sep 2021 02:04:33 GMT

문제 설명

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.

예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면

array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

array의 길이는 1 이상 100 이하입니다. array의 각 원소는 1 이상 100 이하입니다. commands의 길이는 1 이상 50 이하입니다. commands의 각 원소는 길이가 3입니다.

첫번째 풀이 : 일단 답을 구하자

function solution(array, commands) {

  let result1 = array.slice(commands[0][0]-1, commands[0][1]).sort()[commands[0][2]-1];

  let result2 = array.slice(commands[1][0]-1, commands[1][1]).sort()[commands[1][2]-1];

  let result3 = array.slice(commands[2][0]-1, commands[2][1]).sort()[commands[2][2]-1];

  let answer = [result1, result2, result3];

  return answer;
}

답은 출력되었지만, 정확성 테스트를 모두 통과하지 못했다.

두번째 풀이 : 반복되는 부분을 줄이자

function solution(array, commands) {
  let answer = commands.map(el => {
    return array.slice(el[0] - 1, el[1]).sort()[el[2] - 1];
  });

  return answer;
}

첫번째 풀이에서 반복되는 것을 줄이고자 map을 사용하여 식을 도출했다. 하나를 제외하고 정확성 테스트 모두 통과하였다. 배열 매서드를 하나씩 확인하여 정확성을 테스트하던 중, sort메서드에서 문제점을 발견하였다.

Array.prototype.sort()
문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있습니다. 다음 함수는 배열을 오름차순으로 정렬합니다 (Infinity 및 NaN이 포함되어 있지 않은 경우)

function compareNumbers(a, b) {
  return a - b;
}

최종 풀이

function solution(array, commands) {
   let answer = commands.map(el => {
      return array.slice(el[0] - 1, el[1]).sort((a, b) => a - b)[el[2] - 1];
  });
  return answer
}

Core Javascript | 콜백함수

Sun, 12 Sep 2021 09:00:40 GMT

코어 자바스크립트를 보며 공부한 내용입니다.

목차

콜백함수란?
제어권
콜백함수는 함수다
콜백 함수 내부의 this에 다른 값 바인딩하기
콜백 지옥과 비동기 제어

1. 콜백함수란?

콜백함수

다른 코드(함수 or 메서드)의 인자로 넘겨주는 함수
제어권도 함께 위임한 함수

2. 제어권

콜백함수의 제어권을 넘겨받은 코드가 갖는 제어권

콜백함수를 호출하는 시점을 스스로 판단해서 실행
콜백함수를 호출할 때 인자로 넘길 값과 순서에 대한 제어권
콜백함수의 this에 대한 결정 ** 콜백함수의 this** 1) 무엇을 바라볼지 정해져 있는 경우 ⇒ 해당 객체 2) 정해지지 않은 경우 ⇒ 전역 객체 3) 사용자 임의로 변경하고 싶은 경우 ⇒ bind 메서드 활용
3. 콜백함수는 함수다
*콜백함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로서 호출된다. *

예제를 통해 살펴보면,

let obj = {
  vals : [1, 2, 3],
  logValues : function(v, i) {
    console.log(this, v, i)
  }
};
obj.logValues(1,2); //result01
[4,5,6].forEach(obj.logValues); // result02

결과

logValue는

1) result01 ⇒ 메서드 (dot이 있으니 메서드로서 전달 : 함수로 호출됨)

this : obj
v : 1
i : 2

2) realt02 ⇒ forEach함수의 콜백함수

this : 전역객체(Window) arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) ✔️ _전역객체로 출력되는 이유 : obj를 this로 하는 메서드가 아닌 obj.logValues가 가리키는 함수만 전달 ⇒ 별도로 obj 인자를 지정하지 않는다면, obj와 직접적인 연관이 없다.
v : 4, 5, 6 (CurrentValue)
i : 0, 1, 2 (index)

Array.prototype.forEach() : forEach MDN

4. 콜백 함수 내부의 this에 다른 값 바인딩하기

콜백 함수 내부의 this가 객체를 바라보게 하는 방법

클로저 : 전통적 방법
bind 메서드 이용하는 방법
5. 콜백 지옥과 비동기 제어

동기와 비동기

1. 동기와 비동기는 서로 반대의 개념이다.
동기 : 즉시 처리가 가능한 대부분의 코드
비동기 : 별도의 요청, 실행 대기, 보류가 필요한 코드 (언제 코드가 실행될지 예측할 수 없는 코드)

2. 자바스크립트는 동기적이다.

호이스팅이 된 이후부터 코드가 작성한 순서(정해진)에 맞춰서 하나씩 동기적으로 실행된다.
호이스팅이란 ? var, function 등의 선언이 자동적으로 코드의 상단으로 옮겨지는 것

3. Callback은 항상 비동기일까? Nope!

// 1. 동기 콜백 : 즉각적

//printImmediately  함수가 호이스팅 되면서 맨위에서 실행되고 1,3,hello,2 순으로 콘솔 확인
function printImmediately(print){
  print();
}
printImmediately(()=>console.log('synchronous callback'));

// 2. 비동기 콜백 : 언제 실행될지 예측할 수 없는 콜백
function printWithDelay(print, timeout){
  setTimeout(print,timeout);
}
printWithDelay(()=>console.log('async callback'), 2000); // 비동기

드림코딩 by 엘리의 강의를 참고하였습니다.

콜백 지옥

콜백 함수 안의 콜백함수는 콜백 지옥을 초래할 수 있다. 가독성이 떨어지며, 에러 처리의 어려움이 있다.

해결 방법 1. 기명함수로 변환 : 일회성 함수를 전부 변수에 할당해야하는 단점

2. Promise(ES6) : new 연산자(Promise는 클래스이기 때문에 new 키워드 사용)와 함께 Promise 호출

Promise : 비동기를 간편하게 처리할 수 있는 자바스크립트 내장 오브젝트
resolve, reject 라는 executor 콜백 함수를 인자로 받음
정해진 시간에 기능을 수행하고나서 정상적으로 기능 수행(resolve)이되면 → 코드 진행 / 그렇지 않을 경우 → Error 오브젝트 반환(reject)
state(오퍼레이션 수행 상태) 1) pending(지정한 오퍼레이션 수행하고 있는 중) 2) fulfilled(오퍼레이션 성공) or rejected(오퍼레이션 실패)

3. Generator(ES6) : * 이 붙은 함수가 Generator 함수

Generator 함수 : Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수
Generator 함수 실행 ⇒ Iterator 반환 ⇒ Iterator 내의 next 메서드 호출 ⇒ Generator 함수 내 첫 번째 yield에서 함수 실행을 멈춤 ⇒ 다시 next 메서드 호출하여 그 다음 yield에서 함수 실행을 멈춤 : 반복

즉, 비동기 작업이 완료되는 시점마다 next 메서드 호출하여 Generator 함수 내부 소스가 위 → 아래로 진행된다.

자세한 셜명은 function* MDN 참고

4. Promise + async + await

async : 비동기 작업을 수행하고자 하는 함수 앞에 표기
await : 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 표기

⇒ Promise 에서 then 체이닝을 계속하다보면 코드가 난잡해지는 것을 방지

드림코딩 by 엘리 의 강의를 참고하였습니다.

Unit Test

Sun, 25 Jul 2021 08:33:43 GMT

✔️ CheckList

✔️ 테스트 자동화의 중요성 ✔️ 시스템을 테스트하는 3가지 방법(UI test, Integration Test, Unit Test) ✔️ 유닛테스트의 중요성 ✔️ 유닛테스트의 장점 ✔️ Unit test를 구현할때 지켜야 하는 일반적인 원칙

테스트 자동화의 중요성

메뉴얼 테스트 👉🏻 서비스 오픈 전, 개발자가 아닌 타인이 모든 기능 & 버튼을 누르며 확인하는 것 👉🏻 테스트 실행 속도가 늦고, 인력 소모가 크다 👉🏻 비용, 휴먼 에러 발생

따라서 테스트 자동화가 중요하다.

시스템 테스트 방법 (Testing Pyramid)

전체 테스트 비중을 아래와 같은 수치로 구현하는 것이 권장된다.

1. End-TO-End testing(UI testing) 10%

👉🏻 프론드, 백엔드 서버가 둘 다 필요하며, 인력 소모가 크다. 👉🏻 프론트에서 활용함. 👉🏻 UI test tool : cypress

2. Intergrating testing - 20%

👉🏻 백은 백, 프론트는 프론트로 나누어 테스트한다. (포스트맨, httpie 등) 👉🏻 프론트에서는 mock-up 데이터가 가져와지는 지 테스트하는 것이라고 생각하면 된다.

3. Unit testing - 70%

👉🏻 코드로 코드를 테스트 한다. 가장 작은 단위인 함수(메서드) 단위로 확인한다. 👉🏻 프론트 : 함수형 컴포넌트 단위로 테스트 코드를 짜서 실행한다. 제스트를 통해서 리액트 컴포넌트 확인을 할 수 있다. jest, enzyme 👉🏻 백 : pytest, unittest

Unit Test 장점

유닛 테스트는 UI Test 또는 Integration Test 보다 테스트 비용이 적게든다. : UI Test는 백엔드 서버와 프론트를 연동하여 사람이 직접 테스트하지만, 유닛 테스트는 사람이 스크립트로 한꺼번에 자동으로 실행하기 때문이다.
유닛 테스트는 다른 테스트에 비해서 실행 속도가 빠르다. : 유닛테스트를 활용하면 하루에도 배포를 여러번 할 수 있어 개발 및 배포 속도에 중요한 영향을 주기 때문에 개발할 때 최대한 활용하는게 좋다.
중장기적으로 유지 보수가 쉽다 regression 테스트 : 이전에 통과했던 테스트 집합을 가지고 버그를 찾기 위해서 이전에 테스트 되었던 유닛테스트를 반복하는 것이다. regression 테스트도 반복적으로 수행하여 중장기적으로 유지 보수가 쉽다.
버그 방지 유닛테스트를 잘 짜놓으면 유닛테스트가 되었던 코드에서는 버그가 거의 발견되지 않을 것이다. 그 이후, 버그가 발견되는 경우는 유닛테스트가 없어서 발생하는 경우일것이다. 따라서 발견된 버그에 대해서도 버그를 수정한 후 유닛테스트를 작성해놓으면 버그를 방지할 수 있다.

Unit test의 일반 원칙

테스트 유닛은 각 기능의 가장 작은 단위에 집중한다 : 함수, 메서드
각 테스트 유닛은 반드시 독립적이어야 한다.
테스트가 빠르게 돌 수 있도록 만들기 위해 노력해야한다.
지금 사용하고 있는 툴이 개별테스트나 테스트 케이스를 어떻게 수행하는지 배워야한다.
그날의 코딩을 시작하기 전에 항상 풀테스트 슈트를 돌려야한다.(기존 테스트가 잘 돌아가는지 먼저 체크한다.)
모두가 공유하는 저장소(ex. 깃헙)에 코드를 집어 넣기 전 자동으로 모든 테스트를 수행하도록 훅을 구현한다.
코드를 디버깅할 때 먼저 새로운 테스트를 작성한다.
테스트 함수에는 길고 서술적인 이름을 사용해야한다.
테스트 코드의 다른 의미는 새로운 개발자를 위한 안내서이다. 누구나 이해하기 쉽게 작성하는 것이 좋다!

✏️ Unit test에 대해서 공부하면서 개인적으로 느낀 점은 작은 단위로 개발을 하고 그 단위 안에 버그가 있는지, 코드가 잘 돌아가는지 테스트를 하면서 작업을 진행하면 어디서 발생한 버그(문제)들인지 캐치할 수 있을 것 같다고 생각했다.
✏️ 현재 나는 Unit test를 진행하진 않지만, 작업하는 내용들을 기능단위로 브랜치를 만들거나 컴포넌트화를 하는 것이 좋다고 생각했다. 이렇게 작업을 한다면 효율성도 높아지고, 코드들이 쌓인 이후에 어디서 문제가 발생한건지 알 수도 없는 미연의 상황을 방지할 수 있기 때문이다. (물론 버그잡는 일은 쉽진 않겠지만..🐛)

React | Kakao 소셜 로그인

Sat, 24 Jul 2021 13:12:04 GMT

Kakao Developers 문서를 참고하였습니다.

시작 전 준비사항

1. 내 어플리케이션 추가하기

kakao developers에 들어가서 내 어플리케이션 👉🏻 어플리케이션 추가하기 👉🏻 정보입력

해당 과정을 거치면 전체 어플리케이션에 내가 추가한 어플리케이션이 보인다.

2. 앱 키 확인하기

새로 만들어진 어플리케이션을 누르면 여러가지 정보들이 나오는데, 로그인 할 때 필요한 앱키를 확인할 수 있다.

3. 플랫폼 등록하기

설정하고자하는 플랫폼을 선택한다. Web 플랫폼 등록을 선택했다. 그 이후 도메인을 등록해준다.

❗️ 오류 페이지 ❗️ 오류의 이유는 도메인 주소 뒤에 /를 지우면 된다.

✔️ 성공 페이지 ✔️ 프론트에서 보기 위해서는 localhost:3000 포트를 이용해야한다.

등록이 완료되었다.

4. Redirect URI 등록

여기서, Redirect URI를 등록 관련 시 궁금한 점이 생겼다.

나는 메인으로 설정해주기 위해서 localhost:3000/로 지정해주었다. 현재 백엔드와 연결하지 않고 로그인을 진행해보았을 땐, 일단 메인으로 이동 하지 않는다.

추가로, REST API를 이용할 경우엔 Redirect URI가 필수라고 카카오 개발자 문서에 적혀있다. Javascript로 구현하고 있는 나에게 해당하지 않는 이야기인지 아닌지 구분하기가 어렵다.

현재 내 경우에는 아직 access_token에 대한 Redirect가 없기 때문에 메인화면으로 등록했지만 반영이되지 않고 있다고 생각한다. 완벽한 통신이 진행되지 않아서 그런게 아닐까 생각해본다. ( 백엔드 통신 후 블로그에 다시 업데이트 예정이다!)

5. 로그인 활성화 설정

활성화를 ON으로 바꾸어 주면 아래와 같이 확인이 가능하다.

6. Kakao SDK for JavaScript 설정하기

👉🏻 먼저, "react-kakao-login을 npm install 한다.

👉🏻 Step 1.웹 페이지에 JavaScript SDK 포함한다.


//index.html

👉🏻 Step 2.초기화하기

[내 애플리케이션] > [앱 키]에서 JavaScript 키를 확인합니다. 다음과 같이 JAVASCRIPT_KEY에 JavaScript 키를 할당하여 초기화 함수를 호출하고, 이어서 초기화가 잘 되었는지 확인하는 함수를 호출합니다.

함수 호출 성공!

7. init

카카오 개발자문서에는 위와 같이 init을 해주고 있다. 나는 Login 에서 필요한 것이기 때문에 Login.js에서 적용을 해줄거다.

//Login.js

 useEffect(() => {
    window.Kakao.init('JAVASCRIPT_KEY입력');
  }, []);

react hooks 를 사용하고 있어서 useEffect에 init설정을 적어주었다.

❗️ 여기서 window라는 위치를 설정해주기 전에는 함수 호출은 잘 되지만 토큰이 확인 안되는 문제를 발견했다...! 혹 동일한 문제를 겪고있다면 window.Kakao.init으로 접근해보자.

8. 버튼에 Kakao 로그인 연동하기

참고 : https://developers.kakao.com/tool/demo/login/login?method=dynamic

내가 선택한 구현 방법에 따른 코드를 확인할 수 있다. 코드를 복사하여 내 버튼과 연동시켜주면 된다 !

//Login.js
// 로그인 버튼 함수

const loginWithKakao = () => {
    window.Kakao.Auth.login({
      success: function (authObj) {
        console.log(authObj.access_token);
      },
      fail: function (err) {
        alert(JSON.stringify(err));
      },
    });
  };

//Login.js
//로그인 버튼

            
            카카오톡으로 로그인

9. 작동 완료 !

로그인 토큰도 잘 넘어온다! Redirect URI 부분에 대한 보충 설명, 피드백 받습니다🙏

Git - Rebase

Wed, 21 Jul 2021 00:33:18 GMT

git merge 명령어 대신 git rebase 사용기

Goal

Git flow가 어떤 방식으로 운영 되는지 알고, main, develop, feature, release, hotfix 브랜치를 각각 구분하여 설명할 수 있다. 👉🏻 프로덕션 레벨의 코드도 개발 코드와 분리해서 관리해야하기 때문에 깃 브랜치 관리 전략이 생겨났고 이것은 = git flow이다.

👉🏻 메인, delvelop가 큰 줄기이다. feature, release, hotfix는 기능단위 브랜치, 출시를 앞둔 브랜치, 급하게 오류를 잡는 브랜치이다.

branch를 병합하는 두 가지 방식인 rebase와 merge의 차이점에 대해 설명할 수 있다. 👉🏻 rebase : 브랜치 + 브랜치 명령어 => main의 최신 업데이트 상태의 뒤로가서 붙는다. 👉🏻 rebase를 사용하면 leaner한 이력관리가 가능해진다. 👉🏻 불필요한 merge 커밋이 없다. history 이력은 사라지는 점을 참고해야한다. 👉🏻 rebase 명령어를 사용하여 불필요한 커밋을 하나로 squash 할 수 있다.

branch

branch를 생성하는 이유? 코드가 서로 섞이지 않게 하기 위해서이다. 메인은 신성하니까...!

위에 짧게 기술하였지만, develop(개발단계)의 코드와 main을 나누어야한다. 왜냐하면 main에서 개발을 하다보면, 실제 사용하는 사용자들이 개발을 하는 단계에서 발생한 문제 때문에 이용을하지 못하기 때문이다.

feature

큰 기둥 브랜치 2개는 develop, main이다. 기능 단위의 브랜치인 feature는 main에서 합치는게 아닌 develop에서 합친다.

Release

develop단계가 완료되면 Release브랜치로, 그 후 main에서 합친다.

hotfix

hotfix의 정의 : 핫픽스(영어: hotfix)는 제품 사용 중에 발생하는 버그의 수정이나 취약점 보완, 또는 성능 향상을 위해 긴급히 배포되는 패치 프로그램

main에서 바로 따서 급하게 고치는 것. 따라서 나중에 develop 브랜치에 Merge 시켜를 시켜준다.

Merge VS Rebase

Git - MERGE

history가 중요한 경우 사용하는 명령어. 서로 다른 브랜치가 병합될 경우, 커밋 남긴 시점 사이사이에 들어와서 merge가 되고 merge commit이 맨 뒤로 온다.

Git - REBASE

깔끔한 이력 관리를 위한 명렁어. 베이스 커밋의 위치를 다시 잡는다. 한쪽에 있는 브랜치를 다른 브랜치에 병합하는 것. Rebase는 이력을 깔끔하게 정리할때 사용할 수 있는 장점이 있다.

이 때, commit을 하면서 3-4개가 쌓이면 squash를 해서 정리해야한다. 너무 많은 커밋이 쌓이면 충돌이 커밋 개수만큼 일어나기 때문이다..! 방법은 아래와 같다.

터미널에 아래와 같은 명령어를 입력한다.

git rebase -i main

여기서 i는 ? -i : interactive

명령어를 입력하면 아래와 같은 창이 뜬다.

커밋 메세지의 구조는 아래와 같다.

pick 커밋해쉬 커밋메세지
👉🏻 여기서 첫번째 메세지는 그대로 두고 👉🏻 두번째 메세지부터 pick 대신 s를 입력한다

TMI 나는 s대신-s를 적어서... 안됐었다..ㅎㅎ 다시 git rebase —-abort를 입력하고 다시 되돌려서 s만 입력한뒤 :wq로 저장하고 커밋 메세지를 제외한 나머지를 저장한다.

Squash : s 커밋을 하나로 합치는 명령어

추가로, 내가 최종 push한 PR 이후에 수정사항(commit 4)이 생긴다면, 그 이후 main에서 pull 받고 commit 4를 추가해준다.

이후 push를 진행하게되면 main에 있는 브랜치와 다른 commit을 가지고 있기 때문에 push가 거절된다.

이때 push뒤에 -f를 붙여서 force한다. 기본적으로 쓰지 않지만 push 올라가 있는거랑 똑같고, 내가 명확히 commit4만 추가만 된거 아니까 이런 경우에는 -f를 사용한다!

즉, 내가 아는 내용에 한하여 리베이스에서 추가 수정은 -f 하면된다.

Git rebase 충돌

충돌 발생 시, 에디터에서 충돌 해결 후 git add . → git rebase —continue 반복하면된다. commit은 필요하지 않다.

git add .
Git rebase --continue
아직 merge가 더 익숙하지만 새로운 방법인 rebase를 사용하면서 어떤 부분에서 각자 장단점을 갖는지 체험해보아야겠다 ! 🏔

AWS - Frontend 배포

Sun, 18 Jul 2021 15:10:59 GMT

프로젝트를 마무리하고 AWS를 통해 프로젝트 업로드 하기

1. AWS 계정 생성

먼저 AWS에 가입을 한다. 이때 신용카드 정보가 필요함으로 카드 준비 후, 가입 진행하는 것이 좋다.

2. Application 배포

👉🏻 로그인

로그인을 하면 관리 콘솔에서 AWS에 대한 전반적인 정보를 얻을 수 있다.

👉🏻 Region

인스턴스를 시작하기 전, Region을 오하이오로 설정한다. 여러 조건들과 비교해보았을 때 오하이오가 가장 나은 옵션이라고 한다.

👉🏻 프리 티어 서버 선택 : ubuntu

우분투, 64비트를 선택한다. 명확히는 모르지만 우분투가 다른 OS비해 합리적이라고 이야기를 들었던것 같다.. 아시는 분 계시다면...! 알려주셔요 Why 우분투..?

👉🏻 인스턴스 유형 선택

CPU, 메모리 등 서버의 규모를 선택해야한다. 프리 티어로 진행할 예정이기 때문에, t2.micro에서 시작한다. EC2에서는 컴퓨터와 데이터 전송에 따른 과금이 되기 때문에 이 부분에 유의하여야 한다.

👉🏻 인스턴스 구성

서브넷 : IP 주소 사용

퍼블릭 IP 자동 할당 : 활성화되면 자동으로 동적으로 퍼블릭 IP 자동 할당 (추후 고정 IP를 사용하고싶다면 엘라스틱 IP 설정을 해야한다고 한다)

종료 방식 : 중지

종료기능 방지 활성화 체크

👉🏻 스토리지 추가

용량을 기본 8GB 보다 높이게되면 요금이 부과되기 때문에 기본으로 설정하여 진행

👉🏻 태그 추가

키와 값 형태로 태그를 정의한다. 보통 키는 계정 이름, 값은 프로젝트 이름으로 한다.

👉🏻 보안 그룹 설정

EC2에서는 http, https 의 접속을 허용해야한다. 그러기 위해선 규칙 추가를 해야한다. 나는 포트범위 8000로 웹 서버를 돌려야하기 때문에 규칙을 추가해주었다. 이때 포트범위를 8000으로 적고, 소스를 위치 무관으로 설정해주어야한다.

👉🏻 새로 계정을 만들었다면

키페어를 생성해야한다. 이때 키페어는 단 한번만 다운로드 할 수 있기 때문에 이점에 유의하여 안전한 곳에 저장해야한다고 한다!

👉🏻 인스턴스 실행 !

3. Application 배포 (프론트)

우리가 만든 프로젝트를 서버에 올리려면 어떻게 해야할까 ?

소스 코드가 필요하다.

git

npm

👉🏻 우분투 서버 열기

AWS 폴더를 만들어 키페어를 저장해두고, 우분투 서버를 연다.

ssh -i key이름.pem ubuntu@나의 aws ip주소

👉🏻 git clone 하기

git clone 프로젝트_repo_주소

👉🏻 우분투 서버에 node, npm 다시 설치하기

원래는 직접 node, npm 페이지에서 다운을 받아서 소스 코드에 적용시켰지만, 터미널에서는 그렇게 진행하기가 어렵기 때문에 명령어를 통해 npm을 설치해야한다.

curl -sL https://deb.nodesource.com/setup_10.x | sudo bash - sudo apt-get update // 선택사항 sudo apt-get install nodejs

node가 설치되었으니 npm도 설치 !

cd 프로젝트_repo_주소 npm install

버전을 확인해보니 잘 설치된 것 같으니, 해당 프로젝트에 필요한 dependecies들이 설치 되도록 npm install을 시작한다.

👉🏻 npm run build

지금까지 실행한 npm start는 개발모드로, 콘솔로그나 디버깅을 하는 과정 중 브라우저의 스크립트에 모든 소스 코드가 나와있었다. 하지만 배포가 될 때는 소스코드가 다 노출되면 안되며 html, css, javascript 하나로 결과물이 나와야 한다. 즉 프로덕트 모드를 실행해야하는데 이때 npm run build를 해주어야 하는 것이다.

빌드 한 후, 확인을 해보면 build라는 폴더가 생겼고 이 안에는 하나의 html, css, javascript가 있다.

👉🏻 npm install express 설치

웹 서버는 백앤드의 영역이기 때문에, 프론드 앤드 용 웹서버가 필요하다. 따라서 node.js로 웹서버를 띄우려면 외부 라이브러리인 npm install express를 설치해야한다.

npm install express --save

package.json의 dependencies에 남겨야하니까 --save 잊지말기!!

👉🏻 server.js

npm install express 설치만 한다고 되는 것이 아니다!

vi server.js

server 라는 이름은 임의로 설정할 수 있다.

// insert 모드로 아래 코드 복사 붙여넣기 const http = require("http"); const express = require("express"); const path = require("path"); const app = express(); const port = 8000; app.get("/ping", (req, res) => { res.send("pong"); }); app.use(express.static(path.join(__dirname, "build"))); //어떤 경로로 들어오건 간에, build폴더 안의 index.html을 응답해라 app.get("/*", (req, res) => { res.set({ "Cache-Control": "no-cache, no-store, must-revalidate", Pragma: "no-cache", Date: Date.now() }); res.sendFile(path.join(__dirname, "build", "index.html")); }); http.createServer(app).listen(port, () => { console.log(`app listening at ${port}`); });

⬆️ 백엔드 코드이지만, 자바스크립트로 되어있다. 브라우저에서 돌아가는 것이 아니라, 서버 환경에서 돌아가는 자바스크립트이다.

설치 완료 ! cosnt port = 8000은 인스턴스에서 설정한 포트 범위이다. 이렇게 하면 서버 코드가 준비가 되었다.

👉🏻 build 후 run server

node code를 실행하기 위해서는 node + 파일 경로를 입력해주면 된다.

npm run build node server.js

우와 ! 8000 띄우기 성공

👉🏻 node server.js &

터미널을 종료하게 되면 서버가 종료되기 때문에, 컴퓨터를 종료하더라도 해당명령하게 돌아갈 수 있게 처리를 해주어야한다.

현재 서버는 잘 연결되지만, 로그인 하기 전엔 제품 목록을 볼 때 보이지가 않는다. 이 부분에 대해서 리팩토링을 진행해보아야겠다 !!

First-Project | Team Villy - 기능 구현💊

Sun, 18 Jul 2021 06:44:06 GMT

Feature View & Code

Feature

Login

Signup

Main

✅ Recommend

✅ Product

Product Detail

Cart (나의 담당 페이지 : ✅ )

내가 잘 하고 있는지 불안할 땐, 코드 한 줄 한 줄 뜯어보며 설명할 수 있는지 확인해보면 된다고 해주신 멘토님의 조언에 따라 코드 살펴보기 시작 !

💊 1. Main

Nav바 스크롤 진행 시 background color 변경

Main 하단 부분 슬라이더 구현(라이브러리 없이)

Main의 코드는 여기로 !

💊 2. Sign-up

이름, 전화번호, 이메일 ,비밀번호 총 4개의 Validation 구현

💊 3. Login

Validation 조건에 따른 Login 기능 구현

정상적으로 Login 진행 시, access_token 부여

✅ 4. Recommend

input value값을 받아 다음 component에 value값 전달

checkbox 값과 동일한 Product category url로 연결

Recommend 컴포넌트는 아래와 같은 구조를 가지고 있다.

처음엔 SurveyWelcome 컴포넌트를 띄우고, 다음 버튼을 눌렀을 때 Survey01, Survey02, Survey03, Survey04 순으로 컴포넌트 교체가 필요했다. 그래서 먼저 각 컴포넌트를 survey라는 객체로 묶어 준 뒤, 작업을 시작하기로 결정했다.

💻 코드 한줄 한줄 뜯어보기 ✏️ Recommend.js (부모 컴포넌트) / render() 안 const 선언

render() { const survey = { 1: ( ), 2: ( ), 3: ( ), 4: ( ), 5: ( ), }; .... }

각 컴포넌트마다 필요한 데이터, 함수들을 전달해주었다. 순서가 뒤바뀌었지만 다음 페이지로 넘어 갈 수 있는 함수는 아래와 같다. ⬇️

handleNextSubmmit = surveyId => { const newAnswer = [...this.state.answer, { id: surveyId }]; this.setState({ answer: newAnswer, }); this.handleNextButton(surveyId); }; handlePrevSubmmit = surveyId => { const previousAnswer = this.state.answer.filter(previous => { return previous.surveyId !== surveyId; }); this.setState({ answer: previousAnswer, }); this.handlPrevButton(surveyId); }; handlPrevButton = id => { this.setState({ surveyId: id - 1 }); }; handleNextButton = id => { this.setState({ surveyId: id + 1 }); };

지금은 정렬된 듯 보이지만,, 처음에 구상할 때는 정말 머리 아픈 코드였다. 리팩토링 하기 전엔 handleNextSubmmit 함수를 concat으로 구현해서 handlePrevSubmmit가 그 반대라고 생각하니 splice, slice 등과같은 메서드만 생각하게 되었다. 그렇게 생각을 하다가 같은 팀 창원님께 좀 더 효율적인 방법이 없을까하고 여쭤보았는데, filter 매서드를 이야기 해주셨다. filter를 사용한다고 생각하니 handleNextSubmmit 함수도 concat이 아닌 spread 연산자가 생각이 나서 코드를 수정하였다!

✏️ Recommend.js (부모 컴포넌트) / render() 안 return 값
{survey[this.state.surveyId]}
안에서 해당 컴포넌트를 surveyId(1,2,3,4,5)를 그려주면 된다.

return ( recommend Villy 빌리! 내 건강을 알려줘! {survey[this.state.surveyId]} );

soojeong.log

CSS | perspective를 활용한 tarot card

1. perspective란?

2. Y축의 소실점

3. 동일한 perspective 설정하기

3-1. 자식 요소에 transform 속성의 값으로 perspetive를 주고, 괄호 안에 수치를 입력

3-2. 부모 요소에 perspective-origin 사용

4. perspective와 grid를 활용한 타로카드 뽑기

CSS | display:grid; 그런데 mini-project를 곁들인

1. Flex와 Grid의 차이점

2.Flex와 Grid의 공통점

3. Grid의 arrtibute

4. 실전 적용

5. Grid를 활용한 계산기 만들기

CSS |flex-basis, flex-grow, flex-shrink

1. flex-basis

2. flex-grow

3. flex-shrink

4. flex-grow, flex-shrink, flex-basis의 축약형 속성

Algorithm | 신규 아이디 추천

문제

Algorithm | H-Index

CSS Attribute Selector(CSS 속성 선택자)

속성 선택자 정리

속성 선택자 예제

Core Javascript | 데이터 타입

1. 데이터 타입의 종류

1-1. 기본형(primitive type)

1-2. 참조형(reference type)

2. 데이터 타입에 관한 배경 지식

3. 변수 선언과 데이터 할당

3-1. 변수

4. 기본형 데이터와 참조형 데이터

5. 불변 객체

6. undefined와 null

Core Javascript | 클래스

0. 들어가며

1. 클래스와 인스턴스의 개념 이해

1-1. 클래스란?

1-2. 인스턴스란?

1-3. 프로그래밍 언어에서의 클래스

2. 자바스크립트의 클래스

3. 클래스 상속(ES6 이전)

클래스 상속을 흉내내기 위한 방법 3

4. 클래스 상속(ES6)

Core Javascript | 클로저

1. 클로저란?

2. 클로저와 메모리 관리

3. 클로저 활용 사례

Algorithm | K번째수

문제 설명

제한사항

첫번째 풀이 : 일단 답을 구하자

두번째 풀이 : 반복되는 부분을 줄이자

최종 풀이

Core Javascript | 콜백함수

1. 콜백함수란?

콜백함수

2. 제어권

3. 콜백함수는 함수다

4. 콜백 함수 내부의 this에 다른 값 바인딩하기

5. 콜백 지옥과 비동기 제어

동기와 비동기

1. 동기와 비동기는 서로 반대의 개념이다.

2. 자바스크립트는 동기적이다.

3. Callback은 항상 비동기일까? Nope!

콜백 지옥

Unit Test

✔️ CheckList

테스트 자동화의 중요성

시스템 테스트 방법 (Testing Pyramid)

1. End-TO-End testing(UI testing) 10%

2. Intergrating testing - 20%

3. Unit testing - 70%

Unit Test 장점

Unit test의 일반 원칙

React | Kakao 소셜 로그인

시작 전 준비사항

1. 내 어플리케이션 추가하기

2. 앱 키 확인하기