본문 바로가기

전체 글

[트러블슈팅] 첫 페이지 로딩 시간 지연 - 아리아
[트러블슈팅] 첫 페이지 로딩 시간 지연 - 아리아 2024. 3. 30. 💣 문제 발생 일러스트 학원이라는 특성 상, 이미지 자료가 많다 보니 처음 사이트를 입장할 때 첫 페이지 로딩 시간이 길어지는 문제가 발생했다. 🎯 개선 방향 React는 싱글 페이지 애플리케이션(SPA, Single Page Application) 방식이기 때문에 일반적으로는 모든 컴포넌트를 읽고 난 후에야 첫 페이지를 로드하는데 아마, 이것 때문에 로딩 속도가 늘어난게 아닐까 한다. 그래서 생각한 방법이 react-router-dom에 존재하는 lazy() 함수를 사용하기로 결정했다. lazy() 함수는 컴포넌트를 동적으로 로드할 수 있게 도와주는 함수이다. ✅ 개선 결과 lazy() 함수를 사용함으로써 모든 페이지가 아닌 해당 컴포넌트만이 로드되게 하여 첫 페이지 입장 시 로딩 시간을 크게 단축시키..
[트러블슈팅] 컴포넌트 요소 언마운트 이벤트 - 아리아
[트러블슈팅] 컴포넌트 요소 언마운트 이벤트 - 아리아 2024. 3. 29. 💣 문제 발생 강사 페이지 배너 이미지의 슬라이드 애니메이션을 일반적으로 사용되는 옆으로 넘기는 효과가 아닌 서서히 fade-out 되며, 다음 이미지가 fade-in 되는 방식을 사용하기로 결정. 처음엔 이미지들을 동일한 div요소 안에 모두 넣어 visibility속성을 hidden으로 맞추고 state값에 따라 이미지가 나타나도록 설정했다. 그렇게 호기롭게 나는 하나의 state값에 현재 나타나야하는 이미지의 정보를 넣어주며, 이 상태값에 해당하는 이미지만 fade-in애니메이션을 주고 나머지 이미지를 fade-out 애니메이션을 주어 완벽하게 구현하나 싶었는데... 엥?! 이렇게 하니 이미지가 나타날땐 부드럽게 fade-in이 되었지만 이미지가 사라지는 fade-out 효과는 정상적으로 작동하지 ..
[자료구조] 트리(Tree)의 개념과 종류
[자료구조] 트리(Tree)의 개념과 종류 2024. 3. 29. ❓ 트리(Tree)란? 트리(Tree)란 노드들이 나무 가지처럼 연결된 비선형 계층적 자료구조입니다. 트리는 나무를 거꾸로 뒤집어 놓은 모양과 유사합니다. 또한 트리 내에 다른 하위 트리가 있고, 그 하위 트리 안에는 또 다른 하위 트리가 있는 재귀적 자료구조이기도 합니다. 트리의 대표적인 예시로는 컴퓨터의 directory구조가 있습니다. 📌 트리 구조에서 사용되는 기본 용어 명칭 설명 노드(node) 트리에서 데이터를 저장하는 기본적인 단위 그래프의 정점 루트 노드(root node) 부모가 없는 노드, 트리 구조에서 최상위에 존재하는 A와 같은 노드 내부 노드(internal node) 단말 노드가 아닌 노드 단말 노드(leaf node) 자식이 없는 노드, (말단 노드, 잎 노드 라고도 부름) 밑..
[자료구조] 그래프(Graph)의 탐색 및 구현
[자료구조] 그래프(Graph)의 탐색 및 구현 2024. 3. 29. 📌 그래프(Graph)의 탐색 그래프의 탐색은 하나의 정점에서 시작하여 그래프의 모든 정점들을 한 번씩 방문(탐색)하는 것이 목적입니다. 원하는 값만 한 번에 찾고 싶지만 그래프의 데이터는 배열처럼 정렬이 되어 있지 않기 때문에, 원하는 자료를 찾으려면 하나씩 모두 방문하여 찾아야 합니다. 그래프의 탐색에는 크게 깊이 우선 탐색(Depth-First Search)과 너비 우선 탐색(Breadth-First Search)이 있습니다. 1. 깊이 우선 탐색(DFS, Depth-First Search) 깊이 우선 탐색이란 루트 노드(혹은 다른 임의의 노드)에서 시작해서 다음 분기(branch)로 넘어가기 전에 해당 분기를 완벽하게 탐색하는 방법입니다. 넓게(wide) 탐색하기 전에 깊게(deep) 탐색하는 것..
[자료구조] 그래프(Graph)의 개념
[자료구조] 그래프(Graph)의 개념 2024. 3. 29. ❓ 그래프(Graph)란? 그래프(Graph)란 연결되어 있는 원소 간의 관계를 표현한 자료구조를 말합니다. 일상에서는 지도, 지하철 노선도의 최단 경로, 전기 회로의 소자들, 도로(교차점과 일방 통행길), 선수과목 등을 예시로 들 수 있습니다. 그래프는 여러 개의 고립된 부분 그래프(Isolated Subgraph)로 구성될 수 있습니다. 그래프는 연결할 객체를 나타내는 정점(Vertex)과 객체를 연결하는 간선(Edge)의 집합으로 구성됩니다. 그래프 G를 G=(V, E)로 정의하는데, V는 정점의 집합, E는 간선들의 집합을 의미합니다. 📌 그래프의 종류 무방향 그래프(Undirected Graph) 무방향 그래프는 두 정점을 연결하는 간선에 방향이 없는 그래프입니다. 무방향 그래프에서 정점 Vi왕..
[프로그래머스] 도넛과 막대 그래프(Lv.2) - 알고리즘
[프로그래머스] 도넛과 막대 그래프(Lv.2) - 알고리즘 2024. 3. 28. 💡 도넛과 막대 그래프 문제 보기 https://school.programmers.co.kr/learn/courses/30/lessons/258711 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(edges) { var answer = new Array(4).fill(0); const graph = new Map() edges.forEach(([from,to])=>{ if(!graph.has(from)){ graph.set(from,[0,0]) } if(!graph.has(to)){ graph.set(to,[0,0]) } ..
[Softeer] 지도 자동 구축(Lv.2) - 알고리즘
[Softeer] 지도 자동 구축(Lv.2) - 알고리즘 2024. 3. 28. 💡 지도 자동 구축 현대자동차그룹이 레벨3 자율주행차 상용화 목표에 발맞춰 총력을 다하고 있는 가운데, 국내 최고 수준의 지도 구축 기술력을 보유한 현대엠엔소프트는 자율주행에 필요한 정밀지도를 제작해 배포하고, 기술 고도화를 위한 연구에 매진하고 있다. 최근에는 도로 데이터를 기반으로 자동으로 정밀지도를 구축하는 ‘지도 자동 구축(Map Auto Creation, 이하 MAC)’ 기술을 개발해 지도 제작 시간을 단축하고 정밀도를 향상시키는 데 성공했다. 자율주행차용 정밀 지도에 관한 궁금증으로 인터넷 검색을 해보니, Diamond-Square-Algorithm이라는 것을 찾게 되었다. 이 알고리즘은 정사각형을 이루는 점 4개를 고르고 그 후에는 다음과 같은 과정을 거쳐 모양이 만들어진다. 정사각형의 각 ..
[Softeer] 근무시간(Lv.1) - 알고리즘
[Softeer] 근무시간(Lv.1) - 알고리즘 2024. 3. 28. 💡 근무시간 당신은 인사팀 직원으로, 각 직원의 근태를 확인하고자 한다. 당신의 회사는 자율출퇴근제를 실시하기 때문에 각 직원이 정확히 몇 시에 출근하는 것은 중요하지 않고, 총 근로 시간이 몇 분인지가 중요하다. 총 근로 시간이 법정근로시간을 초과하지 않아야 하면서, 회사와 직원 사이에 계약한 시간 이상이어야 하기 때문이다. 직원이 하루 동안 근무한 시간은 출근 시각과 퇴근 시각 사이의 시간으로 정의한다. 이 문제에서는 식사 시간 등 근무 외 시간을 근무 시간에서 제외하지 않음에 유의하라. 월요일부터 금요일까지 휴가를 쓰지 않은 직원이 매 요일 언제 출근하고 언제 퇴근했는지가 주어질 때, 이 직원이 5일 동안 총 몇 분을 근무했는지를 구하는 프로그램을 작성하라. 제약조건 직원은 밤을 새서 일하지 않았다..

티스토리툴바