코딩묻은 디자이너

https://www.acmicpc.net/problem/1064

문제

평행사변형은 평행한 두 변을 가진 사각형이다. 세 개의 서로 다른 점이 주어진다. A(xA,yA), B(xB,yB), C(xC,yC)

이때, 적절히 점 D를 찾아서 네 점으로 평행사변형을 만들면 된다. 이때, D가 여러 개 나올 수도 있다.

만들어진 모든 사각형 중 가장 큰 둘레 길이와 가장 작은 둘레 길이의 차이를 출력하는 프로그램을 작성하시오. 만약 만들 수 있는 평행사변형이 없다면 -1을 출력한다.

입력

첫째 줄에 xA yA xB yB xC yC가 주어진다. 모두 절댓값이 5000보다 작거나 같은 정수이다.

출력

첫째 줄에 문제의 정답을 출력한다. 절대/상대 오차는 10-9까지 허용한다.

풀이

평행사변형을 만들수 있는 경우의 수는

다음과 같이 3개의 경우가 있다

그래서 D 좌표를 미리 구한 후

해당 삼각형의 넓이를 모두 구해준 후 3개의 경우의 수 중 가장 큰 수에서 적은 수를 빼주었다!

수학 넘 오랜만인지 D 좌표를 찾는게 생각보다 오래 걸렸다

2개의 D 좌표를 찾을 수 있지만 둘레를 구하기 위해서는 2변의 길이만 알면 되기 때문에 2개중 하나의 좌표만 사용해서 둘레를 구해줄 수 있었다!

코드

# 1064 평행사변형

xa, ya, xb, yb, xc, yc = map(int,input().split())


if ((xa - xb) * (ya - yc) == (ya - yb) * (xa - xc)):
    print(-1.0)
else:
    xd2 = (xa + xc) - xb
    yd2 = (ya + yc) - yb

    cir_1 = (abs(xa - xb) ** 2 + abs(ya - yb) ** 2) ** 0.5 + (abs(xa - xc) ** 2 + abs(ya - yc) ** 2) ** 0.5
    cir_2 = (abs(xa - xb) ** 2 + abs(ya - yb) ** 2) ** 0.5 + (abs(xa - xd2) ** 2 + abs(ya - yd2) ** 2) ** 0.5
    cir_3 = (abs(xa - xc) ** 2 + abs(ya - yc) ** 2) ** 0.5 + (abs(xa - xd2) ** 2 + abs(ya - yd2) ** 2) ** 0.5

    ans = max(cir_1, cir_2, cir_3) - min(cir_1, cir_2, cir_3)

    print(ans*2)

부제 : 코드는 간단히

기능

감정이 하나도 선택되지 않았을 때는 모든 감정이 출력된다.

지금 진행중인 사이드 프로젝트에서 감정별 일기를 확인할 수 있는 필터를 만들 예정이다

  const [filterList, setFilterList] = useState({
    moodTags: {
      normal: false,
      mad: false,
      sad: false,
      happy: false,
    },
  });

처음 낸 아이디어는 다음과 같이 객체를 선언하고

감정이 클릭 되면 해당 감정에 해당하는 부분이 true가 되어 true 인 감정에 대한 일기가 출력되도록 할 생각이었다.

  const handleFilter = (mood) => {
    console.log(mood);
    const moodType = mood;
    const newObj = filterList;
    console.log("무드 타입", newObj.moodTags[moodType]);
    newObj.moodTags[moodType] = !newObj.moodTags[moodType];
    setFilterList({ ...newObj });
    console.log(filterList);
  };

코드는 해당 방식으로 구성하였다

처음에 구성했던 코드

 // 오류코드
  
  const handleFilter = (mood) => {
    console.log(mood);
    const moodType = mood;
    setFilterList({
      moodTags: {
        ...filterList.moodTags,
        [moodType]: !filterList.moodTags[moodType],
      },
    });
    console.log(filterList);
  };

이렇게 클릭을 하면 해당 감정의 index값이 추가로 저장이 되었는데 넘겨주는 값이 index 값이라 그런 문제가 발생하였었다.

결과적으로 감정을 클릭하면 해당 감정이 true 가 되도록 수정을 할 수 있었지만 그것을 다시 각각의 일기에 넘겨주고 해당 감정의 일기만 읽도록 어떻게 하느냐...!

