Jaddong's Lab

데이터의 기본적인 처리기능인 CRUD(Create, Read, Update, Delete)기준으로 만들어봤다! 정답은 없고, 그냥 개인적으로 고민될 때 참고하면 좋을 것 같아서 작성했다. 1. 보여주기 - 읽기 showName() displayName() renderName() paintName() readName() 2. 입력하기 - 생성 createName() registerName() addName() 3. 수정하기 - 갱신 updateName() modifyName() changeName() editName() 4. 삭제하기 - 삭제 deleteName() removeName() destroyName() 5. 단순 확인용 findName() checkName() isName()

var는 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. let과 const는 블록 레벨 스코프(Block-level scope) 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. 1. var 아래와 같이 블록 내에 선언해도 foo는 전역변수여서 값이 재할당된다. var foo = 123; // 전역 변수 console.log(foo)..

함수 선언문 (Function Declaration) 어디서든 함수에 접근 가능(스크립트 실행 준비단계에서 전역에 선언된 함수 선언문을 찾아 해당 함수를 생성하기 때문) 그래서 코드 구성이 더 자유로움 sum(2, 3); function sum(a, b) { return a + b; } 엄격 모드에서 함수가 선언된 코드 블록 안에서만 유효 let age = 16; if (age < 18) { welcome(); // \ (실행) // | function welcome() { // | alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내 } // | 어디에서든 유효합니다 // | welcome(); // / (실행) } else { function welcome() { alert("안녕하..

함수의 인수로 함수를 전달하고, 이 인수로 전달한 함수를 "나중에 호출(called back)" 하는 것 말로 풀면 이해가 안 될 수 있으니, 예시를 보도록 하자. function quest(question, yes, no) { if (confirm(question)) yes()동의 else no();//미동의 } function showAgree() { alert( "동의하셨습니다." ); } function showDisagree() { alert( "미동의 버튼을 누르셨습니다." ); } // 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨 quest("동의하십니까?", showAgree, showDisagree); 함수 quest의 인수로, 함수 showAgree와 ..

* 2021.05.20 스펙에 추가된 지 얼마되지 않아 폴리필이 필요함! ' || '는 첫번째 truthy 값을 리턴한다. a가 참이면 a 리턴, 아니면 b 리턴한다. null || '1'// '1' undefined || '1'// '1' '1' || null// '1' 0 || '1'// '1' ' ?? '는 첫번재 정의된(defined) 값을 리턴한다. a가 null이나 undefined 이면 b리턴, 아니면 a 리턴 null ?? '1'// '1' undefined ?? '1'// '1' '1' ?? null// '1' 0 ?? '1'// 0 // 0은 falsy하기때문에 '1'이 리턴될 것 같지만, null도 undefined 도 아니기 때문에 0을 리턴한다. '??' 는 truthy/falsy..

1. 문자열끼리 비교 (유니코드) - 문자열 중에서 앞에서 부터 순서대로 비교하게된다.(사전순) - 소문자의 유니코드 값이 기본적으로 크다. alert( 'Z' > 'A' ); // true, 'Z'가 'A'보다 유니코드 값이 큼 alert( 'Glow' > 'Glee' ); // true, 'o'는 'e'보다 유니코드 값이 큼 alert( 'Bee' > 'Be' ); // true, 'e'는 빈 값 보다 유니코드 값이 큼 2. 다른 형을 가진 값 간의 비교 - 비교하려는 값의 자료형이 다르면, 값 들을 숫자형으로 바꿔 비교하게된다. alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다. alert( '01' == 1 ); // true, 문자열 '01'..

useState로 object형태의 상태를 업데이트 하는 방법은 두 가지가 있다. 보기엔 문제없이 동일하게 동작하지만 차이가 있고, 1번보다는 2번은 권장한다. const [userInput, setUserInputs] = useState({ title: '', amount: '', date: '' }); const titleChangeHandler = (event) => { // 방법 (1) : not good setUserInputs({ ...userInput title: event.target.value }); // 방법 (2) : good setUserInputs((prevState) => { return { ...prevState, title: event.target.value } }; } 리액..

Object와 Array의 경우 레퍼런스 타입이어서 아래와 같이 값이 복사되는 것 같지만 그렇지 않다. // 변수 person과 person의 value는 각각 저장됨. const person = { name: 'Max' } const secondPerson = person; // 값을 그대로 복사하는 것 같지만, secondPerson이 person의 value를 가르키게 됨(포인터 값) person.name= 'Ginny'; console.log(secondPerson); // { name : 'Ginny' } // secondPerson는 동일하게 person의 value의 값을 가르키고 있으므로 영향을 받아 위와 같이 찍힘 별도의 person과 별개의 secondPerson을 만들기 위해서는 아래..

Classes are essentially blueprints for objects. Class는 Object의 필수적인 설계이다. Class는 class 이름이 있고 프로퍼티와 메소드를 둘 다 가지고 있을 수 있다. constructor 디폴트 메소드로 해당 class를 인스턴스화할 때마다 실행된다. class Human { constructor(){ this.gender = 'male'; } printGender() { console.log(this.gender) } } class Person extends Human { constructor(){ super(); // extends를 쓸 때 이것이 없으면 상의 클래스인 Human의 constructor가 실행되지 않아 에러가 발생한다. this.na..

인스타 피드에서 만든거 보고 너무 귀여워서 css 안까먹을 겸 만들어서 깃헙에만 넣어놨었는데 오랜만에 깃헙로그인했다가 찾아서 꺼내올린다. (interactive web 공부하고 싶다면서 현생이 그냥 지나갈 것 같다.... 이것도 일이었다면 재미없었겠지....) See the Pen by Jayoung Lee (@Jayoung) on CodePen.