본문 바로가기

전체 글26

[Codeit;] React 웹 개발 시작하기 2. React 개발 기초index.html: 웹 브라우저에서 가장 먼저 실행되는 파일index.js: index.html에서 실행되는 자바스크립트 파일//index.jsimport ReactDOM from 'react-dom';ReactDOM.render(안녕 리액트!, document.getElementById('root'));//첫번째 argument 값 -> 두번째 argument 값import ReactDOM from 'react-dom';ReactDOM.render{ 안녕 리액트! , document.getElementById('root')};//div 태그 없이 하나로 감싸기 가능(Fragment)import ReactDOM from 'react-dom';co.. 2024. 8. 7.
[Codeit;] 자바스크립트 웹 개발 기본기 1. 웹 기초 다지기 //fetch: 리퀘스트 전송, 리스폰스 수신 함수fetch('https://www.google.com') //리스폰스 수신 시 실행(콜백 함수) .then((response) => respones.text()) .then((result) => { console.log(result); }); 2. Web API 배우기 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); //JSON.parse: string 타입 JSON 데이터 -> 객체 타입 변.. 2024. 8. 3.
[Codeit;] 쿠키, 세션 스토리지, 로컬 스토리지 이해하기 1. 쿠키서버로부터 리스폰스로 쿠키를 받음 ➡️ 클라이언트: 웹 브라우저가 알아서 저장 & 리퀘스트를 보낼 때도 웹 브라우저가 알아서 보냄자바스크립트를 통해 쿠키 값 추가, 수정, 참조 가능수명을 지정 가능, 수명이 다한 쿠키는 자동으로 삭제서버: 리스폰Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000; 클라이언트: 전송Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000; //도메인 지정 -> 서브 도메인 리퀘스트 시에도 쿠키 전송 Dom.. 2024. 7. 31.
[Codeit;] 메타 태그 이해하기 HTML 문서의 문자 인코딩을 utf-8로 지정해요.브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.name="robots" 설.. 2024. 7. 31.
[Codeit;] 인터랙티브 자바스크립트 1. 인터랙티브 자바스크립트 시작하기 const tag = document.getElemetById('id');const tags = document.getElementsByClassName('class');//유사 배열: 인덱스, 길이, for...of 문 사용 가능 tags[1]tags.lengthfor (let tag of tags) { console.log(tag); }const btns = document.getElementsByTagName('button');const tag = document.querySelector("#id");const tag = document.querySelector(".class");//class 요소 중 첫번째 요소 선택const tags = document.qu.. 2024. 7. 31.
[Codeit;] CSS 레이아웃 +) displaydisplay: block/*위 -> 아래 배치*//*, , */display: inline/*글 쓰는 순서대로 배치, 위아래 크기 X*//*, , */display: inline-block/*인라인 태그에 크기 부여*/  2. Position position: static/*원래 있어어야할 위치, 일반적인 글의 흐름*/position: relative/*기준: 원래 static position의 위치기존 자리 차지*//*margin과 차이점: 독립적으로 이동*/position: absolute/*기준: 가장 가까운 포지셔닝이 된 조상요소기존 자리 차지 X*//*크기 지정 X: 내부 텍스트만큼의 크기*/inset: npx/*top: npx; bottom: npx; right: npx; .. 2024. 7. 30.