NOW OR NEVER

Javascript 나의 책 관리하기 프로젝트 만들기 구성 로그인 페이지 2. 리스트 페이지 3. add 화면 3. detail 화면 4. edit 화면 API 사용방법 axios 라이브러리 사용 http 프로토콜을 사용해서 데이터를 요청하고 가져올 수 있는 라이브러리 res 데이터를 활용해서 우리의 view에 표현하게 됨 Promise 활용 axios.post(‘주소’ , { body, }).then(res => { } ); 프로미스 상태로 지원됨(axios.post도 프로미스여서 then을 통해서 서버로부터 데이터를 정상적으로 가져오게 되면 resolve 돼서 res라고 하는 데이터가 우리에게 넘어오게 됨) async-await 활용 const res = await axios.post(‘주소’, { ..

Javascript Promise 프로미스 자바스크립트에서 비동기를 처리하기 위해서 가장 기본이 되는 개념 async와 await를 배우기 위해 알아야하는 개념 프로그램에서 간단한 코드가 순차적으로 한 줄 한 줄 실행된다면 어렵지 않다. 하지만 자바스크립트에서 함수를 호출했는데 그함수가 시작되고 끝나는 동안에도 프로그램은 계속 진행되어야 할 때가 많다. 이럴 때 Promise를 사용하면 비동기적 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. Promise 개체 혹은 Promise 객체로 불림 ES6부터 자바스크립트의 표준 내장 객체로 추가됨 ES6를 지원하는 브라우저나 Node.js에서 전역에 있는 Promise 확인 가능 프로미스 객체 생성 방법 - 1. 생성자(new Promis..

Javascript 객체/개체 object 함수 혹은 클래스로 틀을 만드는 것으로 틀에서 객체를 하나씩 찍어내게 된다. 개발자가 자유롭게 틀을 만들고 그 틀로부터 객체(instance)를 만들어내서 사용하게 된다.객체 만드는 방법 생성자 함수 생성자 함수: 객체를 만들어 내는 틀의 역할을 하는 함수(함수를 만들어서 틀을 만들고 그 틀로부터 new 키워드 이용해서 객체 instance 생성) 생성자 함수를 통해서 객체를 생성하면서 객체 내부로 데이터 넣을 수 있도록 밖에서 생성자 함수를 생성시 인자를 넣어줘야 한다. Object로 객체 만들기 new Object() object 는 javascript 내에서 가장 기초 객체로 내장되어 있는 것이다. 별로 권장되는 방법은 아님 객체에 속성 추가하기 prope..

JavaScript 자료형(Data type) 동적 타이핑 Dynamic typing 변수에 어떠한 데이터를 할당하느냐에 따라 그 변수의 type이 결정된다. 값에 따라서 변수의 type이 달라지는 것이 동적 타이핑이라고 한다. 자바스크립트는 변수가 가지는 고정 타입이 없다. 하지만 타입 자체가 없는 것은 아니다 console.log(변수, typeof 변수) : 변수에 할당된 값과 변수의 데이터 타입 확인 ES6 기준 제공하는 데이터 타입 기본 타입(Primitive values) 기본 자료형을 가지고 객체를 만들어 내는 것이 중요하다. Boolean - 표준 내장 객체로도 사용 가능 new Boolean(true 혹은 false); 생성자 함수를 통해 초기값으로 true 혹은 false를 지정한 객체..

JavaScript 자바스크립트는 무엇인가 자바스크립트는 프로그래밍 언어 스크립트 언어(어떤 어플리케이션에서 그 코드를 해석하고 실행할 수 있는 엔진이 존재해서 그 애플리케이션을 제어하는 용도로 사용되는 언어) 자바와는 관련이 없다 인터프리터 언어(엔진이 소스코드를 한 줄씩 읽으면서 바로 바로 해석하고 실행) 자바스크립트를 해석하고 실행하는 스크립트 엔진을 가지고 있는 대표적인 애플리케이션은 웹브라우저이다. 자바스크립트가 널리 사용되는 이유도 웹브라우저에서 사용되기 때문이다. 웹브라우저가 웹페이지를 html, css, js를 통해 실행하는데 html은 웹페이지의 구조와 컨텐츠를 표현하고 css는 그모습을 예쁘게 만들어준다. js는 동적으로 콘텐츠를 바꾸고 ui를 이동시키는 여러가지 일을 해낼 수 있다. ..

Git & GitHub GitHub에 코드를 올리는 과정 1. git을 쓸 컴퓨터 프로젝트 폴더에 git을 쓸거라고 명령 2. 코딩 3. git add: 변경한 파일 중 올리기 원하는 것만 선택 ex) 열개 파일 변경시 세개만 올리고 싶을시 4. git commit -m “설명” :선택한 파일을 한 덩어리(commit)로 만든 후 그 덩어리에 대한 설명을 적어주기(이것을 GitHub에 올리는 것이다) ex) 메인화면 클릭 버그 고치기 5. GitHub 사이트에서 프로젝트 저장소 만들기(블로그 만드는 것과 동일) 6. git remote add : git을 쓸 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기 7. git push : 내 컴퓨터에 만들었던 덩어리 GitHub에 올리기 익히기 CLI(..

Git & GitHub Git & GitHub 필요한 이유 git 전에는 svn이라는 버전관리 있었는데 철학은 동일한데 구현방법과 사용방법이 많이 다르다. 그래서 git이 더 고급지게 구현해서 git을 많이 사용하는 추세 효율적인 개발 협업 가능 클라우드 저장소의 경우 github 말고도 gitlab이나 BitBucket 같은 서비스들이 많은데 사용자 수가 제일 많은 github 사용하는 것이 좋음 버전 관리 git은 두 명의 개발자가 하나의 서비스를 만들 때 따로 조금씩 작업하다가 내가 원할 때 코드를 합칠 수 있고 백업도 쉽게 할 수 있는 방법이다. 버전관리: 코딩을 할 때 ctrl+z를 사용해 이전 상태로 되돌리는 것이 아니라 원하는 시점마다 깃발을 꽂고 즉 버전을 만들고 이들 간에 자유롭게 돌아다..

Github 랜딩페이지 클론 코딩 Footer 1. 구조 파악, 메뉴 링크와 카피라이트 footer 영역은 pricing 영역 끝부터 마지막 페이지 까지 화면 중앙 콘텐츠 몰림 : inner 존재 화면 클 시 왼쪽 메뉴(카피라이트), 로고, 오른쪽 메뉴(contact gitjhub~) 크게 수평으로 형성 화면 특정이상 작아질 시(반응형이 되었을 때) 로고 없고 contact github~, 카피라이트~ 순으로 수직으로 쌓임(그래서 일단 이렇게 html 구조 형성 후 css로 수평으로 형성) 같은 메뉴 스타일 형성할 것이기 때문에 site-links 라는 같은 class를 ul(왼쪽메뉴, 오른쪽 메뉴) 태그에 부여 logo 클릭 시 메인 페이지로 이동 카피라이트 부분 제거하고는 모든 메뉴는 a태그로 wra..

Github 랜딩페이지 클론 코딩 Visual(header 아래 쪽 section) 4. 회원가입 양식 구조 사용자 이름, 사용자 이메일, 사용자 비밀번호 받는 input 요소 세개로 구분되어 있고 비밀번호 받는 밑에는 특정한 설명 작성되어 있고 그 밑에는 회원가입(sign up) 버튼과 함께 밑에 특정한 텍스트 작성되어 있음 input 요소 3개, 설명 2개, 버튼 1개 form 태그 내에서 div 태그로 특정하는 순간 div 태그가 너무 많아서 스타일을 설정하고자 하는 요소에만 적용되는 것이 아니라 div태그 모두에 적용될 수도 있으므로 input 요소들을 ul태그의 li태그 안 요소로 명시적으로 정의 input요소 각각에 class=”input—text” 부여해서 공통속성 부여 비밀번호와 sign ..

Github 랜딩페이지 클론 코딩 Header header가 아닌 header 안 inner 클래스를 가진 요소에서 header 높이를 지정하는 이유는 header 자체에 높이를 주게 되면 header 안 inner는 높이를 갖지 못한다. 그래서 높이를 두번 지정하게 되는 번거로움을 겪을 수 있다. 하지만 header 안 inner에 높이를 주게 되면 header는 height:auto가 기본값으로 자동으로 동일한 높이를 가질 수 있어 한번만 높이를 입력해도 되기 때문이다. 화면 가운데 정렬로 굉장히 많이 쓰는 방법: margin: 0 auto; 로 header inner 영역(메뉴 들어있는 영역 화면 가운데 정렬, 이 속성을 쓸 때는 이 속성을 쓰는 요소에 기본적인 가로사이즈(max-width, wid..