Taak-e's Dev-Log

항해99 3주차 Weekly I Learn ( DOM, Serverless )

3week KeyWord DOM (Document Object Model) 문서 객체 모델 1) DOM이란? 문서 객체모델(DOM) 은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다. 자바스크립트는 이러한 객체 모델을 이용해서 다음과 같은 작업을 할 수 있다. - 새로운 HTML 요소나 속성을 추가 - 존재하는 HTML 요소나 속성을 제거할 수 있다. - HTML 문서의 모든 HTML 요소와 속성을 변경할 수 있다. - HTML 문서에 모든 CSS 스타일을 변경할 수 있다. - HTML 문서에 새로운 HTML 이벤트..

양방향 바인딩(2 way data-binding)

1. 데이터 바인딩(Data-Binding) 이란? 양방향 바인딩을 알아보기전에 먼저 데이터 바인딩이란 '화면에 있는 객체'와 '데이터'를 일치시켜주는 것으로 쉽게 말해 JS 데이터를 HTML 데이터와 같도록 해주는 것이다! 사용자가 입력한 정보를 얻어와 찾아온 데이터를 갱신하는 것이 기본적인 웹 기술의 데이터 바인딩이다. 2. 양방향 바인딩(2 way data-binding) 이란? - 말 그대로 백단과 프론트의 뷰 양쪽 방향으로 데이터 일치가 가능한 것이 양방향 데이터 바인딩입니다. HTML JS 양쪽으로 데이터 갱신이 가능합니다. - 장점 : 코드의 사용면에서 코드량을 크게 줄일 수 있습니다. - 단점 : 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있..

[JavaScript] 유사 배열 객체(Array-like objects)

유사 배열 (Array-like objects) 객체 1. 유사 배열 (Array-like objects) 객체란? 유사 배열은 [ ] 로 감싸져있어 배열처럼 보이지만 들여다보면 key 값으로는 숫자를 가지고 length값을 가지고 있는 말 그대로 객체 유사 배열은 당연히 배열이 아니기 때문에 배열에 사용하는 메서드(forEach, map, filter, reduce 등)들을 사용할 수 없다. // 유사배열의 형태 const ex = { key: value, // 여기서 key 값은 숫자여야한다! length: 1, }; // tak 이라는 key 값을 숫자로 가지고 length 값을 가지는 유사배열 const tak = { 0: 'Hi', 1: 'Nice', 2: 'to', 3: 'meet', 4: '..

항해99 2주차 Weekly I Learn ( ES, ES5 vs ES6 )

2week KeyWord JavaScript의 ES란? 1) ES의 탄생 배경 브라우저의 전쟁 시절 개발자들은 치열한 경쟁의 시대에 살았다. 넷 스케이프 사의 자바스크립트를 이어 MS사에서도 IE 3에 JScript 라는 이름으로 자바스크립트를 탑재하였다. 자사의 웹브라우저 사용자를 늘리기 위해 서로 기능을 넣어가다보니 JavaScript와 JScript는 시간이 지날 수록 달라지는 경향을 보였다. 이러한 깊은 대립 상황으로 European Computer Manufactures Association (ECMA, 현 ECMA International) 에서는 이러한 자바스크립트에 대한 표준을 내리게 된다. 또한 ECMA에서는 자바스크립트의 표준 및 다른 표준안도 정하기에 구분을 위해 262라는 숫자를 붙..

항해99 1주차 Weekly I Learn ( JWT, API )

What did I do - 1주차에는 어떻게든 하나의 프로젝트를 완성해 내는 완성을 목표로 시작해 우리의 첫 프로젝트인 Goo-글램핑이라는 글램핑 리뷰, 정보 플랫폼을 만들었다. - 로그인, 회원가입, 반응형 디자인, 리뷰 리스트, 사진 업로드 및 출력하기, 수정 등 다양한 기능을 이용해 함께 웹 플랫폼 구축 - 프로젝트 시작 전 S.A(Starting Assignment) 작성도 해보고 git hub를 통한 프로젝트였기에 git, git hub에 개념에도 한 발 가까워졌고 이제는 다룰 수 있다 정도의 시작점까지 온 것 같다. - 웹의 기본적인 원리 GET, POST, Server, html, url 등 웹이 동작할 수 있는 구성 요소에 대해서도 조금은 알게 되었다. - 항해 99 6기 첫주 7조로써의..

[Chapter 1] 7조 S.A(Starting Assignment)

1. 프로젝트 명 구글램핑(Goo_glamping) - 추천, 리뷰 플랫폼 2. 소개 코로나 이후 사람이 많은 실내를 피해 사람이 적은 프라이빗한 공간을 찾으면서 캠핑 및 글램핑을 찾는 사람들이 많아지고 있어 이용했던 글램핑 장소에 대한 리뷰를 통해 신뢰있는 정보를 제공하고 더불어 인기순 글램핑 장소에 대한 정보도 함께 제공함으로써 나은 글램핑 이용 문화를 통해 장소에 대한 이용 경험을 공유하는 플랫폼입니다. 3. 와이어 프레임 - home / 로그인 페이지 접속하면 나오는 home 화면 - 시작하기를 누르면 로그인 페이지로 이동. 로그인 페이지 - 아이디, 패스워드를 입력 후 로그인 버튼을 누르면 메인 페이지로 이동. 회원가입 버튼을 누르면 회원가입 페이지로 이동. 아이디, 패스워드 일치하지 않거나 없..