일기를 각각 출력해주는 컴포넌트에 moodTags객체를 보내주고 다시 그것을 해체하고, 재구성 하여 배열에 담아주고

map을 통해 돌면서 mood 값과의 일치 여부를 확인하는 방법은 어떨까? 하고 짜봤는데...!

완전 복잡하다

그래서 어떻게 짜는게 좋을까 한참... 한참... 정말 한참 고민했는데 두번째로 생각한 방법은

그냥 애초부터 배열에 현재 클릭되어 있는 값 받아서 일기 불러오는 컴포넌트에 넘기기...

function MainContent() {
  // 코드 생략
  // 배열 생성
  const [filter, setFilter] = useState([]);


  // 코드 생략
  // 감정 필터를 filter에 추가시키기
  const handleFilter = (mood) => {
  	// 감정 필터 삭제
    if(filter.includes(mood)){
      setFilter(filter.filter(select => select != mood))
    }else{
    // 추가
      setFilter([...filter, mood])
    }
  };
  
  return (
    <>
      <Header />
      <WriteButton />
      <div className="main-mood-container">
        <ul>
          {moodDatas &&
            moodDatas.map((item) => (
              <li onClick={() => handleFilter(item.mood)}>
                <img key={item.mood} src={item.img_select} alt="일기" />
              </li>
            ))}
        </ul>
      </div>
      {mainDiary && mainDiary.length === 0 ? (
        <div>작성된 일기가 없습니다</div>
      ) : (
        <div className="pin_container">
          {mainDiary &&
            mainDiary.map((item) => (
            
              // 일기 데이터에 filter 데이터 내려보내기
              
              <DiaryItem key={item.id} item={item} filter={filter} setFilter={setFilter} />
            ))}
        </div>
      )}
    </>
  );
}

export default MainContent;

객체를 사용하는 방법은 아예 포기하고 배열을 활용해서 다중 선택 필터를 구현해봤다.

이런식으로 만드는게 효율적인지는 모르겠으나...! 일단 고민 후 동작하게 만들었다!

필터는 처음으로 맡아서 만들어봤는데... 그래도 일단 돌아가서 뿌듯!

객체를 사용한 방법을 사용했을 때 보다 훨씬 간단해보이고 짧은 코드를 만들었다

아마... 그냥 내가 객체를 사용해서 만드는 방법을 잘 몰라서 더 복잡하게 짜서 그랬을수도 있다.

누군가 같이 코드 리뷰도 하고 그런 사람이 있으면 좋겠다...ㅠㅠㅠ

React에서 화면 슬라이드 라이브러리 사용하기

한국어로는 화면이 넘어가는 디자인을 슬라이드라고 많이 표현하는데 영어로 검색해서 찾으려면 carousel이라고 검색해야한다.

프로젝트를 진행하는 '도중' 슬라이드를 도입해야 해서 찾다가 가장 편하게 사용할 수 있을 것 같아서 처음에는 bootstrap carousel을 사용하려고 import했다

https://react-bootstrap.github.io/components/carousel/

bootstrap을 적용하면 어렵지 않게 사용할 수 있지만 프로젝트가 이미 많이 진행된 상태에서 부트스트랩을 까니깐

CSS충돌이 나서 화면이 다 깨져버렸다.

부트스트랩을 일부 컴포넌트에서만 쓸 수 없나 하고 찾아봤는데 방법이 없어서ㅠㅠ 슬라이드 다 구현해놓고 다시 다 돌려놔야했다ㅠㅠ

물론 방법이 있긴 있다.

하나하나 찾아면서 수정하기...

bootstrap은 프로젝트 시작하는 시기에 사용할지 확실히 정해두는게 좋다고 한다.

두번째로 도입하려고 한 라이브러리는

https://www.npmjs.com/package/react-responsive-carousel

npm i react-responsive-carousel

component에는 아래를 import 해준다

import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Carousel } from 'react-responsive-carousel';

<Carousel
        showArrows={false}
        showStatus={false}
        showIndicators={false}
    >
    {myMenu && myMenu.map(item => <MyMenuCard item={item} />)}
</Carousel>

