번개맨 쉼터

우선은 기본적으로 참고할 레이아웃이 필요하다. 본인은 위의 레이아웃을 참조하여 구조를 짜려고 한다.

따라서 기본적으로 틀은

왼쪽의 사이드 바, 오른쪽의 콘텐츠로 나뉘게 된다.

따라서 index.tsx 파일을 초기에 아래와 같이 작성하였다.

아래는 컴포넌트 별 구성이다.

위의 사진 처럼 레이아웃을 잡는데에는  Grid를 사용하였다.

위의 코드는 초기 코드로 수정이 차차 진행될 예정이다.

next js 설치 방법은 다양하다.

본인은 패키지 관리 툴로 yarn을 사용하였다.

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-npm%EA%B3%BC-yarn

설치하면 package.json 파일이 다음과 같이 나온다.

여기서 서버를 시작해보자.

next dev 이나 next start 명령어로 실행한다.

본인은 초기 설정을 위해 index.tsx 파일 제외 모든 파일을 지웠다.

이번에 웹을 하나 새롭게 만들어 보려고 한다.

우선은 웹의 목적성은 instagram 관리자 대시보드를 타이틀/주제로 삼아 진행해보려고 한다.

이 웹의 경우, meta API를 사용하기에

API 결과 값을 그때마다 저장하고 있을 DB는 우선적으로 필요하지 않다고 판단하였다.

따라서 웹 프론트엔드 시각화/디자인에 1순위 우선순위를 두어 개발할 예정이다.

2순위로는 프론트엔드를 띄울 웹 서버 개발이다.

3순위로는 컨테이너 이미지화 시킬 예정이다.

Next js / typescript 사용 

추가로 바뀌는 내용을 수정하여 올릴 예정이다.

from collections import deque
def DFS(idx,idy,sheep,wolf):
    global sheeps; global wolfs
    visited[idx][idy] = True
    for x,y in zip(dx,dy):
        if 0<= x+idx < R and 0<= y+idy < C and visited[x+idx][y+idy] == False and graph[idx+x][idy+y] != '#':
            if graph[idx+x][idy+y] == 'v':
                DFS(idx+x,idy+y,sheep,wolf+1)
            elif graph[idx+x][idy+y] == 'k':
                DFS(idx+x,idy+y,sheep+1,wolf)
            elif graph[idx+x][idy+y] == '.':
                DFS(idx+x,idy+y,sheep,wolf)
        


if __name__ == '__main__':
    R, C = map(int,input().split())
    #graph = [list(input().split()) for _ in range(C)]
    graph =[['...#..'], ['.##v#.'], ['#v.#.#'], ['#.k#.#'], ['.###.#'], ['...###']]
    queue = deque([[1,3],[2,1],[3,2]])
    visited = [[False] * C for _ in range(R)]
    dx = [1,0,0,-1]; dy = [0,1,-1,0]
    answer_sheep=0; answer_wolf = 0
    while queue:
        sheeps = 0; wolfs = 0
        nx,ny = queue.popleft()
        DFS(nx,ny,0,0)
        if sheeps > wolfs:
            answer_sheep += sheeps
        else:
            answer_wolf += wolfs