본문 바로가기

분류 전체보기

(40)
TailwindCSS v4!! v3와 달라진 점!!!! 오늘은 버전 업그레이드가 된 TailwindCSS v4 사용법에 대해 이야기 해보려고 한다. 보통 나는 프론트엔드 개발을 할 때 Next.js + TailwindCSS를 사용한다. 이번에 우연히 새로운 프로젝트를 셋팅하게 됐는데, 이전처럼 셋팅하니 에러가 난다?⨯ ./app/globals.css Error evaluating Node.js code Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to ..
C언어 배열이랑 JavaScript 배열이 다르다고? 프론트엔드 개발을 하면서 데이터를 리스트 형태로 다뤄야 할 일이 많았다. 그런데 대학생때 익숙하게 손이 가던 arr[0] =3; 식의 C배열 방식은 JS에선 뭔가 잘 안 맞는 느낌이 들었다. 처음에는 단순히 문법 차이라고 생각했지만, 쓰면 쓸수록 배열의 “본질”이 다르다는 느낌이 강하게 들었다.그래서 이번 기회에 C언어와 JavaScript배열의 차이를 파고들어 봤고, 이 글은 그 차이를 학습하고 기록한 탐구?일지이다. 배열은 정말 배열일까?우리가 흔히 아는 ‘배열’이란 무엇인가.대학교에서 배열을 배우면 보통 C언어에서 시작한다. 그럴 때 배열은 이런 느낌이다.int arr[3] = {1, 2, 3};‘크기가 고정’된 숫자 3개짜리 박스 → arr[3] 이면 3개 고정0번 인덱스부터 시작해서 인덱스를 ..
디자인 시스템, 프론트엔드 개발자는 어디까지 알아야 할까? 개발을 하다 보면 UI/UX 디자이너와 Figma를 함께 보며 의견을 나눌 일이 많다. 25년 4월 주말에 프론트엔드 개발자로 디자이너와 이야기할 기회가 생겼는데 “여기는 아코디언으로 많이들 하죠”, “px간격은 어쩌구”, “텍스트는 rem 어쩌구” 라는 말을 들었다. 그 날 얘기를 들으면서 머릿속에 물음표가 나오기도 했고, 모르는 걸 물어보면서 했는데도 내용의 100%를 이해하지 못했다. 사실 프론트엔드 개발을 하면서 px나 vh, vw는 익숙하다. ai를 쓰면서 더 익숙해진 거 같다. 그래서 rem? 듣고 본 적은 있는데 이 단위에 대해 이해하고 있지는 않았다. 또한, “아코디언”이 뭔지도 몰랐다. 햄버거 바, 버튼 정도는 알았지만, 이건 정말 처음 듣는 용어였다. AI 툴을 사용할 때, “접혀 있다..
HTTP에서 HTTPS로: 인증서, 암호화, 그리고 송수신의 비밀 안녕하세요 :) 웹사이트에 접속할 때 우리가 흔히 보는 주소는 http:// 또는 https://로 시작합니다. 겉으로 보기엔 단지 s 하나의 차이지만, 실제로는 보안, 암호화, 신뢰라는 관점에서 완전히 다른 세계가 펼쳐집니다.하지만 대부분의 사람들은 HTTPS가 무엇인지 정확히 알지 못한 채 "그냥 더 안전한 버전이겠지", "보안 강화..된 거 아니야..?" 정도로만 하고 넘깁니다. 심지어 개발자들 사이에서도 "왜 HTTPS가 안전한가?", "어떻게 암호화가 동작하냐?" 이런 질문에 자신 있게 대답하기란 쉽지 않습니다.그래서 이번 글에서는 HTTP에서 HTTPS로 넘어가는 과정에서 실제로 무슨 일이 벌어지는가에 대해 실제 통신 흐름, 인증서의 역할, TLS의 구조, 대칭키 생성 방식 등 아주 디테일하게..
Next.js 라우팅: next/router vs next/navigation, 무슨 차이일까? 안녕하세요 :) Next.js에서 라우팅을 처리할 때, 두 가지 주요 라이브러리를 사용할 수 있습니다. next/router와 next/navigation인데요, 이 둘은 다른 방식의 라우팅을 처리하고, 사용하는 방식과 상황이 다릅니다. 오늘은 이 두 가지 라이브러리에 대해 알아보고 최신 트랜드는 무엇인가에 대해 알아보도록 하겠습니다. 먼저 next/router를 먼저 보실까요? next/routernext/router는 Next.js의 전통적인 라우팅 방식입니다. 페이지 기반 라우팅을 주로 사용하던 시절부터 제공되어 왔으며, 클래식 페이지 디렉터리 구조와 함께 작동합니다. 예제 코드는 다음과 같습니다.import { useRouter } from 'next/router';const Example = (..
WebRTC로 실시간 미디어 송출 구현하기 안녕하세요 :)  오늘은 WebRTC를 통해, '실시간 미디어 송출하기'를 구현했던 기억을 살려서 비슷하게 시나리오를 하나 만든 다음, 어떻게 구현하는 가에 대해 작성해보려고 합니다. 먼저, WebRTC란 무엇인가에 대해 간단하게 알고 넘어가보도록 하겠습니다. WebRCT란?Web Real-Time Coummunication의 약자로, 브라우저 간 실시간 음성, 영상 및 데이터 통신을 가능하게 하는 오픈소스입니다. 별도의 플러그인 설치 없이도 웹 애플리케이션에 실시간 미디어 기능을 통합할 수 있어 개발자들에게 매력적인 선택지가 됩니다.특히, 다양한 인터넷 환경에서도 괜찮은 성능을 발휘하도록 설계되어 있는 라이브러리이기 때문에, 높은 품질의 미디어 스트리밍과 네트워크 적응성을 제공해줍니다. 자, 그럼 We..
useRouter를 사용해 페이지 이동 처리하기 안녕하세요 :) Next.js는 React를 기반으로 한 인기 있는 프레임워크로, 간단하면서도 강력한 라우팅 기능을 제공합니다. 특히, Next.js의 useRouter는 클라이언트 사이드 네비게이션과 경로 정보를 관리하는 데 있어 매우 유용한 툴인데요!이번 글에서는 useRouter가 무엇인지, 그 기능들은 무엇이 있는지 살펴보도록 하겠습니다.라우팅의 간단한 개념라우팅(Routing)이란, 특정 URL 경로에 따라 해당하는 페이지나 컴포넌트를 보여주는 과정입니다. Next.js는 파일 기반 라우팅(File-Based-Routing)을 지원하여 각 파일이 URL 경로로 자동 매핑되게 됩니다.  (라우팅에 대해 더 궁금하시다면 ->https://jinuk-io.tistory.com/entry/%EB%9D%..
라우팅(Routing)이란 무엇인가. 안녕하세요 :) 오늘은 웹 애플리케이션에서 빼놓을 수 없는 라우팅(Routing)에 대해 알아보겠습니다. 라우팅은 사용자가 특정 URL에 접근했을 때, 그 URL에 맞는 화면(페이지 or 컴포넌트)을 보여주는 과정을 말합니다. 특히, React와 같은 SPA(Single Page Application)에서는 라우팅이 조금 다르게 동작합니다.이번 글에서는 전통적인 라우팅과 SPA 라우팅의 차이를 이해하고, 두 방식이 어떻게 다른지에 대해 알아보도록 하겠습니다. 라우팅이란?라우팅(Routing)은 '사용자가 웹 애플리케이션에서 특정 URL 경로에 접근했을 때, 해당 경로와 연결된 페이지나 컴포넌트를 보여주는 과정'입니다. 라우팅은 여러 페이지를 이동할 수 있도록 해주며, React 같은 SPA(Single ..