<Carousel /> 내부에 prop로 속성 3가지를 연결해줬다

1. 화살표 숨기기

2. 아래 이미지의 상단의 1 of 6 숨기기

3. 아래 이미지 하단의 하얀 점 숨기기

그리고 내부 아이템들은 map((item) => <MyMenuCard item={item}>) 반복문을 사용해서 갯수만큼 MyMenuCard 컴포넌트를 불러온다!

https://alvarotrigo.com/blog/react-carousels/

여기 이쁜 라이브러리 많은데 버전 안맞아서 설치 안되는 라이브러리도 많다ㅠ

https://www.acmicpc.net/problem/4963

문제

정사각형으로 이루어져 있는 섬과 바다 지도가 주어진다. 섬의 개수를 세는 프로그램을 작성하시오.

한 정사각형과 가로, 세로 또는 대각선으로 연결되어 있는 사각형은 걸어갈 수 있는 사각형이다. 

두 정사각형이 같은 섬에 있으려면, 한 정사각형에서 다른 정사각형으로 걸어서 갈 수 있는 경로가 있어야 한다. 지도는 바다로 둘러싸여 있으며, 지도 밖으로 나갈 수 없다.

입력

입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스의 첫째 줄에는 지도의 너비 w와 높이 h가 주어진다. w와 h는 50보다 작거나 같은 양의 정수이다.

둘째 줄부터 h개 줄에는 지도가 주어진다. 1은 땅, 0은 바다이다.

입력의 마지막 줄에는 0이 두 개 주어진다.

출력

각 테스트 케이스에 대해서, 섬의 개수를 출력한다.

풀이

상하좌우 뿐만 아니라 대각선을 생각해줘야 하는 문제다!

상하좌우만 생각하면 벡터의 범위가

dr = [-1, 1, 0, 0]

dc = [0, 0, -1, 1]

이렇게 나오지만

상좌, 상우, 하좌, 하우

dr = [-1, 1, -1, 1]

dc = [-1, -1, 1, 1]

이 추가로 나오게 된다!

그래서 처음에 벡터를 

dr = [-1, -1, -1, 0, 0, 1, 1, 1]
dc = [-1, 0, 1, -1, 1, -1, 0, 1]

로 정의 해둔 후 문제를 풀었다.

def dfs(매개변수1, 매개변수2) <- 처음에 매개변수의 이름을 처음 받은 넓이 높이와 같은 값인 w 와 h로 받아버리는 바람에 고생했다ㅠ

python코드

#4963 섬의 개수
import sys
sys.setrecursionlimit(10**6)

dr = [-1, -1, -1, 0, 0, 1, 1, 1]
dc = [-1, 0, 1, -1, 1, -1, 0, 1]

def dfs(a, b):
    global island, visited
    visited[a][b] = 1
    for dir in range(8):
        nr = dr[dir] + a
        nc = dc[dir] + b
        if nr >= 0 and nr < h and nc >= 0 and nc < w:
            if arr[nr][nc] == 1 and visited[nr][nc] == 0:
                dfs(nr,nc)



while True:
    island = 0
    w, h = map(int,input().split())
    if w == 0 and h == 0 :
        break
    arr = []
    visited = [[0] * w for _ in range(h)]
    for i in range(h):
        arr.append(list(map(int,input().split())))
    for i in range(h):
        for j in range(w):
            if arr[i][j] == 1 and visited[i][j] == 0:
                dfs(i,j)
                island += 1
    print(island)

const [count, setCount] = useState(0)

typescript에서 다음과 같은 경우에는 useState를 통해 처음 정의해준 값이 0이기 때문에

count : number라는 것을 쉽게 알 수 있지만 setCount는 어떤 type인지 감이 안잡힌다.

드문드문 set함수의 type을 작성해야 하는 일이 있었는데 자주 사용하지 않으니깐 any를 써도 되지 않을까 싶어 지금까지 any를 사용했는데...

