좌표 압축

해결과정

const fs = require("fs");
let [num, ...input] = fs.readFileSync("/dev/stdin").toString().trim().split("\n");
// 배열로 추출
let arr = input[0].split(" ");
// 정답 배열
let ans = [];
// 배열 내 문자열 -> 넘버
arr = arr.map(Number);
// 중복 제거
let arr2 = new Set(arr);
// 중복 제거 후 정렬
let sortedArr = [...arr2];
sortedArr = sortedArr.sort();
// 정렬된 배열의 인덱스를 찾아 정답 배열에 push
for (let i of arr) {
  ans.push(sortedArr.indexOf(i))
}
// 정답 요구사항대로 출력
console.log(ans.join(" "));

처음 생각했던 것은 제일 작은 순으로 정렬해서 인덱스를 찾아 답을 제출하면 되겠다는 생각을 했다.

아쉽게도 시간초과가 나왔음.

배열에서의 탐색은 O(N)이라 매번 답을 찾는 과정이 오래걸린듯 하다.

객체에서는 탐색이 O(1)의 복잡도를 갖기 때문에 객체로 교체하였다.

최종

const fs = require("fs");
let [num, ...input] = fs.readFileSync("/dev/stdin").toString().trim().split("\n");

// 입력 값 number로 바꾸기
let arr = input[0].split(" ").map(Number);
// 중복 제거
let uniqueArr = [...new Set(arr)];

// 중복 제거한 배열 정렬
let sortArr = uniqueArr.sort((a, b) => a - b);

// 정렬된 배열 map으로 만들기.
let sortMap = new Map();

// map에 값 입력 -> [가장 작은 값, 인덱스]
for (let i = 0; i < sortArr.length; i++) {
  sortMap.set(sortArr[i], i);
}

// map에서 해당 값 가져오기.
let ans = "";
for (let i of arr) {
  ans += sortMap.get(i) + " ";
}

// 결과 출력
console.log(ans);

성공~

1181 단어정렬

해결 과정

배열에 중복된 단어를 먼저 제거하기(방법 2개) set 사용

let arr = [...new Set(input)];

includes 메서드로 입력받은 배열 검증

let noDuplication = [];
for (let i of input) {
  if (
    !noDuplication.includes(i)) {
    noDuplication.push(i);
  }
}

저장된 단어 정렬하기 -> sort() 사용하기

noDuplication.sort((a, b) => {
  return a.length === b.length
    ? a.charCodeAt(0) - b.charCodeAt(0)
    : a.length - b.length;
});

it와 im의 순서가 안맞음;;

localeCompare() 메서드 사용

arr.sort((a, b) => a.length - b.length || a.localeCompare(b));

성공~

해결

const fs = require("fs");
let [num, ...input] = fs.readFileSync("ex.txt").toString().trim().split("\n");

let arr = [...new Set(input)];

arr.sort((a, b) => a.length - b.length || a.localeCompare(b));
console.log(arr.join("\n"));

11650 좌표정렬하기

해결과정

기본적으로는 x좌표 기준으로 정렬 x좌표가 같으면 y좌표 기준으로 정렬 -> x배열이랑 y배열 하나씩 만들어서 합칠까?

sort 안에서 정렬이 가능 -> 2차원 배열로 만들어서 sort 안에서 해결하자

해결

const fs = require("fs");
let [num, ...input] = fs.readFileSync("ex.txt").toString().trim().split("\n");
let arr = input.map((el) => el.split(" ").map(Number));

arr.sort((a, b) => {
  return a[0] === b[0] ? a[1] - b[1] : a[0] - b[0];
});

let point = [];
for (let i = 0; i < Number(num); i++) {
  let ans = arr[i].join(" ");
  point.push(ans);
}

console.log(point.join("\n"));

2751 수 정렬하기

해결 과정

• 1번줄 = 출력할 갯수
• 2~ = 출력해야할 숫자 N
• 1 ≤ N ≤ 1,000,000
• 숫자 N은 중복없음! -> 이게 진짜 큰 힌트였음

-> js 내장함수인 sort를 사용하면되겠다!

시간 초과

for (let i of arr) {
  console.log(i);
}

console.log()를 반복해서 사용하면 시간초과 뜸!

