티스토리

성장일기

검색하기

블로그 홈

성장일기

jiwoo84.tistory.com/m

Done is better than perfect🔥

구독자: 4

방명록 방문하기

주요 글 목록

Amazon S3 Pre-signed URL의 만료 시간 검사하기 🤔 문제 상황amazon s3로 저장된 파일의 Pre-Signed url을 전달받는 상황해당 url을 통해 파일에 접근 할 수 있으며, 만료 기한이 설정되어 있습니다.어차피 만료기한이 지나면 접근이 불가하지만, 프론트에서 미리 알아내어 이벤트를 제어하고 싶다면 어떻게 해야 할까요?💡Pre-Signed URL이란?사전 서명된 URL(Pre-Signed URL)은 특정 파일에 대해 제한된 시간 동안 접근할 수 있도록 서명된 URL을 의미합니다. 기본적으로 Amazon S3와 같은 클라우드 스토리지에 저장된 파일들은 퍼블릭하게 접근할 수 없고, 인증된 사용자만이 접근할 수 있습니다. 그러나 사전 서명된 URL을 사용하면 특정 파일에 대한 일시적이고 제한된 접근 권한을 비인증 사용자인 client에게 제공할.. 공감수 0 댓글수 0 2024. 10. 13.
body 스크롤 확실하게 막기 문제 상황navbar의 사이드 메뉴가 펼쳐졌을 때 body의 스크롤을 막아야 했습니다.해결 방법 useEffect(() => { if (mobileMenuCollapsed) { document.body.style.overflow = 'hidden' document.body.style.width = '100%' document.body.style.height = '100%' } else { document.body.style.overflow = 'auto' document.body.style.width = '' document.body.style.height = '' } return () => { document.body... 공감수 0 댓글수 0 2024. 6. 7.
여러 번 호출 가능한 abortController 만들기 (feat. useRef) 문제 상황대량 청구서를 발송 중에 취소하는 로직이 필요했습니다.그래서 fetch 비동기 통신을 취소하는 abortController를 사용했습니다. 🚨 주의사항abortController는 프론트의 요청만 취소하는 것임을 알아야 합니다.요청 이후에 백엔드에서 일어나는 일은 제어할 수 없습니다.예를 들어 청구서 발송을 클릭하고, 곧바로 취소를 눌러서 요청을 취소했다하더라도 백엔드에서는 발송이 시작된 상태이고 이것을 취소할 수는 없습니다.저는 위와 같은 이유로 해당 로직을 작성했지만, 사용하지는 못했습니다 :(해결 방법메일을 발송하는 로직을 훅으로 만들어서 사용하는 컴포넌트에서 호출하도록 했습니다.import AbortController from "abort-controller";export functi.. 공감수 0 댓글수 0 2024. 6. 7.
[Javascript] 파일 및 모듈 내보내기 (script / Common JS / ES Modules 그리고 Bundler) 1️⃣ script 초기에는 프로그램의 규모가 작았기 때문에 약간의 상호작용만 제공하면 됐기에 다른 파일을 불러올 때 script를 사용하여 전체 다 가져옴 문제점 자바스크립트는 파일마다 독립적인 스코프를 가지지 않고 전체 파일이 하나의 전역 객체를 공유하여 사용 ⇒ 전역변수가 중복되는 문제가 발생할 수 있음 (위 같이 여러 개의 파일로 분리해도 1, 2, 3이 같은 스코프를 공유하기 때문에 모듈화가 아님) 문제 해결 모듈: 재사용 가능한 코드 조각으로 애플리케이션을 구성하는 개별 요소 파일을 모듈로 나누어 내보내고 불러옴 ⇒ Node.js는 Common JS를 채택 2️⃣ Common JS module.exports = { ... } // 모듈 내보낼 때 const utils = require(&#39.. 공감수 0 댓글수 1 2023. 9. 30.
[MSW] 브라우저, Node.js 환경에서 API 모킹하기 들어가며... 팀 프로젝트를 할 때 백엔드의 진행 속도가 프론트보다 느려서 API 완성을 기다리는 입장이었다. 당시 단순히 json 파일로 데이터를 모킹해서 사용하다보니 나중에 수정할 코드가 많았고 정상적으로 api 요청이 들어가고 있는건지 알 수 없는 문제가 있었다. 그래서 최근에는 msw를 사용해서 api를 모킹하고 있다. 🍀 MSW (Mock Service Worker)란? 서비스 워커(service worker)를 사용하여 네트워크 호출을 가로채는 API 모킹 라이브러리 실제 서버를 대신하여 브라우저 내에서 가상의 서버를 구축하여 개발 및 테스트할 수 있음 API 스펙은 나왔지만 아직 구현되지 않은 경우 임시로 사용 가능함 특징 모킹이 네트워크 단에서 일어나기 때문에 프론트 코드를 실제 API와 .. 공감수 0 댓글수 0 2023. 5. 22.
Javascript / React에서 Fetch 올바르게 사용하기 (with Node.js 테스트 환경) 들어가며 최근 Fetch를 사용하던 중 단순히 javascript에서 사용할 때와 react에서 사용할 때 차이점이 있어 이를 공부하게 됐다. fetch는 비동기로 동작하기 때문에 신경쓸 점이 많았다. 그리고 테스트 환경에서 사용하려면 추가적으로 필요한 설정이 있기에 이것까지 정리해보려 한다! 🍀 Fetch란? ES6에 도입된 자바스크립트 내장 함수로, 클라이언트가 서버에 네트워크 요청을 보내서 정보를 받아올 때 사용함 Promise 기반이라 비동기로 응답 받은 데이터를 다루기 쉬움 내장 함수라서 모듈 설치할 필요가 없음 기본 문법 fetch의 기본 메소드(생략시)는 get임 fetch(url, { method: "GET", // 기본값:GET (POST, PUT, DELETE, etc.) headers.. 공감수 0 댓글수 0 2023. 5. 21.
Ajax / Axois / Fetch 개념과 차이점 들어가며 처음에 비동기 통신을 공부할 때, axios, fetch, ajax를 배우며 대체 뭐가 뭔지 모르겠고 뭘 써야할지 헷갈렸던 경험이 있다. 최근 fetch를 공부하며 어렴풋이 알고 있던 부분을 정리해봤다. 요약하자면... Ajax는 과거 비동기 통신 방식이며 지금은 거의 사용하지 않음! Axois는 비동기 통신할 수 있는 라이브러리라서 설치해야 사용 가능! fetch는 최근 javascript에 생긴 메서드라서 가장 편하고 좋지만 단점도 존재! 🍀 Ajax / Axois / Fetch Ajax -> Axios -> Fetch 오래된 순서이며, 이전 방식의 문제를 해결하기 위해 다음 방식이 생겨남 Ajax 과거 브라우저에서 화면을 갱신하지 않고 서버로부터 데이터를 받아오기 위해 사용하던 프로그래밍 .. 공감수 0 댓글수 0 2023. 5. 21.
메가테라 과제 해설 코드에 기여한 썰 푼다✌ 🌳 해설 코드 뜯어보기 메가테라 프론트엔드 생존코스의 4주차 과제를 진행했다. 기본적인 기능 구현은 끝마쳤지만 과연 이게 최선의 코드일지 고민스러웠다. 컴포넌트의 구조, 상태의 위치, hook과 함수의 분리 기준, 그리고 컴포넌트 명 짓는 방법 등 풀리지 않는 궁금증이 있었다. 다행히 생존 코스는 모범 해설 코드를 제공하기에 궁금증을 어느정도 해소할 수 있다. 나와 어떻게 다르게 했는지 궁금했기에 조각조각 뜯어서 의도를 파악했고 더 최선의 코드라고 생각되면 내 코드도 함께 수정했다. 🌳 이 부분이 정말 최선일까? 과제를 하다가 가장 애를 먹은 부분이 뭐였냐면... 메뉴 주문을 누르면 영수증이 나타났다가 5초 후에 사라지는 기능 구현이었다. 그래서 해당 코드를 꼼꼼히 보고 있었다. 그러던 중, 이해 되지 .. 공감수 3 댓글수 0 2023. 5. 15.
[Next.js] 웹 사이트 방문자 데이터 수집 (with GA: 구글 애널리틱스 ) 🍀 들어가며 웹 사이트 방문자의 데이터를 수집하기 위해 구글 애널리틱스를 활용해보기로 했다. 정적 사이트나 CSR이라면 index.html안의 다른 페이지에도 적용하기 이렇게만 설정하면 페이지 이동시에는 데이터 수집이 안된다. 이동시에도 해당 코드가 작동하도록 설정해야한다. 일단 gtag의 동작들을 함수로 분리해준다. lib/gtag.js export const pageview = (url) => { window.gtag("config", process.env.NEXT_PUBLIC_GA_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag("event", action, { .. 공감수 1 댓글수 0 2023. 5. 8.
[Network] URI / URL / URN 🍀 URI / URL / URN의 상관관계 URI는 URL과 URN을 포괄하는 개념이다. 모든 URL과 URN은 URI이라는 말이다. Scheme: 리소스에 접근하는데 사용할 프로토콜. 웹에서는 http나 https 사용 Host: 접근할 대상(서버)의 호스트명 Path: 접근할 대상(서버)의 경로에 대한 상세정보 🍀 URI Uniform Resource Identifie = 인터넷상의 리소스 자체를 식별하는 고유한 문자열 시퀀스 Uniform: 리소스을 식별하는 통일된 방식 Resource: URI로 식별이 가능한 모든 종류의 리소스(웹 브라우저 파일 등)을 지칭함 Identifier: 다른 항목과 구분하기 위해 필요한 정보 => 통합 리소스 식별자 ex) google.com, https://googl.. 공감수 0 댓글수 0 2023. 5. 4.
[Backend] REST API 성숙도 모델 / 설계 기본 규칙 REST는 Representational State Transfer의 약자, 로이필딩에 의해 만들어짐 앱 사이의 결합도를 낮추게끔 설계하는 아키텍처 스타일로 서버와 클라이언트가 별도로 구축되고 결합될 수 있게 함 🍀 REST API 자원을 이름으로 구분하여 자원의 상태를 주고받는 방식 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. 🍀 Richardson Maturity Model 리차드슨이 정의한 REST API의 성숙도 모델 대개는 4가지를 모두 만족하지 않고, Resou.. 공감수 0 댓글수 0 2023. 5. 4.
메타버스는 어떻게 구현할까? (WebSocket, 서버 분할, 멀티 스레드) 🌳 들어가며 과거 메타버스라는 말이 없을 때 퍼피레드, 팝플의 헤비 유저였고 성인이 되고서는 제페토와 본디 등을 해봤다. 가상의 공간이지만 나만의 공간을 마련하고, 꾸미고, 사람들과 관계를 맺으면서 어떠한 갈증이 충족되는 것을 느꼈기에 그런 게임이나 공간이 있다면 이끌려 시작했었다. 현재는 모각코를 위해 zep, 게더타운과 같은 서비스를 주로 이용하고 있는데, 전부터 메타버스가 어떤 기술로 구현되는지 궁금했기에 이번 기회에 공부해봤다!! 유저끼리 소통하고, 움직임을 감지하려면 어떻게 해야할까? 다른 웹 사이트와 같이 HTTP 프로토콜을 이용해서 요청을 보내고 받아야 할까? 아니다. 실시간으로 양방향 소통을 위해서는 웹 소켓을 이용해야 한다. 📌 웹 소켓 서버와 클라이언트 간의 양방향 통신을 지원하는 컴퓨.. 공감수 0 댓글수 0 2023. 5. 3.
[Next.js] 플러그인 사용없이 SEO(검색 엔진 최적화)하기 들어가며 SEO(검색 엔진 최적화)를 진행하려는데 플러그인을 사용하지 않고 최대한 기본 제공되는 태그를 사용하고 싶었다 적용하다보니 헷갈리는 부분이 있어 정리해본다! 의문점 SEO를 위해서는 Head 안에 title, meta 등을 설정해야 한다. 기본적으로 Next.js에서 제공되는 head 태그는 next/head, next/document가 있다. 두 태그는 모든 파일에서 사용할 수 있다. 그리고 Next.js는 초기에 웹 사이트가 실행될 때 _app.tsx와 _document.tsx 두 개의 파일을 거쳐서 실행된다. 그럼 두 가지 의문이 생긴다. next/head, next/document 중, 어떤 것을 사용해야 할까? _app.tsx와 _document.tsx 중, 어디에 넣어야 할까? 이 두.. 공감수 0 댓글수 0 2023. 4. 24.
웹 사이트 성능 측정 및 최적화 (with LightHouse) LightHouse 성능 측정 웹 사이트를 만들고 배포까지 마쳤다. 그런데 SSR임에도 불구하고 초기 렌더링이 느려서 성능 측정이 필요했다. 크롬 확장 프로그램인 LightHouse을 사용해서 사용자 입장의 성능을 측정했다. 다른 것들은 준수했으나 가장 중요한 퍼포먼스 점수가 처참했기에 최적화를 진행했다, 💡 이미지 최적화 성능 하락의 주된 원인은 이미지였기에 두 가지 과정을 거쳤다. Next.js에서 제공하는 Image 태그 커스텀 해당 Image 태그는 width, height를 필수적으로 적어야 했는데, 나는 이미지의 크기가 부모의 맞춰서 유동적으로 변화하는 것을 원했다. 그래서 기본 속성을 이용하여 커스텀했다. Image의 width나 height는 px단위의 숫자만 넣을 수 있기에 0을 넣고 s.. 공감수 0 댓글수 0 2023. 4. 6.
[Next.js] Tailwind-styled-components의 SSR 구현하기 🤔 문제 상황 tailwind-styled-components를 사용해서 스타일을 부여했는데 초기 렌더링되는 찰나에 css가 적용되지 않는 문제가 있었다. 자바스크립트 파일이 다운로드 되고 나서야 제대로 적용되니 보기 싫었다. css가 next.js가 ssr할 때 부여되도록 설정이 따로 필요했다. Next.js + tailwind + styled-components를 결합할 때 twin.marco + emotion 조합을 더 많이 사용해서 자료가 많았는데, Next.js와 tailwind-styled-components를 사용하는 경우는 많지 않아서 자료 찾기가 어려웠다. 그래도 좋은 글들이 몇 개 있어서 참고해서 해결했다. ✅ 해결 방법 ssr 적용하지 않는다면 styled-components를 깔지 .. 공감수 0 댓글수 0 2023. 4. 6.
[Tailwind] react-markdown 적용하기 🤔 문제 상황 react-markdown을 적용이 안되서 찾아보니까 tailwind가 기본적인 html의 스타일을 제어하고 있어서 그냥 적용하면 안된다는 것을 알았다. 그래서 마크다운을 사용할 부분만 tailwind의 스타일이 적용되지 않도록 해야한다. ✅ 해결 방법 다행히 tailwind 자체에서 markdown 컴포넌트를 사용할 수 있도록 플러그인을 제공하고 있었다. 해당 플러그인을 사용하면 하위 태그는 tailwind 스타일이 적용되지 않는다. @tailwindcss/typography 설치 https://tailwindcss.com/docs/typography-plugin$ npm install @tailwindcss/typography tailwind.config.js 파일에 플러그인 추가// .. 공감수 0 댓글수 0 2023. 4. 3.
[React-slick] Carousel 만들기 (+ Typescript, Tailwind, styled-components) 🤔 문제 상황 현재 tailwind와 styled-components가 결합된 tailwind-styled-components를 사용하고 있는데 이미지 슬라이더가 필요했다. 찾아보니 carousel이 정식 명칭이었고 찾아보니 사용할 수 있는 소스가 많았다. 처음에는 간단할 줄 알았는데 구현하는데 거의 이틀이 걸렸다. 세 가지 프레임워크를 사용해봤는데 결론적으로 react-slick을 사용했다. 실패 기록 flowbite 이미 navbar를 flowbite로 구현했던지라 그 안에서 해결하고 싶었다. 그래서 flowbite에도 좋은 carousel이 있길래 사용하려고 했는데... 실패했다. 거의 하루를 붙잡고 있었는데 공식 문서에 나와있는대로 복붙을 해도 안됐다. 이미지를 싸고 있는 div를 벗기니까 이미지.. 공감수 0 댓글수 0 2023. 3. 31.
[Typescript] 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다. 🤔 문제 상황 getElementById로 돔 요소에 접근해서 변수에 할당하려는데 에러가 떴다. 해당 요소가 제대로 읽히지 않아 HTMLElement 타입으로 할당이 불가능한 것이다. 조건을 붙여 null이 아님을 확인하고 할당할 수 있지만 보다 간편한 방법이 있다. ✅ 해결 방법 1. 연산자 ! 붙이기 const portalDiv = document.getElementById('your-element')!; 타입스크립트에서 !은 Null이 아닌 어선셜 연산자(Non-null assertion operator), 피연산자가 null이 아니라고 컴파일러에게 전달하여 일시적으로 null 제약조건을 완화하는 역할을 한다. 그래서 위 코드에 느낌표를 붙여주면 값이 무조건 할당되어 있다고, null.. 공감수 0 댓글수 0 2023. 3. 30.
[Tailwind] 동적 클래스 할당하기 (+Typescript, Styled-components) 🤔 문제 상황 Typescript 환경에서 Tailwind와 styled-components를 함께 사용하는 tailwind-styled-components를 사용하던 중, 공통적으로 사용되는 컴포넌트의 스타일을 prop로 받아서 적용하고 싶었다. 즉, 동적으로 클래스를 할당하려고 한 것이다. 셋을 함께 사용하면서 작성하는 과정이 꽤나 까다로웠기에 기록해본다. ✅ 해결방법 tailwind와 동적 클래스 Tailwind의 공식 문서는 동적 클래스 사용을 지양하라고 써있다. 정규표현식을 통해 단어의 있는 그대로를 가져와서 클래스로 적용하기 때문에 코드적으로 분석이 필요한 부분은 건너뛰어버리기 때문이다. 그래서 아예 동적 클래스를 못 쓰느냐? 그건 아니다. 중요한 것은 '완전한 상태의 단어'로 .. 공감수 0 댓글수 0 2023. 3. 28.
[Styled-components] Semantic-ui-react의 스타일 커스터마이징하기 🤔 문제 상황 Semantic-ui-react를 사용해서 css 스타일링을 하는데 추가로 커스터마이징이 필요했다. 그래서 클래스명을 사용한 덮어쓰기도 해보고, 태그를 사용하여 추가해봤지만 무용지물이었다. !important만이 방법인가... 하고 있던 중 좋은 글을 발견해서 실마리를 찾았다 참고: Customizing the Semantic UI React library with Styled Components ✅ 해결 방법 보통 css에서 !important를 사용되는 것은 지양된다. 모든 우선순위를 무시한 채 최상위에서 적용되기 때문에 어떤 부작용이 나타날지 모르기 때문이다. 하지만 styled-components를 사용하면 말이 달라진다. styled-components는 자체 class명을 컴포넌.. 공감수 0 댓글수 0 2023. 3. 24.
[React] 프론트단에서 페이지네이션 구현하기 들어가기 전에... 유저가 많고 데이터가 방대한 서비스라면 백단에서 페이지에 따라 데이터를 나눠서 넘겨줘야 하고, 그것이 이상적인 구조이다. 하지만 내가 진행하는 프로젝트는 작은 서비스이고 백의 인력이 너무나 부족해서 페이지네이션 API를 구현할 여력이 없었다. 그래서 프론트단에서 데이터 전체를 받아와서 직접 나누어 출력하는 페이지네이션 컴포넌트를 구현했다. 📌 컴포넌트 구현 import { useState } from "react"; import { PageWrapper, PageBtn } from "../styles/Styled"; // total(데이터 총 갯수), limit(한 페이지에 보여줄 갯수) const Pagination = ({ total, limit, page, setPage }) =.. 공감수 0 댓글수 0 2023. 2. 15.
[자료구조] 트라이(Trie) - javascript ✅ 트라이(Trie)란? 문자열의 집합을 표현하는 트리 자료구조로, 문자열을 검색하는데 최적화된 구조. 루트부터 문자를 하나씩 따라 내려가면서 일치 여부를 확인하면 됨. 📌 구현 아래 코드는 leetcode 208. Implement Trie (Prefix Tree)의 풀이와 같음 // 트라이의 각 노드의 형태 class TrieNode { constructor() { this.children = {}; // 다음 글자들이 TrieNode로 들어가서 이어짐 this.endWord = false; // 여기까지가 단어의 끝인지 여부 } } // 트라이 생성 // ex) ap, ab => {children: { a: {children: {p: {children: {}, endWord: true}, b: {c.. 공감수 0 댓글수 0 2023. 2. 7.
[경험] 좋은 팀을 만드는 팀원이란? 🤔 어떻게 이런 고민을 하게 됐을까? 전 회사에서 근무할 당시 마케터로 입사했고, 이후 팀원 4명을 이끄는 중간 관리자가 되었다. 10인 이하 규모의 작은 회사였고, 인수인계도 없이 퇴사한 상사의 업무를 넘겨 받아 소화하며 신뢰를 얻고 매출 관리까지 하고 있었기에 가능했다. 10개월이라는 짧은 기간이었지만 한 회사에서 팀원과 리더의 자리를 경험하며 느낀 것이 많다. 나는 예전부터 좋은 팀에 대한 고민이 많았다. 첫 시작은 내가 속한 친구들 모임이었다. 그 속에서 나의 역할은 행동대장이다. 정하진 않았지만 리더인 셈이다. 그러다보니 친구들의 참여율을 높이려면, 활발한 모임이 되려면 어떻게 해야 할까? 자주 고민했다. 티비 프로그램에 사연을 올리기도 했다. 그러던 내가 회사에서 중간 관리자가 되었다. 주로 .. 공감수 0 댓글수 1 2023. 2. 3.
[알고리즘] 다익스트라 알고리즘(Dijkstra Algorithm) - javascript ✅ 다익스트라 알고리즘이란? 가중 그래프에서 최적의 경로를 찾을 때 사용하는 알고리즘 다익스트라라는 네덜란드 프로그래머가 20분만에 카페에서 만듬 GPS, 네트워크 라우팅 등 최적의 경로를 찾아야하는 경우에 많이 사용됨 💡 원리 및 실행과정 출발, 도착 노드를 설정 ex) 1 출발 노드부터 연결된 노드의 최소 거리 저장 ex) 1과 연결된 노드가 2, 4 이므로 두 노드에 최소 거리 저장 2(1), 4(2) 방문하지 않은 노드 중에서 가장 거리가 짧은 노드 선택 ex) 2(1), 4(2) 중 비용이 1로 적은 2 선택 선택한 노드와 연결된 노드의 최소 거리 저장 (저장한 값보다 작다면 최소로 갱신) ex) 3(4), 5(3) 3,4번 반복 ⇒ 도착 노드를 뺀 모든 노드까지의 최소 경로 알 수 있음 도착 .. 공감수 1 댓글수 0 2023. 1. 28.
[자료구조] 그래프(Graph) - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 더 효율적이고 간결하게 수정된 코드이다. ✅ 그래프란? 유한하고 변할 수 있는 꼭지점이나 노드나 점들의 집합으로 구성된 데이터 구조 💡 구성 요소 정점(vertax): 각 노드 간선(edge): 정점을 잇는 선 💡 그래프의 종류 트리: 두 개의 정점이 하나의 경로로 이어져 있는 그래프 유방향/무방향 그래프: 간선의 방향 유무로 구별되는 그래프 가중/비가중 그래프: 간선에 값 부여 여부로 구별되는 그래프 밀집 그래프: 노드 ↓, 간선 ↑ / 희소 그래프: 노드 ↑, 간선 ↓ ex) 구글 맵을 만든다면 => 가중 & 유방향 그래프 (가중 - 위치 사이에 거리가 값으로 부여 / 유방향 - 일방통행, 쌍방.. 공감수 0 댓글수 1 2023. 1. 26.
[자료구조] 이진 힙 (Binary Heaps) - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 작성되었으며, 좀 더 효율적이고 간결하게 수정된 부분이 있다. ✅ 이진 힙이란? 이진 트리를 이용해서 만든 자료구조로 완전 이진 트리이고, 가능한 적은 용량을 차지하기 때문에 효율적임 각 노드는 최대 두 개의 자식을 가짐 최대 이진 힙 : 부모의 값이 자식보다 큼 최소 이진 힙: 자식의 값이 부모보다 큼 형제 사이에는 크기 규칙이 없음 왼쪽부터 오른쪽으로 값을 채워야 함 📌 배열을 이용한 구현 인덱스 규칙 왼쪽 자식 = 부모x2 + 1 오른쪽 자식 = 부모x2 + 2 부모 = Math.floor(자식index-1 / 2) 📝 최대 힙 class MaxBinaryHeap { constructor() .. 공감수 0 댓글수 0 2023. 1. 24.
[알고리즘] BFS(넓이 우선 탐색) & DFS(깊이 우선 탐색) - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 작성되었다. 📌 BFS (넓이 우선 탐색) 이진 트리 // 노드 형식 class Node { constructor(val) { this.value = val; this.left = null; this.right = null; } } BFS(rootNode) { if(!rootNode) return null; let queue = [rootNode]; let visited = []; let current; while(queue.length) { current = queue.shift(); visited.push(current.value); if(current.left) queue.push(curren.. 공감수 0 댓글수 0 2023. 1. 18.
[자료구조] 이진 탐색 트리(Binary Search Tree) - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 작성되었다. 수도 코드를 보고 혼자 구현해보고, 이후 강의에서 주어진 코드를 참고하여 수정했다! 강의에 나온 코드를 최대한 효율적이고 수정했기에 강의 속 코드보다 좋은 코드일 것이라 생각한다. ✅ 이진 탐색 트리 노드의 왼쪽에는 노드의 값보다 작은 숫자가 있어야 한다 노드의 오른쪽에는 노드의 값보다 큰 숫자가 있어야 한다 노드의 왼쪽과 오른쪽에 위치한 트리도 이진 탐색 트리여야 한다 => 왼쪽 트리의 모든 값은 노드보다 작아야하고, 오른쪽은 커야 함 📌 구현 - 연결리스트 class Node{ constructor(value) { this.value = value; this.left = null; .. 공감수 0 댓글수 0 2023. 1. 18.
[자료구조] 단일 & 이중 연결 리스트 - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 작성되었다. 수도 코드를 보고 혼자 구현해보고, 이후 강의에서 주어진 코드를 참고하여 수정했다! 강의에 나온 코드를 최대한 효율적이고 수정했기에 강의 속 코드보다 좋은 코드일 것이라 생각한다. 📌 단일 연결 리스트 // 노드 형식 class Node { constructor(val) { this.val = val; this.next = null; } } class SingleLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } // 맨 뒤에 노드 추가 push(val) { let newNode = new.. 공감수 0 댓글수 0 2023. 1. 18.
[알고리즘] 정렬(버블, 삽입, 선택, 합병, 퀵, 기수) - javascript 들어가기 전에... 해당 글은 유데미 JavaScript 알고리즘 & 자료구조 마스터클래스 강의를 바탕으로 작성되었다. 수도 코드를 보고 혼자 구현해보고, 이후 강의에서 주어진 코드를 참고하여 수정했다! 최대한 간결하고 효율적이도록 만들었으며, 주어진 코드보다 좋은 코드일 것이라 생각한다! 💡 정렬별 시간·공간복잡도 정리 Algorithm Big-O (상한) Big-θ (평균) Big-Ω (하한) 공간 복잡도 버블 정렬 O(n^2) θ(n^2) Ω(n) O(1) 삽입 정렬 O(n^2) θ(n^2) Ω(n) O(1) 선택 정렬 O(n^2) θ(n^2) Ω(n^2) O(1) 합병 정렬 O(n log n) θ(n log n) Ω(n log n) O(n) 퀵 정렬 O(n^2) θ(n log n) Ω(n log .. 공감수 0 댓글수 0 2023. 1. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.