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

 

2161번: 카드1

N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가

www.acmicpc.net

문제

N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다.

이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다.

예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 옮기면 24가 된다. 마지막으로 2를 버리고 나면, 버린 카드들은 순서대로 1 3 2가 되고, 남는 카드는 4가 된다.

N이 주어졌을 때, 버린 카드들을 순서대로 출력하고, 마지막에 남게 되는 카드를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에 정수 N(1 ≤ N ≤ 1,000)이 주어진다.

출력

첫째 줄에 버리는 카드들을 순서대로 출력한다. 제일 마지막에는 남게 되는 카드의 번호를 출력한다.


풀이

가장 앞의 카드를 출력하고 빼주면 되는거라 pop을 사용했다.

앞의 카드를 뒤로 돌릴때도 append와 pop 사용.

순서에 주의하자

코드

# 2161 카드

n = int(input())
card = []

for i in range(1, n+1):
    card.append(i)
while len(card) > 1:
    print(card[0],end=' ')
    card.pop(0)
    card.append(card[0])
    card.pop(0)
print(card[0])
반응형

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

 

1475번: 방 번호

첫째 줄에 다솜이의 방 번호 N이 주어진다. N은 1,000,000보다 작거나 같은 자연수이다.

www.acmicpc.net

문제

다솜이는 은진이의 옆집에 새로 이사왔다. 다솜이는 자기 방 번호를 예쁜 플라스틱 숫자로 문에 붙이려고 한다.

다솜이의 옆집에서는 플라스틱 숫자를 한 세트로 판다. 한 세트에는 0번부터 9번까지 숫자가 하나씩 들어있다. 다솜이의 방 번호가 주어졌을 때, 필요한 세트의 개수의 최솟값을 출력하시오. (6은 9를 뒤집어서 이용할 수 있고, 9는 6을 뒤집어서 이용할 수 있다.)

입력

첫째 줄에 다솜이의 방 번호 N이 주어진다. N은 1,000,000보다 작거나 같은 자연수이다.

출력

첫째 줄에 필요한 세트의 개수를 출력한다.


풀이

딕셔너리를 통해서 풀이 하였다.

6과 9는 서로 공유할 수 있기 때문에 입력된 수 안에 있는 경우 둘 다 더해준 후 나중에 2로 나눠 나눠진 값을 ceil로 올림 해줬다

코드

# 1475 방 번호
import math

num = list(input())
sets = {}

for n in num:
    if n in sets:
        if n == '9' or n == '6':
            sets['6'] += 1
            sets['9'] += 1
        else:
            sets[n] += 1
    else:
        if n == '9' or n == '6':
            sets['9'] = 1
            sets['6'] = 1
        else:
            sets[n] = 1

if '6' in sets:
    sets['6'] = math.ceil(sets['6']/2)
if '9' in sets:
    sets['9'] = math.ceil(sets['9']/2)

print(max(sets.values()))
# print(sets)
반응형

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

 

1064번: 평행사변형

평행사변형은 평행한 두 변을 가진 사각형이다. 세 개의 서로 다른 점이 주어진다. A(xA,yA), B(xB,yB), C(xC,yC) 이때, 적절히 점 D를 찾아서 네 점으로 평행사변형을 만들면 된다. 이때, D가 여러 개 나

www.acmicpc.net

문제

평행사변형은 평행한 두 변을 가진 사각형이다. 세 개의 서로 다른 점이 주어진다. 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)
반응형

1. 녹템 오더

프로젝트는

pwa + next.js를 사용한 손님이 커피를 주문할 수 있는 모바일 버전과

next.js 만 사용한 매장이 손님의 주문을 확인하고 주문을 받을 수 있으며, 매장 내 음료 매진 처리, 판매 데이터를 확인할 수 있는 pc 버전 두가지를 만들었다.

각각을 따로 repository를 파서 만들었다!

 

저번 SSG.com 클론코딩에서는 명확하게 어떤 부분을 맡아 진행할지 나눠서 나는 상품 카테고리와 상품 상세보기, 상품 주문을 맡아서 진행했지만

