반응형

전체 글 87

프로그래머스 | 2022 KAKAO BLIND RECRUITMENT > k진수에서 소수 개수 구하기 - 파이썬

이번 문제도 간단한 문제였다. 그런데 왜이렇게 어렵게 풀었을까나 ㅜㅜ 주어진 숫자 n을 k진수로 바꾼 후, 0을 기준으로 숫자들을 잘라낸다. 그 숫자들이 소수인가? 그렇다면 소수인 숫자가 몇 개인가! 0을 기준으로 split하면 됐을텐데 나는 왜 for문을 돌면서 하나하나 체크했지ㅜㅜ? def solution(n, k): answer = 0 knum = transfer(n, k) + '0' curr = '' left = 0 right = 0 for digit in knum : if digit != '0': curr = curr + str(digit) else : if curr == '': continue if isPrime(int(curr)) and left == 0 and right == 0: answ..

리액트 웹앱 - 상단 타이틀 동적으로 적용하기 (redux 활용)

어떻게 검색을 해야하는 건지, 검색을 해도 잘 안나와서 어찌저찌 개발을 했다. 앱을 쓰다보면 상단 타이틀이 페이지마다 바뀌는 UI를 본적이 있을 것이다. 예를 들어 카카오톡 같은 경우에도 친구 / 채팅 / 뷰 이런식으로 현재 페이지 이름이 상단에 나와있다. 그런데... 레이아웃은 아래처럼 되어있다. 페이지는 여기만 바뀌는데 의 속성을 어떻게 바꿀 수 있지? {props.children} 열심히 생각하다가, react의 Context API를 사용해야하나, redux를 사용해야하나 고민을 했고 redux를 활용하기로 했다. 우선 store 폴더를 먼저 만들어주었다. store 폴더에 index.js 파일과 title.js 파일을 만들어준다. title.js는 state를 관리하는 곳이고, index.js는..

리액트 하단바 만들기 - React Bottom Navigation

리액트로 프로젝트 진행 중... 하단 네비게이션을 만들어야했다. 모바일화면으로 구성을 하려고 해서 찾아보니 react navigation 라이브러리가 있었는데 React Native 전용이었다. 그래서 그냥 만듦! 위와 같은 모양을 만드는 것이 목표! BottomNav.js import { NavLink } from "react-router-dom"; import classes from "./BottomNav.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, faListDots, faCirclePlus, faGear, faUsers } from "@fortawesome/free-sol..

리액트 Font Awesome 아이콘 적용하기

1. 설치 https://fontawesome.com/v6/docs/web/use-with/react/ Set Up with React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 위 사이트에서 npm 명령어로 설치를 해준다. 사용 방법은 두가지로 나뉜다. 한 컴포넌트에서만 쓰는 방법, 글로벌로 쓰는 방법. 나는 우선 하단바에서만 사용할거기 때문에 individual 방식을 사용했다. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' //사용할 아이콘을 임포트 해준다. import {..

ReactDOM.render is no longer supported in React 18. Use createRoot instead. 해결

새로운 토이프로젝트를 시작하면서 프로젝트를 만들었다 create-react-app을 이용해서 띄웠는데... react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 콘솔에 위와 같은 메시지가 떴다. 리액트18버전부터는 ReactDOM.render() 방식을 쓰지 않는다는 것! 이게 기존 코드였다면.... impor..

리액트 무료 테마

https://github.com/flatlogic/one-react-template/ GitHub - flatlogic/one-react-template: Flatlogic One - React Template and Theme Flatlogic One - React Template and Theme. Contribute to flatlogic/one-react-template development by creating an account on GitHub. github.com 우측 상단에 Use this template 을 눌러서 내 레포지토리로 가져올 수 있다. node 16버전을 쓰고 있었더니 설치가 잘 안됨... 옛날 노드 모듈을 많이 쓰고 있는 템플릿인 것 같다. 그래서 노드 버전을 14로 낮..

프로그래머스 | 2022 KAKAO BLIND RECRUITMENT> 신고 결과 받기

카카오 문제는 막 어렵기도 전에 문제가 넘 길다. 하지만 문해력도 실력인걸? 알고리즘 공부한지 오래됐으니 이제 슬슬 감을 잡기 위해 하루에 한문제씩 풀어야겠다. 파이썬 넘나 오랜만. def solution(id_list, report, k): answer = [] stopped = set([]) dic = {i: {"report_user": set([]), "reported": 0} for i in id_list} for data in report : [report_from, report_to] = data.split(' ') if(report_to not in dic[report_from]["report_user"]) : dic[report_from]["report_user"].add(report_to..

리액트 라우터 사용하기 2 ( useParams, useRouteMatch, useHistory, useLocation)

useParams, useRouteMatch import { Fragment, useEffect } from "react"; import { useParams, Route, Link, useRouteMatch } from "react-router-dom"; import Comments from "./../comments/Comments"; import HighlightedQuote from "../quotes/HighlightedQuote"; const QuoteDetail = () => { const match = useRouteMatch(); const params = useParams(); console.log(match) console.log(params) const { quoteId } = pa..

리액트에서 라우터 사용하기 (react-router-dom)

웹개발을 하다보면 절대 빼놓을 수 없는 라우터! 라우터를 사용하기 위해서 react-router-dom 라이브러리를 사용해야한다. index.js import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App_router_practice"; ReactDOM.render(, document.getElementById("root")); 최 상위 컴포넌트인 컴포넌트를 컴포넌트로 감싸주어야 한다. App.js import { Route, Switch, Redirect } from "react-router-dom"; import Layout fro..

리액트에서 Lazy Loading 활용하기

Lazy Loading이란? 특정 코드가 필요할 때만 그 코드를 로드하는 것. SPA로 개발을 하면 모든 코드 번들이 로드되기 때문에 비효율적일 수 있다. 코드를 여러 번들로 나누고, 각각 필요할 때만 다운로드 하는 것. 라우트별로 나누어 그 라우트로 들어갈 때 다운로드한다. import React from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; import AllQuotes from './pages/AllQuotes'; import QuoteDetail from './pages/QuoteDetail'; import NewQuote from './pages/NewQuote'; function App() { return (..

반응형