문제상황

 // productContent.tsx
 
 import React, { useState, useEffect } from 'react';
 import ProductOrder from './productOrder';
 
 function productContent() {
 const [count, setCount] = useState(1);
   return (
    <>
      <ProductOrder
        setCount={setCount}
      />
    </>
 }

export default productContent;

// productOrder.tsx

function productOrder({ setCount } : { setCount : any }){
	...
	  const handleMinus = () => {
    if (count > 1) {
      setCount(prev => {
        return --prev;
      });
      setCartData(prev => {
        return {
          ...prev,
          quantity: --prev.quantity,
        };
      });
    }
  };
  ...
  return(
  	...
  )
}

위 코드의 prev에서

'prev' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.ts(7006)

오류가 났다.

해결방법

부모 component에서 prop을 하기 전 해당 함수에 마우스를 올려두면

이렇게 React.Dispatch<React.SetStateAction<number>>

type을 확인할 수 있다

그럼 해당 type을 복사해서 자식 component에 붙여넣기 해주면 된다!

그 외에도

매개변수가 없는 핸들러, 매개변수가 있는 핸들러는

type이 이렇게 나타난다.

마우스를 올려두었을 때 type을 그대로 작작성!

https://www.acmicpc.net/problem/2667

문제

<그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. <그림 2>는 <그림 1>을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오.

입력

첫 번째 줄에는 지도의 크기 N(정사각형이므로 가로와 세로의 크기는 같으며 5≤N≤25)이 입력되고, 그 다음 N줄에는 각각 N개의 자료(0혹은 1)가 입력된다.

출력

첫 번째 줄에는 총 단지수를 출력하시오. 그리고 각 단지내 집의 수를 오름차순으로 정렬하여 한 줄에 하나씩 출력하시오.

풀이

dfs로 풀었다!

python에서 vector는 방향과 크기를 가지는 단위라고 하는데 C++ 에서 정의해서 쓰는 Vector랑 뭔가 다른 느낌이라 헷갈린다.

전에는 상,하,좌,우를 분명하게 인지하고 가는게 중요하다고 생각했는데 그냥 사방을 검사하는거라면 굳이 상하좌우를 명확히 할 필요는 없는 것 같다

dfs로 탐색하고, 탐색이 끝나면 ans 에 1을 더한다.

각각의 크기는 hap을 통해 더하고 리스트에 넣어줬다. 그 이후 sort로 정렬 후 출력!

python 코드

# 2667 단지번호붙이기
dr = [0, 0, -1, 1]
dc = [-1, 1, 0, 0]

def dfs(i,j):
    global ans, hap
    visited[i][j] = 1
    for d in range(4):
        nr = i +dr[d]
        nc = j +dc[d]
        if nr >= 0 and nr < N and nc >= 0 and nc < N:
            if arr[nr][nc] == '1' and visited[nr][nc] == 0:
                hap += 1
                dfs(nr,nc)
    return

N = int(input())
arr = []
visited = [[0] * N for _ in range(N)]
ans = 0
ans_arr = []
for n in range(N):
    arr.append(list(input()))

for i in range(N):
    for j in range(N):
        hap = 0
        if arr[i][j] == '1' and visited[i][j] == 0:
            dfs(i,j)
            ans += 1
            ans_arr.append(hap)
print(ans)
ans_arr.sort()
for i in ans_arr:
    print(i+1)

React에서 CSS 값을 바꾸기 위해 인라인으로 style을 변경하려고 했는데 오류가 생겼다

              <div
                className={cx('progress-bar')}
                role='progressbar'
                aria-valuemin={0}
                aria-valuemax={100}
                style='width:80px'
              />

오류

이런 오류가 뜨면서 inline에서 css가 적용되지 않았다

찾아보니 Typescript를 사용할 때는 inline이 잘 적용되지 않는다고 한다

해결방법

  const styles: { [key: string]: React.CSSProperties } = {
    container: {
      width: 255,
    },
  };

상위에 다음과 같이 style을 선언해두고 아래 코드와 같이

style = {styles.container}

이런식으로 불러서 사용하면 코드에서 에러가 발생하지 않는다.

  <div
    className={cx('progress-bar')}
    role='progressbar'
    aria-valuemin={0}
    aria-valuemax={100}
    style={styles.container}
  />

  const styles: { [key: string]: React.CSSProperties } = {
    container: {
      width: 255,
      height: 100,
      backgroundColor: 'red',
    },
  };

이런식으로 값을 여러개 넣어서 사용할 수도 있다!

최근 진행중인 사이드 프로젝트의 컨셉은 손글씨 같은 느낌으로 진행중이다.

위와 같은 지글지글한 선을 웹으로 구현하기 위해 선택한 방법은 -> path를 svg화 하여 저장하여 사용하기로 했다(더 좋은 방법이 있다면 댓글 부탁드려요)

문제사항

svg 파일을 background img 로 화면에 구현하면서 문제가 생겼는데

반응형으로 제작하다보니 svg path 선이 화면의 넓이에 영향을 받는 것이다

로그인을 감싸고 있는 path와 비밀번호 아래path는 둘 다 피그마에서는 2px로 export 되었지만 화면 넓이를 늘리면 width의 경향을 받아 다음과 같이 path가 굵어진다.

해결방법

해결방법은 매우 간단

해당 svg 파일에 직접 접근해서 path태그에

를 직접 넣어주면 path값이 고정이 된다

이 태그 안에 직접 넣어준다

나의 svg 파일에는 다음과 같은 속성들이 들어있다 

stroke : path 컬러

stroke-width : path의 굵기 (기본적으로 px값인 것 같다. 다른 단위를 넣어줘도 작동한다. 생략하면 px값)

stroke-linecap : path의 끝 부분을 둥글게 해준다

vector-effect = "none-scaling-stroke" : path의 굵기가 고정된다.

해결✨

https://www.acmicpc.net/problem/1051

문제

N×M크기의 직사각형이 있다. 각 칸에는 한 자리 숫자가 적혀 있다. 이 직사각형에서 꼭짓점에 쓰여 있는 수가 모두 같은 가장 큰 정사각형을 찾는 프로그램을 작성하시오. 이때, 정사각형은 행 또는 열에 평행해야 한다.

입력

첫째 줄에 N과 M이 주어진다. N과 M은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 수가 주어진다.

출력

첫째 줄에 정답 정사각형의 크기를 출력한다.

풀이

배열에서 벗어나서 오류가 나지 않게 i+a  < N, j+a < M 조건을 걸어줬다

그리고 1씩 늘려가면서 정사각형이 있나 탐색한 후 정 사각형이 있다면 넓이를 계산해서 받아줬다!

python코드

# 1051 숫자 정사각형

N, M = map(int,input().split())

arr = [list(input()) for _ in range(N)]
if N > M:
    k = M
else:
    k = N
ans = 0
max_ans = 0
for i in range(N):
    for j in range(M):
        for a in range(k):
            if i+a < N and j+a < M and arr[i][j] == arr[i + a][j] == arr[i][j+a] == arr[i+a][j+a]:
                ans = (a + 1) * (a + 1)
                if ans > max_ans:
                    max_ans = ans
print(max_ans)

https://www.acmicpc.net/problem/4673

문제

셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다.

양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 

예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다.

33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ...

n을 d(n)의 생성자라고 한다. 위의 수열에서 33은 39의 생성자이고, 39는 51의 생성자, 51은 57의 생성자이다. 생성자가 한 개보다 많은 경우도 있다. 예를 들어, 101은 생성자가 2개(91과 100) 있다. 

생성자가 없는 숫자를 셀프 넘버라고 한다. 100보다 작은 셀프 넘버는 총 13개가 있다. 1, 3, 5, 7, 9, 20, 31, 42, 53, 64, 75, 86, 97

10000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 출력하는 프로그램을 작성하시오.

입력

입력은 없다.

출력

10,000보다 작거나 같은 셀프 넘버를 한 줄에 하나씩 증가하는 순서로 출력한다.

풀이

드디어 푼 셀프 넘버 문제

처음에는 문제 자체를 이해 못했는데 알고보니 어렵지 않은 문제다

지금 현재수 + 수를 쪼갠 수가 list 안에 속하면 지워준다. 그리고 남아있는 list를 출력해준다.

효율적이라고는 할 수 없지만 모든 수를 탐색하는 방법으로 풀었다.

python코드

# 4673 셀프 넘버

arr = []
for i in range(1,10001):
    arr.append(i)

for i in range(1, 10001):
    nums=list(str(i))
    num = i
    for j in range(len(nums)):
        num += int(nums[j])
    if num in arr:
        arr.remove(num)

for i in arr:
    print(i)