전체 글 50

Scroll Snap

Scroll Snap스크롤을 멈췄을 때 미리 정해둔 위치에 콘텐츠를 자동으로 맞춰주는 CSS 기능동작 구조스크롤 컨테이너: scroll-snap-type 지정스냅 대상 요소: scroll-snap-align 지정속성① scroll-snap-type스크롤 스냅을 활성화하고, 방향과 강도 지정하는 속성방향x : 가로 스크롤y : 세로 스크롤block : 블록 방향 (writing-mode 기준)inline : 인라인 방향both : 가로 + 세로강도mandatory: 스크롤이 멈추면 반드시 스냅 지점으로 이동proximity: 스냅 지점 근처에 있을 때만 스냅② scroll-snap-align스냅 대상 요소가 어디에 맞춰질지 결정start: 요소의 시작 지점center: 요소의 중앙end: 요소의 끝none..

CSS 2026.01.24

[2026 카카오 신입 공채] 1차, 2차 코딩테스트 후기

따끈따끈한 2026 카카오 신입 공채 후기 입니다! 서류: 2025.09.08 - 2025.09.281차 코테: 2025.10.11(토)2차 코테: 2025.10.26(일) - 1차 합격 시 서류이번 신입 공채에선 서류가 총 3문항이었습니다.흠. 원래는 서류가 이렇게 길지 않았던 걸로 아는데오랜만에 공채를 열면서 많이 바뀐 듯 합니다 (1) 어떤 문제를 해결할 때, 'Why?'를 놓치지 않고 문제의 본질을 찾는 데 집중했던 경험이 있다면 적어주세요. (1000자 이내) (2) 어떤 일을 하면서 ‘이 정도면 충분하다’는 생각 대신, 더 완성도를 높이고 싶어 끝까지 몰입했던 경험이 있나요?그때 어떤 점이 가장 도전적이었고, 어떻게 극복하셨는지 적어주세요. (1000자 이내) (3) [Tech] 공고 내 '세..

취준일기 2026.01.16

B-tree & B+tree

이진 탐색 트리(Binary Search Tree, BST)의 한계이진탐색트리는 탐색, 삽입, 삭제 연산에 평균적으로 O(logN)의 시간 복잡도를 가진다.그러나, 균형이 깨지는 경우 O(N)으로 성능이 저하가 될 수 있다. 이러한 문제를 해결하기 위해 균형 트리(Balanced Tree) 개념이 등장하였고, 그 중 다진 트리(M-way tree) 구조를 가지는 B-tree가 개발되었다.B-tree란?B-tree의 구조노드(Node): 데이터(Key)와 포인터를 포함하는 기본 단위루트 노드(Root Node): 트리의 최상위 노드브랜치 노드(Branch Node): 내부 노드로, 데이터와 자식 노드를 포함리프 노드(Leaf Node): 자식 노드가 없는 노드로, 실제 데이터를 저장 B-tree의 특징한 ..

자료구조 2025.03.09

[Java | DP | 20303번 | 골2] 할로윈의 양아치

☑️ 문제https://www.acmicpc.net/problem/20303Trick or Treat!!10월 31일 할로윈의 밤에는 거리의 여기저기서 아이들이 친구들과 모여 사탕을 받기 위해 돌아다닌다. 올해 할로윈에도 어김없이 많은 아이가 할로윈을 즐겼지만 단 한 사람, 일찍부터 잠에 빠진 스브러스는 할로윈 밤을 즐길 수가 없었다. 뒤늦게 일어나 사탕을 얻기 위해 혼자 돌아다녀 보지만 이미 사탕은 바닥나 하나도 얻을 수 없었다.단단히 화가 난 스브러스는 거리를 돌아다니며 다른 아이들의 사탕을 빼앗기로 마음을 먹는다. 다른 아이들보다 몸집이 큰 스브러스에게 사탕을 빼앗는 건 어렵지 않다. 또한, 스브러스는 매우 공평한 사람이기 때문에 한 아이의 사탕을 뺏으면 그 아이 친구들의 사탕도 모조리 뺏어버린다...

알고리즘/백준 2025.03.04

[Java | 세그먼트 트리| 1395번 | 플3] 스위치

☑️ 문제https://www.acmicpc.net/problem/1395준규네 집에는 총 N개의 스위치가 있고 이를 편하게 1번부터 N번까지 차례대로 번호를 매겼다. 그리고 준규의 취미는 이 스위치들을 켜고 끄는 것이다.준규가 하는 스위치를 갖고 노는 일은 크게 두 가지이다. 하나는 A번부터 B번 사이의 스위치 상태를 반전시키는 것이고 다른 하나는 C번부터 D번 사이의 스위치 중 켜져 있는 상태의 스위치의 개수를 세는 것이다.하지만 준규가 싫증을 느껴 우리가 이 귀찮은 일을 떠맡게 되었고 프로그래밍을 통해 일을 처리하도록 결정하였다. 입력첫 줄에는 스위치의 개수 N(2 ≤ N ≤ 100,000)과 처리할 일의 개수 M(1 ≤ M ≤ 100,000)이 주어진다. 다음 M개의 줄에 대해 각 줄에 처리할 일..