-> join("\n") 사용했음 ㅇㅅㅇ

문제 해결

const fs = require("fs");

let [num, ...arr] = fs.readFileSync("ex.txt").toString().trim().split("\n").map(Number);

arr.sort((a, b) => a - b);

console.log(arr.join("\n"));

참고 문서

콘솔로그 많이 쓰면 안좋은이유

2839 설탕 배달

해결 과정

최소자루를 구하는 문제다 보니 5, 3 두 자루중 5개로 먼저 빼면 될 것이라 생각. 아쉽게도 5로 먼저 나누면 6이들어오면 에러가 발생해서 실패

5로 나눈 값이 0이 되어야하고 3으로 나눈 값도 0이 되어야 조건 만족을 함. -> 5로나눈 나머지가 0이 될때 까지 3을 빼주면서 반복했음.

해결

const fs = require("fs");

let N = +fs.readFileSync("ex.txt").toString().split(" ");

let cnt = 0; // 3 자루 갯수

while (true) {
  if (N % 5 === 0) {
    console.log(N / 5 + cnt);
    break;
  }

  if (N < 0) {
    console.log(-1);
    break;
  }
  cnt++;
  N -= 3;
}

백준 1018

문제 해결

체스판에 색을 다시칠해야 한다는것을 보자마자 일단 2차원배열이겠거니 생각했다. 그런데 변경을 최소한으로 하려면 어떻게해야할지 잠깐 고민을 했다. 설마 일일히 다 비교해야하나? 라는 생각을 했는데 문제 유형이 브루트포스였고 그게맞았다.

해결

const fs = require("fs");

let [size, ...arr] = fs.readFileSync("ex.txt").toString().split("\n");

let [row, col] = size.split(" ");
arr = arr.map((i) => i.split(""));

const answer = [];

const WHITE = [
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
];

const BLACK = [
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
  "BWBWBWBW",
  "WBWBWBWB",
];

function checkWhite(x, y) {
  let cnt = 0;
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      if (arr[i + x][j + y] === WHITE[i][j]) cnt++;
    }
  }
  return cnt;
}

function checkBlack(x, y) {
  let cnt = 0;
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      if (arr[i + x][j + y] === BLACK[i][j]) cnt++;
    }
  }
  return cnt;
}

for (let i = 0; i < row - 7; i++) {
  for (let j = 0; j < col - 7; j++) {
    answer.push(checkWhite(i, j));
    answer.push(checkBlack(i, j));
  }
}
console.log(Math.min(...answer));

1436 영화감독 숌

해결 과정

숌은 666이 제일 작은 종말의 단위라 생각한다. 두번째로 작은 재앙 -> 1666 (n-1)666이라고 생각했는데 예제 4부터 이상해서 그건 아니라고 생각.

종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다.

지문을 다시 읽어보던 중 해당 문구를 발견. 아.. 숌은 그냥 666이 좋은거임. 666만 있으면 만사 오케이인 친구였던것임!

해결

let input = +fs.readFileSync("ex.txt").toString().split(" ");

let cnt = 1;
let num = 666;

while (cnt !== input) {
  num++;

  if (String(num).includes("666")) {
    cnt++;
  }
}

console.log(num);

reflow, repaint reflow란 화면구조가 변경되었을 때 문서의 일부 또는 전체를 다시 렌더링하기 위해 문서에서 요소의 위치와 크기등의 형상을 다시 계산하는 것을 의미합니다. 대표적으로 화면의 크기 변화, 페이지 초기 렌더링, DOM의 동적 변화가 있는 경우 reflow가 발생합니다. 또한 경우에 따라서 문서의 단일 요소를 reflow하려면 상위 요소와 그 뒤에 오는 모든 요소를 reflow해야 할 수 도 있습니다.

repaint란 이름에서 알 수 있듯이 요소의 보이는 것에 영향을 주지만 레이아웃에는 영향을 주지 않는 요소 변경으로 화면에 다시 그려주는 작업입니다. reflow가 발생하면 변경된 렌더 트리를 화면에 다시 그려야해서 repaint가 발생합니다. 또한 레이아웃에 영향을 주지 않지만 color, background-color, visibility 등과 같은 스타일 속성의 변경에는 reflow는 발생하지 않고, repaint만 발생합니다.

