전체 글 (121) 썸네일형 리스트형 [Tailwind] @Tailwind 삼형제가 동작하지 않는다면!?!?!?! 근래 Next.js로 개발을 하다 보니 tailwind를 주력으로 사용하고 있다. 그러던 중, 오랜만에 새로운 프로젝트를 만들어 tailwind를 적용하려고 하니어라라? 스타일이 전혀 적용되지 않으면서 에러가 나는 것이었다 Error Lens가 아주 친절하게 에러를 읊어줘서 에러를 파악해 보았다.'@tailwind base' is no longer available in v4. Use '@import "tailwindcss/preflight"' instead. "@tailwind base는 v4 버전에서 사용되지 않으므로, 대신 @import "tailwindcss/preflight를 사용하세요!" 라는 말. 실제로 v4 버전에서는 @import "tailwindcss"만 사용해도 된다고 나와 있다. 반.. [React] react-moveable로 인터랙션 추가하기 React 컴포넌트의 위치나 크기, 회전 등은 고정되어있는 경우가 많지만 때로는 이런 요소들을 조작해야 하는 경우가 있다.특히, Figma, Framer 등 개체를 그려야 하는 웹 페이지에서는 이런 기능이 필수적이다. 이런 기능을 제공하는 다양한 라이브러리들이 있지만, 그중에서도 하나의 라이브러리로 많은 요소를 컨트롤 할 수 있는 react-moveable 라이브러리를 소개하고자 한다1. react-moveable이란?React Moveable은 드래그, 크기 조정, 회전 등 다양한 인터랙션을 쉽게 구현할 수 있는 강력한 라이브러리로, CSS 스타일과 함께 동작해서 다양한 UI 인터랙션을 쉽게 추가할 수 있는 장점이 있다 주요 기능드래그 : 요소를 자유롭게 이동 가능리사이즈 : 크기 조절회전 : 원하는 .. [Next] API Routes를 이용해 사이드 서버 구축 해보기 with Typescript 최근 이곳저곳 면접을 다니면서 포트폴리오를 조금 손봐야겠다는 생각이 문득 들었다.가장 큰 이유는 역시 종료된 프로젝트 관리 미흡. 나는 프론트엔드 개발자이기 때문에 프론트엔드 쪽에서 문제가 발생하면 바로 고칠 수 있지만,백엔드 쪽에서 발생한 문제는 거의 손대기가 불가능 했기에 백엔드 API가 사라졌다거나, 서버가 닫혀버리는 경우에는 꼼짝없이 프로젝트 하나를 버리게 되는 것이었다.하지만 공들여 진행한 프로젝트를 '없던 일'로 쳐버리는건 너무 아쉽기 때문에, 스스로 백엔드 서버를 만들어 프로젝트를 살려보기로 했다.1. Next.js API Routes와 서버 생성Next.js 설치 및 적용은 나보다 더 상세하게 작성 해 주신 분들이 많기에 생략한다.Next.js를 설치 후 프로젝트를 만들면 src 폴더 내의.. [React] React-Query로 데이터 통신 해보기 최근 면접을 준비하며, React-Query에 대한 질문을 많이 받았었다. 그런데 마침 다음주에 면접 보는 기업에서 React-Query를 사용한다기에면접 준비도 할 겸, 공부도 할 겸, 과거 진행했던 프로젝트를 리팩토링 할 겸 사용해 보니 생각보다 아주 편리해서 한번 소개해 보고자 한다. 사실 그동안 React-Query가 서버 통신 라이브러리인 줄로만 알았는데, 공부해 보니 HTTP 통신을 담당하는 라이브러리가 아니라, HTTP 통신을 통해 받아온 데이터를 캐싱하고 관리해 주는 라이브러리였다! 과거 진행했던 전기차 지도(CPM) 프로젝트를 기반으로 설명하도록 하겠다.아주아주 기본적인 기능만 사용했기 때문에, 좀 더 자세한 탐구는 공부를 더 하고 써보도록 하도록,.,.,.,.어쩌구,.,.1. 설치$ n.. 2024 하반기 코딩테스트 결산 2025년이 밝고, 여전히 열심히 취준중인 나.다니던 회사를 그만둔 뒤, 빠르게 일자리를 찾아보고자 여러 회사에 지원했고, 그중 코딩테스트를 봤던 회사들의 난이도와 유형(기억나는대로)을 적어보고자 한다.혹시나 내가 코테를 봤던 회사에 지원하고자 하는 사람이 있다면 도움이 되길 바라며,.,.!! 1. 레브잇 (2024.08)문제 : 총 3문제플랫폼 : 프로그래머스체감 난이도 : 중하풀이 : 3/3코딩테스트 결과 : 합격최종 결과 : 과제 테스트 불합격그렇게 어렵지도, 그렇다고 막 쉽지도 않은 난이도였다.가물가물한데, 구현 3문제였던 것 같고마지막 문제는 지그재그 행렬 문제였던 것 같다.무난하게 3솔로 통과했으나 과제 전형에서 멸망2. 버즈빌 (2024.09)문제: 총 3~4문제플랫폼 : 해커랭크체감 난이.. [LV3] 섬 연결하기 문제 풀이항목이 '탐욕법'으로 되어 있어서, 처음에는 dfs를 통해 모든 경로를 다 탐색한 후 그 중 최소 거리를 찾으려 했다.하지만 개같이 실패에 시간초과까지,..,.,,결국 다른 방법을 사용해 보기로 했다. 내가 찾아본 방법은 '크루스칼 알고리즘'으로, 모든 정점을 연결 할 때, 최소의 비용을 찾는 알고리즘이라고 한다.정확히 이 문제를 풀기에 적합한 알고리즘으로, 각 정점과 가중치가 주어졌을 때, 현재 정점이 연결 되어 있는지 아닌지를 파악하여 연결 되어있다면 패스, 안되어 있다면 가중치를 더하는 방식을 사용한다. 위와 같은 그래프의 각 정점을 모두 이었을 때, 최소 가중치를 구하는 방법을 알아보자먼저 가중치의 오름차순으로 정렬해 준다. 그 다음, 각 연결별로 순회하며 노드의 부모 노드들을 비교해 .. [C4] 1991 - 트리 순회하기 문제 트리가 주어지고, 이 트리를 각각 전위, 중위, 후위 순회 하는 문제였다.트리 구조를 만드는 것 자체는 쉽지만, 이 트리를 탐색하는 방법을 생각하는 것이 조금 어려웠던 문제였다.나는 실제 그래프 모양대로 배열을 만들어가며 문제를 풀었다. 풀이1. 전위 순회전위 순회는 루트 -> 왼쪽 자식 -> 오른쪽 자식의 순서대로 순회하는 방법이다.각 계층별로 루트를 먼저 돌기 때문에, 루트를 먼저 체크하고 왼쪽 루트로 내려간다.다음 계층에서도 왼쪽 루트를 돌고, 만약 더이상 왼쪽 루트가 없다면 오른쪽 루트를 돈다.오른쪽 루트도 없다면 다시 한층 위로 올라가 오른쪽 루트가 있는지 확인한다.다시 A 노드로 돌아갔다면, 오른쪽 노드를 똑같은 방식으로 탐색하면 된다. 전위 순회는 깊이 우선 탐색, 즉 'DFS'와 똑.. [C4] 11725 - 트리의 부모찾기 문제 풀이보통은 트리 구조를 만들거나, 자식 트리를 찾는 문제가 많은데 이번에는 부모 트리를 찾는 문제가 나왔다.나는 최상위 노드부터 한단계씩 아래로 내려가는 방법을 사용하기 위해 bfs를 이용했다.각 노드별로 탐색하며, 현재 탐색하는 노드에 자식 노드가 있다면, 그 자식 노드의 부모 노드로 현재 노드를 추가해주는 방법을 사용하기로 했다. 먼저 그래프 구조를 만들어 준다.const graph = {};input.forEach(([s, e]) => { if (!graph[s]) graph[s] = []; if (!graph[e]) graph[e] = []; graph[s].push(e); graph[e].push(s);}); 그래프 구조를 만들면, 한 노드에 연결된 노드들이 어떤 것이 있는지 알 .. 이전 1 2 3 4 ··· 16 다음 목록 더보기