이번 커피 오더 프로젝트에서는 분명 개인의 역할이 있긴 하지만 어떤 부분에서는 다른 사람의 코드를 보고 다른 사람의 코드를 수정하기도 하면서 프로젝트를 진행했다. 물론 conflict을 피하기 위해서 현재 수정하고 있는 페이지를 건드리게 될 것 같으면 미리 말을 하고 다른 부분 진행하고,,, 그렇게 진행했다!

서비스 이름은 녹템 오더로 녹템은 밤샘을 뜻한다고 한다.

커피랑 이미지도 맞는것 같고 우리의 프로젝트 마음가짐도...! 묘하게 밤이 주는 이미지가 신비한 이미지도 있구 해서 전반적인 컨셉은 마법사로 진행했다.

 

특히 등급 네이밍을 엄청나게 고민했다!

등급 네이밍이 별건가 그냥 하면 안되나 생각할 수 도 있지만 우리는 컨셉에 진심이니깐!

 

등급 네이밍은 포션 등급 -> 엘릭서 등급 -> 파워 엘릭서 등급

전반적인 UI는 스타벅스의 사이렌 오더를 벤치마킹 했다

 

나의취향파악 원 그래프를 내가 직접 구현한건 아니지만 너무 귀여워서 마음에 드는 포인드!

nivo라이브러리를 사용했는데 너무 귀엽다!

https://nivo.rocks/

 

Home | nivo

 

nivo.rocks

다음번에 표를 만들만한 프로젝트를 진행한다면 내가 맡아서 해보고 싶다!

디자인 넘 귀여워

 

신경써서 만들었던 부분

상품을 클릭했을때 카테고리가 해당 상품의 카테고리에 포커스 되도록 하는 부분이다.

사실 만들고 보면 어렵지 않아 보일 수 있지만 처음에 상태관리를 잘못 하기도 했고

음료만 생각하고 만들다가 마감 일주일 전에 급하게 푸드 데이터를 넣으면서 꼬여가지고 생각보다 고생했던 부분이다.

그래도 해결되어서 다행이다

 

그리고 보시면 알겠지만 다크모드가 적용되어있다!

다크모드 역시 내가 구현한건 아니구 우리 팀원분께서 만들어주셨다

2. 기술 스택

next.js를 사용하는것도 typescript를 사용하는것도 처음이라 정말 어려움이 많았다. 특히 typescript를 사용하는데 있어서 기초적인 공부를 하고 시작한게 아니라 그냥 일단 맨땅에 헤딩! 한거라 진짜 계속 오류를 만났다.

거기다 eslint는 엄청 까다로웠고...린트도 처음써보는거라 린트 오류도 진짜 많았다.

next.js, typescript 둘 다 코딩앙마님의 강의를 들었다

https://youtu.be/Ujjdn2wMIew

next.js는 이 강의를 처음부터 쭉 봤고,

 

https://youtu.be/g-kauNOTVRY

typescript는 마땅히 좋은 강의가 없어서 이 강의를 중심으로 보고, 그 이후엔 에러가 나는 부분을 중점으로 그냥 블로그 검색을 했다ㅠ 

프로젝트를 진행하다가 기초적인 이해가 부족하다보니 이슈가 너무 많았고 프로젝트 중반 이후부터

단숨에 배우는 타입스크립트 책을 통해 기초부터 다지기 시작했다.

근데 프로젝트가 끝난 이 시점... 아직 책 다 못읽었음ㅠㅠ 시간 내에 프로젝트를 진행하려고 하다 보니 시간이 부족했다.

지금은 프로젝트 끝났으니깐!

다시 처음부터 읽어봐야지!

 

기초가 중요하지 아무렴!

 

 

 

 

3. CSR 과 SSR

프로젝트를 진행하면서 가장 고민했던 부분은 어디서 SSR을 사용하고 어디서 CSR 을 사용할지였다.

next.js는 SSR 환경을 제공하니 우리는 이 환경을 적제적소에 사용할 수 있어야 할텐데 강의를 봐도

'그래서 우리가 이걸 어느 페이지에 적용해야하는데!'