살펴본 reflow, repaint는 컴퓨팅 파워를 많이 필요로 하는 비싼 작업입니다. reflow, repaint가 많이 일어날수록 하드웨어에 많은 부담을 주게 되고, 그 결과 사용자 경험이 나빠질 수 있습니다.

리액트의 문제 해결 이를 해결하기 위해 리액트는 Virtual DOM을 활용해 UI의 이상적인 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화 합니다. 이 과정을 재조정(Reconciliation)이라고 합니다. 이렇게 연산이 끝난 뒤 최종적인 변화를 실제 DOM에 반영해서 여러 번 reflow, repaint가 발생할 수 있는 작업을 한번으로 줄여줍니다. 또한, Virtual DOM은 변화에 대한 관리를 자동화하고 추상화해서 작업의 편의성을 제공합니다. 재조정에 대해 조금 더 알아보면, 기존에 하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 최첨단 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n^3)의 복잡도를 가지고 있는 한계가 있었습니다. 이에 대해 리액트는 1) 서로 다른 두 엘리먼트는 서로 다른 트리를 만들어낸다. 2) 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있습니다. 두 가정을 기반하여 O(n) 복잡도의 비교 알고리즘을 구현했습니다.

참고 자료 https://blog.drakejin.me/React-VirtualDOM-And-Repaint-Reflow/

https://ko.legacy.reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

https://www.codeit.kr/learn/3799

https://medium.com/swlh/what-the-heck-is-repaint-and-reflow-in-the-browser-b2d0fb980c08

https://velopert.com/3236

부트캠프 과정 중 위 코드의 출력 값을 맞춰보라는 문제가 있었다.

결과는 3이다.

왜 와이?

• 1번에서 let으로 num에 1을 할당했고 let은 재할당이 가능함
• 2번에서 setTimeout함수를 사용했으나 0초뒤에 시작하니 바로 실행됨
• 3번에서 num은 3이라고 재 할당 해줬음
• 그래서 답은 3임

HTTP메서드에는 총 9개의 종류가 있으나 주로 쓰이는 메서드는 5개이다. 주요 메소드

• GET : 리소스 조회 , 값을 가져오기만 함
• POST : 데이터 추가, 등록
• PUT : 리소스 대체, 수정 / 해당 리소스가 없으면 생성
• PATCH : 리소스 부분 수정 / 수정만 됨
• DELETE : 리소스 삭제

기타 메소드

• HEAD : GET과 동일한 방식으로 작동하나 헤더 값만 요청
• OPTIONS : 해당 리소스에서 사용 가능한 옵션을 요청, CORS에서 사용 됨
• CONNECT : 요청한 리소스에 대한 터널 설정
• TRACE : 대상 리소스에 대한 경로를 따라 메세지 루프백 테스트를 진행

GET

• 리소스 조회 메서드
• 사용 방식 : GET /members/100
• 원하는 데이터가 있다면? 쿼리스트링을 통해서 전달하면됨 : GET /members/100?username=inpa&height=200

POST

• 데이터 추가, 등록 메서드
• 보통 요청할 때 form이벤트를 많이 사용함.

  HTTP/1.1 201 Created
  Content-Type: application/json
  Content-Length: 34
  Location: /members/100
  

{ "username": "big5", "age": 20 }

위 이미지는 이벤트가 일어나는 과정을 간략하게 그려놓은 흐름도 입니다.

이벤트의 흐름

표준 DOM이벤트에서 정의한 이벤트 흐름에는 총 3가지 단계가 있어요.

1. 캡쳐링 단계 : 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 : 이벤트가 실제 타깃요소에 전달되는 단계
3. 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

캡처링

캡처링은 최상위 요소에서 이벤트가 발생한 요소를 찾아가는 것을 말한다.

잘 사용되지 않는다고 한다.

// 사용예제
// div 까지의 캡쳐링

const input = document.querySelector("div");

const clickEvent = (e) => {
    cosole.log(e.currentTarget.tagname);
};

input.addEventListener("click", clickEvent, {capture: true});

