일기 48

11/07

오늘 배운 것 1. 자바스크립트의 콜백함수-콜백함수란 다른 코드의 인자로 넘겨주는 함수-콜백함수는 메서드가 아니라 함수이기 때문에 this를 바인딩해서 써야한다-콜백함수에서 this를 전달하기 위해 bind 메서드를 활용한다.var obj1 = {    name: 'obj1',    func: function () {        console.log(this.name);    }};//함수 자체를 obj1에 바인딩//obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!setTimeout(obj1.func.bind(obj1), 1000);var obj2 = { name: 'obj2' };//함수 자체를 obj2에 바인딩//obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘..

일기 2024.11.07

11/06

오늘 배운 것 1. 데이터 타입-기본형과 참조형-포인터 개념인듯하다-깊은 복사와 얕은 복사 2. 실행컨텍스트-코드에 제공할 환경 정보를 모은 객체-호이스팅 -> VE, LE구성 -> this 바인딩 호이스팅-컨텍스트와 관련된 코드의 식별자들을 수집한다.-컨텍스트에서 사용되는 모든 식별자들의 선언을 코드 위로 땡겨온다.-함수 선언은 전체를 호이스팅한다. VariableEnvironment 와 LexicalEnvirionment-record와 outer로 구성된다-VE는 컨텍스트가 생성되는 시점의 LE의 스냅샷이다 this 바인딩-js에서 this는 전역에서 사용할 수 있는 특수한 키워드이다.-현재 컨텍스트의 스코프에 따라 this가 가리키는 대상이 다르다-일반적으로 메서드로 호출되었다면 호출한 객체, 아니..

일기 2024.11.06

11/05

오늘 배운 것 ES6 문법 1. 구조분해할당(destructing)1) 배열에 저장>>> let [value1, value2] = [1, 'val']; >>>let arr = ['val1', 'val2', 'val3'];>>>let [x, y, z] = arr;   // x => 'val1', y => 'val2', z => 'val3' 2) 객체에 저장let { key1, key2} = {   key1: val1,   key2: val2}; 3) 새로운 이름으로 저장let user = {   name: 'john',   age: 20};let { name: newName, age: newAge } = user;console.log("newName : ", newName); // newName : joh..

일기 2024.11.05

11/04

오늘 배운 것JavaScript 문법 기초 c, c++, c#을 해봤기 떄문에 대부분 문법은 익숙했다 몇가지 유의해야할 점 1. 변수 선언-변수 선언시 자료형을 명시하지 않는다.-세가지 변수 선언 키워드 var, let, const 2. 비교연산자-자료형을 명시하지 않기 때문에 암시적 형변환이 잦다.-자료형까지 엄밀하게 비교하는 ===, !== 연산자와 자료형을 형변환해서 비교하는 ==, != 연산자에 주의 3. 함수 반환형-함수 선언시 반환형을 선언하지 않고 그냥 return한다. 4. 생성자-c++이랑 비슷하다.-객체 외부에 생성자 함수를 정의한다.-Object.keys({object}), Object.values({object}) 함수로 key와 value를 알 수 있다-Object.entries(..

일기 2024.11.04

10/31

오늘 한 일 멤버 카드 삭제 기능을 수정했다멤버 카드 수정 기능을 추가했다내 페이지를 배포하는 방법을 배웠다  멤버 삭제 기능$('.deleteBtn').click(deleteCard)        async function deleteCard() {            const card = $(this).closest('.memberCard');            let docId = card.attr('id').split('_')[1];            const docRef = doc(db, "profiles", docId);            try {                await deleteDoc(docRef);                alert("삭제 완료!");     ..

일기 2024.10.31

10/30

실습 프로젝트 (팀 소개 페이지 만들기)-날씨 정보 가져오는 기능-멤버 카드 CRUD(생성, 읽기, 갱신, 삭제) 기능 오늘 한 작업-날씨 정보 가져오기-멤버 카드 CRUD 중 삭제 기능 날씨 정보를 가져오는 부분 ...// 날씨 정보를 가져와서 weatherSlider에 추가        let url = "http://spartacodingclub.shop/sparta_api/seoulair";        fetch(url).then(res => res.json()).then(data => {            let row = data['RealtimeCityAir']['row'];            row.forEach((e) => {                let location = e..

일기 2024.10.30

10/29

오늘 배운 것 1. JQuery와 fetch기능으로 데이터 받아오기-오픈API로 서울시 날씨 받아오는 방법-json포맷으로 데이터 다루기(리스트와 딕셔너리)-페이지 로드시 바로 시작하는 함수($(document).ready)-배운 것 실습하기 2. 파이어베이스 사용하기-DB란? 데이터베이스다~ 데이터를 단순히 저장하는 것 만이 아니라 빠르게 검색하는게 목표-RDB: 관계형 데이터베이스, NoSQL: 비-관계형 데이터베이스-데이터베이스를 풀스캔하면 뻗는다! ㅋㅋ 3. 파이어스토어(구글이 제공하는 NoSQL)-데이터를 key:value형태의 딕셔너리로 저장한다-html에서 파이어스토어DB를 사용할 수 있게 세팅하기-파이어스토어에서 데이터 불러오기, 저장하기(getDoc, addDoc 함수)

일기 2024.10.29

10/28

오늘 배운 내용 1. 웹브라우저의 작동 원리- 도메인 주소나 아이피로 서버에 요청을 하면 페이지를 받아온다.-html, css, js등의 정보가 담긴 페이지를 받아와서 브라우저에 표시한다.-html: 뼈대, css: 옷, js: 근육 2. html-html은 head(제목)과 body(본문)으로 구성된다.-html은 태그로 작성한다. 다양한 태그가 있으니 필요할때마다 찾아보자. 3. css-css는 html 내부에 태그를 통해 작성한다.-css에서 사용하고 싶은 html 요소에 class를 달아 정의한다.-.[class_name]{...}-css도 레퍼런스가 많으니 필요할때마다 찾아서 쓰자. 4. 폰트 가져오기-구글 폰트에서 원하는 폰트를 찾아서 심는다.-embeded 코드 등을 제공한다. 5. 부트스..

일기 2024.10.28