▶ 모바일 우선 반응형 웹 디자인 (2)

css 단위

rem, em

◻ 소개

• rem: root element에 지정된 font 크기.
• em: 현재 element의 font 크기.

◻ 사용법

• 'rem' for global sizing, 'em' for local sizing 참고: Use 'rem' for Global Sizing; Use 'em' for Local Sizing-css tricks

.wrapper1 {
    font-size: 2rem;
}
.wrapper1 .heading {
    font-size: 3em;
}
.wrapper1 .content {
       font-size: 1em;
}

.wrapper2 {
    font-size: 3rem;
}
.wrapper2 .heading {
       font-size: 2em;
}
.wrapper2 .content {
       font-size: 0.5em;
}

◻ 주의사항

• em의 남용은 레이아웃이 깨졌을 때 어디서부터 잘못됐는지 모르는 사태를 초래할 수 있음.

// 혼돈의 카오스
html {
    font-size: 100%
}
body {
    font-size: 1em;
}
.article {
    font-size: 1.5em;
}
.article .wrapper {
    font-size: 2em;
}
.article .wrapper .heading {
    font-size: 3em;
}
.article .wrapper .content {
       font-size: 1em;
}

✔ 해결 방법

• 가능한 low-level에서 em을 선언함.
• rem을 우선적으로 사용하고, em은 local에서 부모와 자식 요소의 상대적 크기를 지정할 때 사용함.

vw, vh, vmin, vmax

◻ 소개

• vw: 1vw는 뷰포트 너비의 1%
• vh: 1vh는 뷰포트 높이의 1%
• vmin: 1vmin은 뷰포트의 작은 방향의 1%
• vmax: 1vmax는 뷰포트의 큰 방향의 1% ex) width: 1000px, heigth: 2000px인 뷰포트의 경우 1vmin = 10px 1vmax = 20px

◻ 사용법

• responsive typhography 구현에 사용할 수 있음.
• full-height layout, hero image, sticky footer 구현에 사용할 수 있음.
• fluid aspect ratio 구현에 사용할 수 있음. 출처: Fun with viewport units-css tricks

◻ 주의사항

• 블록 요소의 width 단위로 vw를 사용할 시, 스크롤바를 고려하지 못할 수 있음.
• 브라우저 호환성이 %, rem, em 등 여타 단위들보다 좋지 않음.

반응형 콘텐츠

이미지

◻ img vs background-image

이미지가 사용자의 페이지에 대한 이해를 돕는다면 img를 사용하고, 오로지 디자인이나 배경 이미지로 사용할 목적이라면 background-image를 사용함.

img vs background-image__stack overflow 안티 패턴으로서의 CSS background-image 속성__velog

html의 img와 css의 background-image 각각 ppi와 사이즈를 고려한 반응형 이미지를 만들 수 있는 방법 ▶ developers.google.com: Responsive images

◻ width, height 🙌 상대 크기를 사용할 것.

ex) 예시로서의 html 구조

<div class="container">
    <img src="lion image from unsplash" alt="lion-father and baby">
</div>

• 기본적으로 이미지에 하나의 치수만 선언하면 늘 종횡비가 유지됨.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
}

.containing-block img {
  width: 100%;
}

• 기존 이미지의 크기가 줄어들거나 늘어나는 것에 상관없이 컨테이닝 블록의 width에 이미지 크기를 딱 맞추고 종횡비를 유지하길 원한다면 이미지 태그의 width에 100%, height에 auto를 주면 됨.

.containing-block {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.containing-block img {
  width: 100%;
  height: auto;
}

아래 사진처럼 기존 이미지의 크기가 컨테이닝 블록을 벗어날 때가 있음.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
}

이럴 땐 max-width: 100%, height: auto를 주면 컨테이닝 블록의 width에 맞게 줄어들면서 종횡비를 유지함.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
}

.containing-block img {
  max-width: 100%;
  height: auto;
}

벗어난 부분만 자르고 싶다면 부모 요소에 overflow:hidden을 줄 수도 있음.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
  overflow: hidden;
}

• 기존 종횡비를 유지하되 가로 세로 크기를 임의로 제한하고자 한다면 max-width와 max-height가 매우 유용함.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
}

.containing-block img {
  max-width: 300px;
  max-height: 300px;
}

위에 더해 이미지가 반응형이길 원한다면 상대적 단위값(%, vw 등)을 가지는 width를 img에 선언하여 max-width와 함께 활용할 수 있음.

.containing-block {
  width: 50%;
  height: 100vh;
  background-color: red;
}

.containing-block img {
  max-width: 300px;
  max-height: 300px;
  width: 40%;
}

참고: 100% width or height while keeping aspect ratio?__stack overflow

◻ 해상도 전환

• 기기의 특성(화면 크기, 픽셀 밀도)에 따라 적합한 사이즈의 이미지를 제공하는 문제.
• 같은 이미지 다른 크기.

출처: howtogeek-how to automatically size pictures in powerpoint

• img 요소의 srcset을 활용하며 sizes 프로퍼티는 w(width descriptor)를 사용한다면 필수이고, x(display density descriptor)를 사용한다면 필수가 아님.
• x는 화면 픽셀 밀도를 계산해 적합한 이미지를 다운로드 하지만, w는 화면 픽셀 밀도와 함께 이미지의 최종 사이즈를 고려해 최적의 이미지를 다운로드 하기 때문임.
• w 사용 시 sizes가 없으면 이미지의 최종 사이즈가 어떻게 될 지 판단할 수 없는데 그 이유는 이미지 다운로드가 css와 javascript를 로딩하고 해석하는 과정이 끝나지 않은 상태에서 이루어지기 때문임.
• 사용자 화면의 레이아웃과 이미지의 사이즈가 아직 결정되지 않은 상태인데 최적의 이미지를 골라 다운로드 하라고 하는 것은 아직 침대 사이즈를 어떤 걸로 살 지 결정되지도 않았는데 침대 커버를 사이즈에 맞게 사오라는 것과 같은 뜻이라 할 수 있음.

▶참고 cloudfour: Responsive Images 101, Part 4: Srcset Width Descriptors developers.google.com: Responsive images

// w

<img src="400.png" 
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w" alt="an example image">

// x
<img src="photo.png" srcset="photo@2x.png 2x, photo@3x.png 3x, ...">

• 따라서 크기가 정해진 이미지에 한해 x descriptor를 사용하는 것이 권장되고, 나머지 반응형에서는 w descriptor 사용이 권장됨.

• srcset과 sizes가 지원되지 않는 브라우저에서는 src 내부의 이미지가 사용되기에 src에 1x의 이미지를 잘 적용하는 것은 중요함.

◻ 아트 디렉션

• 기기의 특성(화면 크기, 픽셀 밀도)에 따라 특정 부분을 자르거나 강조해서 보여주고 싶은 문제.

• 같은 이미지 다른 부분.

출처: developers.google.com

• picture 요소를 활용하며 기본적으로 활용될 이미지를 img 태그에 선언하고, 브레이크 포인트별로 사용될 이미지들은 source에 선언함.
• source도 img와 동일하게 srcset, sizes, w, x를 상황에 맞게 사용할 수 있음.

▶참고 cloudfour: Responsive Images 101, Part 6: Picture Element MDN: 반응형 이미지

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

동영상

◻ video

• 이미지와 동일하게 width, max-width, height를 적절히 섞어 쓰면 됨.

video {
  width: 100%;
  max-height: 100%;
  height: 100%;
}

◻ iframe

• 컨테이닝 블록의 특성을 이용함.
• 요소의 position이 absolute인 경우, position이 static이 아닌 부모의 패딩 영역(내부 여백 영역)이 컨테이닝 블록이 됨.

// html
<div class="videoWrapper">
    <iframe width="560" height="349" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
</div>

// css
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

혹은 이렇게도 사용가능함.

<div class="videoWrapper" style="--aspect-ratio: 3 / 4;">
  <iframe ...>
</div>

.videoWrapper {
  ...
  /* falls back to 16/9, but otherwise uses ratio from HTML */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); 
}

▶참고 css tricks: fluid width video MDN: var() MDN: css custom properties

유동적 레이아웃

flexbox

◻ 개념

1차원에서 강력한 공간 배분 및 정렬 기능을 보유한 css3의 새로운 레이아웃 기능.

◻ 특징

• 수직, 혹은 수평 중 한 방향으로 정렬하거나 공간 배분을 하는 내비게이션과 같은 레이아웃을 만드는데 탁월함.
• container와 item으로 구성됨.
• container에 display: flex를 선언함으로써 적용됨.
• 주축(Main Axis)과 교차축(Cross Axis)으로 구성됨.

◻ 참조 MDN: flexbox의 기본 개념 heropy님 블로그: css flex 완벽 가이드 네이버 D2: flexbox로 만들 수 있는 10가지 레이아웃

grid

◻ 개념 2차원의 레이아웃 시스템으로 수평선과 수직선이 교차해서 이루어지며, 각각 가로행과 세로열을 정의함.

◻ 특징

• 바둑판이라고 생각하면 이해하기 쉬우며 flexbox와 마찬가지로 container와 item으로 구성되고 flexbox와 함께 사용하면 매우 강력함.
• container에 display: grid를 선언함으로써 적용됨.
• column 축과 row 축으로 구성됨. 스튜디오밀 1분코딩: 이번에야말로 CSS Grid를 익혀보자