on<event>프로퍼티나 HTML 속성, addEventListener의 capture옵션의 값이 true면 캡쳐링일 때 동작하게 할 수 있다. 반대로 옵션의 값이 false면 버블링 일 때 동작.

버블링

한 요소에서 이벤트가 발생하면 이 요소에 할당된 이벤트 핸들러가 동작하고 이후 부모요소의 핸들러가 동작한다, 그렇게 최상단 요소까지 타고 올라가면서 이벤트 핸들러가 동작한다.

버블 버블 버블 팝 버블 버블 팝 팝

// 사용 예제
// 누른 요소에 대한 alert
<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

p태그를 클릭하면 p -> div -> form 순으로 alert가 출력된다.

버블링 막기

버블링은 거의 모든 동작에서 일어나는데 어떻게 막나요?

<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>

.stopPropagation();

이거쓰면 위로 버블링 되는건 막아주는데 같은 레벨에서 동작하는 이벤트들은 못 막음

event.stopImmediatePropagation()

이렇게 하면 같은 레벨에서 동작하는 이벤트도 막아줌

버블링 안되는 이벤트

이벤트 중에서는 버블링이 안되는 이벤트들이 있다. 마우스이벤트

• mouseenter : 마우스 포인터가 요소 위로 올라온 순간
• mouseleave : 마우스 포인터가 요소에서 벗어나는 순간

포커스 이벤트

• focus : 요소에 포커스가 되는 순간
• blur : 요소로부터 포커스가 빠져나가는 순간

event.target

event.target과 event.currentTarget의 차이를 아는 것도 중요하다.

event.target : 이벤트가 발생한 요소 (고정) event.currentTarget : 현재 실행중인 이벤트가 할당된 요소 (변경됨, this)

예를 들어 위에 이미지의 input에서 동작이 일어났으면 target은 input이 되고 currentTarget은 이벤트 리스너가 달린 다른 태그가 될 수 있다.

이벤트 위임

버블링의 속성을 이용하여 이벤트 위임이라는 것을 할 수 있다. 이벤트 위임이란? 원하는 요소 그룹의 부모에 이벤트를 할당하여 자식그룹에 동일한 이벤트를 사용하게 하는 것이다.

표나 같은 형식의 인풋이나 요소를 클릭하는곳에 사용할 수 있다.

<button data-toggle-id="subscribe-mail">
  구독 폼 보여주기
</button>

<form id="subscribe-mail" hidden>
  메일 주소: <input type="email">
</form>

<script>
  document.addEventListener('click', function(event) {
    let id = event.target.dataset.toggleId;
    if (!id) return;

    let elem = document.getElementById(id);

    elem.hidden = !elem.hidden;
  });
</script>

이런 식으로 사용이 된다.

참고링크

https://ko.javascript.info/bubbling-and-capturing https://ko.javascript.info/event-delegation

오늘은 var let const를 중복선언, 스코프, 호이스팅의 관점에서 알아보자.

var

중복선언 : 가능! -> 이게 말이 안되는일임

var imHappy = 'yes';

var imHappy = 'no';

console.log(imHappy) // no

한번 선언해도 다시 선언이 가능하다. 마지막에 선언된걸로 출력됨

스코프 이 친구는 함수단위(function)의 스코프를 가진다.

var name = 'hello'

function hi() {
  var name = 'hi'
  console.log(name) // hi
}

hi()
console.log(name) // hello

호이스팅 : 가능!

console.log(name); // undefined
var name = hi

let

중복선언 : 안됨!

스코프 블록단위의 스코프를 가진다.

{
  let a = hi
}
console.log(a);    //ReferenceError: a is not defined

호이스팅 : 가능!

const

중복선언 : 안됨! 초기화와 선언을 동시에 해야함!

스코프 블록단위 스코프를 가짐 { const meet = hi } console.log(meet); //ReferenceError: meet is not defined

호이스팅 : 가능!

Temporary Dead Zone

let과 const둘다 호이스팅이 되는데 안되는것처럼 보이는건 TDZ에 들어가서임

JS에서는 총 3단계에 걸쳐서 변수를 선언함

1. 선언(Declaration): 스코프와 변수 객체가 생성, 스코프가 변수 객체를 참조.

