728x90
반응형

전체 글 99

[코테 합격자되기 Js] 문제 16 기능 개발

프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/42586풀이 방법처음에 큐 없이 풀 수 있지 않을까 하는 생각에 먼저 풀이 순서를 작성했다.progresses배열과 speeds배열로 인덱스마다 작업 소요일을 계산한다.앞에 인덱스와 뒤에 인덱스를 비교하여 앞의 인덱스보다 뒤의 인덱스가 작업 소요일이 더 작거나 같으면 앞의 인덱스가 완료되었을 때, 작거나 같은 인덱스와 함께 배포된다.배포되고 난뒤에 남은 배열의 요소들도 같은 방법으로 배열의 모든 요소가 없어질 때까지 반복한다.막상 풀고 나니 아래 코드가 결국 큐 같다는 생각이 들었다.function solution(progresses, speeds) { let answer ..

Algorithm. 2024.08.14

[코테 합격자되기 Js] 문제 17 카드뭉치

프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/159994문제 풀며 놓친 점자바스크립트의 Object나 Array와 같은 iterator들은 값이 같은지 비교할 때 메모리 주소로 비교한다.배열, 객체를 비교할 때는 비교하려는 대상은 JSON.stringify(array) 메서드를 이용해 문자열로 변환한 후 비교할 수 있다.잘 못 이해한 부분카드1과 카드2에서 각각 카드가 한장씩 뽑아 goal 배열과 맞는 순서로 나열하여 비교하는 문제인지 알았는데, 카드1과 카드2를 무조건 둘다 뽑아서 비교하는 문제가 아니라 하나만 뽑아서 비교하면 되는 문제였다. 문제를 잘 읽도록 하자.[오답]처음 문제를 푼 방법처음에 문제 이해를 잘 못해서 ..

Algorithm. 2024.08.14

알고리즘 개념 , 큐

► 코딩테스트 합격자되기 자바스크립트편 07장 큐를 요약정리한 포스팅입니다.선입선출 :FIFO( first in first out )삽입하는 연산 push꺼내는 연산 pop👯👯 큐의 특성을 활용하는 분야작업 대기열이벤트 처리큐의 ADT (abstract data type)큐는 front 다음부터 rear까지를 큐가 관리하는 데이터로 생각해야 한다.연산isFull() :booleanisEmpty() : booleanpush(item) : voidpop(item) : itemType상태front :int -> front는 이전을 기준으로 큐의 사용할 수 있는 부분과 사용할 수 없는 부분으로 나뉘었다.rear : intdata[maxsize] : itemType큐 구현하기자바스크립트에서는 배열의 push(..

Algorithm. 2024.08.13

이진 트리 binary tree

►  코딩테스트 합격자되기 자바스크립트편 09장 트리를 요약 정리한 포스팅입니다.🌲 이진 트리란?모든 노드의 최대 차수가 2를 넘지 않는 트리를 말한다.(= 간선이 최대 2개인 트리)► 배열로 표현하기배열은 선형 자료 구조, 트리는 계층 자료 구조이므로 배열로 트리를 표현하려면 아래 규칙을 따라야한다.루트 노드는 배열 인덱스 1번에 저장한다.왼쪽 자식 노드의 배열 인덱스는 부모 노드의 배열 인덱스 * 2이다.오른쪽 자식 노드의 배열 인덱스는 부모 노드의 배열 인덱스 * 2 + 1이다. 1 / \ 2 3 / \ \ 4 5 7 / / 8 14 위의 트리로 보면 인덱스가 부모 *..

Algorithm. 2024.08.13

해시 개념 정리

► 코딩테스트 합격자 되기 자바스크립트편 08 해시 개념 정리한 포스팅입니다.해시key: Data : 키를 통해 데이터를 탐색한다.해시 특징해시는 단방향으로 동작한다. 이런 특징은 외부에 정보를 안전하게 제공하는 특징이 있어 네트워크 보안에서 많이 활용된다.찾고자 하는 값은 O(1)에서 바로 찾을 수 있다. 키 자체가 해시함수로 인해 값이 있는 인덱스가 된다.값을 인덱스로 활용하려면 적절한 변환 과정을 거쳐야한다.해시 특성 활용 분야· 비밀번호 관리, 데이터 베이스 인덱싱, 블록체인자바스크립트에서의 해시자바스크립트에는 오브젝트 자료형을 제공하는데, 이 자료형이 해시와 거의 동일하게 동작한다.해시 함수 구현시 고려사항해시 함수로 인한 변환값은 인덱스로 활용된다. 충돌은 서로 다른 두키가 해시 함수로 인해 ..

Algorithm. 2024.08.13

배열 연산의 시간 복잡도

🕰️ 시간 복잡도 먼저 이해하기문제를 해결하는 데 걸리는 시간, 입력된 데이터를 함수로 표현해 데이터를 다루는데 걸리는 시간을 정량화해 나타낸 것을 시간 복잡도라고 한다. 어떤 목적을 달성하거나 결과물을 만들기 위해 거쳐야하는 과정을 알고리즘이라고 하는데, 이때 다양한 알고리즘이 나타날 수 있으며 그 중에서 가장 시간복잡도가 낮은 것을 선택해야한다.☑️ 배열에서의 시간 복잡도배열은 임의 접근이라는 방법으로 배열의 모든 위치에 있는 데이터에 단 한 번에 접근할 수 있다. 따라서 데이터에 접근하기 위한 시간 복잡도는 O(1)이다. 맨 뒤에 데이터를 추가할 경우, arr = [1, 2, 3] -> arr = [1, 2, 3, 4] 형태로 추가한다 했을 때 arr[3]에 다른 데이터 위치에 영향을 주지않고 한..

Algorithm. 2024.08.11

JSX 유의사항

☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데  이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립..

Web Frontend/React 2024.08.09

객체 지향 프로그래밍, 프로토타입 이해하기

해당 스터디 기록은 https://github.com/learning-with를 방문하시면 확인하실 수 있습니다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는멀티 패러다임 프로그래밍 언어이다.- 모던 자바스크립트 딥다이브 259P프로토타입이란?객체에 접근하기 위한 접근자 프로퍼티이다.모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 ([[prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.👨‍🏫 프로토타입 이해하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다.클래스 (ES6)는 프로토타입 기반 객체 생성 패턴의 새로운 객체 생성 메커니즘이다.프로토타입을 이해하기 전에 객체지향 프로그래밍 먼저 이해해보자.☑️ 객체지향 프..

Web Frontend 2024.08.02

AWS S3 개념

🚀 AWS(Amazon Web Service)에서 제공하는 확장 가능한 객체 스토리지이다.Simple Storage Service , S가 세개 들어가서 S3라고 한다.이미지 파일이나 프론트 빌드 파일등을 저장할 수 있는 저장소를 제공해준다. 그 외 사용자가 사용하는 방식에 따라 다양한 데이터 형식을 저장하고 관리할 수 있다. 프론트 빌드 파일을 저장할 경우에는 CI/CD를 통해 캐싱 삭제 명령어로 자동 캐시 삭제, 저장 배포 작업을 설정해둘 수 있어, 정적페이지를 배포할 경우 S3와 CloudFront, Route53으로 클라이언트 배포를 할 때 많이 쓰기도한다. 유저가 전송한 프로필 사진과 같은 이미지파일도 S3에 저장해 S3에 저장된 주소로 가져와 사용할 수 있다. 그 외에도 데이터 백업 용도나 ..

DevOps./AWS 2024.08.01

useReducer로 useState 지옥 벗어나기

useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons..

Web Frontend/React 2024.07.26
728x90
반응형