◻ 참조 MDN: CSS 그리드 레이아웃 MDN: Basic concepts of grid layout heropy님 블로그: css grid 완벽 가이드 Box 정렬 가이드 by 야무

[카카오 인턴] 수식 최대화

문제에서 구하는 것

연산자의 우선순위를 새로 정의해서 만들 수 있는 가장 큰 상금 금액의 절댓값. * 를 해야 가장 크지 않을까 생각했으나, 입출력 예시를 보면 아닌 경우도 있기에 일반적인 규칙은 없는 듯함.

▶ 따라서, 이런 경우에는 우선 순위의 모든 경우를 다 해봐야함.

생각해보면 , + , - 이 3가지를 순서를 바꿔봤자 어차피 6가지 밖에 없기 때문에, 이 경우들을 *모두 시도해서** expression 을 계산한 뒤에 가장 절댓값이 큰 값을 반환해주면 됨.

* > + > - , * > - > + , + > * > - , + > - > *, - > * > +, - > + > *
☝ 구현하기 전에, 알고 있으면 조금 더 좋은 코드를 만들기 위한 선행 개념

1. 순열 2. 정규표현식

1. 순열

* > + > - , * > - > + , + > * > - , + > - > *, - > * > +, - > + > *

위처럼 순서가 부여된 임의의 집합. 즉, 순열이 있음. 파이썬에서는 순열을 쉽게 만들 수 있는 방법이 있는데 바로 itertools 라는 라이브러리를 이용하는 것.

다음과 같이 모든 경우의 수를 쉽게 구할 수 있음.

 from itertools import permutations

operation_list = ["*", "+", "-"]
operation_permutations = list(permutations(operation_list))
print(operation_permutations) # [('*', '+', '-'), ('*', '-', '+'), ('+', '*', '-'), ('+', '-', '*'), ('-', '*', '+'), ('-', '+', '*')]

2. 정규표현식

expression 을 보면 다음과 같이"100-200*300-500+20"로 되어 있는데 이 문자열에서 문자와 연산자를 구분해야 함.

문자열을 돌면서 - * + 중 하나를 뽑아서 나눌수도 있는데 이런 작업을 하려면 여러줄의 반복문과 분기문이 필요할 것.

문자열을 보면서 숫자가 나오지 않을 때까지 탐색 길이를 늘리고, 연산자가 나올 때까지 탐색한다. 라는 코드를 작성해야 하기 때문임.

이 긴 요구사항을 단 한 줄로 표시하는 방법이 정규표현식. 정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴으로 주로 문자열의 검색과 치환을 위한 용도로 쓰이고 있음.

▶ 우선 반환해 줘야 하는 것 : 연산자의 우선순위를 새로 정의해서 만들 수 있는 가장 큰 상금 금액의 절댓값이므로 answer = 0 을 만들어서 반환해 줄 것.

def solution(expression):
    answer = 0

    return answer

그리고 itertools 를 이용해서 순열을 만들어 줌.

from itertools import permutations


def solution(expression):
    answer = 0

    operation_list = ["*", "+", "-"]
    operation_permutations = list(permutations(operation_list))

    return answer

순열이 준비가 되면, 정규표현식을 이용해서 expression 을 숫자와 연산자로 분리해 주는데 re 라는 모듈을 가져와서, 다음과 같이 코드를 작성.

참고 : [^0-9] 는 0~9를 제외한 문자 하나를 찾는 다는 의미로 * 이나 + 이나 - 를 찾을 수 있으며 그 기준으로 입력된 문자열을 잘라 배열에 저장하게 됨.

import re
from itertools import permutations


def solution(expression):
    answer = 0

    operation_list = list()
    if '*' in expression:
        operation_list.append('*')
    if '+' in expression:
        operation_list.append('+')
    if '-' in expression:
        operation_list.append('-')

    operation_permutations = list(permutations(operation_list))
    expression = re.split('([^0-9])', expression)

    return answer

👉 이제 각각의 연산자 우선순위에 따라 연산값이 얼마가 나오는지 파악하고, 그 연산값 중 절댓값이 가장 높은 경우의 값을 반환하면 됨. 이를 위해서 연산자의 우선순위 순열에서 하나의 값을 뽑고, 그 순열에서 정해진 순서대로 계산을 진행하면 됨.

import re
from itertools import permutations


def solution(expression):
    answer = 0

    operation_list = list()
    if '*' in expression:
        operation_list.append('*')
    if '+' in expression:
        operation_list.append('+')
    if '-' in expression:
        operation_list.append('-')

    operation_permutations = list(permutations(operation_list))
    expression = re.split('([^0-9])', expression)

    for operation_permutation in operation_permutations:
                for operator in operation_permutation:
                # ????
    return answer

👉 계산을 하는 방법은 다양한 방법들이 있을 수 있지만, 여기서는 계산할 때마다 기존 계산식에 있는 연산자와 숫자를 제거하는 방식으로 진행할 것.

예를 들어 "100-200*300-500+20" 라는 입력값이 들어왔을 때, 연산자 우선순위가 * > + > - 라고 한다면 다음과 같이 연산할 것임.

1) 우선 []를 찾음. 2) [] 기준으로 앞 뒤의 숫자들을 연산한 뒤 연산 결과를 제외한 연산자와 숫자들은 제거함. 3) 그리고 다시 [*]를 찾고, 없다면 다음 연산자를 찾음.

1) 런타임의 값들로 보면, 현재 expression 변수가 다음과 같이 되어 있음. ["100", "-", "200", "*", "300", "-", "500", "+", "20"]

2) 여기서 [*] 를 찾고 앞 뒤에 있는 문자열인 "200"과 "300"을 연산하면 숫자 60000이 됨.

3) 그리고 "200", "*", "300"을 없애고 60000을 넣으면 expression 변수가 다음과 같이 되어 있음. ["100", "-", "60000", "-", "500", "+", "20"]

3) 이제 다음 연산자인 +로 다시 반복.

위의 작업을 진행하려면, 우선 기존 expression 배열을 복사해야 하며 왜냐면 우리는 연산한 작업을 하면서 배열을 잘라서 붙이는 작업을 해야 하기 때문에 원본 배열이 아닌 복사된 배열로 연산 작업을 한다는 것.

따라서 copied_expression 을 만든 후, 현재 가장 높은 우선순위의 연산자가 해당 표현식에 있을 때까지 반복함. 해당 연산자와 앞 뒤의 숫자들을 기준으로 연산을 할 예정이고 어떤 연산을 하는지는 연산자의 내용에 따라서 달라잠. 여기서는 이렇게 if 문을 사용하도록 구현했으나, 다른 방식으로 구현이 가능함.

import re
from itertools import permutations


def solution(expression):
    answer = 0

    operation_list = list()
    if '*' in expression:
        operation_list.append('*')
    if '+' in expression:
        operation_list.append('+')
    if '-' in expression:
        operation_list.append('-')

    operation_permutations = list(permutations(operation_list))
    expression = re.split('([^0-9])', expression)

    for operation_permutation in operation_permutations:
        copied_expression = expression[:]
        for operator in operation_permutation:
            while operator in copied_expression:
                op_idx = copied_expression.index(operator)

                if copied_expression[op_idx] == "*":
                    cal = int(copied_expression[op_idx - 1]) * int(copied_expression[op_idx + 1])
                elif copied_expression[op_idx] == "+":
                    cal = int(copied_expression[op_idx - 1]) + int(copied_expression[op_idx + 1])
                elif copied_expression[op_idx] == "-":
                    cal = int(copied_expression[op_idx - 1]) - int(copied_expression[op_idx + 1])
    return answer

👉 자 이제 3번째 단계인 연산자와 앞 뒤의 숫자를 없애고 결괏값을 배열에 넣어야 함.

즉, ["100", "-", "200", "*", "300", "-", "500", "+", "20"] op_idx 라고 한다면,

["100", "-", "200", "*", "300", "-", "500", "+", "20"] op_idx - 1 에 60000을 넣고

["100", "-", "60000", "*", "300", **"-", "500", "+", "20"] 여기까지의 배열과 여기까지의 배열을 합치는 것인데 그렇게 되면 연산에 사용된 값들과 연산자는 제거되기 때문임.

import re
from itertools import permutations

def solution(expression):
    answer = 0

    operation_list = list()
    if '*' in expression:
        operation_list.append('*')
    if '+' in expression:
        operation_list.append('+')
    if '-' in expression:
        operation_list.append('-')

    operation_permutations = list(permutations(operation_list))
    expression = re.split('([^0-9])', expression)

    for operation_permutation in operation_permutations:
        copied_expression = expression[:]
        for operator in operation_permutation:
            while operator in copied_expression:
                op_idx = copied_expression.index(operator)
                cal = str(
                    eval(copied_expression[op_idx - 1] + copied_expression[op_idx] + copied_expression[op_idx + 1])
                )

                **copied_expression[op_idx - 1] = cal
                copied_expression = copied_expression[:op_idx] + copied_expression[op_idx + 2:]**

    return answer

그리고 나서 copied_expression 의 첫번째 원소를 뽑는데 이는 모든 연산이 끝났다면 전부 계산이 완료되어서 하나의 원소값만 가지고 있을 것이기 때문임. 따라서 이 값과 answer 를 비교해서 가장 큰 값만 남도록 하면, 연산자의 우선순위를 새로 정의해서 만들 수 있는 가장 큰 상금 금액의 절댓값을 구할 수 있게 된 것임.