를 잘 모르겠었다. 팀원들이랑 다른 팀원의 프론트 분들이랑도 이야기해봤는데 어떤 분은 이건 이래서, 여기가 SSR 어떤 분은 아니다 이건 이래서 여기는 CSR! 의견이 다른 부분이 있어서 개인적으로 어떻게 사용하는게 좋았을지 작성해본다

 

CSR

- 매장 페이지 대부분의 페이지 : 매장 페이지의 경우에는 주문의 상태를 변경하거나, 품절 상태를 변경하는 등 상태를 변경해야하는 페이지가 주를 이룬다, 그러므로 빠른 페이지 확인 보다는 매장 페이지를 이용하는 이용자와의 즉각적인 상호작용이 더 중요하지 않을까 생각했다.

 

SSR

- 유저 페이지 카테고리 부분, 유저 페이지 음료 상세 페이지 : 사용자가 어떤 음료가 있는지 시각적으로 빠르게 확인하고 음료 정보를 빠르게 확인할 수 있어야 한다고 생각했다. 음료를 선택했다가 세부 정보를 보고 음료를 주문할지 말지 결정하므로 일단 빠르게 정보 습득하는게 중요하지 않을까?

 

이것은 개인적인 생각

 

이 부분이 사용자 UX에 많은 영향을 미치니 프론트 입장에서는 가장 중요한 부분이 아니었나 싶다.

 

4. 오류

노션에 오류를 만날 때 드문드문 기록해 두었다. 더 꼼꼼히 기록할걸....

내가 해결한 방법 등을 추가로 블로그에 기록해 볼 예정이다.

Curly braces are unnecessary here.

**여기에서는 곱슬곱슬한 교정기는 필요 없어요.**

몬가 귀여웠던 오류

저건 그냥 중괄호{}를 지우면 되는 간단한 오류였다.

 

가장 많이 마주친 오류는 타입스크립트 오류와 린트 오류...

5. 프로젝트 결과

스파로스 아카데미 최종 프로젝트 우수상 수상했다!

같이 고생한 프로젝트가 우수상까지 수상해서 너무 좋기도 하고, 컨셉을 재미있게 잡았다보니 프로젝트를 진행하는 과정도 너무 재미있었다. 역시 재미있는 컨셉을 가진 프로젝트는 개발할 때도 재미있다.

 

후반부에 취업 준비로 자주 프로젝트에 빠져서 팀원들에게 미안한 마음이 계속 남아있다... 그래도 좋은 결과를 얻어서 다행이다

 

프로젝트 회고 첨 써보는거라 이렇게 쓰는게 맞는가

반응형

부제 : 코드는 간단히

기능

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

감정들

 

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

  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/

 

React-Bootstrap

The most popular front-end framework, rebuilt for React.

react-bootstrap.github.io

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

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

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

 

물론 방법이 있긴 있다.

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

 

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

 

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

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

 

react-responsive-carousel

React Responsive Carousel. Latest version: 3.2.23, last published: 7 months ago. Start using react-responsive-carousel in your project by running `npm i react-responsive-carousel`. There are 336 other projects in the npm registry using react-responsive-car

www.npmjs.com

 

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/

 

14 Top React Carousel Components [2022]

Curated with the Top 14 React Carousels out there. If you want to know which one to choose, here we'll be explaining each of them in detail.

alvarotrigo.com

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

반응형

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

 

4963번: 섬의 개수

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

www.acmicpc.net

문제

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

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

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

입력

입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스의 첫째 줄에는 지도의 너비 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에 붙여넣기 해주면 된다!

 

그 외에도

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

() => void;
(e: any) => void;

type이 이렇게 나타난다.

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

반응형

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

 

2667번: 단지번호붙이기

<그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여

www.acmicpc.net

문제

<그림 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'
              />

오류

 

(property) HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined
'string' 유형에 'Properties<string | number, string & {}>' 유형과 공통적인 속성이 없습니다.ts(2559)
index.d.ts(1863, 9): 필요한 형식은 여기에서 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' 형식에 선언된 'style' 속성에서 가져옵니다.

이런 오류가 뜨면서 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',
    },
  };

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

반응형

+ Recent posts