2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당. 이 때 할당되는 값은 undefined다.

3. 할당(Assignment): 변수 객체에 값을 할당한다.

let과 const둘다 선언은 되어 있으나 초기화가 이뤄지지않음. 실제로 값을 할당하는 부분에 가야 초기화와 할당이 일어남

JS의 데이터 타입

복사를 이해하려면 데이터 타입을 이해해야 한다.

data type --|-- PrimitiveType-|-- Number
               |                  |-- BigInt
            |                  |-- String
            |                 |-- Boolean
            |                 |-- null
            |                 |-- undefined
            |                 |-- Symbol
            |
            |-- Reference Type -- Object - |-- Array
                                              |-- Function
                                           |-- Date
                                           |-- RegExp
                                           |-- Map, WeakMap
                                           |-- Setm WeakSet

위 내용과 같이 데이터 타입은 크게 2가지로 나뉘게 된다. 기본형과 참조형이다.

모든 데이터들은 비트 단위로 저장되고 저장된 데이터들은 바이트 단위의 식별자 좀 더 자세하게 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.

기본형 변수 선언과 데이터 할당

var a;        // 변수 선언

a = 10;        // 데이터 할당

var a = 10;    // 변수 선언과 할당을 동시에!

값이 변경이 변경 될 때

이렇게 기존의 값은 그대로 있고 새로운 공간에 값을 저장해 할당한다.

기본형 데이터는 모두 값이 변하지 않고 새로 생성해서 변경하기 때문에 불변 값이다.

참조형 변수 선언과 할당

var obj1 = {
    a: 1,
    b: 'bbb'
}

객체는 데이터 영역의 값이 바뀌지 않지만 할당된 값이 변경 가능하기 때문에 가변형

이러한 데이터의 할당 방식을 가지고 복사를 알아보자.

얕은 복사

얕은 복사는 객체를 복사할 때 기존값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다.

방식

• Array.prototype.slice();

  • const copy = 복사하고싶은객체.slice(start, end);
  • 1차원 배열에서는 깊은 복사로 보이지만 2차원으로 들어가면 아님을 알 수 있다.

• Object.assign(생성할 객체, 복사할 객체);

  • 복사하고싶은면 빈배열을 넣으면됨
  • const copy = Object.assign({},복사할 객체);

• Spread 연산자 (전개 연산자)

  • const copy = {...복사할객체}

깊은 복사

깊은 복사는 원본 데이터에 영향을 미치지않게 참조가 끊어진 객체를 말한다.

방식

• JSON.parse && JSON.stringify
  • 객체를 JSON으로 변환 시킨 후 다시 객체로 변환
  • 이 과정에서 객체가 function이면 undefined로 변환한다.
  • const copy = JSON.parse(JSON.stringify(object));
• 재귀 함수를 구현한 복사
  • 복잡함

    function deepCopy(object) {
    if (object === null || typeof object !== "object") {
      return object;  
    }  
    // 객체인지 배열인지 판단  
    const copy = Array.isArray(object) ? [] : {};   
    for (let key of Object.keys(object)) {
      copy[key] = deepCopy(object[key]);
    }   
    return copy;
    } 
    const copy = deepCopy(object);

• Lodash 라이브러리 사용
  • 편함
  • 코테에서는 사용 못 함

• feature - develop - release - hotfix - main 브랜치를 사용해요.
• main , develop 브랜치는 항상 배포가능한 상태로 유지해야해요.

Branch 용도 및 생성 규칙

• main: 제품으로 출시될 수 있는 브랜치
• develop: 다음 출시 버전을 개발하는 브랜치
• feature: 기능을 개발하는 브랜치
  • feature/기능 요약
  • feature/issue-number-기능 요약
• release: 이번 출시 버전을준비하는 브랜치
  • release-버전
  • release/버전
• hotfix: 출시 버전에서 발생한 버그를 수정하는 브랜치
  • hotfix-버전

Git Flow는 다양한 브랜치를 통해서 기능별로 세세하게 구분해서 작업할 수 있다는 장점을 가지고 있어요.

대신 그만큼 많은 브랜치들을 관리해야하는 단점이 있고 그에 따라 배포를 관리하는 사람이 필요하답니다.

