본문 바로가기

javascript57

국비 지원 개발자 과정_Day52 유튜브 클론코딩 실습 4 top 영역 소개 로그인 게시판 구글 bottom 영역 body 메인 영역 info 영역 login 영역 board 영역 google 영역 뉴스 준비중 ... 확장자가 아니라 mime타입에 따라 브라우저 출력 결정된다 타입이 json이어도 그냥 memberList 찍으면 json형식 x 자바스크립트에서 읽을수가 없다(조회결과없음) out.print(memberList); %> ... Navbar Home Link Dropdown Action Another action Something else here Disabled Search First slide label Some representative placeholder content.. 2023. 2. 10.
국비 지원 개발자 과정_Day51 리액트 프로젝트 템플릿 작성하기 1. npm install -g yarn 2. yarn -version 3. yarn create react-app template2023 4. yarn init --force 엔터 한 후 질문지에 대해 모두 엔터 치면 자동 완성됨 현재 페이지가 몇 번째 페이지인지 알고 있어야 한다 → 변하는 값이니 let으로 설정 현재 페이지가 몇번째 페이지인지 기억하는 변수가 필요하다 const store = { currentPage: 1 } 이전페이지일 경우, 내가 현재 바라보는 페이지를 기준으로 -1 한다 주의할 점은 -1은 되지 않아야 한다(페이지는 1부터 시작하기에) → 삼항연산자 이용 // store.currentPage가 1보다 크면 -1하고 아니라면 1 유지 store.c.. 2023. 2. 9.
국비 지원 개발자 과정_Day50 구글로그인 터짐 메인 페이지 로그아웃 이 경우 submit에 대한 이슈가 없음 이 경우도 submit에대한 이슈가 없음 전송 submit 이슈가 있음!!(주의할 것) 반드시 event.preventDefault()를 호출하여 이벤트 버블링 방어할 것!! 페이지 새로고침 발생(화면이 하얗게 변하거나 계속 렌더링 됨) html, css, js는 서버 PC에 물리적인 위치를 갖는다 → 실행은 로컬 PC에서 실행된다 → 다운로드됨(서버에서 각 로컬 PC에) → O/S(window10)에 깔린 브라우저(V8엔진-구글)가 다운로드된 파일 실행(동기화 안됨) → 클라이언트 사이드 렌더링, 정적페이지(이미 결정됨) → 다운로드 파일 크기가 크면 속도 오래 걸림 → 시간을 줄이려면 들여 쓰기, 여백 등 모두 제거해야 함.. 2023. 2. 8.
국비 지원 개발자 과정_Day49 구글로그인 // Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js"; // Your web app's Firebase configuration const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", }; // Initialize Firebase export const firebaseApp = initializeApp(firebaseConfig);.. 2023. 2. 7.
국비 지원 개발자 과정_Day48 학습목표 1. 함수 활용 양이 줄었는지 늘었는지 복잡도 증가했는지 줄었는지 2. 배열 CRUD 배열 내장함수(filter, join, push …) 3. DOM 구조 그리기(문자열을 이용한 HTML 다루기) 코드 양은 늘어나지만 직관적이라 유지보수 좋음 DOM API → 백틱(`) 기호로 변경(리팩토링) 4. 라우터 적용 5. 페이징 처리 6. TailWind CSS 적용 XMLHttpRequest 비동기통신객체 XHR 객체는 서버와 상호작용할 때 사용 XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부 업데이트 가능 // XMLHttpRequest는 내장객체가 아니다 → 인스턴스화를 해야 한다 const xhr = n.. 2023. 2. 4.