알고리즘/백준 2025.02.27

[Java | 트라이 | 5670번 | 플4] 휴대폰 자판

☑️ 문제https://www.acmicpc.net/problem/5670휴대폰에서 길이가 P인 영단어를 입력하려면 버튼을 P번 눌러야 한다. 그러나 시스템프로그래밍 연구실에 근무하는 승혁연구원은 사전을 사용해 이 입력을 더 빨리 할 수 있는 자판 모듈을 개발하였다. 이 모듈은 사전 내에서 가능한 다음 글자가 하나뿐이라면 그 글자를 버튼 입력 없이 자동으로 입력해 준다! 자세한 작동 과정을 설명하자면 다음과 같다.모듈이 단어의 첫 번째 글자를 추론하지는 않는다. 즉, 사전의 모든 단어가 같은 알파벳으로 시작하더라도 반드시 첫 글자는 사용자가 버튼을 눌러 입력해야 한다.길이가 1 이상인 문자열 c1c2...cn이 지금까지 입력되었을 때, 사전 안의 모든 c1c2...cn으로 시작하는 단어가 c1c2...c..

알고리즘/백준 2025.02.27

[Java | 시뮬레이션 | 14939번 | 플4] 불 끄기

☑️ 문제https://www.acmicpc.net/problem/14939전구 100개가 10×10 정사각형 모양으로 늘어서 있다. 전구에 달린 스위치를 누르면 그 전구와 위, 아래, 왼쪽, 오른쪽에 있는 전구의 상태도 바뀐다. 전구 100개의 상태가 주어지면 모든 전구를 끄기 위해 최소한으로 눌러야 하는 스위치의 개수를 출력하라 입력10줄에 10글자씩 입력이 주어진다. #은 꺼진 전구고 O(대문자 알파벳 o)는 켜진 전구다. #과 O외에는 입력으로 주어지지 않는다. 출력모든 전구를 끄기 위해 최소한으로 눌러야 하는 스위치의 개수를 출력하라. 불가능하면 -1를 출력하라. 예제 입력1#O########OOO########O############OO#######O##O#######OO############..

알고리즘/백준 2025.02.26

🚀 웹소켓(WebSocket) - React에서 WebSocket 구현

새로운 프로젝트에 실시간 채팅 기능을 맡게 되어, 웹소켓(WebSocket)을 어떻게 구현할지 고민하게 되었다.실시간 채팅이지만, 텍스트로만 이루어지는거라 간단하고 빠르게 구현할 수 있는 방법을 찾아보았다.이에 React 환경에서 손쉽게 웹소켓을 관리할 수 있도록 도와주는 react-use-websocket 라이브러리를 선택! 왜 react-use-websocket을 사용했나방식라이브러리자동재연결JSON 지원백엔드 기본 WebSocket 직접 구현new WebSocket()❌ (직접 구현 필요)❌ (문자열 전송)기본 WebSocket 지원 서버가장 가볍지만, 직접 상태 관리 & 재연결 구현 필요react-use-websocketreact-use-websocket✅✅기본 WebSocket 지원 서버자동 재..

FE 2025.02.23

[Java | 투포인터 | 25395번 | 골3] 커넥티드 카 실험

☑️ 문제https://www.acmicpc.net/problem/25395정보통신기술(ICT)의 발달에 힘입어, 미래형 자동차로 여겨졌던 인터넷 연결을 통해 운전자에게 다양한 서비스를 제공하는 커넥티드 카(connected car)가 현실로 다가왔다. 현대오토에버는 이에 발맞춰 클라우드와 사물 인터넷을 비롯한 최신 ICT를 적용한 차세대 커넥티드 카 서비스 플랫폼을 구축하고, 최고의 커넥티드 카를 완성하기 위한 핵심 소프트웨어 기술을 축적하고 있다.현대오토에버의 엔지니어 현오는 새로운 서비스를 생각하던 중, 커넥티드 카의 핵심 기술인 사물 인터넷과 위치 기반 기술을 접목한 실험을 해 보기로 했다. 현오가 개발한 실험용 프로그램은 다음과 같은 기능을 가지고 있다.현오는 사물 인터넷에 연결된 커넥티드 카를..

알고리즘/백준 2025.02.23

[타입스크립트] enum과 트리쉐이킹

열거형(enum)TypeScript의 enum(열거형)은 관련된 상수들을 하나의 그룹으로 정의하는 자료형이다.(JS에는 enum이 없다.)enum Status { SUCCESS = "success", FAIL = "fail", PENDING = "pending"}console.log(Status.SUCCESS); // "success"🚨 enum과 트리 쉐이킹 문제🌴 트리쉐이킹(tree-shaking)사용하지 않는 코드를 제거하여 번들 크기를 줄이는 최적화 기법Webpack, Vite, Rollup, esbuild와 같은 번들러가 이러한 기능을 제공 자바스크립트는 enum을 아래와 같이 즉시 실행 함수(IIFE)를 포함한 코드로 변환한다.번들러는 IIFE를 '사용하지 않는 코드'라고 판단할 수 ..

TypeScript 2025.02.16