Git에서 branch merge하는 방법은 크게 2가지가있어요

• git merge
• git rebase

이제 이 둘이 어떻게 다른지 함 알아보죠!

git merge

git merge branchName

위의 명령어로 merge를 할 수 있어요. 현재 브랜치에 branchName의 내용을 가져와서 합치는 명령어랍니다.

기본은 그렇고 이 merge가 세부적으로는 2개로 또 나뉘게되는데요

• fast-foward
• 3-way-merge

fast-foward

이 친구는 merge하려는 브랜치와 분기한 브랜치의 부모가 같을 때 사용됩니다. 새로운 merge commit이 생기지 않고 현재커밋에 HEAD와 브랜치를 슥 가져와요

// branch 예시
                         /-main
o--o--o--o--o--o--o--o--o
                 /
              feat1

 이렇게 main에 feat1을 가져오려할 때 부모가 같을때는

                           /--main, feat1
 o--o--o--o--o--o--o--o--o

 이렇게 새로운 커밋을 만들지 않고 병합한다는 말입니다~

3-way-merge

이 친구가 우리가 흔히 마주하는 merge일 듯 해요

// 1과 2, 3이 합쳐져 4를 만들어냄
            /--o--3--/4--o--o
          /        /
o--o--o--1--o--o--2
        /
  여기가 분기점

이렇게 분기를 하고 commit을 생성하면 새로운 merge commit을 만들게 되는데용

• base(조상)가되는 공통 커밋인 1
• 작업 브랜치의 최신내용인 2
• 합치려는 브랜치의 최신내용인 3

이렇게 3개가 합쳐져서 새로운 커밋을 만들어 내기 때문에 3-way-merge 라고 합니다.

git rebase

git rebase branchName

기본적으로는 이렇게 사용해요. rebase는 말 그대로 base를 다시 지정한다는 말입니다.

// git rebase의 그래프
// 1의 base가 2로 재지정
// 이전 커밋들과 합치는 커밋이 그래프에 남지않음
            /--o--2--/3--o--o
          /       
o--o--o--o

위에 git merge와는 다른 그래프가나오는걸 볼 수 있죠? 리베이스는 Git의 커밋 그래프를 깔끔하게 유지하기 위해 사용해요.

전반적인 merge 과정

// 과정
git rebase 브랜치이름 or git merge 브랜치이름

비상! 컨플릭트남!
수정하셈
git add.
git rebase --continue
---------------------- 
(merge라면)
git commit -m" merge했어용~"

워땠나용? 이렇게 간단하게 merge의 방법과 특징을 알아봤는데용

• merge : merge한 이력을 남겨야 할 때
  • fast-foward
  • 3-way-merge
• rebase : 그래프를 깔끔하게 유지해야할 때

이렇게 사용한답니다.

2주차 위클리페이지로 Position 속성과 특징에 대해 정리하는 시간을 가져보았다. Position 속성에는 5가지의 종류가 있다. 위치를 지정해주기위해 position : top, left, right, bottom 속성을 함께 사용한다.

position: static

position설정을 입력하지 않았을 때 기초 설정 값이다.

static은 HTML 문서상의 원래 배치되어야 할 위치에 배치가 된다는 말이다. 그래서 top, left, right, bottom같은 속성은 적용되지 않는다.

이때는 기본적인 흐름을 따라서 배치가 된다. 기본적인 흐름은 우리가 글을 읽는것과 같은 배치이다.

position: relative

relative 속성은 원래 본인의 위치에서 움직일 수 있게하는 속성이다.

즉 기본적인 문서의 흐름을 따라가되, top, left, right, bottom 같은 속성을 통해서 문서상 본인의 위치를 기반으로 위치 지정이 가능하다.

position: absolute

absolute 속성은 부모 속성의 위치를 기반으로 배치하는 속성이다.

문서의 흐름상에서 본인은 제외가 되고 자신의 부모요소에서 static이 아닌 다른 값을 기준으로 위치를 설정한다. 만약 상위요소를 따라 올라갔을때 stitic이 아닌 다른 값이 없다면 body를 기준으로 잡는다. 보통 absolute의 부모요소로 relative를 사용한다.

position: fixed