import re
from itertools import permutations


def solution(expression):
    answer = 0

    operation_list = list()
    if '*' in expression:
        operation_list.append('*')
    if '+' in expression:
        operation_list.append('+')
    if '-' in expression:
        operation_list.append('-')

    operation_permutations = list(permutations(operation_list))
    expression = re.split('([^0-9])', expression)

    for operation_permutation in operation_permutations:
        copied_expression = expression[:]
        for operator in operation_permutation:
            while operator in copied_expression:
                op_idx = copied_expression.index(operator)
                cal = str(
                    eval(copied_expression[op_idx - 1] + copied_expression[op_idx] + copied_expression[op_idx + 1])
                )

                copied_expression[op_idx - 1] = cal
                copied_expression = copied_expression[:op_idx] + copied_expression[op_idx + 2:]

        answer = max(answer, abs((int(copied_expression[0]))))

    return answer

이 문제에서 사용되는 개념인 순열과 정규표현식을 알면 문제를 더욱 수월하게 풀 수 있었음. 그러나 이런 개념들이 중요한 것은 아니고, 문제의 요구사항을 분석해서 구현해나가는 과정이 더욱 중요함.

프레젠테이션 설명

20년대 이후 캠핑과 차박이라는 트래픽 키워드가 꾸준히 급상승해 왔고, 이는 상단 슬라이드의 검색율 기사와 캠핑산업의 규모 및 도표가 증명하고 있음. 또한 사용자들의 별 보기 좋은 장소를 알고 싶어하는 니즈를 파악한 후, 우리 팀은 사람들이 알고 있는 캠핑과 차박 혹은 별 보기 좋은 장소를 추천하는 웹사이트를 만들고자 하였음.
프론트엔드 아키텍쳐의 경우, 깃액션을 사용하여 S3와 CloudFront의 자동배포를 구축하였으며Route53을 통해서 https를 구축하였음.
프론트에서는 사용자의 편리성을 중심으로 한 웹사이트의 제작을 목표로 하였으며 이에 대한 챌린지로서 사용자 위치에 기반한 콘텐츠를 보여주는 것, 그리고 클라이언트의 부담을 최소화 하는 것에 중점을 두었음.
사용자 위치기반 콘텐츠들은 geolocation api를 통해서 사용자 위치정보를 가져오고 이로 인해서 사용자 위치 기반 컨텐츠를 제공할 수 있게되었음.
클라이언트 부담을 줄이기위해 지도페이지, 커뮤니티페이지에 무한스크롤을 적용하고 적절한 리덕스 분배를 하였으며 페이지 렌더링 속도까지 개선되었음.적절한 리덕스 분배의 예시로, 커뮤니티 페이지 작업 초반에는 모든 게시글 리스트를 리덕스에 저장하고 북마크, 좋아요 등 관련기능까지 리덕스 모듈로 관리되고 있었으며 이후 성능 개선을 위해 코드를 개선시켰음. 변경된 코드는 변화가 적은 “추천순" 탭의 게시글만 저장하고 “인기순"과 “최신순"은 useState를 통해 관리함.
실제로 적절한 리덕스 분배를 통해 커뮤니티페이지에서 탭과 탭 사이의 이동에 걸리는 시간이 약 25%~50% 감소하였음.

발표 프레젠테이션

크레인 인형뽑기 게임

문제에서 구하는 것

이 문제에서는 "바구니에 쌓으면 같은 모양 인형 두 개가 없어집니다." 라고 함. 즉, 인형을 뽑아 바구니에 저장해두는데, 이 때 같은 게 2개 쌓은 인형 두 개가 없어지게 됨. 따라서, 뽑은 순서대로 저장해 놓는 자료구조가 필요하고 순서대로 데이터를 저장하는 자료구조는 "스택" 또는 "큐"임. 현재 바구니는 아래서부터 쌓이고 위에서 빠지는 형태이므로 스택을 써야 한다는 것을 유추할 수 있음.

▶ 우선 반환해 줘야 하는 것: "크레인을 모두 작동시킨 후 터트려져 사라진 인형의 개수"

따라서 answer = 0 을 지정해서 반환해 줌. 그리고 스택을 이용해서 바구니를 구현할 것이라고 했기 때문에 그 값을 저장해두기 위한 bucket = [] 라는 변수를 만들어 둘 것.

def solution(board, moves):
    bucket = []
    answer = 0

    return answer

그러면 이제 moves 에 따라서 board 의 특정 칼럼의 가장 윗값을 조회해서 bucket 안에 넣어줘야 하는데 이는 moves 가 1일 때 board 의 1열을 (실제로는 인덱스 0) 위에서부터 조회해서 빈 값이 아닐 때 bucket 에다 쌓고, 또 moves 가 5라고 한다면 board 의 5열을 (실제로는 인덱스 4) 위에서부터 조회해서 빈 값이 아닐 때 bucket 에다 쌓는다는 것.

python

# 아래와 같은 board 에 [1,5,3,5,1,2,1,4] 라는 moves 가 입력된다고 해볼 것.
# 0. moves 에서 원소를 하나씩 꺼내면서 board 의 열에 해당하는 가장 위의 원소를 bucket 에 넣으면 됨.
[
    [0, 0, 0, 0, 0],
    [0, 0, **1**, 0, **3**],
    [0, **2**, 5, 0, 1],
    [**4**, 2, 4, **4**, 2],
    [3, 5, 1, 3, 1]
] # board

# 1. 첫 번째 원소인 1, 즉 0번째 인덱스의 칼럼인 [0,0,0,4,3] 에서 가장 위의 원소인 4를 꺼내 bucket 에 넣음.
[
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 3],
    [0, 2, 5, 0, 1],
    [**4**, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
] # board

-> 

[
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 3],
    [0, 2, 5, 0, 1],
    [**0**, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
] # board

[4] # bucket

# 2. 다음 원소인 5, 즉 4번째 인덱스의 칼럼인 [0,3,1,2,1] 에서 가장 위의 원소인 3을 꺼내 bucket 에 넣음.
[
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, **3**],
    [0, 2, 5, 0, 1],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
] # board

->

[
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, **0**],
    [0, 2, 5, 0, 1],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
]# board

[3, 4] # bucket

# 3. 다음 원소인 3, 즉 2번째 인덱스의 칼럼인 [0,1,5,4,1] 에서 가장 위의 원소인 1을 꺼내 bucket 에 넣음.
[
    [0, 0, 0, 0, 0],
    [0, 0, **1**, 0, 0],
    [0, 2, 5, 0, 1],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
]# board

->

[
    [0, 0, 0, 0, 0],
    [0, 0, **0**, 0, 0],
    [0, 2, 5, 0, 1],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
]# board

[1, 3, 4] # bucket

# 4. 다음 원소인 5, 즉 4번째 인덱스의 칼럼인 [0,0,1,2,1] 에서 가장 위의 원소인 1을 꺼내 bucket 에 넣음.
# 이 때, bucket의 맨 위에 1이 있습니다. 그러면 동일한 1, 1은 제거되고 result 에 2가 추가됨.
[
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 2, 5, 0, **1**],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
]# board

->

[
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 2, 5, 0, **0**],
    [0, 2, 4, 4, 2],
    [3, 5, 1, 3, 1]
]# board

[3, 4] # bucket

위의 내용을 코드로 구현하려고 할 때, 먼저 moves 를 반복문을 통해서 조회함. 여기서 move 를 인덱스로 변환해주기 위해서 index 라는 변수에 move - 1 값을 저장함. 이후 어떤 인덱스를 구해야 하는지는 알게될 때, 이 정보를 바탕으로 board 를 조회해야 함. 따라서 board 의 row 값들을 row_info 에 담은 뒤, 각 행에서 해당 index 에 있는 열의 원소 값이 0인지 아닌지 확인함. 만약 0이 아니라면 bucket 에 append 해서 넣어주고 중단시키면 됨.

def solution(board, moves):
    bucket = []
    answer = 0

    for move in moves:
        index = move - 1
        for row_info in board:
            if row_info[index] != 0:
                bucket.append(row_info[index])
                break

    return answer

하지만 이렇게 계속 bucket 에 넣으면 안 됨. 해당 row_info[index] 값을 bucket 에 담았다는 것은, 해당 원소의 값을 뽑았다는 것을 의미하므로 0으로 초기화 시켜주는 작업을 해야 함. 그래야 맨 위의 인형이 뽑혀져 나갔다는 것을 드러내줄 수 있음.

def solution(board, moves):
    bucket = []
    answer = 0

    for move in moves:
        index = move - 1
        for row_info in board:
            if row_info[index] != 0:
                bucket.append(row_info[index])
                row_info[index] = 0
                break

    return answer

또한, 추가적인 로직이 하나 더 필요함. 맨 위의 인형과 방금 넣은 인형이 같다면, 그 두 인형을 제거하고 answer 에 2를 추가하는 로직이 필요함.

따라서 bucket 의 맨 뒤에 원소가 맨 뒤에서 두번째 원소와 같다면, bucket 의 두 원소를 제거하며 answer 를 2를 더해주는 로직을 추가하면 됨.

def solution(board, moves):
    bucket = []
    answer = 0

    for move in moves:
        index = move - 1
        for row_info in board:
            if row_info[index] != 0:
                bucket.append(row_info[index])
                row_info[index] = 0
                if len(bucket) >= 2 and bucket[-1] == bucket[-2]:
                    answer += 2
                    bucket = bucket[0:-2]
                break
    return answer

