[CNU SW Academy] 34일차(23.01.17)

프로그래머스 - 프론트엔드 미니 데브코스

React 강의 듣기

 

css 속성 중 objectFit을 이용하여 이미지의 모드를 적용할 수 있다.

cover, fill, contain 속성을 가질 수 있다.

storybook 정의 시, control 타입을 inline-radio로 지정하여 radio 타입으로 선택받을 수 있도록 구현할 수 있다.

 

Intersection Observer API 이용해 lazy loading 구현하기

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web APIs | MDN

lazy, threshold, placeholder prop을 추가한다.

lazy는 bool, placeholder는 string, threshold는 number 타입으로 지정한다.

결과

Spacer

Spinner

svg 이용

회전 - animateTransform 이용

 

Toggle

storybook 예제 따라서 구현하기

https://github.com/narlo23/SW_Academy_React/tree/storybook

GitHub - narlo23/SW_Academy_React: CNU SW Academy React 학습을 위한 레포입니다.

---

문현수박사님 - 프로젝트 구현

Frontend - Backend 통신

PasteBin Service

https://pastebin.com/

Pastebin.com - #1 paste tool since 2002!

RESTful API

HTTP Method 활용

- POST

- GET

- PUT

- DELETE

---

코딩테스트 - 준식이의 모엄1

t = int(input())
for i in range(t):
    n, m = map(int, input().split(" "))
    s = []
    row, col = -1, -1
    for j in range(n):
        tmp = list(input())
        if '@' in tmp:
            row = j
            col = tmp.index('@')
        s.append(tmp)
    k = int(input())
    t = list(input())
    for j in range(k):
        if t[j] == 'R':
            if col < m-1 and s[row][col+1] != '#':
                col += 1
        elif t[j] == 'L':
            if col > 0 and s[row][col-1] != '#':
                col -= 1
        elif t[j] == 'D':
            if row < n-1 and s[row+1][col] != '#':
                row += 1
        else:
            if row > 0 and s[row-1][col] != '#':
                row -= 1
    print(row+1, col+1)