728x90 전체 글44 📱 반응형 웹 디자인 기초: 모바일에 최적화된 사이트 만들기 여러분이 만든 웹사이트, 혹시 스마트폰에서도 잘 보이나요?오늘날 웹사이트 방문의 절반 이상이 모바일 기기에서 이루어지고 있어요.그렇기 때문에 PC 화면에서만 예쁜 웹사이트는 이제 반쪽짜리입니다.이 글에서는 초보자도 쉽게 따라할 수 있는 **반응형 웹 디자인(Responsive Web Design)**의 기초 개념과 구현 방법을 소개할게요!🧠 반응형 웹 디자인이란?반응형 웹 디자인이란, 기기의 화면 크기에 따라 콘텐츠가 자동으로 최적화되는 웹페이지를 말합니다.기기예시데스크탑큰 화면, 넓은 레이아웃태블릿중간 크기, 적당한 여백스마트폰한 줄 정렬, 큰 버튼💡 사용자 환경에 따라 "반응"하는 디자인이라서 반응형이라고 불려요.✅ 1. 뷰포트 설정하기모바일 최적화를 위해서는 가장 먼저 뷰포트 메타 태그를 설정해.. 2025. 4. 23. 🔁 Git & GitHub 기초 사용법: 버전 관리 입문자를 위한 쉬운 가이드 코딩을 하다 보면 파일이 꼬이고, 실수로 덮어쓰고, 어느 게 최신인지 헷갈릴 때가 많아요.“Ctrl+Z로는 감당이 안 된다…”라는 생각, 한 번쯤 해보셨죠?그런 문제를 해결해주는 최고의 도구가 바로 Git과 GitHub입니다.이번 글에서는 코딩 초보자도 이해할 수 있도록 버전 관리의 개념부터 Git 사용법, 그리고 GitHub로 코드 공유하는 방법까지 차근차근 알려드릴게요!🧠 Git이란?Git은 소스코드의 변경 이력을 저장하고 관리할 수 있게 해주는 버전 관리 시스템입니다.한마디로, 코딩의 타임머신이라고 보면 돼요.“이전 상태로 되돌리고 싶어!” → Git으로 가능“어제 고친 코드 다시 보고 싶어” → Git으로 가능“팀원과 함께 협업하고 싶어” → Git으로 완벽!☁️ GitHub란?GitHub는 G.. 2025. 4. 22. React 입문 튜토리얼: ToDo 리스트 앱으로 배우는 기본 개념 웹 개발 공부를 하다 보면 “리액트(React)도 꼭 배워야 하나요?”라는 질문을 자주 듣습니다.정답은 “네, 현대적인 웹개발을 하려면 꼭 알아야 하는 기술 중 하나입니다!”하지만 걱정하지 마세요.이번 글에서는 아주 기본적인 ToDo 리스트 앱을 만들면서 React의 핵심 개념인 컴포넌트, 상태(state), 이벤트 처리를 직접 경험해볼 수 있도록 준비했습니다.🔎 React란 무엇인가요?React는 페이스북(현 메타)이 만든 UI 라이브러리입니다.한마디로 말하면, 사용자와 상호작용하는 웹앱을 빠르고 효율적으로 만들 수 있는 도구예요.기존 HTML/CSS/JS 방식은 구조가 복잡해질수록 유지보수가 어려워지는데,React는 코드를 컴포넌트 단위로 쪼개어 재사용성과 가독성을 높여줍니다.🧱 개발 준비하기Re.. 2025. 4. 21. 🖥️ HTML & CSS 기초 튜토리얼: 나만의 첫 웹페이지 만들기 처음 웹 개발을 배울 때 가장 많이 하는 고민이 있죠.“어디서부터 시작해야 하지?”그럴 땐 걱정하지 말고, 가장 기본인 HTML과 CSS부터 차근차근 시작해보세요.이 글에서는 처음 웹페이지를 만드는 방법을 HTML과 CSS를 활용해 아주 쉽게 설명해드립니다.처음 보는 분들도 따라 할 수 있게 구성했으니, 하나씩 차근차근 따라와 보세요! 😊🧱 HTML이란 무엇인가요?HTML은 웹페이지의 뼈대를 구성하는 언어입니다.HTML은 HyperText Markup Language의 줄임말로, 문서 구조를 만들 때 사용되죠.쉽게 말해 "이건 제목이다", "이건 문단이다", "여긴 이미지가 들어간다" 같은 정보를 컴퓨터에게 알려주는 역할을 해요.📌 아래는 가장 기본적인 HTML 구조예요: 안녕하세요! .. 2025. 4. 20. 토큰이냐 세션이냐, 그것이 인증의 문제로다! 🔐 인증 방식 쉽게 비교하기 안녕하세요 logro 입니다 :)오늘은 로그인할 때 자주 들리는 용어,“세션 기반 인증”과 “토큰 기반 인증”의 차이를 알아보려고 해요.이 둘은 로그인 후 인증 상태를 유지하는 방식인데,처음엔 이름도 비슷하고 개념도 헷갈리기 쉽죠 😵💫하지만! 비유와 함께 하나씩 살펴보면누구나 쉽게 이해할 수 있어요 🔍🏪 먼저 비유부터 들어볼까요?로그인을 놀이공원 입장이라고 생각해봅시다 🎢🎟️ 세션 기반 인증→ 놀이공원에서 입장권을 티켓박스에 맡겨놓고,입장할 때마다 “저 티켓 맡긴 사람입니다~” 하고 인증하는 방식!사용자는 브라우저에 세션 ID 쿠키를 가지고 다녀요.서버는 그 세션 ID를 보고 “아, 이 사용자 세션 있네!” 하고 입장 허용세션 데이터는 서버에 저장됨💳 토큰 기반 인증 (JWT 등)→ 티켓.. 2025. 4. 12. 2단계 인증, 나도 만들 수 있어! Node.js로 간단한 2FA 구현하기 💻 안녕하세요 logro 입니다 :)지난 글에서 "2단계 인증이 자동으로 로그인되던데, 그게 어떻게 가능하죠?"라는 질문이 있었죠?이번엔 그걸 직접 만들어보는 시간입니다!우리가 만들 건 아주 기본적인 형태의 2단계 인증 기능이에요:사용자가 로그인하면,서버가 2단계 인증 코드(OTP)를 생성해서 사용자 이메일로 발송!사용자가 인증 코드를 입력하면 → 로그인 완료 🎉🧰 사용할 기술 스택Node.js (Express) – 서버nodemailer – 이메일 전송speakeasy – OTP 코드 생성dotenv – 환경변수 관리 (API 키 숨기기용)📁 1. 프로젝트 설정mkdir node-2fa-examplecd node-2fa-examplenpm init -ynpm install express nodemai.. 2025. 4. 12. 이전 1 2 3 4 ··· 8 다음 728x90
