본문 바로가기
반응형

분류 전체보기222

[JavaScript] JavaScript 기본 문법 변수 선언더보기더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체.. 2025. 4. 4.
[CSS] CSS CSS- 적용: 인라인(style="color: red;"), , - 선택자: *, tag, .class, #id, [attr="val"]- 가상 클래스/요소: :hover, :nth-child(n), ::before, ::after- 박스모델: content, paddind, border, margin, box-sizing(border-box)- 레이아웃: display(block, inline, inline-block, flex, grid, none), position(static, relative, absolute, fixed, sticky)- 반응형 디자인: @media (max-width: 768px)- 변수: :root { --main-color: #3498db; } var(--main-col.. 2025. 4. 4.
[HTML] HTML HTML- 웹  페이지의구조와 콘텐츠를 정의하는 마크업 언어- 구조: , , , - 시멘틱태그(SEO): , , , , , , - 텍스트: -, , , , - 리스트: , , - 테이블: , , , - 미디어: , , , - 폼: , , , , , , , , , , 2025. 4. 4.
[웹개발] JavaScript 주요 메서드 2 Fetch API(비동기 요청)더보기메서드설명fetch(url)GET 요청(기본)fetch(url, { method: "POST", body })POST 요청fetch(url, { method: "PUT", body })PUT 요청fetch(url, { method: "DELETE" })DELETE 요청response.json()JSON 데이터를 파싱response.text()텍스트 데이터로 변환response.statusHTTP 상태 코드 반환response.ok응답 성공 여부(true/false)fetch("https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)) .c.. 2025. 4. 3.
[웹개발] JavaScript 주요 메서드 1 문자열(String)더보기메서드설명length문자열 길이 반환toUpperCase()대문자로 변환toLowerCase()소문자로 변환trim()앞뒤 공백 제거slice(start, end)부분 문자열 추출substring(start, end)부분 문자열 추출replace("찾을값", "바꿀값")문자열 치환split("구분자")문자열을 배열로 변환includes("문자")특정 문자 포함 여부 확인indexOf("문자")특정 문자 위치 반환(없으면 -1)let text = " Hello JavaScript! ";console.log(text.length); // 19console.log(text.toUpperCase()); // " HELLO JAVASCRIPT! "console.log(text.trim().. 2025. 4. 3.
[웹개발] JavaScript 요약 변수 선언더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체let ar.. 2025. 4. 3.
[웹개발] CSS 2025. 4. 2.
[웹개발] Frontend 키워드 정리 Frontend- Frontend: UI/UX를 구현하는 작업- HTML(웹페이지 구조 정의) / CSS(웹페이지 스타일 정의) / JavaScript(웹페이지에 동적 기능 추가) (개발 역량)- DOM 조작 및 이벤트 처리 / 반응형 웹 디자인(RWD) / 웹 성능 최적화(Lazy Loading, Code Splitting)- REST API 및 GraphQL 통신 / 상태관리(Redux, Recoil, Vuex, Zustand) / 웹보안(XSS, CSRF) (개발 환경)- 패키지 관리자(npm, yarn)- 번들러 및 빌드 도구(Webpack, Vite)- 스타일링(Tailwind CSS, Styled Components, Sass)- 테스트(Jest, Cypress, React Testing Li.. 2025. 4. 2.
[웹개발] 번들러 Bundler- Bundler: 웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구- Bundler는 결합을 위해 프로젝트를 해석하는 과정에서 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본 작업과 함께 최신 문법이나 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행- Webpack, Parcel, Rollup이 있음Webpack- 대표적인 JavaScript 번들러(Webpack 기능)- Module Bundling: 진입점에 연결된 단일 파일로 묶어 줌- Automatic Bundle Optimization: 번들 최적화를 통해 보다 더 작은 번들을 생성하고 그만큼.. 2025. 4. 1.
[웹개발] DB 설계 1. 주제 선정1) 목적2) 주요 기능 2. 요구 수집 및 분석1) 요구 수집 명세서2) 업무 영역 분할도3) 업무별 데이터 및 트랜잭션 요구 분석 명세서 3. 개념적 설계1) 개념적 스키마 모델링- 개체 후보 식별: 주어나 목적어로 표현된 개체 후부 식별- 개체 후보 검토: 실제 데이터 수와 대표 속성을 파악하여 선정- 개체 선정: 식별된 개체 후보를 검토해서 속성이 없거나 관계로 표현하는 것이 더 적합한 것을 제외하고 선정- 관계 후보 식별: 동사로 표현된 관계 후보를 검토하여 선정- 관계 식별 목록: 선정된 관계 후보에 대해 관계 유형과 관계 설명 속성까지 결정- 최종 개체 목록- 최종 관계 목록 2) ER 다이어그램 작성 전 체크리스트더보기개체관련 관계관련 속성관련 3) ER 다이어그램 그리기 4.. 2025. 3. 31.
반응형

티스토리툴바