실제 코드를 작성하기 전에, 요구사항에 대해서 먼저 분석하고 어떻게 해결할 것인지에 대해서 입력 예시를 통해 생각해보시는 것이 좋음. 실제 런타임 시에 변수들이 어떻게 변화되는지에 대해 생각하다보면 "아 이렇게 하면 더 효율적이겠구나" 라는 직관이 오게 되고 이런 단계가 올 때까지 연습해보는 게 좋음.

# 결과 코드

def solution(board, moves):
    bucket = []
    answer = 0

    for move in moves:
        index = move - 1
        for row_info in board:
            if row_info[index] != 0:
                bucket.append(row_info[index])
                row_info[index] = 0
                if len(bucket) >= 2 and bucket[-1] == bucket[-2]:
                    answer += 2
                    bucket = bucket[0:-2]
                break
    return answer

괄호

해결 포인트

• "("가 나올 때는 1을 더해주고, ")"가 나올 때는 1을 빼줘서 최종 sum이 0이 되면 해결된 것. 처음부터 문제 풀이를 해보면, t 변수로 테스트 케이스의 수를 입력받고 for문을 통해 테스트 케이스 수만큼 반복해주면서 그 안에서 check할 문자열을 입력받아 줌.

• 다음으로 check 변수로 받은 문자열은 ls 변수로 list로 입력받은 후 1을 더하고 빼주는 것을 기록할 sum 변수를 만들어서 0으로 초기화 시켜둠.

• 다음으로는 key point에 써둔 것처럼 for문으로 반복해주는데 여기서 for문 안에 sum이 0보다 작아질 때, 즉 ")"가 나와서 sum에 -1이 축적되어 조건을 만족하지 못할 때 "NO"를 출력하고 break 해줌.

• 나머지는 sum이 0보다 크다면 문자열에 "("가 하나 더 있는거니 조건에 만족하지 못하여 "NO"가 출력됨.

▶ 마지막으로 else가 아니라 elif를 써서 또 하나의 조건문으로 sum이 0일 때 즉, "("와 ")"가 만나서 0이 될 때만 "YES"를 출력하면 최종 해결.

# 9012번 : 괄호
t = int(input())

for _ in range(t):
    check = input()
    ls = list(check)
    sum = 0

    for i in ls:
        if i == "(":
            sum += 1
        elif i == ")":
            sum -= 1
        if sum < 0:
            print("NO")
            break

    if sum > 0:
        print("NO")
    elif sum == 0:
        print("YES")

▶ 모바일 우선 반응형 웹 디자인 (1)

설계

출처: 유튜브-드림코딩 by 엘리

화면 구성 header, nav, main, footer 등 모바일 화면을 구성하는 각 요소들의 배치를 고려함.

브레이크 포인트를 정함.

위는 범용 예시들이며, 절대적인 기준이 아니므로 지원하고자 하는 기기와 실제 동작을 참고하여 조정해야 함.

미디어 쿼리

정의 사용자 미디어의 종류와 상태에 대해 질의를 던져 기기의 종류나 화면 크기에 맞춰 개별적인 css 코드가 적용될 수 있도록 하는 CSS3의 기능.

문법 @media only|not 매체유형 and (표현식) { CSS스타일코드; }

예시

출처: Nextree

브라우저 호환성

IE9부터 지원. 브라우저 호환성 좋음.

출처: Can I use

뷰포트

정의 화면 위 가상의 표시 영역

출처: 번데기 개발자님 티스토리 블로그

• 뷰포트 시초는 애플인데, 아이폰 3GS 시절 320 x 480개의 픽셀로 데스크톱 기준으로 개발된 웹 사이트를 렌더링 할 때 한 화면에 담기지 못하는 문제점이 있었고 이에 애플은 가상의 뷰포트 개념을 도입해 320px인 디스플레이를 980px의 뷰포트에 렌더링을 함. ☞ 이후 별다른 뷰포트 설정이 없으면 대부분의 모바일 브라우저의 뷰포트는 980px이 기본값이 됨.

• 뷰포트를 제대로 알려면 픽셀을 알아야 하는데 픽셀은 기기의 물리적 크기와 다르며 개수로 세는 것.

  • ex) 해상도 확인

    1. LG그램 15인치: 1920x1080 (가로 1920개, 세로 1080개 픽셀)
    2. 갤럭시 S10: 1440x3040 (가로 1440개, 세로 3040개 픽셀)

  • 갤럭시는 그램에 비해 물리적인 크기가 작을 뿐, 픽셀 개수는 적지 않으며 물리적인 화면 크기는 훨씬 작은데 데스크톱과 비슷한 개수의 픽셀로 렌더링 시, 작아보일 수 밖에 없음. 실제로는 뷰포트 설정이 없으면 980px로 렌더링 되겠지만, 이 또한 스마트폰의 화면에서는 큰 편임.

    ☞ 작은 스마트폰 화면에 웹 페이지를 모두 표시하려고 하니 전체 페이지의 배율이 작게 축소되어 보이는 것.

▶ 해결 방법

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        // mobile first markup
    </body>
</html>

width: 뷰포트의 가로 크기를 결정. device-width로 설정하면 최적화된 UI를 적용하기 위해 기기마다 독립적으로 설정된 픽셀값을 뷰포트의 width로 설정하고, 그것에 웹 페이지를 맞춤.

initial-scale: 페이지가 처음 로드될 때 줌 레벨을 조정.

그 외

• minimum-scale : viewport의 최소 배율값, 기본값은 0.25.
• maximum-scale : viewport의 최대 배율값, 기본값은 1.6.
• user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes.

모바일 우선

• 우선 모바일을 기준으로 마크업을 함.
• 이후 작성된 코드 아래에 미디어 쿼리를 사용해 각 브레이크 포인트별로 코드를 더 함.

.block__element--modifier {
    // Mobile
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        // Tablet
    }
    @media screen and (min-width: 1024px) {
        // PC
    }
}

css 단위

px

◻ 소개 css의 가장 기본 단위로, 1px는 화소 1개의 크기를 의미하며 절대값임.

◻ 사용법 사용자의 브라우저 설정에도 불구하고 늘 절대적인 값을 유지했으면 하는 경우 ex) border

◻ 주의사항 웹 접근성(Accessibility)을 위해 위와 같이 꼭 필요할 때만 사용하는 것이 좋음.

%

◻ 소개 언제나 다른 수치를 참조하며 참조값은 같은 요소에 적용된 다른 속성이거나 혹은 조상 요소의 같은 속성이거나, 컨테이닝 블록의 오프셋 속성(left, right, top, bottom)이나 박스모델 속성(width, height, margin, padding)과 같은 서식 상황(formatting context)에서의 측정값이거나, 혹은 다른 어떤 것임.

참조: w3.org

◻ 사용법 레이아웃 지정에 유용함.

// html
<article class="blog__post">
    <div class="blog__post--image">
    </div>
    <div class="blog__post--content">
    </div>
</article>

// css
.blog__post {
    width: 100%;
}

.blog__post .blog__post--image {
    width: 50%;
}

.blog__post .blog__post--content {
    width: 50%;
}

flexbox와 함께 사용하면 유용함.

// html
<div class="container">
    <div class="item">1</div>
    <div class="item">22</div>
    <div class="item">three</div>
</div>

//css
.container {
    display: flex;
    justify-content: center;
    background-color: red;
}

.container .item {
    width: 20%;
    border: 1px solid black;
    background-color: skyblue;
}

sandbox에서 위 코드를 실험한 결과 container에 display: flex와 justify-content: center를 선언하면 디폴트로 item들의 width는 내부 요소의 width에 맞춰져 주축 row를 기준으로 중앙 정렬 되고, 창의 폭을 줄이기 시작하면 여백이 먼저 감소하다가 여백이 모두 줄어들었을 때에도 item들의 width는 내부 요소의 width 아래로 떨어지지 않음.

이 때, item에 width: 20%를 선언하면 item들이 container의 width를 20%씩 총 60%를 갖게 되고 나머지 40%는 양 쪽에 20%씩 나눠져서 그 비율이 내부 요소의 크기와 관계없이 유지됨. 즉, 위와 같이 창의 폭을 줄일 때, item의 width가 내부 요소의 width보다 줄어들더라도 해당 비율을 고수하며 이는 height도 마찬가지임.

• 마진, 패딩에 사용하면 유용함.
  

◻ 주의사항 % 단위가 무조건 부모 요소를 참조한다고 생각하기 쉽지만, 이는 사실이 아니며 특히 박스 모델 속성(width, height, padding, margin)과 오프셋 속성(left, right, top, bottom)에 %를 적용할 때 -> % 수치는 단순히 '부모 요소'가 아닌 '컨테이닝 블록'을 기준으로 계산됨. 대부분의 경우 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역이나, 항상 그렇지는 않음.

• height, top, bottom은 컨테이닝 블록의 height를, width, padding, margin, left, right은 width를 사용해 백분율을 계산함.

  참고: 컨테이닝 블록의 모든 것-MDN

• 특정 요소의 height에 100%를 선언할 때 margin을 고려하지 못하면 컨테이닝 블록 밖으로 탈출하는 현상이 생김.

// html
<div class="slider__track">
    <div class="slider__track--slide">
    </div>
</div>

// css
.slider__track {
    display: flex;
    justify-content: center;
    height: 150px;
    background-color: red;
}

