콛 다이어리

1. HTML(Hypertext Markup Language)인터넷 사이트를 구성하기 위해 사용하는 코드뼈대2. CSS (Casting Style Sheet)인터넷 사이트를 꾸미기 위해 사용하는 코드 꾸밀 수 있는거3. Backend (백엔드)인터넷 사이트나 어플리케이션의 보이지 않는 작업을 돕는 사람 뒤에서 하는거4. Frontend (프론트엔드)사용자가 웹사이트나 앱의 보이는 부분을 만드는 사람 앞에서 하는거5. DataBase (데이터베이스)정보들의 집합 또는 묶음 + DBMS (Database Management System)데이터베이스를 관리하고 특정 목적을 처리하기 위한 중앙 프로그램 문서 작성을 위해서는 한글 프로그램, 표 계산을 위해서는 엑셀을,       사진 편집을 위해서는 포토샵을 쓰..

2번array.splice(start, delCount, item1, item2..);start: 시작할 때 인덱스 지정, 배열의 변경을 시작할 인덱스 지정delcount: 제거/ 변경할 요소의 개수item: 배열에 추가할 요소   3번undefined: 변수는 선언되었지만 값이 할당되지 않은, 아무런 값도 부여되지 않은 상태ex) let x;      console.log(x); // undefined object: 여러 값들을 키와 값을 쌍으로 저장할 수 있는 복합 데이터 타입으로 객체는 중괄호({ })로 정의- 다른 데이터 타입과는 다르게 복잡한 구조를 표현- 객체 아네는 문자열, 숫자, 배열, 다른 객체등 다양한 타입의 데이터를 포함ex) let myFriend = [ {name:'Eundong'..

SCSS = SASS = "사스"css 의 전처리기css로 변경 후 실행브라우저는 scss를 알 수 없음인간만을 위한 css속성(margin, padding.. ) 값을 js 변수처럼 활용   네스팅(nesting): 안에 넣고 또 넣고 ~ ... 코알라(사스 생성 프로그램) 설치방법Koala 검색 후 다운로드→ 설정 클릭→ Autoprefix 체크→ Output Style은 Compact → Okay 코알라 사용하는 방법설정 → Default Options의 Auto Prefix 체크 → Output Style에서 Compact 선택 →  VSC에서 scss파일 생성 (확장자를 .scss로 하면 됨) → 코알라 실행 후, 막 생성한 파일을 불러옴 → 우측 초록색 compile 버튼 클릭 코알라 주의사..

내 파이어베이스 들어가는 방법파이어베이스 접속 → 로그인 → 우측 상단 콘솔로 이동 버튼 클릭 → 프라잇 클릭 → 좌측에 Firebase Database 클릭 프로토콜: 웹 서버 간의 통신 방식을 지정 도메인: 고유한 웹 사이트의 주소https://의 s는 security의 약자로, 보안이 조금 더 강화되었다는 뜻 //를 빼도 동작함 프로토콜/ 도메인/ 경로 깃 허브(Git Hub): 코드를 저장하고 공유하는 공간도서관 깃허브 사용하는 이유:공용의 저장소에 저장하는 것이 수정과 반영이 편함한 사람 컴퓨터에 저장했는데, 그 사람이 출근을 안 하면 그 코드를 볼 수가 없기 때문임 깃허브 가입하는 방법깃허브 접속 → 우측 상단 Sign Up → 이메일 계정 입력 → Continue 버튼 클릭 →  비밀번호 입..

프론트엔드(Front End)눈에 보이는 것백엔드에 요청함백엔드에 응답받음HTML, CSS, JavaScript 백엔드(Back End)눈에 보이지 않는 것프론트앤드로부터 요청받음프론트앤드에 응답함Server, DB, API 파이어베이스(Firebase)모바일 및 웹 어플리케이션 개발 플랫폼서버 개발 없이 제작 가능웹 서버를 대신 만들어 주는 것구글이 개발백엔드 코드 없이 프론트만 알아도 웹 서비스 제작 가능개발 코드 1. 서버로 데이터 전송하는 코드                     (프론트에서 작성)개발 코드 2. 데이터 전달받고 DB에 저장하는 코드 (파이어베이스에서 작성, 용량초과만 안 하면 괜찮음) 데이터베이스(Database)데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음각 데이터베이..