fixed 속성은 viewport기준으로 배치하는 속성이다.

absolute와 마찬가지로 문서상 흐름에서 제외되고 브라우저 화면(viewport) 기준으로 top, left, right, bottom를 사용하여 위치를 설정한다.

보통 nav바가 고정적으로 보이거나 뭔가 알림같은 것을 구현할 때 사용한다.

position: sticky

sticky속성은 본인의 위치에 배치가 되지만 스크롤 시 부모요소를 기준으로 배치된다.

<main>
    <div>1</div>
    <div>2</div> // position: sticky, top:0px
    <div>3</div>
    <div>4</div>
</main>

이게 무슨말이냐면 위와 같은 코드가 있다고 가정했을 때 스크롤을 내려서 <div>1</div>을 지나<div>2</div>가 top:0px에 닿은 순간부터 main이라는 태그가 viewport에서 사라지기 전까지 적용이 되는 속성이다.

정리하자면 sticky는 부모태그가 스크롤 되어 화면밖으로 나가기 전까지 해당 부모에 top, left, right, bottom로 지정한 위치에 붙어있는 태그이다.

시맨틱 이란?

우선 시맨틱이라는 말부터 알아보자. Semantics은 의미론이라는 사전적인 의미를 가진다.

<h1>
    Hello World!
</h1>

<span style="font-size: 32px; margin: 21px 0;">
    Hello World!
</span>

위 코드에서 <h1>태그와 <p>태그는 모양은 동일하다. 그러나 각 태그가 의미하는 것은 다르다.

• h1: 이 페이지에서 최상위 제목
• p : 문단 (제목이라는 의미는 없음)

이처럼 각 태그들은 의미를 가지고 있다. 이제 왜 태그를 목적에 맞게 사용해야 하는지 알아보자.

왜 써야하나?

물론 그냥 div태그, p태그에 스타일을 줘서 모든 화면을 그릴 수는 있다. 하지만 시맨틱 태그를 사용했을 때의 이점은 다음과 같다.

1. 웹 접근성이 좋아진다.

   • 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.

2. 코드 가독성이 상승하고 유지보수에 좋다.

   • 의미없는 div 들을 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.

3. 검색 엔진 최적화(SEO)에 유리하다.

   • 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.

종류는?

종류는 약 100여 가지로 생각보다 상당히 다양하다. 그중 일부만 알아보자.

<header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. (제목, 로고, 검색 폼, 작성자 이름 등)

<nav> : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 네비게이션이다. (메뉴, 목차, 색인)

<main> : 문서 <body>의 주요 콘텐츠를 나타냅니다.

<article> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분되는 요소에 사용됩니다. (게시판과 블로그 글, 매거진이나 뉴스 기사 등)

<section> : 보통 제목을 포함하고있으며 독립적인 요소나 문서 요약에 사용된다. 일반적인 컨테이너를 위한것이라면 <div>를 사용하는것이 권장 된다. <figuer> : 이미지가 들어가는 영역이다. <aside> : 문서의 좌 혹은 우측의 사이드 공간을 의미 주요 컨텐츠 이외에 참고가 되는 정보를 배치한다. <footer> : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시

mdn 시맨틱태그 https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1

mdn 태그 목록 https://developer.mozilla.org/ko/docs/Web/HTML/Element

CSS와 Cascading

CSS는 Cascading Style Sheet의 약어입니다. 그만큼 CSS와 Cascading은 떼어놓을 수 없는 관계라는 것을 알 수 있습니다.

CSS를 작성하다보면 상속되거나 중첩되는 상황이 많이 나오게 되는데 이때 2가지 원칙에 따라서 어떤 스타일을 적용할지 결정됩니다.

1. 스타일 우선순위
2. 스타일 상속

스타일 우선순위

스타일 우선순위는 크게 3가지로 분류됩니다.

1. 중요도
2. 명시도
3. 코드 순서

중요도

스타일을 선언한 사람에 따라 우선순위를 높이는것을 말합니다.

1순위: 사용자가 만든 스타일 시트 2순위: 제작사가 만든 !important 스타일 3순위: 제작자가 만든 일반 스타일 4순위: 브라우저 기본 스타일시트 (User Agent StyleSheet)

명시도