.slider__track--slide {
    width: 20%;
    height: 100%;
    margin: 20px 0;
    background-color: skyblue;
}

✔ 해결 방법

1. slide 요소의 마진을 제거함.
2. slide 요소의 height에서 마진값을 뺌.

.slider__track--slide {
    height: calc(100% - (20px + 20px));
}

• 컨테이닝 블록의 중앙에 내부 요소를 배치하기 위해 position과 top, left를 %와 함께 사용할 때, 아래와 같이 내부 요소의 중심이 아닌 모서리가 중앙에 맞춰짐.

// html
<header class="header">
    <div class="header__logo">
    </div>
</header>

// css
.header {
    position: relative;
}

.header .header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
}

✔ 해결 방법

.header .header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    // 아래 코드를 추가함
    transform: translate(-50%, -50%);
}

[3차] 방금그곡

문제에서 구하는 것

▶ 자신이 들은 멜로디가 포함되어 있는 음악 중 재생된 시간이 제일 긴 음악 제목

따라서, 그러면 자신이 들은 멜로디가 각 음악에 포함되어 있는지 아닌지를 먼저 파악함. 그 뒤 포함되어 있는 음악들 중에서 재생된 시간이 가장 긴 음악의 제목을 반환하면 됨.

주의할 점

▶ 입출력 예시에서 HELLO는 C#DEFGABC#DEFGAB로, WORLD는 ABCDE로 재생됨. HELLO 안에 있는 ABC#은 기억한 멜로디인 ABC와 일치하지 않고, WORLD 안에 있는 ABC가 기억한 멜로디와 일치함. → ABC# 은 ABC 를 포함하지 않음. 즉, C# 과 C는 아예 다른 음이라는 것! 따라서 C# 과 C를 구분하기 위한 방법을 구해야 함.

✅ 첫 번째 방법: 문자열을 기준으로 묶어버리는 것.

C#DEFGABC#DEFGAB 라는 문자열을 ["C#", "D", E", "F", "G", "A", "B", "C#", "D", E", "F", "G", "A", "B"] 라고 하는 것. 그러면 이 안에 ABC 가 있는지 확인하기 위해서 배열을 순회하면서 "A", "B", "C" 원소가 순서대로 있는지 파악하면 됨.

✅ 두 번째 방법: #이 붙은 문자들을 치환해버리는 것.

C# → c, D# → d 처럼 둘 때,C#DEFGABC#DEFGAB 라는 문자열이 cDEFGABcDEFGAB 라고 표시가 됨. 그러면 이 안에 ABC 가 있는지 확인하기 위해 문자열을 돌면서 "ABC" 라는 부분 문자열이 있는지 파악하면 됨.
▶두 가지 경우 다 비슷한 시간 복잡도와 구현 난이도가 있지만, 두 번째 방법이 보다 편한 방법이라고 할 수 있기에 두 번째 방법 채택. python 에서는 문자열 찾기 관련된 함수가 많기 때문에 쉬울 수 있음.

우선 #이 붙은 문자들을 치환해버리기로 했으니, replace_step 이라는 함수를 만들어서 m의 #붙은 문자열들을 치환해주도록 함.

def replace_step(m):
    return m.replace('C#', 'c').replace('D#', 'd').replace('F#', 'f').replace('G#', 'g').replace('A#', 'a')


def solution(m, musicinfos):
    answer = ''
    m = replace_step(m)

    return answer

def replace_step(m):
    return m.replace('C#', 'c').replace('D#', 'd').replace('F#', 'f').replace('G#', 'g').replace('A#', 'a')


def solution(m, musicinfos):
    answer = ''
    m = replace_step(m)

    for musicinfo in musicinfos:
        start_time, end_time, name, melody = musicinfo.split(",")
        play_time = (int(end_time[:2]) * 60 + int(end_time[3:])) - (int(start_time[:2]) * 60 + int(start_time[3:]))

    return answer

여기서, melody 에는 아직 C# 등의 문자가 남아있을테니 마찬가지로 치환을 해 주면, melody 및 그 멜로디가 몇초나 진행되었는지도 알 수 있음. 예를 들어, ABC라는 멜로디가 15초 진행되었다고 하면 ABCABCABCABCABC는 이렇게 계속 반복이 되었을 것이며 이는 3이라는 멜로디의 길이를 15초 동안 실행해주기 위해서 5번이 반복된 것. 만약 실행기간이 16초 였다면 ABCABCABCABCABCA 까지 실행되었을 것임.

즉, 멜로디의 모습과 실행시간을 이용해서 실제 실행된 멜로디를 알아와야 하는데 이를 구하기 위해 올림(실행시간 / 멜로디의 길이)을 통해서 멜로디를 반복할 숫자를 구하면 ABCABCABCABCABCABC 라는 문자열이 됨. 그리고 멜로디의 길이 까지 잘라주는데, 이 때 16까지 길이를 잘라주면 ABCABCABCABCABCA 가 되기 때문에, 실제 실행된 멜로디를 구할 수 있음.

import math


def replace_step(m):
    return m.replace('C#', 'c').replace('D#', 'd').replace('F#', 'f').replace('G#', 'g').replace('A#', 'a')


def solution(m, musicinfos):
    answer = ''
    m = replace_step(m)

    for musicinfo in musicinfos:
        start_time, end_time, name, melody = musicinfo.split(",")
        play_time = (int(end_time[:2]) * 60 + int(end_time[3:])) - (int(start_time[:2]) * 60 + int(start_time[3:]))

        melody = replace_step(melody)
        melody_repeated_count = math.ceil(play_time / len(melody))
        melody_played = (melody * melody_repeated_count)[:play_time]
    return answer

따라서 melody_played 는 ABCABCABCABCABCABC 가 만들어짐. 이 안에 m 이라는 문자열이 존재하는지 확인하는데 이 때, in 이라는 연산자를 쓰면 간단하게 구현가능.

최종적으로 구하려는 것은 자신이 들은 멜로디가 포함되어 있는 음악 중 재생된 시간이 제일 긴 음악 제목. 즉, 가장 재생된 시간이 긴 제목을 저장하고 있어야 함. 따라서 이를 구분하기 위해 max_play_time 이라는 변수를 만들고, answer 의 기본값을 None 으로 만듬. 만약 play_time 이 max_play_time 보다 크다면 answer 와 max_play_time 을 갱신하도록 함.

import math


def replace_step(m):
    return m.replace('C#', 'c').replace('D#', 'd').replace('F#', 'f').replace('G#', 'g').replace('A#', 'a')


def solution(m, musicinfos):
    answer = None
    max_play_time = 0
    m = replace_step(m)

    for musicinfo in musicinfos:
        start_time, end_time, name, melody = musicinfo.split(",")
        play_time = (int(end_time[:2]) * 60 + int(end_time[3:])) - (int(start_time[:2]) * 60 + int(start_time[3:]))

        melody = replace_step(melody)
        melody_repeated_count = math.ceil(play_time / len(melody))
        melody_played = (melody * melody_repeated_count)[:play_time]
        if m in melody_played and play_time > max_play_time:
            answer = name
            max_play_time = play_time

    return answer

그리고 '조건이 일치하는 음악이 없을 때에는 “(None)”을 반환한다.' 라는 요구사항에 맞춰서 간단한 if 문도 추가하면 완료.

import math


def replace_step(m):
    return m.replace('C#', 'c').replace('D#', 'd').replace('F#', 'f').replace('G#', 'g').replace('A#', 'a')


def solution(m, musicinfos):
    answer = None
    max_play_time = 0
    m = replace_step(m)

    for musicinfo in musicinfos:
        start_time, end_time, name, melody = musicinfo.split(",")
        play_time = (int(end_time[:2]) * 60 + int(end_time[3:])) - (int(start_time[:2]) * 60 + int(start_time[3:]))

        melody = replace_step(melody)
        melody_repeated_count = math.ceil(play_time / len(melody))
        melody_played = (melody * melody_repeated_count)[:play_time]
        if m in melody_played and play_time > max_play_time:
            answer = name
            max_play_time = play_time
    if not answer:
        return "(None)"
    return answer

베르트랑 공준

단계별 해결법

해답을 도출하기 위해서는 먼저 소수를 구하는 방법을 알아햐 함.

링크 : https://ko.wikipedia.org/wiki/%EC%86%8C%EC%88%98_(%EC%88%98%EB%A1%A0)

이번 문제에서 까다로웠던 부분은 "시간 초과". 결과를 도출하는 것까지 수행을 완료했지만 cpu 부담을 최대한 낮추어 경량화할 수 있는 코드가 필요했음. 처음에 진행한 코드는 배열에 소수들을 미리 저장시키지 않고서 즉각적인 계산을 수행하도록 했지만,정답이 된 코드는 소수들을 미리 구하여 리스트나 튜플에 저장시킨 후 값들을 찾아내야 했음.

처음에는 소수들을 저장하는 리스트 만드는 시간이 더 오래 걸릴 것 같다는 생각을 했지만, 좀 더 생각해봤을 때 주어진 값만 입력하는 것이 아니라 더욱 다양한 값들을 입력했을 경우에는 즉각적인 연산 방식이 cpu를 기하급수적으로 많이 사용하는 결과를 가져온다는 것.

정답 코드

import math

# 소수인지를 판별하는 함수
def checkValue(numValue):
    if numValue == 1:
        return True
    else:
        for comp in range(2, int(math.sqrt(number))+1):
            if numValue % comp == 0:
                return False
    return True


