전체 글62 [프로그래머스] 기능개발(스택 / 큐) 풀이 👁🗨 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. ❌ 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100.. 2023. 4. 8. [React] Redux 와 Context-API의 비교, 사용 사례 및 코드 예시 리덕스(Redux)와 컨텍스트 API(Context API)는 리액트(React) 애플리케이션에서 상태 관리를 하기 위한 두 가지 대안적인 방법이다. 하지만 유사한 점들이 많다보니, 처음 봤을 때 어느 때에 더 적절한걸 써야 할지 몰라 Redux와 Context API를 비교하고, 각각의 사용 사례와 코드 예시를 기록하려 한다. 🤔 Redux vs. Context API Redux는 Flux 아키텍처 패턴을 구현한 라이브러리로, 전역 상태 관리를 위해 사용된다. Redux는 애플리케이션의 상태를 중앙 집중적으로 관리하고, 상태 변경을 예측 가능하도록 만든다. 이를 위해 Redux는 불변성을 유지하고, 상태 변경을 위한 액션(Action)을 사용하며, 이 액션들을 통해 상태를 변경하는 리듀서(Reducer.. 2023. 4. 5. [코드이슈] if문에서 else와 else if를 지양하는 의견 정리 😎 Clean Code 원칙의 이해 Clean Code는 가독성, 재사용성, 유지보수의 용이성에 초점을 맞춘 코드 작성 방법론이다. Robert C. Martin은 이를 위한 다양한 원칙을 제시하였는데, 그 중 '제어문의 복잡성을 줄이는 것'이 하나로, 이 원칙에 따르면 if문에서 else와 else if문을 최대한 지양하도록 권장한다. 이 원칙의 배경에는 어떤 이유가 있는지 살펴보자. ✅ if문에서 else와 else if문 사용의 문제점 if문에 else와 else if문을 사용하게 되면, 코드의 복잡성이 증가하는 문제가 있다. 특히 여러 조건이 복합적으로 얽혀있는 경우, 코드의 가독성이 저하되며 디버깅의 어려움이 생긴다. 또한, 이러한 구조는 코드의 흐름을 파악하기 어렵게 만들어 실수를 유발하는 원.. 2023. 4. 4. [프로그래머스] 완주하지 못한 선수 자바스크립트 풀이 👁🗨 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. ❌ 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo".. 2023. 3. 29. [프로그래머스] 위장 자바스크립트 문제 풀이 ❓ 문제 지문 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. ❌ 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. cl.. 2023. 3. 28. 브라우저 저장소 정리(feat.localStorage, sessionStorage, IndexedDB) localStorage, sessionStorage 및 IndexedDB는 최신 웹 브라우저에서 사용할 수 있는 세 가지 웹 저장소 기술이다. 사용자의 브라우저에 로컬로 데이터를 저장한다는 동일한 목표를 공유하지만 용도, 용량 및 성능이 다르다. 재밌어보이니 각각의 스토리지 기술의 차이점과 장점/단점에 대해 정리했다. ✅ localStorage localStorage는 브라우저에 키-값 쌍을 저장할 수 있는 간단하고 가벼운 스토리지 기술이다. 최대 10MB의 데이터를 저장할 수 있으며 사용자가 브라우저를 닫은 후에도 데이터를 계속 사용할 수 있다. localStorage에 저장된 데이터는 도메인에 따라 다르다. 즉, 한 도메인에 저장된 데이터는 다른 도메인에서 접근 할 수 없다는 걸 말하며, 다른 사용자.. 2023. 3. 20. animation 최적화 정리 애니메이션은 웹 사이트를 좀 더 화려하게 만들어 사용자들의 이목을 끌 수 있는 좋은 기능이지만 잘못 사용할 경우 사이트가 느려지는 성능 저하 문제로 이어져 사용자가 기피하는 사이트로 만들 수도 있는 사용자 경험에 있어 민감한 기능이다. 기본적으로 알려진 애니메이션이 사용자 경험에 불편함을 느끼는 수치는 초당 60 프레임 미만으로 알려져 있다. 애니메이션을 주는 방식은 CSS와 JS 둘 다 가능하며 사용자 경험에 불편함을 주지 않게 신경 쓰고, 최적화하는 방법을 조사하고 정리해 보았다. 💪 CSS 애니메이션과 VS JavaScript 애니메이션 ✅ CSS로 만든 애니메이션 : 선언적 애니메이션 그림과 스타일링을 담당하는 CSS 애니메이션은 메인 스레드가 아닌 브라우저의 컴포지터 스레드에 의해 처리된다. 컴.. 2023. 3. 11. 시멘틱 태그를 사용하는 이유, 웹 표준을 지키는 이유 👁🗨 일반적으로 시멘틱 태그사용 시 장점으로 자주 언급되는 3가지 1. HTML 문서의 가독성과 유지보수가 쉽다. 만약 모든 태그들을 div로 만들었다고 가정했을 때, HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다. 2. HTML만 봐도 영역 구분이 쉽다. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용.. 2023. 3. 5. 이전 1 2 3 4 5 6 7 8 다음
