🖥️ Frontend/frontend+17 🟦 TypeScript 🟦 - 신촌알고리즘출석프로그램 Documentation - The Basics Step one in learning TypeScript: The basic types. www.typescriptlang.org 🟦 TypeScript 🟦 - Microsoft에 의해 개발된 오픈 소스 프로그래밍 언어 - JavaScript의 상위 집합(superset)으로, JavaScript에 타입 시스템을 추가하여 개발한 언어 - TypeScript는 크로스 플랫폼 및 크로스 브라우저 호환성을 갖춘 JavaScript 코드를 생성 - 웹, 서버, 모바일 애플리케이션 개발 등 다양한 분야에서 사용 🟦 TypeScript의 주요 특징 - 정적 타입 검사: TypeScript는 변수, 매개변수, 객체 속성 등에 대한 타입 정보를 명시적으로 선언할 수 있음.. 2024. 2. 11. 💟프론트💟 - 모던 웹을 위한 상세한 CSS background 이해 CSS ReferenceCSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.cssreference.io참고💟 CSS background 관련 프로퍼티 background-repeat 프로퍼티!!!배경 이미지가 요소 사이즈보다 작을 때 반복해서 해당 사이즈를 채울 것인지를 설정repeat,space,round,no-repeat 반복 세부 설정 가능여러 개 이미지 덮기 가능여러 개 이미지 각자 세부 설정 가능 background-size 프로퍼티 background-attachment 프로퍼티fixed .. 2023. 10. 1. 💟프론트💟 - 모던 웹을 위한 CSS 박스모델 이해 잔재미코딩 - 풀스택을 위한 탄탄한 프런트엔드 부트캠프CSS 박스 모델box 형태의 세부 사항 수정 가능 대표적 박스 요소컨텐트는 항상 안 보이는 보더가 있고 그 사이에 패딩 존재마진도 지정 가능 width / height 프로퍼티 box-sizing 프로퍼티: content-box로 지정=> width/height : content 영역의 너비 높이 됨 box-sizing 프로퍼티: border-box로 지정=> width/height : content+padding+border 영역의 너비 높이 됨 컨텐츠가 지정된 width height를 넘치면 영역 밖으로 나감 => overflow 프로퍼티를 hidden으로 설정하여 넘친 컨텐츠 감추기+ max-width / max-height 프로퍼티요소.. 2023. 9. 28. 💟프론트💟 - 모던 웹의 핵심 상세한 CSS 기본 잔재미코딩 강의 -풀스택을 위한 탄탄한 프런트엔드 부트캠프CSSCascading Style SheetsHTML로 구조화된 문서를 어떻게 브라우저 상에 렌더링할지 표현 기법 정의하는 언어화면 렌더링 표현 방법 정의 HTML 과 연동하는 방법1. 적용할 태그에 style 속성으로 넣기2. HTML 문서 head 안에 style 태그로 넣기3. HTML 문서 head 안에 css 파일로 링크하기 3번을 제일 많이 사용~ Reset CSS웹브라우저마다 다른 default 스타일 설정 -> 초기화하여 다양한 웹브라우저에서도 동일한 스타일로 표시하기! 실무에서 필요에 의해 임의로 만든 설정 normalize.css 사용 ( 기본 스타일은 남기고 / 브라우저별로 다를 부분만 초기화 )head에 링크시켜주기!CS.. 2023. 9. 26. 💟프론트💟 - 모던 웹 기본 기술 이해 그래.. 리액트 하겠다고 나댓는데..js 옛날에 공부한 거 다 까먹은 거 음박치기하면 될줄대학생 되면 정해진 길이 없다! 공부할 거 자기가 정하는 거다! 우와~가 아니었어요 길을 못찾겠어요 여기가 어디죠 어디로 가야 하는거난 프론트 스터디원 아니지만~몰래 썌비지 해서 강의 나두 들어야지20시간? 세미나도 끝냈겠다 중간고사 본격 공부 전에 부숴버리겠어0강0-1강0-2강0-3강0-4강챗지피티 잘 사용하자\4유료결제해야 하나1-1강 html태그와 속성 사이 , 속성과 속성 사이에는 한 칸 띄어야 함css프로퍼티와 값 사이 띄어쓰기 없어도 됨 css Selecter ES6 :ECMAScript 의 약자 / 숫자 6은 여섯번째 ES (프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격)1-2강 Emmeth.. 2023. 9. 25. ⚛️ React ⚛️ - 2.리액트 프로젝트 만들기 내일 아침에 이어서.. CPA (create-react-app) : 리액트 프로젝트 제작 npx (node pakage program) 리액트 웹 애플리케이션은 CRA라는 프로그램으로 node.js 프로젝트를 생성하여 제작 npx create-react-app fir_react --template typescript package.json CRA로 생성한 프로젝트에는 항상 이 파일 존재 터미널에서 npm start 명령을 실행하면 이 파일 내에서의 react-scripts start 명령 실행 npm run start - start 명령 : 프로젝트를 개발 모드로 실행 npm run build - build 명령 : 프로젝트를 빌드 모드로 실행 웹팩 webpack : 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러 다양.. 2023. 9. 11. ⚛️ React ⚛️ - 1. 리액트 개발 준비 ⚛️ 싱글 페이지 애플리케이션 / SPA 멀티 페이지 애플리케이션 : 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 기존 방식 (HTTP 요청 -> HTTP 응답 -> 렌더링 (반복)) 주소 창으로 요청하는 자원이 하나뿐 -> 렌더링을 지우는 과정에서의 깜빡임 노노 !이거! 내가 아빠 생일 프로그래밍 만들 때 엄청 고심한 거잖아! SPA로 하면 되는구낭 리액트 : 싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크 ⚛️ 클라이언트 동작 템플릿 엔진 프엔은 백에서 제공하는 json 데이터를 해석하여 자바스크입터 객체들의 조합을 얻은 후 이것을 웹이 이해할 수 있는 DOM 객체로 변환해줘야 함 프엔 프레임워크는 자바스크립트 객체를 DOM 객체로 전환해 주는 역할을 수행 프론트엔.. 2023. 9. 4. 이전 1 2 다음