# 소수를 리스트에 저장
value = list(range(123456*2))
prime_number = list()

for number in value:
    if checkValue(number):
        prime_number.append(number)


# 사용자 입력 및 결과 출력
while(1):
    insertN = int(input())
    cnt = 0

    if insertN == 0:
        break

    for valueN in prime_number:
        if insertN < valueN <= insertN*2:
            cnt += 1
    print(cnt)

시간 초과 코드

import math

# 소수를 판별하는 함수
def checkValue(numValue):
    if numValue == 1:
        return True
    else:
        for comp in range(2, int(math.sqrt(number))+1):
            if numValue % comp == 0:
                return False
    return True


# 사용자 입력 및 출력 부분
while(1):
    insertN = int(input())
    prime_number = 0
    if insertN == 0:
        break
    else:
        for number in range(insertN+1, insertN*2+1):
            if checkValue(number):
                prime_number += 1
    print(prime_number)

여러개의 input 상태 관리하기 (React)

▶ InputSample.js 1

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };


  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

input 의 개수가 여러개가 됐을 때는 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 가능하지만 그것보다는, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이 더 좋음. 또, useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 함.

▶ InputSample.js 2

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

리액트 상태에서 객체를 수정해야 할 때는

inputs[name] = value;

이런식으로 직접 수정하면 안되며 대신 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 함.

setInputs({
  ...inputs,
  [name]: value
});

여기서 사용한 ... 문법은 spread 문법으로, 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해줌. (참고링크)

이러한 작업을, "불변성을 지킨다" 라고 부름. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됨. 만약 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않음. 또한 리액트에서는 불변성을 지켜주어야 컴포넌트 업데이트 성능 최적화도 가능함.

설탕배달

사용자로부터 설탕 무게를 입력 받고 3kg과 5kg 봉지를 최소로 사용해 담으면 몇봉지가 나오는지를 계산하는 문제로, 만약 정확히 떨어지지 않는다면 -1을 반환하는 문제.

단계별 알고리즘

1) 5kg 에 설탕을 빠짐없이 담을 수 있다면 (입력 값이 5로 나눠떨어진다면) 입력값을 5로 나눈 몫을 출력하고 프로그램 종료

2) 5kg 에 설탕을 빠짐없이 담을 수 없다면 3kg 봉지에 한 번 담기 (봉지 카운트는 1 증가, 입력값은 3 감소)

3) 만약 입력값이 0보다 작아지면 -1을 출력하고 프로그램 종료

단계별 해결법

1) Box 변수와 inp 변수를 두고, inp 변수에는 int(input()) 을 이용해 사용자의 입력을 받고, Box 변수를 통해 발생하는 봉지수를 카운트 함.

2) while True 를 이용해 무한 루프를 만들어 줌.

3) while 문 내에 if 문을 넣어 inp 값이 5로 나눠지면 Box내에 inp 값을 5로 나눈 몫을 넣고 그 값을 프린트 한 후, while 문을 종료. 만약 그렇지 않다면 inp 값을 3 감소시키고 Box 값을 하나 증가시켜줌.

▶ 여기서 파이썬 코드는 C나 다른 언어들처럼 ++ 연산자를 사용할 수 없으며, 따라서 꼭 += 1 을 사용하여 1씩 증가시켜야 함.

4) 마지막으로 또다른 if를 사용해 inp 값이 0보다 작아지면 -1을 출력하고 while 문을 종료시켜 줌.

별 보러 가지 않을래?

▶ 사이트 보러가기 ▶ 발표영상

개발기간

• 2021/10/23 ~ 2021/12/02

View

주요기능

• 메인
  • 별자리 보기 좋은곳 추천
• 별자리 페이지
  • 유저의 위치에 기반한 날씨정보 제공
  • 매일 변하는 실시간 별보기 좋은 지역 정보 제공
• 지도 페이지
  • 지도 및 캠핑장 위치 마커 표시
  • 유저의 위치 주변 캠핑장 정보 제공
  • 무한 스크롤을 통한 랜더링 시간 단축
  • 지역별 검색기능
• 커뮤니티 페이지
  • 추천순, 인기순, 최신순 게시글 리스트 출력
  • 게시글 작성
  • 게시글 제목 혹은 지역명을 이용한 검색 기능
  • 좋아요, 북마크 기능 (북마크는 마이페이지에서 확인 가능)
• 로그인/회원가입
  • 아이디 저장 기능
  • 회원가입 시 닉네임, 아이디 중복확인

기술스택

• ✏️ javascript, react
• 📝 axios, redux, immer
• 📒 kakao map API, geolocation API
• 📤 S3, Route53, CloudFront => HTTPS

주요 라이브러리

• axios : 서버 연결
• react-cookie : 사용자 로그인 인증용도
• react-redux : 클라이언트 데이터 저장
• immer : redux state 불변성 유지
• react-helmet : 메타태그 변경
• react-slick : 많은 데이터를 슬라이더 형식으로 보여줌.
• react-kakao-maps-sdk : 카카오맵API, 지도 및 마커 제공
• lodash : input 이벤트 콜백 감소
• react-quill : 텍스트 편집기 기능 제공

사용자 피드백 및 개선된 점

• 추천 장소에 대한 정보가 부족 => 내용 추가
• 별자리 설명 클릭시 컨텐츠 고정 토글
• 관측지수 0일때 데이터가 들어오는게 맞는지 헷갈림 : 별 관측지수에 따라 문구 변경 "ex) 별 보기 어려운 날 :( "
• 사용자 위치를 페이지 이동할때마다 가져와서 너무 느리게 느껴짐 : 사용자 위치 정보를 리덕스에 저장하여 재활용

개선 예정

• 모바일 반응형 스타일 작업

MVP 소개

Architecture

프로젝트 구조

어려웠던 점 or 신경쓴 점

CSS 정리

• css standard syntax selector { property: value; } prpoerty : 속성 지정 value : 속성 값

• css는 가급적 따로 style.css 와 같이 파일을 만들어 link 태그로 html 문서에 적용할 것.

▶ Box Model What is box? ☞ html 문서가 rendering될 때 box 모양으로 처리됨 => html이 css로 표현될 때 box로 표현함. ex) .box { width: 500px; height: 300px; padding: 20px; }

▶ Content : content가 포함되어 있는 box 가로 길이 : width 세로 길이 : height

▶ Padding : 안쪽 여백, content와 border 사이 공간 : 방향별 여백도 지정 가능 ( ex padding-left:30px)

▶ Border : 테두리 - 테두리의 굵기, 스타일, 색상 지정 필요, 필요 없을 경우 none으로 설정

▶ border-radius: 주어진 px 또는 %만큼 둥글어짐, 50%가 주어졌을 때 원으로 표현 : Padding과 같이 방향 별로 지정 가능

▶ Margin : 요소와 요소 사이의 간격 : 0 auto; => margin을 자동 분배 => 결과적으로 가운데 위치

▶ Shorthand : padding: 10px, 20px, 30px, 40px => 순서대로 top, right, bottom, left 의미 : margin: 20px, 40px => top&bottom : 20px, right&left : 40px => left에 대한 명시가 없으면 right의 값 대입

▶box-sizing : content-box; : default value is content-box : border-box -> width, height 값을 border까지 포함한 값으로 계산

▶Display : block - 다른 element가 침범하지 않도록 막음 : width를 선언하지 않은 경우, width= 부모의 content-box의 100% : width를 선언한 경우, 남은 공간을 margin으로 자동 채움 : height를 선언하지 않은 경우, 자식 element의 height의 합 : inline - 옆으로 나열 (vs block) : 공간이 모자랄 경우 줄바꿈 : width, height, top, bottom 값 사용 불가 -> 균일한 흐름을 방해하기 때문 : img 태그의 경우 width, height를 가질 수 있음 : inline-block : inline + block

▶ Float : 가로 배치 : float가 되었을 때, 부모 요소, 형제 요소와 떨어지게 됨 -> 본래 있던 곳을 빈 공간으로 인식함 : float된 요소는, block이 됨 but, 실제 conetnts의 길이만큼 width를 가지게 되며 margin도 자동으로 생기지 않음 : 모든 요소가 float될 경우 부모의 height값이 0이 됨 : inline요소들은 주위에 위치한 float 요소에 영향을 받음 -> float요소를 인식하고 inline 구성 : 부모에게 overflow: hidden; => float된 요소를 인식하게 됨 : clear : clear: left => float: left인 요소를 인식하게 됨 => clear된 요소를 이용하여 부모의 height값 자동 조정 : left, right, both : block인 요소에게만 사용 가능 : Pseudo Element -> css를 이용하여 virtual element 생성 (::before, ::after 요소의 가장 앞, 마지막에 가상 요소를 생성) ex) .pseudo::before{ content: value } -> value : 가상 요소가 가질 내용

▶ Opacity : 투명도 ( 0 ~ 1 ) 숫자가 클 수록 불투명