제이쿼리: 남이 만들어 놓은 자바스크립트 라이브러리 fetch: 서버에서 데이터를 받아오는 것서울시 공공 데이터에서 미세먼지를 실시간으로 볼 수 있음 toggle(): 상태를 전환하는 이벤트 핸들러onclick(): 클릭했을 때 반응이 일어나는 이벤트 핸들러append(): 추가하는 이벤트 핸들러+click(): 클릭 이벤트 핸들러 keydown(): 키보드의 키 중 하나를 누를 때mouseover(): 요소 내부에서 마우스가 움직일 때mouseout(): 요소에서 마우스가 벗어날 때 발생 mouseenter(): 요소 내부로 진입할 때 발생 mouseleave(): 요소를 벗어날 때 발생keydown(): 키를 누를 때 발생하는 이벤트                  (키를 누르는 순간에 반응)keyup..

부트스트랩: 남이 만들어 놓은 예쁜 css 꾸러미 부트스트랩 사용하는 방법원하는 div 코드 가져오기→ F12 누르고 우측 코드 가져오기 태그가 하나면 클래스를 지정할 필요가 없음 브라우저의 3대 요소HTML, CSS, JavaScript 자바스크립트: 브라우저가 알아들을 수 있는 프로그래밍 언어웹 페이지의 움직임서버와의 통신모바일 청첩장이면, 보고 댓글도 남길 수 있음무언가가 없어지고, 사라지고, 바뀌는 것 사용하는 이유표준이 되어서 자바스크립트와 자바(Java)의 차이없음인도와 인도네시아햄과 햄스터 작성하는 방법 엘리먼트 안에 작성 console.log(); 는 '개발자 도구에 띄워주세요' 프로그래밍 언어 종류변수값을 담음그릇값을 담아서 한 번에 관리하는 것 let a = '은동이';console.l..

웹: 개발의 기초 (입문) 웹 브라우저: 사이트에 접속할 수 있게 도와주는 것 서버 클라이언트: 웹 브라우저의 작동 원리서버: 주는 쪽클라이언트: 받는 쪽(F12를 이용해 코드를 수정하면 내 사이트에서만 코드가 변경됨) 라이브러리: 누군가 이미 만들어 놓은 것   VSC(Visual Studio Code)를 사용하는 이유:코드를 더 편리하게 사용하기 위함보고서를 메모장보다 워드 등을 사용하는 것처럼 HTML: 보여주는 것CSS: 꾸며주는 것 엘리먼트: 여는 태그: 닫는 태그:  태그: 파비콘과 제목이 삽입됨*파비콘: 웹사이트 제목 좌측에 있는 이미지body>태그: 뼈대, 각종 태그, 자바스크립트와 css가 입력됨 스타일 생성하는 방법(여는 태그에) 클래스 또는 아이디 생성→ 스타일 태그 생성위치는 상관 ..

[미션 1] 프로필 설정 및 자기소개안녕하세요!프론트 개발자를 목표로 공부 중인 조희진입니다! 🤭     [미션 2] 스타터 노트 작성내가 React 트랙에 참여한 계기는 무엇인가요?⦁ 전 회사에 경리 및 사무직으로 입사했지만 회사의 권유로 C#을 배워 개발 업무를 한 적이 있습니다.제공받은 교재와 유튜브를 보며 학습했지만 항상 낯설고 기대만큼 나아지지 않는 실력에 퇴사를 결심했습니다. 퇴사할 때 사장님께서는 코딩에도 종류가 많으니 꼭 맞는 코딩을 찾길 바란다고 하셔어떤 코딩이 제게 맞을까 고민하던 중, 대학생 때 배웠던 html과 css가 생각났습니다.입력한 코드의 내용이 화면에 출력되는 게 너무 신기했지만 처음부터 배우기에 너무 늦었다는 생각에 배우지 못했습니다. 그렇게 마지막 기회라고 생각하고 퍼..