셀렉터가 가리키는것이 명확할수록 우선순위를 높이는것을 말합니다.

1순위: 인라인 스타일 2순위: ID스타일 3순위: Class 스타일 4순위: Tag 스타일 CSS 명시도 계산기

코드순서

맨 마지막에 선언한 CSS일 수록 우선순위를 더 높게 주는것을 말합니다.

스타일 상속

<div id="부모">
    <div id ="자식"></div>
</div>

스타일 상속은 부모태그의 스타일이 자식태그에도 적용되는 현상을 말합니다. 부모태그와 자식태그는 위의 코드를 참고하면 됩니다.

사실 별 생각이 없었는데...

그렇다 사실 개발일기 같은건 생각을 안해봤다.

그런데...왜?

내가 어떤 과정을 거쳤는지 성장 과정을 보고 싶어서~ 그렇다면? 자 드가자~

도전의 시작

왜 와이 갑자기? 최근 지인에게 어케 해야 개발자로서 성공 할 수 있을까? 하는 질문을 했었는데 답변으로 생각할 시간에 움직이라는 말과 일단 하라는 말을 들어서 일단 해보려고한다.
개인 프로젝트를 한번도 진행해 본적이 없어서 한번 진행해 보려고한다. 물론 처음이라 여러가지 문제가 있을 듯하나 그래도 도전하다보면 개선될 것이라고 생각한다.

레포 생성

처음부터 문제가 생겼다. 레포를 만들어야되는데 갑자기 라이센스를 선택하라 해서 ??? 이건 처음보는데요 선생님? 바로 구글링! 굿

결과: React, Angular, Vue 모두 MIT 라이선스라고 하더라 / 남이 상업용으로 써도 상관없다면? MIT써도 된다~ 라이센스 관련 참고 글

git pull

생성하자 마자 바로 다음 문제 봉착! 내 레포를 어떻게 보여주지?
바로 프로젝트 폴더를 보여줘야할까? 아니면 GDSC에서 했던 것 처럼 파일을 한번 더 감싸서 보여줄까?
고민끝의 결과: 그냥 GDSC에서 했던 것 처럼 해보자~ 다음에 할때 다른방식으로 해보면 되지~

프로젝트 생성

과거의 나! 이거 해보고싶었구나! 프로젝트를 만들려고 했는데 이미 프로젝트가 생성이 되어있었다. 물론 생성만 해뒀음...
여튼 가보자고! 기본 세팅 후 npm run dev를 하면서 외쳐보자 랑데부!
왜...? 저런 주문을? 그 이유는 npm dev run과 npm run dev를 헷갈려 했기에 가장 쉽게 외운 방법이 랑데부였음 ㅇㅇ 저거 한 뒤로 안헷갈림 ! 헷갈린다면? 랑데부를 외쳐 보아요

레이아웃 짜기

막상 생성했는데 생각해보니까 어떻게 보여줄지는 생각 안해봤넹... 자 피그마 드가자~
아마 KAMIS랑 비슷하게 짤듯? 그러면 참고하러 드가자

일단? 고!

헉 레이아웃짜려고 KAMIS들어갔다가 몇 가지 아이디어가 떠올랐다. 뭘 보여주고 싶지??

1. 오늘의 시장 물가 -> 우리는 소매가 중요하니 소매가로!
2. 월별 물가 추이 -> 클릭 시 페이지 이동 or modal에 hover해서 보여주기!
3. 알뜰 장보기 -> 이거좀 히트임 이거는 보니까 img파일들 넣어둔거라서 링크 쏘는게 좋을 듯!
4. 아! 짜피 알뜰 장보기에서 다 하니까 나는 품목 고르면 장바구니 담기 같은 기능을 써보자!

오늘은? 여기까지~

yarn add axios
yarn add @types/axios -D

또는

npm을 이용한 axios 설치

npm install axios
npm install --save-dev @types/axios

보안을 위해 .env 파일 생성

프로젝트에 .env파일 생성 후 .gitignoro에 .env추가

이정도까지가 api를 사용하기 위한 기초 준비이다.

.env 사용방법

.ts

process.env(변수명)을 사용하면 .env에 선언한 api키값을 가져올 수 있다.

.env