본문 바로가기
728x90

전체 글247

제작한 웹페이지 배포 방법(GibHub Pages) 1. GitHub에서 저장소 생성 2. 파일 업로드 3. 저장소의 settings > Pages > Branch Name을 main으로 설정 후 save 4. 새로고침하면 주소가 노출됨 주의사항 배포하기 전에 반드시 로컬에서 테스트 수행하기 원격 저장소에는 중요한 정보를 포함하지 않도록 주의 → 비밀번호, API 키, 개인정보 등의 민감한 정보는 소스코드에서 제거해야 함 2023. 9. 14.
Firebase 이용: 데이터를 보내고 가져오는 경우 Firebase와 연결하는 과정에서 설정: 1. onclick이 작동안함 -> $("#id").click(async function () {}) 사용 - 데이터 보내기 $("#id").click(async function () { //id에 click을 줌 let doc = {}; //넣고 싶은 데이터 await addDoc(collection(db, "콜렉션이름"), doc); //데이터를 해당 콜렉션에 추가 window.location.reload(); //페이지 새로고침 }) - 데이터 가져오기 let docs = await getDocs(collection(db, "콜렉션이름")); docs.forEach((doc) => { let row = doc.data(); console.log(row); .. 2023. 9. 14.
document ready 페이지가 로딩 완료된 후 동작하는 함수 $(document).ready(function () { alert('안녕!'); }) 2023. 9. 14.
JSON, GET, Fetch JSON Key : Value 쌍으로 이루어진 텍스트 기반 개방형 표준 데이터 포맷 주로 서버가 클라이언트로 데이터를 보낼 때 사용 크롬 익스텐션 JSONView를 설치해 JSON을 더 예쁘게 볼 수 있음 GET [클라이언트 -> 서버]: 데이터를 요청할 때의 타입이 존재 GET: 데이터 조회(Read)를 요청 POST: 데이터 생성, 변경, 삭제를 요청 GET 방식으로 데이터를 전달하는 방법 URL의 "?" 이후부터 전달할 데이터 작성(쿼리스트링) "&": 전달할 데이터가 더 있다는 *POST는 전송해야 할 데이터를 HTTP의 body 부분에 담아서 전송 Fetch Fetch 기본 골격 fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET! ... 2023. 9. 14.
DOM, JQuery DOM(문서 객체 모델) 자바스크립트가 쉽게 웹 페이지 요소에 접근하여 조작할 수 있도록 연결시켜주는 일종의 인터페이스 예시 function hey(){ alert('안녕!'); document.getElementById('hello').style.color = 'red'; } 함수 hey()가 호출되면 '안녕!' 메세지창이 뜨고 id가 hello인 요소의 글자색이 red로 바뀐다. JQuery 미리 작성된 Javascript 라이브러리 -> 코드가 간단해짐. import를 해야 함. Javascript일 때 document.getElementById('hello').innerHTML = '안녕'; jQuery일 때 $('#hello').html('안녕'); jQuery CDN 사이에 임포트 JQuery.. 2023. 9. 14.
반복문과 조건문 반복문 forEach let fruits = ['사과','배','감','귤'] fruits.forEach((a) => { console.log(a) }) 조건문 If~else let age = 24 if (age > 20) { console.log('성인입니다') } else { console.log('청소년입니다') } 반복문 + 조건문 let ages = [12,15,20,25,17,37,24] ages.forEach((a)=> { if (a > 20) { console.log('성인입니다') } else { console.log('청소년입니다') } }) 2023. 9. 14.

티스토리툴바