본문 바로가기

분류 전체보기384

📘 자바스크립트(JavaScript) 기본 다지기 - Part 1 자바스크립트란 무엇인가? 변수, 스코프, 타입, 조건문까지 기초 완전 정복!✅ 자바스크립트란 무엇인가?자바스크립트(JavaScript, JS)는 웹페이지에 동적인 기능을 추가할 수 있는 프로그래밍 언어입니다.HTML이 구조, CSS가 스타일을 담당한다면, JS는 기능과 상호작용을 담당합니다.버튼 클릭 시 팝업 띄우기로그인 폼 유효성 검사서버에서 데이터 받아와 페이지에 렌더링애니메이션 효과 등현재는 브라우저를 넘어 Node.js 환경에서도 백엔드 개발까지 가능할 정도로 범용성이 넓어요.// 간단한 자바스크립트 예시console.log("Hello, World!"); // 콘솔에 텍스트 출력document.getElementById("demo").innerHTML = "환영합니다!"; // HTML 요소.. 2025. 4. 24.

🚀 Git 시작하기: 버전 관리의 첫 걸음 개발을 처음 시작하면, 파일을 복사해서 "최종", "진짜 최종", "최최종"... 이런 식으로 버전 관리를 해본 적 있으실 겁니다. 하지만 팀 프로젝트가 시작되면 이야기가 달라지죠. 여러 명이 동시에 파일을 수정하고, 기능을 나눠서 개발하다 보면 코드 충돌은 물론이고 "어느 버전이 최신이지?"라는 혼란이 끊이지 않습니다. 이때 필요한 게 바로 버전 관리 시스템(VCS)이고, 그중 가장 널리 쓰이는 도구가 바로 Git입니다.🔹 Git이란 무엇인가?Git은 분산형 버전 관리 시스템(Distributed Version Control System, DVCS)입니다.리누스 토르발즈(Linus Torvalds)가 리눅스 커널 개발을 위해 2005년에 만든 도구로, 프로젝트의 변경 이력을 체계적으로 관리할 수 있.. 2025. 4. 24.

웹 페이지 레이아웃 제대로 잡기 스타일은 멋지게 입혔는데, 요소들의 위치가 엉망이라면 사용자 입장에선 불편한 UI가 될 수밖에 없죠.그래서 웹 개발에서 가장 중요하면서도 헷갈리는 부분이 바로 레이아웃 구성입니다. 이번 글에서는 실무에서도 가장 많이 사용되는 레이아웃 기법들을 정리해 볼게요.✅ Flexbox로 요소를 유연하게 정렬해 보자Flexbox는 일렬로 정렬되는 콘텐츠를 배치할 때 정말 유용해요.특히 정중앙 정렬, 간격 조절, 반응형 레이아웃 등에 탁월하죠..container { display: flex; justify-content: center; /* 가로 정렬 */ align-items: center; /* 세로 정렬 */ height: 100vh;} 📌 주요 속성 요약속성설명flex-direction주축 방.. 2025. 4. 23.

[DevCourse] 생성형 AI 활용 백엔드 데브코스 15일차 오늘은 처음으로 TypeScript(타입스크립트)를 접했다.그동안 자바스크립트로만 작업하면서 “타입이 없어서 편하다”는 생각도 있었지만,실제로 프로젝트 규모가 커질수록 코드의 구조를 명확히 표현할 수 있는 도구가 필요하다는 걸 오늘 실습을 통해 제대로 느꼈다.📌 오늘 배운 내용 요약1. TypeScript 개요와 기본 문법TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입을 추가해 코드의 안정성과 유지보수성을 높여준다.string, number, boolean 같은 기본 타입 선언 방식부터, "north" | "south"처럼 리터럴 타입, interface를 통한 객체 구조 정의, 함수 매개변수 및 반환값에 명확하게 타입을 지정하는 방식까지 실습했다.2. React.. 2025. 4. 23.

[DevCourse] 생성형 AI 활용 백엔드 데브코스 14일차 오늘은 드디어 React로 외부 API를 불러오고, 실제 데이터를 화면에 출력해 보는 실습을 진행했다.뉴스 API를 연동해서 카테고리별 뉴스를 보여주는 뉴스 뷰어 페이지를 직접 만들면서,그동안 배워왔던 개념들이 어떻게 연결되는지를 실감할 수 있었다.📌 오늘 배운 주요 내용 정리1. 비동기 처리의 개념과 흐름setTimeout으로 구현된 콜백 패턴 → Promise → async/await 순으로 비동기 처리 방식의 흐름을 정리했다.async/await를 활용하면 복잡한 비동기 로직도 동기 코드처럼 읽히기 쉽게 작성할 수 있어, 실제로 써보니 정말 깔끔하다는 인상을 받았다.2. 뉴스 API 연동 실습axios를 이용해 뉴스 데이터를 비동기적으로 불러오고,카테고리 선택에 따라 데이터를 조건부로 출력하는 뉴.. 2025. 4. 22.

[DevCourse] 생성형 AI 활용 백엔드 데브코스 13일차 지난 12일 차 수업은 건강 문제로 수업에 참여하지 못했지만,다행히 오늘 수업 시작 전 지난 시간 개념을 다시 복습하는 시간이 있어 큰 무리 없이 따라갈 수 있었다.React의 Hook 개념과 Router 구조를 배우고, Todo 리스트와 SPA를 직접 구현하는 실습을 하면서조금씩 React의 실전 활용 방식이 감 잡히기 시작했다.📌 오늘 배운 주요 내용 정리1. React의 다양한 Hook 활용법useState와 useEffect는 이제 익숙해졌고,오늘은 여기에 더해 useReducer, useMemo, useCallback, useRef 같은실전에서의 상태 관리와 최적화를 위한 고급 Hook을 배웠다.특히 useReducer는 상태가 여러 개이거나 복잡한 폼 로직에 유용하다는 걸,직접 예제를 따라 .. 2025. 4. 21.

이전 1 ··· 8 9 10 11 12 13 14 ··· 64 다음

티스토리툴바