사전 캠프/강좌 TIL 6

[왕초보] 웹개발 종합반 4주차

데이터 베이스에 무언가를 저장하고, 불러오는 법을 배웠다. 데이터베이스는 클라이언트에서 보낸 정보를 저장해놓는 일종의 저장소이다. 서버, api, db와도 같은 이런 걸 백엔드라고 부른다.  데이터베이스에는 두 종류가 있어서 SQL과 NoSQL가 있다.NoSQL은 Not only SQL의 약자이다.  SQL을 쓰려면 다음 코드가 필요하다.     script type="module">        // Import the functions you need from the SDKs you need        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";        import { getF..

[왕초보] 웹개발 종합반 3주차 (2).

외부에서 API를 통해 데이터를 받아올 수 있게 되었다.             let url = ". . .";            fetch(url).then(res => res.json()).then(data => { }) 해당 코드를 이용하면 URL을 통해 외부에서 API를 받아올 수 있다.fetch 코드를 이용하면 url에 저장된 특정 링크를 json으로 받아와 'data'라는 변수에 저정할 수 있다. 이렇게 받아온 데이터는 리스트 딕셔너리의 형태를 띄고 있어서, 가져올 때 리스트 딕셔너리의 문법을 따른다.  예시)             let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";            fetch(url).t..

[왕초보] 웹개발 종합반 3주차 (1).

input 태그를 통해 받아온 정보를 변수화시킬 수 있게 되었다!         function checknumber() { // 제출 버튼 클릭 시, 답을 확인하는 함수            let kotae = $('#answer').val();            if (kotae == Num) {                $('#check').text('정답입니다.')            } else {                $('#check').text('오답입니다. 정답은 ' + Num + '입니다.')            }        } 위 코드를 보면 kotae라는 변수에 answer로부터 정보를 받아온 것에 밸류를 매긴 것을 알 수 있다.             input type..

[왕초보] 웹개발 종합반 2주차

자바 스크립트를 이용해서 반응형 버튼을 추가하였다.버튼을 클릭했을 때, 경고문이 나왔으면 좋겠어! 스크립트 안에 넣을 것. function a() {alert('삑')} 버튼 설정 건드릴 것. onclick="a()">영화 기록하기 버튼 클릭시 a라는 함수를 실행.스크립트에 명시된 대로 a라는 함수가 실행되어, 클릭시 경고창과 함께 '삑'이 표시된다.  JQuery에 대해서 배웠다. JQuery를 쓰는 이유?기본 자바스크립트 문법을 통한 코드가 너무 길고 복잡해져서, 이를 단축시켜서 만들어놓은 일종의 코드 모음집.제이퀴리를 쓰면 긴 코드를 쓸 필요 없이 문자 하나, 단어 하나로 지정이 가능하다.  매우 중요제이퀴리를 쓰기 위해서는 먼저 헤드에 제이퀴리를 쓸 것을 명시하고, 불러와야한다.  와 사이에 해..

[왕초보] 웹개발 종합반 1주차 정리

사전 정보알트 b = 브라우저에서 보기헤드와 바디. 브라우저 내 페이지에 보이는 모든 것이 바디에 들어가고, 그렇지 않은 것이 헤드에 들어간다. css, 자바스크립트는 헤드에 들어간다고 한다!  HTML은 뼈대.CSS는 꾸미기.JS은 동적 요소를 추가한다.  구역은 div태그를 쓴다. div 안에 들어간 것들은 하나의 구역으로 취급된다. div 안에 또 다른 div가 마트료시카처럼 있을 수 있다!  근데, 이러면 알아보기가 힘들 수 있으므로 이를 회피하기 위해 수시로 줄정리를 해주자.  CSS의 기본 문법 .example {} // example 이라는 대상 지정. 이 대상을 꾸며줄 거야 선언. .example > button {} // example 안에 있는 버튼들만 대상 지정* {} // 이 페이지..

[React 트랙] 프론트엔드 기초 1주차 정리.

사전 지식 느낌표 자동 완성 -> 자동으로 판을 깔아준다! 매우 편리. 코드를 시작할 때는 필수적으로 쓰는 자동완성. ctrl / -> 주석 처리. 앞에 적어놓은 코드를 주석으로 처리하여 없던 것으로 만드는 효과가 있다. alt shift f -> 코드를 정리한다. 휴대폰 화면으로 웹소설을 읽을 때, 글이 뭉쳐있으면 불편. 코드도 마찬가지니, 이를 정리하는 효과가 있다. alt shift  방향키 아래 -> 윗줄의 코드를 그대로 아래 쪽으로 복사 / 붙여넣기하는 효과가 있다. 코드 스니펫을 참조해 간단한 로그인 페이지를 만들어보았다. 태그를 이용해 페이지를 구현하는 법을 배웠다.  h1 = 제목을 나타낸다. h2는 소제목. 그 외에도 h3 h4 etc) 이런 식으로 계속 쓸 수는 있으나 중요도는 떨어지는..