DEV_JACKY

인기글

이전다음

최신글

• 

  Tanstack Table 쓰기 전에 공식문서 읽어보기(번역과 함께) 들어가며최근 취업을 준비하면서, 친구들과 함께 면접 질문을 아카이빙하고 관리할 수 있는 토이 프로젝트를 진행하고 있습니다.면접 준비 과정에서 자주 등장하는 질문들을 정리하고, 카테고리별로 분류하거나 검색할 수 있는 기능이 있으면 좋겠다는 아이디어에서 출발한 프로젝트입니다. 이 과정에서 질문 데이터를 테이블 형태로 보여줄 필요가 있었고, 어떤 테이블 라이브러리를 사용할지 고민하던 중 TanStack Table을 선택하게 되었습니다.기존에도 프로젝트에서 Shadcn UI를 사용하고 있었기 때문에, 같은 Headless UI 접근 방식을 유지하는 것이 좋겠다는 결론을 팀원들과 함께 내린 점도 선택에 큰 영향을 주었습니다.또, 향후 데이터 패칭이나 무한 스크롤 기능을 직접 구현해보고, 이후에 TanStack Q.. 2025.04.04

• 

  [백준] 1931 회의실 배정 const fs = require('fs');const filePath = process.platform === 'linux' ? 'dev/stdin' : '../input.txt';const input = fs.readFileSync(filePath).toString().trim().split('\n');let N = parseInt(input.shift());let list = [];for (let i = 0; i { if (a[1] === b[1]) { return a[0] - b[0]; } else { return a[1] - b[1]; }});let answer = 0;let end = 0;list.forEach((time) => { if (time[0] >= end) { .. 2025.02.24

• 

  [백준] 9461 - 파도반 수열 삼각형으로 나선을 그리면서 삼각형이 추가 되어지고 문제는 그려지는 삼각형 중 N번째의 사이즈에 대해서 묻는 문제였습니다. 처음에 좀 헷갈렸던게 어디서 부터 삼각형이 그려지는 였는데, 간단하게 위의 그림 처럼 그려보니 빠르게 이해가 되었습니다. 그 이후에는 삼각형의 사이즈가 이루어지는 값들을 하나씩 적어봤고 5번째 삼각형인 3부터 (0,4) .... 10번째 삼각형 12까지 (5,9)로 하나씩 더해가면서 삼각형이 이뤄지는 것을 확인 했습니다. const fs = require('fs');const filePath = process.platform === 'linux' ? 'dev/stdin' : '../input.txt';const input = fs.readFileSync(filePath).toStrin.. 2025.02.17

• 

  [FE] 브라우저와 렌더링 들어가며웹 개발을 하면서 가장 많이 알아야 되지만 항상 미묘하게 알고 있었던 게 브라우저에 대한 내용인 것 같습니다. 스터디 준비하면서 한번 정리를 해둬야 겠다 싶어서 전체적인 내용을 짚어가면서 정리를 해보려고 합니다.1. 브라우저란?1.1. 브라우저의 탄생과 발전웹의 시작과 초창기 브라우저웹은 1990년 팀 버너스 리(Tim Berners-Lee) 박사에 의해 개발된 월드 와이드 웹(WWW)에서 시작되었습니다. 초창기 웹페이지는 단순한 정적 HTML 문서로 구성되었으며, 1993년 최초의 그래픽 기반 웹 브라우저인 모자이크(Mosaic)가 등장하면서 대중들이 웹을 쉽게 접할 수 있는 계기가 되었습니다. 이후 1994년 넷스케이프 내비게이터(Netscape Navigator)가 출시되면서 브라우저 기술이.. 2025.02.07

• 

  [Mac OS] 'Docker'은(는) 사용자의 컴퓨터를 손상시킵니다 해결하기 들어가며평소와 같이 아침에 일어나서 맥북을 켰는데 갑자기 에러 메세지가 아래와 같이 발생했습니다.‘Docker’은(는) 사용자의 컴퓨터를 손상시킵니다. 해당 항목을 휴지통으로 이동해야 합니다.Docker를 키지도 않았는데 갑자기 뜬 에러 메세지를 보고 이게 뭐지 싶어서 구글링을 해봤는데 관련된 내용이 좀 있어서 보고 해결한 내용을 간단하게 정리해봤습니다.발생 원인도커 공식 문서와 관련해서 작성된 글들을 보았을 때 Docker 실행 시 다음과 같은 오류 메시지가 나타날 수 있다는 내용을 확인 했습니다. 원인은 macOS에서 Docker 파일을 신뢰할 수 없는 프로그램으로 인식하는 문제라고 합니다. 도커 파일 양식이 잘못되어서 malware로 인식되는게 아마 원인 같습니다. 관련해서는 링크를 참조해두었으니 .. 2025.02.05

• 

  [FE] this 정리하기 this란?this는 자바스크립트에서 현재 실행 중인 컨텍스트의 객체를 참조하는 특별한 식별자입니다. this의 값은 함수가 호출되는 방식에 따라 동적으로 결정되는데, 일반 함수에서는 전역 객체를, 메서드로 호출될 때는 해당 메서드를 소유한 객체를, 화살표 함수에서는 상위 스코프의 this 값을 참조합니다. 또한 call(), apply(), bind() 메서드를 통해 this의 바인딩을 명시적으로 변경할 수 있어 유연한 객체 지향 프로그래밍을 가능하게 합니다.this 바인딩이란?this 바인딩은 this 키워드가 실제로 가리키는 대상을 결정하는 과정입니다. JavaScript에서 this는 코드가 작성된 시점이 아닌, 함수가 실행되는 시점에 바인딩이 결정됩니다. 즉, 동일한 함수라도 어떻게 호출되느냐에.. 2025.02.04

• 

  [FE] HTTP 상태 코드가 뭘까요? HTTP란?HTTP(Hypertext Transfer Protocol)는 웹 서버와 웹 클라이언트 사이에서 데이터를 주고받기 위해 사용하는 통신 방식으로 TCP/IP 프로토콜 위에서 동작합니다. 즉, 우리가 웹을 이용하려면 웹 서버와 웹 클라이언트는 각각 TCP/IP 동작에 필수적인 IP 주소를 가져야 합니다.HTTP란 이름대로라면 하이퍼텍스트(Hypertext)만 전송할 수 있어 보이지만, 실제로는 HTML이나 XML과 같은 하이퍼텍스트뿐 아니라 이미지, 음성, 동영상, Javascript, PDF와 각종 문서 파일 등 컴퓨터에서 다룰 수 있는 데이터라면 무엇이든 전송할 수 있습니다.HTTP 상태 코드란?이러한 HTTP 통신 과정에서, 웹 서버는 클라이언트의 요청에 대한 처리 결과를 상태 코드를 통해 .. 2025.02.01

• 

  [FE] 자바스크립트 비동기 개념 정리 하기 들어가며스터디에서 동기, 비동기 개념을 다루는 김에 전에 작성해둔 글들과 여러 참고 자료들을 보면서 자바스크립에서의 비동기 개념에 대해서 정리해보는 시간을 가져 봤습니다. 조금 더 추가해야 되는 내용들이 많지만 작성해두고 개선을 해나가보려고 합니다. 자바스크립트에 동기, 비동기 개념이 있는 이유자바스크립트는 싱글 스레드 언어이기 때문에 한번에 하나의 작업만 수행 할 수 있다. 즉 이전 작업이 완료 되어야 다음 작업을 수행 할 수 있게 된다.우리가 프로그래밍을 하면서 일반적으로 위에서 아래로 차례대로 실행 되는 방식, 이러한 코드 순차 실행을 동기라고 부른다.동기 방식은 직관적이지만 다수의 작업이 이루어진다면, 특정 작업이 마무리 될 때 까지 다음 작업이 이루어 질 수 없기 때문에 성능과 사용자 경험에 영.. 2025.01.30

• 

  [백준] 13023 - 백트래킹 적용하기 들어가며안녕하세요, 오늘은 DFS(깊이 우선 탐색)와 백트래킹을 활용하여 친구 관계 탐색 문제를 해결하는 과정을 단계별로 살펴보겠습니다. dfs, bfs 문제를 풀고 백트래킹 문제를 풀려고 했는데 이렇게 바로 풀게 되었습니다.🤔 Before: 처음 마주친 문제 상황문제는 다음과 같습니다:N명의 사람들 사이의 친구 관계가 주어집니다.한 사람에서 시작하여 친구 관계를 4번 이상 거쳐갈 수 있는지 확인해야 합니다.가능한 경로가 존재하면 1, 없으면 0을 출력합니다.처음에는 단순히 DFS를 구현하면 될 것이라 생각했지만, 여러 문제점들에 직면했습니다:한 시작점에서만 탐색을 시작하여 모든 가능한 경로를 찾지 못했습니다.메모리를 많이 사용하는 인접 행렬 방식을 사용했습니다.이전 경로로 돌아가서 다른 경로를 탐색하.. 2025.01.27

more