▶ Position : 요소를 원하는 위치로 이동시키기 위해 사용 : static - default : relative - float와 유사하나, 원래 위치를 기억, 원래 위치를 기준으로 이동 - ex) top : 20px -> top에서부터 20px 이동 : absolute - display 값이 block, margin이 없어져 길막은 타요소 차단 불가 - 부모 요소가 인식 x - inline요소 또한 인식 x ( float와 차이점 ) - 가장 가까운 static이 아닌 조상 요소를 기준으로 위치 이동 가능 : fixed - viewport 사이즈를 기준으로 이동 -> 스크롤과 상관 없이 위치 고정 : z-index: x; -> float된 정도, 값이 클수록 값이 낮은 요소를 덮음 text-align : center; : inline 성질을 갖고 있는 객체를 가운데 정렬 Flexbox : display: flex(or inline-flex); -> flex 사용 - 정렬하고자 하는 요소를 감싸는 부모에서 선언 : flex-direction: row; -> 가로 방향 정렬(main axis: row, cross axis: column) if 세로? column(main axis: column, cross axis: row),
row-revese, column-reverse의 경우 방향 반대(오른쪽에서 왼쪽, 밑에서 위쪽) : flex-wrap: nowrap - 한줄로 정렬(감싸지 않음) -> 자식의 size를 강제로 줄일 수도 있음 wrap - 자식의 size를 줄이지 않고 정렬(강제 한줄 정렬 x) : justify-content : flex-start; - flex line의 시작점부터 정렬 : flex-endl - flex line의 끝점부터 정렬 : center - 가운데 정렬 : space-between - 요소들 사이 간격을 같게 정렬 : space-around - 요소 좌우 별로 동일한 너비만큼 margin 제공하고 정렬 : align-items : (justify-conetnt attr) - cross axis 기준으로 정렬 : align-content : 전체 요소를 기준으로 정렬 : order : n - n번째 순서로 정렬 (자식 요소에 포함) : flex-grow : n - 0 -> 키우지 않음, n > 0 -> 남는 영역을 채움

• media screen and (min-width: 768px){} => width 768px 이상인 device에서 적용
• vh = viewport height : viewport의 높이 기준 비율 -> 1vh = 1%(viewport 기준) <-> vw(viewport width)

▶ Typography - font-size : npx - 절대 단위 : nem - 상대 단위(비례값) => 실제로 적용된 폰트 사이즈를 기준으로 1em : nrem - 상대 단위(비례값) => root(html) em - html에 적용된 font-size = 1rem - line-height : 줄간격 : font-size와 같은 attr 적용 : em을 적용할 때는 생략 가능 ( EX. 1.5em = 1.5 ) : line-height의 중간에 글자가 위치 - letter-spacing : font-size와 같은 attr 적용 - font-family : "적용할 font" : "적용할 font", sans-serif; -> font가 존재하지 않을 경우 임의의 sans-serif 적용 : "적용할 font1", "적용할 font2", sans-serif -> font1이 존재하지 않을 경우 font2, font2도 존재하지 않을 경우 임의의 sans-serif - text-align : left - 왼쪽 정렬 : right - 오른쪽 정렬 : center - 가운데 정렬 - color : hex - 16진수 값 : rgb - (r, g, b) : rgba - (r, g, b, a) => t는 투명도 - text-indent : npx - npx만큼 들여쓰기 - text-transform : alphbet based에만 영향 : none : capitalize - 음절의 앞자리를 대문자로 : uppercase - 모든 문자를 대문자 : lowercase - 모든 문자를 소문자 - text-decoration: underline - 밑줄 생성 : line-through - 줄 가림(취소선) : none - font-style : normal : italic - 글자 기울게 : oblique

▶ Background - background-color : hex, rgb, rgba => color와 같은 attr - background-image : url() -> img 경로( 로컬 상대 경로 or 네트워크 이미지 주소 ) - background-repeat : repeat -> 반복(default) : no-repeat -> 반족 x - background-size : contain - background를 넘어가지 않도록 : cover - background를 가득 채우도록 ( 비율 유지 -> 이미지가 잘릴 수 있음 ) : custom - width, height를 조정 가능 ( 100% auto ...) - background-position : x y 값 조정 -> center center, center bottom, center 30px...

• cusor : pointer -> 커서를 해당 요소 위에 올리면 선택 가능 커서로 변경

▶ Transition : property - 지정된 요소를 자연스럽게 변화 (ex. font-size) -> all => 모든 요소에 영향 : duration = ms = s - 변화가 얼마동안 일어날지 : timing-function = ease-in - 천천히 바뀌다 빠르게 = ease-out - 빠르게 바뀌다 천천히 = ease-in-out - 천천히 -> 빠르게 -> 천천히 = cubic-bezier() - 속도 변화폭을 customizing (cubie-bezier 웹 테스트 가능) : delay = 값으로 들어간 ms 이후 변화 시작 => property와 duration은 필수 parameter => 각각의 property 마다 따로 transition을 적용도 가능

▶ Animation : 애니메이션 부여 : @keyframes name{ from{ Rules } to{ Rules } } -> 시작할 때는 from의 Rules, 끝날 때는 to의 Rules => name 애니메이션 정의 -> 0 ~ 100%로 범주로 Rules를 지정해도 됨( like Swtich ) : animation-name : name 으로 name 애니메이션 적용 : animation-duration = Transition의 duration과 동일 : animation-timing-function = Transition의 animation-timing-function과 동일 : animation-delay = Transition의 delay와 동일 : animation-iteration-count : 값만큼 반복, infinite - 무한 반복 : animation-direction : reverse - to->from - 애니메이션의 진행 방향 설정 : alternate - 방향을 번갈아가면서

▶ box-shadow : h-offset v-offset - 그림자의 방향 ( +이면 오른쪽 또는 아래쪽, -이면 왼쪽 도는 위쪽) blur - 흐린 정도 (커질 수록 흐려짐) spread - 그림자 크기 color - 그림자 색상

▶ opacity : 0(투명) ~ 1(불투명) 사이 값

▶ overflow : width, height값을 자식 요소 또는 컨텐츠가 넘어섰을 때 사용 : visible - default값 -> 넘치더라도 보여줌 : auto,scroll - 스크롤 표시 : hidden - 숨기기 - overflow-x, overflow-y로 가로 세로 각 방향에 대한 옵션도 설정 가능

▶ transform : 기존 요소의 크기와 위치를 기억해 다른 요소에게 영향 x : translate(x, y) - x, y 방향으로 위치 - translateX, translateY로 x 또는 y 방향으로만 이동 가능 - % 단위를 사용할 경우 transform이 사용된 해당 요소의 width, height를 기준으로 움직임 : scale(N) - N배만큼 크기 조절 - scale(x, y)를 이용하여 가로는 x배, 세로는 y배 조절 가능 : rotate(Ndeg) - N도만큼 회전 (deg는 각도를 의미하는 단위)

▶ visiblity : visible - 보이기 : hidden - 숨기기 -> 요소는 존재 (opacity:0과 흡사) vs display: none -> 요소가 존재하지 않는 것으로 취급

▶ Selector - ID - #id로 선택 (EX_ in html, id = name in CSS, #name{}) - '>'을 이용하여 child 선택 EX_ section > h1 -> section의 child 중 h1 - ' '을 이용하여 descendants 선택 EX_ section h1 -> section의 자손 중 h1 - '+' 해당 선택자 바로 이후에 오는 형제 요소 하나 선택 EX_ .active + li -> active 이후에 위치한 li 하나 - '~' 해당 선택자 이후에 오는 형제 요소들 선택 EX_ .active ~ li -> active 이후에 위치한 li - :first-child - 첫번째 요소에만 적용 EX_ li:first-child - 리스트의 첫번째 요소에 적용 - :last-child - 마지막 요소에만 적용 EX_ li:last-child - 리스트의 마지막 요소에 적용 - :nth-child(N) - N번째 요소에만 적용 EX_ li:nth-child(3) - 리스트의 3번째 요소에 적용 -> 짝수일 경우 N=2n, 홀수일 경우 N=2n-1도 적용 가능 - :hover - 마우스 커서가 해당 요소 위에 위치할 때 적용 - :active - 해당 요소를 클릭하였을 때 적용 - :focus - 요소가 선택(focus)되었을 때 (EX_ 입력창 등) 적용 - 나중에 선언된 스타일이 덮어씌움 - 선택자 우선 순위{ type 선택자가 우선 순위 마지막(EX_ span, div, a 등) class, 가상 class 선택자가 2순위 ID 선택자가 1순위 } - 선택자 우선 순위 무시{ inline style : html 내부에 style을 작성 !important : 최고 우선 순위 EX_ p{ color: red !important; } } => 가급적 지양

▶ Grid System : container - grid system이 적용되는 전체 범위 : column - container를 분할하는 칸 (일반적으로 12칸을 주로 이용) : gutter - column간 여백 -> 간격을 위한 여백

지도 상세 페이지 1차 뷰

커뮤니티 상세 페이지 1차 뷰

HTML 태그정리

Top 5 Rich Text Editors for React in 2021

▶ https://blog.bitsrc.io/top-5-rich-text-editors-for-react-in-2021-628fecf0f7e0

Draft.js 텍스트 에디터 라이브러리 테스트

▶ Draft.js는 페이스북에서 공개한 것으로 react에서 텍스트에디터를 만들 수 있는 툴이다. “WYSIWYG(what you see is what you get)” 이라고 작성할때 보이는게, 결과물이랑 같은 유저 인터페이스를 말함.

▶ import

• draft-js 를 추가로 설치하는 이유는 DOM 에 해당 텍스트를 넣어줘야 하기 때문.

  import { Editor } from "react-draft-wysiwyg";
  import { EditorState, convertToRaw } from "draft-js";

▶ state 선언

• text를 담을 state의 초기값은 EditorState.createEmpty() 로 해줘야 Immutable 객체로 나옴.

