본문 바로가기

분류 전체보기381

📘 자바스크립트(JavaScript) 기본 다지기 - Part 2 함수, 객체/배열, DOM, this, 실행 컨텍스트 완전 정복 자바스크립트의 기본기를 더 탄탄하게 만들기 위해, 이번 글에서는 실무에서 자주 마주치는 핵심 주제들을 다뤄볼게요.함수의 선언 방식부터, 객체와 배열의 활용, DOM 조작, 그리고 많은 개발자가 처음에 헷갈려하는 this, 실행 컨텍스트까지 함께 정리해 보겠습니다.✅ 함수의 다양한 선언 방식자바스크립트에서 함수를 선언하는 방식은 크게 세 가지가 있어요.🔹 함수 선언식 (Function Declaration)function sayHello() { console.log("안녕하세요!");}sayHello(); // ✅ 선언 전에도 호출 가능선언 전에 호출해도 작동해요.자바스크립트 엔진이 실행 전에 함수 선언을 호이스팅(끌어올림) 하기 때문이에.. 2025. 4. 27.

[DevCourse] 생성형 AI 활용 백엔드 데브코스 17일차 오늘부터는 그동안 배운 내용을 바탕으로 본격적인 팀 프로젝트를 진행하는 일정이 시작됐다.짧은 기간 안에 프론트엔드만 구현하는 프로젝트라 아쉬운 점도 있지만,그래서 오히려 더 집중해서 임해야겠다는 생각이 들었다.📌 오늘 한 일 정리프로젝트 아이디어 확정팀원들과 함께 아이디어를 논의하고 최종 주제를 선정했다.기획서, 요구사항 명세서, 기능 명세서, 와이어프레임 작성프로젝트 전체 흐름과 화면 구성을 정리하고, 필요한 기능과 요구사항을 문서화했다.역할 분담각자 맡을 부분을 정하고, 이 내용을 기능 명세서에 작성했다.🧪 내 담당 업무팀 페이지 제작WBS(Work Breakdown Structure) 제작기능 명세서 작성요구사항 명세서 작성프로젝트 및 Git 초기 세팅레포지토리 생성 및 기본 구조 세팅폴더 구조.. 2025. 4. 27.

[DevCourse] 생성형 AI 활용 백엔드 데브코스 16일차 오늘은 React나 jQuery 같은 라이브러리를 사용하지 않고,Vanilla JS(기본 JavaScript)만으로 DOM을 조작하고 UI를 구현하는 실습을 중심으로 진행됐다.기본기가 탄탄해야 어떤 도구를 쓰든 흔들리지 않는다는 말처럼, 이번 실습들은 단순하지만 꽤 의미 있는 시간이었다.📌 오늘 배운 주요 개념 정리DOM 제어 기본 HTML 요소를 직접 조작하는 방식 익힘getElementById, addEventListener, textContent, classList 등을 활용해jQuery vs Vanilla JS 비교코드 길이의 차이와 명확성의 차이를 비교할 수 있었다같은 동작을 두 방식으로 구현해 보며,fetch API로 JSON 불러오기.then()과 .catch()를 통해 데이터를 비동기적으.. 2025. 4. 24.

📘 자바스크립트(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.

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

티스토리툴바