반응형 IT151 [BAEKJOON] 백준 24041: 성싶당 밀키트 (node.js) 문제 링크: https://www.acmicpc.net/problem/24041 24041번: 성싶당 밀키트 첫 번째 줄에 $N, G, K$가 공백으로 구분되어 주어진다. 두 번째 줄부터 $N$ 개의 줄 중 $i$ 번째 줄에는 $i$ 번째 재료에 대한 정보인 부패 속도 $S_i$, 유통기한 $L_i$와 중요한 재료인지를 나타내는 www.acmicpc.net 풀이 시간이 지나며 세균이 증식을 할 때, 제한된 균수 이하로 밀키트를 구매일로 부터 며칠 후 까지 먹을 수 있는 계산하는 문제이다. (무슨 이런..). 조건의 제한을 확인했을 때 부패속도 S1은 최대 10^9이며, 구매 후 최대 10^9까지 먹을 수 있기 때문에, 최대 균 수는 10^9 *2가 될 수 있다. 제한된 균 수를 확인하는 과정에서, 모든 .. 2023. 2. 17. [JavaScript] Array vs Queue vs Deque Array 이대로 알고리즘에 활용해도 될까? 자바스크립트를 사용한 알고리즘 풀이에서 Queue를 구현하기보다는 Array를 사용하곤 했다. 자바스크립트에서 Array는 기본 배열 메서드(push, pop, unshift, shift)를 통해 Queue를 구현하지 않아도 FIFO로 사용이 가능하기 때문에, 간단히 풀이할 때는 array를 활용하곤 했으나, 시간복잡도 측면에서 좋지 않을 것이라 생각이 들었다. 📌 자료구조의 가장 앞 데이터 삭제하기(Dequeue) 다시 생각해보더라도 array에서 push와 pop의 경우는 시간복잡도가 O(1)으로, 배열의 마지막에 데이터를 추가하거나 빼기만 하면 되기 때문에 간단하다. 하지만 queue의 속성인 FIFO를 활용하기 위해 가장 앞에 있는 데이터를 제거할 때 .. 2023. 1. 8. [BAEKJOON] 백준 4803번: 트리 (node.js) 문제 링크: https://www.acmicpc.net/problem/4803 4803번: 트리 입력으로 주어진 그래프에 트리가 없다면 "No trees."를, 한 개라면 "There is one tree."를, T개(T > 1)라면 "A forest of T trees."를 테스트 케이스 번호와 함께 출력한다. www.acmicpc.net 문제 그래프는 정점과 간선으로 이루어져 있다. 두 정점 사이에 경로가 있다면, 두 정점은 연결되어 있다고 한다. 연결 요소는 모든 정점이 서로 연결되어 있는 정점의 부분집합이다. 그래프는 하나 또는 그 이상의 연결 요소로 이루어져 있다. 트리는 사이클이 없는 연결 요소이다. 트리에는 여러 성질이 있다. 예를 들어, 트리는 정점이 n개, 간선이 n-1개 있다. 또, 임.. 2023. 1. 8. [SSAFY 7기] 특화 프로젝트 '여행조각' 회고 SSAFY 협업 프로젝트 2번째, 특화 프로젝트를 무사히 마무리 한지 3주가 지났다. 블록체인 NFT 기술을 활용한 프로젝트를 진행하며, 이전과 다른 성장 또는 퍼포먼스와 기능을 보여주기 위해 어떤 노력을 했는지, 아쉬웠던 점들은 어떤 것들이 있는지에 대해 회고로 작성해서 글을 남겨보자 한다. NFT를 활용한 서비스를 기획하는 것에 생각보다 많은 어려움을 겪었었다. 처음 기획 당시에는 유서를 활요한 유서 꾸미기를 할까라는 식으로 접근을 했는데, 막상 서비스로 구현을 하려고 하니 법적인 효력부터 실제 서비스가 나왔을 때 너무 어두운 분위기일 것 같아서 최초 기획을 엎어버렸다. 막상 NFT 서비스로 구현할 수 있는 것들이 너무 한정적이라 뒤늦게 해당 주제를 선정한 것에 아쉬움을 느끼긴 했지만, 또 다른 팀원.. 2022. 10. 31. [React] Rerendering issues 상태 변경으로 인한 자식 컴포넌트 rerendering 새로운 프로젝트를 진행 중에 리렌더링 이슈가 너무 많이 발생해서 정리해보고자 한다. 다이어리 꾸미기 페이지에서 하단의 탭을 클릭하면 창이 height를 조절해서 더 많은 스티커 목록을 볼 수 있도록 기획하였다. (true/false로 상태를 관리하여 true 일 경우 max-height: 50vh, false 일 경우 120px로 설정하였다.) // emotion을 적용한 스타일 컴포넌트 const StickerZone = styled.div` position: fixed; max-height: ${(props) => (props.active ? "50vh" : "120px")}; bottom: 0; background-color: ${(props).. 2022. 9. 29. [SSAFY 7기]공통프로젝트 "더민트" 후기 🧑🏻💻 담당 역할 '더민트' 서비스 기획 경매 준비 및 경매 스트리밍 서비스 개발 OpenVidu와 WebSocket을 활용한 webRTC 실시간 스트리밍 개발 웹 알림 서비스 개발 Notification API 활용한 브라우저 알림 서비스 채팅 서비스 개발 sockjs와 stompjs 활용 회원가입, 로그인, 정보관리 서비스 개발 React-hook-form을 이용한 회원가입 form 관리 Recoil, React-Query를 사용한 회원 정보 상태 관리 휴대폰 인증을 통한 회원가입 서비스 메인 홈 페이지 개발 경매, 상품, 프로필 검색 서비스 개발 경매 품목 페이지 개발 404 Not Found 페이지 개발 Recoil과 React-Query를 이용한 상태 관리 재사용 향상을 위한 무한 스크롤 컴포.. 2022. 8. 21. [React-Hook-Form] react hook form validate debounce 적용기 React Hook Form 적용하기 react hook form을 통해 input에 대한 실시간 validation을 간편하게 구현하고 있었다. 회원가입을 구현하는 중, 꼭 필요한 기능으로 이메일, 아이디, 휴대폰 번호에 대한 중복검사가 필요하였고 별도의 버튼 클릭 대신 사용자들이 값을 입력했을 경우 서버로 자동으로 request를 날리도록 구현하였다. 하지만 너무 지나친 request는 서버 성능에 문제를 줄 수 있기 때문에 간단하게 debounce 메서드를 만들었다. // debounce.js function debounce(callback, limit = 1000) { let timeout; return function (...args) { clearTimeout(timeout); timeout .. 2022. 8. 7. [React-Query] react-query를 활용한 무한 스크롤 구현 에러 처리 TheMint 개발 에러 useObserver 무한 스크롤 에러 react-query의 useInfiniteQuery와 IntersectionOberser API를 사용하여 무한 스크롤을 구현하고자 하였다. useInfiniteQuery를 사용하여 데이터 캐싱을 최적화하고, 컴포넌트를 변경 후에도 기존의 데이터에 대한 상태를 관리하여 클라이언트가 새로 데이터를 요청하지 않도록 하기 위함이다. 무한 스크롤을 구현하기 위해 IntersectionObserver API를 활용한 useObserver hooks을 만들었다. import React, { useEffect } from 'react'; function useObserver({ target, onIntersect, root = null, rootMar.. 2022. 8. 5. 프론트엔드 면접 준비 - 1 프로그래밍 프로그래밍이란 뭐라고 생각하나요? 간단히 프로그램밍이란 프로그램을 만드는 모든 작업이라고 볼 수 있다. 프로그래밍이란 특정 목적을 달성하기 위해 설계된 알고리즘을 프로그래밍 언어를 사용하여 구체적인 프로그램으로 작성하는 과정을 가리킨다. 컴파일러는 뭐고 인터프리터는 뭔가요? 컴파일러란 우리가 작성한 코드를 컴퓨터로 실행 가능한 코드로 컴파일(변환)한 뒤 실행파일을 생성시킨다. 컴파일 도중의 속도는 그다지 빠르지 않을 수 있지만, 컴파일을 마친 실행파일은 조금 더 빠르게 실행됩니다.인터프리터는 코드를 실시간으로 읽고 컴퓨터에게 전달한다. 인터프리터는 한 번에 모든 코드를 전달하는 것이 아니라 한 줄 씩 번역하고 분석한 뒤 프로세서에게 전달, 실행된다. 코드가 끝날 때까지 실행되고, 작업 중 에러.. 2022. 7. 10. 이전 1 2 3 4 ··· 17 다음 728x90 반응형
