Notebook

🔖TAG 💡Computed Property Name, 💡hasOwnProperty, 💡Lockup Table, 💡Object Destructuring, 💡Object.freeze, 💡Optional Chaining, 💡Prototype조작지양, 💡Shorthand Properties, 💡객체직접접근지양📕 출처😌 클린코드 자바스크립트 | Udemy 자료🙄 Git: pocojang/clean-code-js (github.com) 목차 1. 과정 소개 2. 변수 다루기 3. 타입 다루기 4. 경계 다루기 5. 분기 다루기 6. 배열 다루기 7. 객체 다루기🚩 7-1. Shorthand Properties 7-2. Computed Property Name 7-3. Lockup Table 7-4. Object D..

🔖TAG 💡Array.length, 💡Continue&Break, 💡mapVSforEach, 💡메서드체이닝, 💡배열 == 객체, 💡배열고차함수, 💡배열요소접근, 💡불변성, 💡유사배열객체📕 출처😌 클린코드 자바스크립트 | Udemy 자료🙄 Git: pocojang/clean-code-js (github.com) 목차 1. 과정 소개 2. 변수 다루기 3. 타입 다루기 4. 경계 다루기 5. 분기 다루기 6. 배열 다루기🚩 6-1. JavaScript의 배열은 객체다 6-2. Array.length 6-3. 배열 요소에 접근하기 6-4. 유사 배열 객체 6-5. 불변성 6-6. for 문 배열 고차 함수로 리팩터링 6-7. 배열 메서드 체이닝 활용하기 6-8. map vs forEach 6-9. Contin..

🔖TAG 💡DefaultCase, 💡earlyReturn, 💡else if/else 피하기, 💡null병합연산자, 💡Truthy&Falsy, 💡값식문, 💡단축평가(short-circuit evaluation), 💡드모르간의법칙, 💡부정조건문지양, 💡삼항연산자📕출처😌클린코드 자바스크립트 | Udemy자료🙄Git: pocojang/clean-code-js (github.com)목차1. 과정 소개 2. 변수 다루기 3. 타입 다루기4. 경계 다루기5. 분기 다루기 🚩    5-1. 값식문    5-2. 삼항 연산자 다루기    5-3. Truthy & Falsy    5-4. 단축평가 (short-circuit evaluation)    5-5. else if 피하기    5-6. ..

🔖TAG 💡prefix|suffix, 💡경계, 💡매개변수의순서, 💡이상|초과, 💡이하|미만, 💡접두사|접미사, 💡처음|끝📕 출처😌 클린코드 자바스크립트 | Udemy 자료🙄 Git: pocojang/clean-code-js (github.com) 목차 1. 과정 소개 2. 변수 다루기 3. 타입 다루기 4. 경계 다루기 🚩 4-1. min - max 4-2. begin - end 4-3. first - last 4-4. prefix - suffix 4-5. 매개변수의 순서가 경계다 5. 분기 다루기 6. 배열 다루기 7. 객체 다루기 8. 함수 다루기 4. 경계 다루기 (이상, 초과 ~ 이하, 미만) 코드를 작성할 때 경계에 대한 컨벤션을 미리 정하는게 유지보수에 유리합니다. 경계란 최대값과 최소값의 포..

🔖TAG 💡eqeq, 💡instanceof, 💡isNaN, 💡null, 💡Primitive, 💡reference, 💡typeof, 💡undefined, 💡타입검사, 💡형변환 📕 출처😌 클린코드 자바스크립트 | Udemy 자료🙄 Git: pocojang/clean-code-js (github.com) 목차 1. 과정 소개 2. 변수 다루기 3. 타입 다루기 🚩 3-1. 타입 검사 3-2. undefined & null 3-3. eqeq 줄이기 3-4. 형변환 주의하기 3-5. isNaN 4. 경계 다루기 5. 분기 다루기 6. 배열 다루기 7. 객체 다루기 8. 함수 다루기 3. 타입 다루기 3-1. 타입 검사 typeof 는 문자열로 반환하는 연산자 입니다. const str = '문자열' const n..

🔖TAG 💡scope, 💡var지양, 💡변수다루기, 💡임시변수제거, 💡함수표현식, 💡호이스팅 📕 출처😌 클린코드 자바스크립트 | Udemy 자료🙄 Git: pocojang/clean-code-js (github.com) 목차 1. 과정 소개 🚩 1-1. 클린 코드를 고민해야하는 이유 1-2. JS의 특성을 파악해야하는 이유 1-3. JS Everywhere 1-4. 사례를 파악하고 의식적으로 수련하기 2. 변수 다루기 🚩 2-1. var를 지양하자 2-2. function scope & block scope 2-3. 전역 공간 사용 최소화 2-4. 임시변수 제거하기 2-5. 호이스팅 주의하기 3. 타입 다루기 4. 경계 다루기 5. 분기 다루기 6. 배열 다루기 7. 객체 다루기 8. 함수 다루기 1. ..

이전 발행 글 HTML/CSS : 2022.06.15 - [WEB/Html & Css] - Bootstrap Basic JS : 2022.06.15 - [WEB/JavaScript] - 타자게임 이벤트 처리 (basic) 이번 실습 링크 👍 실습 링크 1 (데이터상태처리) 👍 실습 링크 2 (API 연동) 데이터상태처리 (setInterval 사용하기) 🎈깃 링크로 setInterval 부분만 확인하기 ☜ COMMENT 확인하기 로직 확인하기 1. input에 이벤트 리스너를 넣고 input 이벤트가 발생하면 콜백함수가 실행되도록 한다. 2. 콜백함수로 (단어를 랜덤으로 바꿔주기 + 시간1초씩 감소) 하는 함수를 넣어준다. 2-1. 1초씩 감소하는 setInterval의 콜백함수로 1초씩 감소하다가 값이..

타자게임 only HTML/Bootstrap: 2022.06.15 - [WEB/Html & Css] - Bootstrap Basic 타자게임 JS 적용 : JS 실습 링크 학습 목표 JS 코드 흐름을 이해하기 JS 코드 const $ = tag => document.querySelector(tag) const $$ = tag => document.querySelectorAll(tag) const wordInput = $('#word-input')// 1 const current = $('#current-word') const scoreDisplay = $('#score') const timeDisplay = $('#time') const message = $('#message') let words = [..

🎈실습자료: https://blog.kakaocdn.net/dna/84fqL/btrENHtVyVd/AAAAAAAAAAAAAAAAAAAAAHZwXkTDuKdwThuuxMSeJc51_4HMc3S0Gw1cGKdTqi0B/tfile.html?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=M9m96w%2FDvgb9T%2BucoKxFFU%2BgSns%3D 🎈HTML/CSS 설명은 이전 글 참고 : TODO HTML/CSS HTML Code 더보기 Todo List 추가 favorite_border JS TODO1 done clear favorite JS TODO1 done clear CSS Code 더보기 /* Initialize */ * { margin: 0; padding: 0; outline: none; } li { list-style: none; } .wrapper { height: 100vh; width: 100%; /* 아이템 세로로 줄 세우기 */ display: flex; flex-di..

HTTP 통신 ? HTTP란 HTTP(HyperText Transfer Protocol)는 웹상에서 정보를 주고받을 수 있는 통신규약이다. 통신 규약은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다. 즉, HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다. HTTP를 통해 전달되는 자료는 http:로 시작하는 URL(web address)로 조회할 수 있다. - 위키백..