→ RichTextEditor 코드(JS)

import React from "react";
import { Editor, EditorState, getDefaultKeyBinding, RichUtils} from "draft-js";
import './RichText.css';
import '../../node_modules/draft-js/dist/Draft.css';
​
​
class RichTextEditor extends React.Component {
    constructor(props) {
      super(props);
      this.state = {editorState: EditorState.createEmpty()};
​
      this.focus = () => this.refs.editor.focus();
      this.onChange = (editorState) => this.setState({editorState});
​
      this.handleKeyCommand = this._handleKeyCommand.bind(this);
      this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
      this.toggleBlockType = this._toggleBlockType.bind(this);
      this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
    }
​
    _handleKeyCommand(command, editorState) {
      const newState = RichUtils.handleKeyCommand(editorState, command);
      if (newState) {
        this.onChange(newState);
        return true;
      }
      return false;
    }
​
    _mapKeyToEditorCommand(e) {
      if (e.keyCode === 9 /* TAB */) {
        const newEditorState = RichUtils.onTab(
          e,
          this.state.editorState,
          4, /* maxDepth */
        );
        if (newEditorState !== this.state.editorState) {
          this.onChange(newEditorState);
        }
        return;
      }
      return getDefaultKeyBinding(e);
    }
​
    _toggleBlockType(blockType) {
      this.onChange(
        RichUtils.toggleBlockType(
          this.state.editorState,
          blockType
        )
      );
    }
​
    _toggleInlineStyle(inlineStyle) {
      this.onChange(
        RichUtils.toggleInlineStyle(
          this.state.editorState,
          inlineStyle
        )
      );
    }
​
    render() {
      const {editorState} = this.state;
​
      // If the user changes block type before entering any text, we can
      // either style the placeholder or hide it. Let's just hide it now.
      let className = 'RichEditor-editor';
      var contentState = editorState.getCurrentContent();
      if (!contentState.hasText()) {
        if (contentState.getBlockMap().first().getType() !== 'unstyled') {
          className += ' RichEditor-hidePlaceholder';
        }
      }
​
      return (
        <div className="RichEditor-root">
          <BlockStyleControls
            editorState={editorState}
            onToggle={this.toggleBlockType}
          />
          <InlineStyleControls
            editorState={editorState}
            onToggle={this.toggleInlineStyle}
          />
          <div className={className} onClick={this.focus}>
            <Editor
              blockStyleFn={getBlockStyle}
              customStyleMap={styleMap}
              editorState={editorState}
              handleKeyCommand={this.handleKeyCommand}
              keyBindingFn={this.mapKeyToEditorCommand}
              onChange={this.onChange}
              placeholder="Tell a story..."
              ref="editor"
              spellCheck={true}
            />
          </div>
        </div>
      );
    }
  }
​
  // Custom overrides for "code" style.
  const styleMap = {
    CODE: {
      backgroundColor: 'rgba(0, 0, 0, 0.05)',
      fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
      fontSize: 16,
      padding: 2,
    },
  };
​
  function getBlockStyle(block) {
    switch (block.getType()) {
      case 'blockquote': return 'RichEditor-blockquote';
      default: return null;
    }
  }
​
  class StyleButton extends React.Component {
    constructor() {
      super();
      this.onToggle = (e) => {
        e.preventDefault();
        this.props.onToggle(this.props.style);
      };
    }
​
    render() {
      let className = 'RichEditor-styleButton';
      if (this.props.active) {
        className += ' RichEditor-activeButton';
      }
​
      return (
        <span className={className} onMouseDown={this.onToggle}>
          {this.props.label}
        </span>
      );
    }
  }
​
  const BLOCK_TYPES = [
    {label: 'H1', style: 'header-one'},
    {label: 'H2', style: 'header-two'},
    {label: 'H3', style: 'header-three'},
    {label: 'H4', style: 'header-four'},
    {label: 'H5', style: 'header-five'},
    {label: 'H6', style: 'header-six'},
    {label: 'Blockquote', style: 'blockquote'},
    {label: 'UL', style: 'unordered-list-item'},
    {label: 'OL', style: 'ordered-list-item'},
    {label: 'Code Block', style: 'code-block'},
  ];
​
  const BlockStyleControls = (props) => {
    const {editorState} = props;
    const selection = editorState.getSelection();
    const blockType = editorState
      .getCurrentContent()
      .getBlockForKey(selection.getStartKey())
      .getType();
​
    return (
      <div className="RichEditor-controls">
        {BLOCK_TYPES.map((type) =>
          <StyleButton
            key={type.label}
            active={type.style === blockType}
            label={type.label}
            onToggle={props.onToggle}
            style={type.style}
          />
        )}
      </div>
    );
  };
​
  var INLINE_STYLES = [
    {label: 'Bold', style: 'BOLD'},
    {label: 'Italic', style: 'ITALIC'},
    {label: 'Underline', style: 'UNDERLINE'},
    {label: 'Monospace', style: 'CODE'},
  ];
​
  const InlineStyleControls = (props) => {
    const currentStyle = props.editorState.getCurrentInlineStyle();

    return (
      <div className="RichEditor-controls">
        {INLINE_STYLES.map((type) =>
          <StyleButton
            key={type.label}
            active={currentStyle.has(type.style)}
            label={type.label}
            onToggle={props.onToggle}
            style={type.style}
          />
        )}
      </div>
    );
  };
​
  export default RichTextEditor;

→ RichTextEditor 코드(CSS)

/**
 * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
 *
 * This file provided by Facebook is for non-commercial testing and evaluation
 * purposes only. Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 .RichEditor-root {
    background: #fff;
    border: 1px solid #ddd;
    font-family: 'Georgia', serif;
    font-size: 14px;
    padding: 15px;
  }

  .RichEditor-editor {
    border-top: 1px solid #ddd;
    cursor: text;
    font-size: 16px;
    margin-top: 10px;
  }

  .RichEditor-editor .public-DraftEditorPlaceholder-root,
  .RichEditor-editor .public-DraftEditor-content {
    margin: 0 -15px -15px;
    padding: 15px;
  }

  .RichEditor-editor .public-DraftEditor-content {
    min-height: 100px;
  }


  .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
    display: none;
  }

  .RichEditor-editor .RichEditor-blockquote {
    border-left: 5px solid #eee;
    color: #666;
    font-family: 'Hoefler Text', 'Georgia', serif;
    font-style: italic;
    margin: 16px 0;
    padding: 10px 20px;
  }

  .RichEditor-editor .public-DraftStyleDefault-pre {
    background-color: rgba(0, 0, 0, 0.05);
    font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
    font-size: 16px;
    padding: 20px;
  }

  .RichEditor-controls {
    font-family: 'Helvetica', sans-serif;
    font-size: 14px;
    margin-bottom: 5px;
    user-select: none;
  }

  .RichEditor-styleButton {
    color: #999;
    cursor: pointer;
    margin-right: 16px;
    padding: 2px 0;
    display: inline-block;
  }

  .RichEditor-activeButton {
    color: #5890ff;
  }

▶ 테스트 화면 스크린샷

따라하며 배우는 노드, 리액트 시리즈 - 기본강의 (John Ahn) ▶ React 부분만 정리

• React는 프레임워크가 아니라 라이브러리이며, 2013년도 페이스북에서 만들어짐.

• 컴포넌트로 구성되며 컴포넌트는 모듈과 비슷하게 재사용성이 뛰어남.

▶ VirtualDOM

• RealDom 리스트들이 10개 정도가 있고 어떤 1개만 변화가 일어나면 RealDom에서는 다시 10개의 리스트를 Reload를 해야함.

• VirtualDom 하나만 변경이 일어나면 하나만 Reload 하면 되서 더욱 부하가 적음. 왜 하나만 가능한가 ▶ VirtualDom은 RealDom의 카피본으로 VirtualDom에서 스냅샷을 찍은 후, 이후 변경이 있으면 스냅샷 찍어둔거랑 변경 후 차이를 분석하여 바뀐 부분만 realDom에서 바꿔줌.

▶ Babel 자바스크립트를 이용 할 때, es6, es7등 더 많은 메소드들을 추가함. 이런 새로운 메소드들은 오래된 브라우저에서 작동이 안될때가 있어, 최신 자바스크립트 문법을 사용해도 구형 브라우저에서 작동할 수 있도록 es6 자바스크립트 문법으로 변환시켜줌.

▶ Webpack 예전에 웹페이지를 만들때는 Javascript, css, html등 간단하게 만들면 됨. 하지만 점점 웹사이트들이 커지면서 라이브러리, 프레임워크 등을 많이 쓰다 보니 복잡해졌고 복잡하게 된 것을 웹펙을 이용하여 번들을 해줌.

▶ NPM vs NPX

• 이제는 npx를 이용하여 다운함.

▶ NPM

• Node Package Manager
• registry(저장소) 역할을 하고 라이브러리들을 저장함.
• g 옵션을 써서 라이브러리를 설치하면 /usr/local/bin(linux), /AppData/npm(window)에 저장됨.
• 어플리케이션을 킬 때 npm run start, npm run build 등 을 함.
• npm에 관한 정보는 package.json에 저장됨.

▶ NPX

• npx가 npm registry에서 최신 버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후 해당 패키지를 제거함.
• disk space를 낭비 하지 않고, 항상 최신 버전을 사용할 수 있음.

지도 상세페이지

커뮤니티 상세페이지