프론트 엔드 공부 블로그

JSON이 대체 뭘까!! JSON.stringify도 있고 parse도 있고... 한데 JSON이 뭐길래 이 형식으로 바꿔치기를 해야하는 걸까?? 궁금해서 MDN 사이트에 들어갔다가 대문짝만하게 내 생각을 써놔서 웃겼다 MDN의 묘한 번역체 때문에 절반정도 읽다가 그냥 다른 블로그 참조하는 일도 많았는데... JSON에 대한 설명은 읽다보니까 이해도 되고 마지막에 무려 과제까지(!!) 내줘서 개념과 메소드를 익힐 겸 따라해보기로 했다. JSON = JavaScript Object Notation JSON은 JavaScript Object Notation의 약자로, 데이터를 주고받기 위해 자바스크립트 객체 문법으로 작성한 포맷이다. 데이터를 주고 받을 때 JSON형태로 전송하며 JS의 문법으로 작성돼 JS..

fetch 함수는 브라우저에서 제공하는 API 메소드로, 서버에 정보를 요청하고 받아올 수 있는 메소드다. fetch 함수는 첫번 째 인자로 url을 받고, 두번 째 인자로 [선택] option객체를 받아 Promise 타입의 객체를 반환한다. let promise = fetch(url, [options]) option에 아무 값도 주지 않을 경우 GET메소드가 실행되며 url의 컨텐츠를 다운로드 한다. fetch 함수는 HTTP Status Code가 404나 500을 반환해도 HTTP error를 reject하지 않는다. 대신 HTTP의 상태는 응답 프로퍼티인 status와 ok를 통해 확인할 수 있고, Status가 200-299가 아닐 경우 ok는 false상태인 resolve가 반환된다. sta..

1. 배열 let cats = ['짱구', '호두']; console.log(cats); // ['짱구', '호두'] // 1. .length console.log(`우리집 고양이는 총 ${cats.length} 마리예요~ 너무 귀여워`); // 우리집 고양이는 총 2마리예요~ 너무 귀여워 // 2. push :: 배열 맨 끝에 항목 추가하고 배열 길이를 반환 (왜?) cats.push('밍'); console.log(cats); // ['짱구', '호두', '밍'] // 3. unshift :: 배열 처음에 항목 추가하고 배열 길이를 반환 (왜??) cats.unshift('윤') console.log(cats); // ['윤', '짱구', '호두', '밍'] // 4. pop :: 배열의 마지막 요소..

참고한 강의 : https://youtu.be/FXDjmsiv8fI 참고한 강의 2: https://youtu.be/GaKjTjwcKQo git init git의 관리 하에 두게 하는 명령어. 폴더 처음 만들었을 때 ㄱㄱ git config --global user.name "이름" git config --global user.email "이메일" 로컬에서 기본적으로 사용할 이름과 이메일을 입력하는 명령어. --global옵션 없이 사용하게 될 시 디렉토리마다 설정할 수 있음. --global옵션을 사용한 값보다 우선적으로 사용. [참고 : Git 최초 설정: 사용자 이름과 이메일 설정하는 방법] git status git에 의해 관리되는 파일들의 상태를 알려주는 명령어. git add . 커밋하기 전 ..

노마드 코더 JS 크롬 앱 강의를 듣고 투두리스트를 적는 웹 페이지를 만들었다. 강의에서 알려준 JS메소드들을 적어놓고 예제부터는 혼자 힘으로 해보려고 했다. 별 것 아니지만 혼자 힘으로 응용했다는 것에 만족하기로... 강의 주소: https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co html 코드 to-do List 가장 처음엔 제목과 값을 입력받는 밖에 없다. 이후 사용자가 값을 입력하고 submit 버튼을 통해 제출하면 JS에서 값을 받아와 태그 아래 리스트를 작성한다. 태그를 이용해 JS와 html을 연결해준다. 입력 폼 JS..