Web (56) 썸네일형 리스트형 러닝리액트 요약 Day1 보호되어 있는 글입니다. 2022 카카오 신입 공채 - k진수에서 소수 개수 구하기 문제 설명 보기 더보기 양의 정수 n이 주어집니다. 이 숫자를 k진수로 바꿨을 때, 변환된 수 안에 아래 조건에 맞는 소수(Prime number)가 몇 개인지 알아보려 합니다. 0P0처럼 소수 양쪽에 0이 있는 경우 P0처럼 소수 오른쪽에만 0이 있고 왼쪽에는 아무것도 없는 경우 0P처럼 소수 왼쪽에만 0이 있고 오른쪽에는 아무것도 없는 경우 P처럼 소수 양쪽에 아무것도 없는 경우 단, P는 각 자릿수에 0을 포함하지 않는 소수입니다. 예를 들어, 101은 P가 될 수 없습니다. 예를 들어, 437674을 3진수로 바꾸면 211020101011입니다. 여기서 찾을 수 있는 조건에 맞는 소수는 왼쪽부터 순서대로 211, 2, 11이 있으며, 총 3개입니다. (211, 2, 11을 k진법으로 보았을 때가 .. 2022 카카오 신입 공채 - 신고 결과 받기 문제 설명 보기 더보기 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만, 동일한 유저에 대한 신고 횟수는 1회로 처리됩니다. k번 이상 신고된 유저는 게시판 이용이 정지되며, 해당 유저를 신고한 모든 유저에게 정지 사실을 메일로 발송합니다. 유저가 신고한 모든 내용을 취합하여 마지막에 한꺼번에 게시판 이용 정지를 시키면서 정지 메일을 발송합니다. 다음은 전체 유저 목록이 ["muzi", "frodo", "apeach", "neo"]이고.. React-query 시작하기 📌React-query란? 리액트쿼리는 리액트 앱의 서버 상태를 관리하는 라이브러로, 클라이언트에서 서버 데이터 캐시를 관리한다. 리액트 코드에 서버 데이터가 필요할 때, fetch나 axios를 사용해 서버로 바로 이동하지 않고 react-query 캐시를 요청한다. 또한 리액트쿼리 클라이언트를 어떻게 구성했느냐에 따라서 해당 캐시의 데이터를 유지 관리한다. 🛠프로젝트에 리액트쿼리 셋팅하기 리액트쿼리 라이브러리 추가 queryClient 셋팅 - 쿼리와서버의데이터캐시를관리하는클라이언트 const queryClient = new QueryClient(); //클라이언트가 가지고 있는 캐시와 모든 기본 옵션을 provider의 자식 컴포넌트도 사용할 수 있게된다. 최상위컴포넌트(App.jsx 또는 inde.. [ geeks-space ] emotion으로 storybook에 global 스타일 적용하기 rem단위로 작업을 하려 하는데, 스토리북에 글로벌 스타일을 적용하는 방법을 몰라 당황했다. 그냥 css를 import해도 된다고 하는데(아래 블로글 참고), emotion에도 글로벌스타일 기능을 제공하고, 이왕 스터디 하는거 emotion으로 적용하는 방법도 알아두는 것이 좋겠다고 생각했다. 더보기 https://velog.io/@1998yuki0331/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-Storybook-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0 React 프로젝트에 Storybook 도입하기 평소에 리액트 컴포넌트 디자인 패턴을 프로젝트에 도입해보고 싶다는 생각은 막연하게 해봤는데, 막상 직접 해본 적은 없었다. 이번에.. React / TS ] CRA로 프로젝트 생성 시, 절대경로 사용하기 (feat. craco) 1. craco를 설치한다. yarn add @craco/craco craco-alias 2. tsconfig.path.json 파일 생성 후 아래와 같이 paths 안에 등록하고 싶은 경로와 그 경로의 별칭을 추가해준다. { "compilerOptions": { "baseUrl": ".", "paths": { "@src/*": ["src/*"], "@hooks/*": ["src/hooks/*"], "@components/*": ["src/components/*"], "@layouts/*": ["src/layouts/*"], "@pages/*": ["src/pages/*"], "@typings/*": ["src/typings/*"], "@utils/*": ["src/utils/*"] } } } 3. cr.. Scss @mixin 활용하기 프로젝트에서 공통적으로 사용되는 스타일을 믹스인을 사용하여 정의할 수 있다. 1. 믹스인 안에서도 &를 사용해 상위 요소를 참조할 수 있고, include를 사용하는 시점에서 &가 가리키는 요소가 결정된다. See the Pen jOBMoxm by KimDovi (@ddonni0426) on CodePen. 2. 가변인수를 통해 공통된 스타일 속성을 다양하게 적용시킬 수 있다. See the Pen eYvdaoK by KimDovi (@ddonni0426) on CodePen. 3. @content 키워드를 사용해서 일부분만 스타일 블록을 전달할 수 있다. See the Pen poeEXeZ by KimDovi (@ddonni0426) on CodePen. SCSS 중첩 벗어나기 - @at-root 어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법. See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen. 위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다. 하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다. 이와같이 특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다. 이전 1 2 3 4 ··· 7 다음
