alex im

import { useState } from "react"; const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", }) const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }) } return ( 오늘의 일기 ) } export default DiaryEditor; handleChangeState의 setState에 ...state를 밑으로 위치를 바꾸면 안된다. state값의 기본값이 "" 이기 때문에 ""에서 변하지 않게되므로 ...state의 위치를 첫번째에 위치 시켜야한다. import..

1. class 컴포넌트 2. 함수 컴포넌트 - this 쓸 일이 없다. - 코드 짧고 가독성이 더 좋음 출처 https://www.youtube.com/watch?v=Sph9Pqi1Mz0

📗 Class - class는 함수의 한 종류이다. - class 정의는 항상 "strict mode"다. - class 선언은 함수 선언과 달리 호이스팅의 대상이 아니다. - 선언한 class는 재선언 할 수 없다. - class의 메서드는 열거할 수 없다. : non-enumerable 📗 constructor - 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 생성자 메서드 - new에 의해 자동으로 호출되므로 특별한 절차 없이 객체를 초기화 할 수 있다. - class 안에 한 개만 존재할 수 있다. https://ko.javascript.info/class 클래스와 기본 문법 ko.javascript.info class User { constructor(name) { this.name = n..

📗 States - 리액트는 데이터 중심으로 움직인다. (데이터와 화면의 일치) - component는 데이터, 화면을 하나로 묶어놓은 것이고 화면에서 바뀔 부분을 state로 만든다. 📗 state와 props - props(properties) 와 state는 일반 JavsScript 객체이다. - 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있다. (컴포넌트의 render() 함수를 위한 입력 데이터라고 말할 수 있다.) - props와 state는 HTML 출력이 나오는 "raw data"를 구성한다. 📗 state와 props의 차이점 - props는 함수 매개변수처럼 컴포넌트에 "전달"되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 "안"에서 관리된다. - compo..

프렙 과정에서 과제로 나왔던 parallel, waterfall 이 과제를 하면서 비동기에 대해 많이 배우게 되었다. 이번에는 이 과제를 promise를 사용해서 구현해 보았는데 이걸 기록해 놓으려 한다. 1. Parallel 병렬 function parallel (tasks, finalCallback) {} 수행해야 하는 함수들이 모여있는 tasks, tasks들이 모두 다 수행되고 나서 마지막으로 수행되어야 하는 finalCallback 테스트코드 const order = []; parallel( [ function (callback) { setTimeout(function () { order.push(1); callback(1); }, 150); }, function (callback) { setT..

햄버거를 먹으려면 맥도날드에 가서 바로 주문할 수 있다. 앞의 사람이 음식을 받지 않아도 바로 주문할 수 있다. 근데 만약 앞사람의 주문이 다 처리되고 나서야 주문할 수 있다면 어떻게될까? 효율적이지 못한 방법이라고 생각할 수 밖에 없다. 그리고 고객들의 불만이 쌓여갈 것이다. 이 간단한 예시로 비동기와 동기를 이해할 수 있다. 맥도날드의 예를 웹페이지로 바꿔서 생각해보면 더 잘 알 수 있다. 네이버 홈페이지를 예로 들어 홈페이지에 있는 하나 하나의 리소스가 주문이라고 생각해보자. 동기적으로 홈페이지를 구현하면 앞의 주문이 처리가 끝나야 다음 주문이 처리되기 때문에 하나씩 순차적으로 페이지에 나타나게 되고 답답한 페이지가 될 수 밖에 없다. 비동기는 작업을 병렬적으로 실행할 수 있어 효율적으로 작업을 수..

JavaScript에서 타입을 검사하는 건 쉽지 않습니다. 동적인 언어라서 타입도 동적으로 변할 수 있기 때문입니다. 타입을 검사할 때는 하나의 방법만 사용하지 않고 상황에 맞는 타입 검사 방법을 선택해야합니다. 타입을 검사하는 방법 중 typeof, instanceof, Object.prototype.toString, Array.isArray 4가지를 알아보도록 하겠습니다. 1. typeof typeof는 타입을 문자열로 반환합니다. 함수처럼도 사용 가능합니다. function myFunction() {}; typeof myFunction; // 'function' class MyClass {} typeof MyClass; // 'function' class도 function으로 나온다. // wrap..

(클린 코드 강의를 듣고 정리한 글입니다.) 📗 임시변수란 무엇인가요? Scope안에서 전역변수처럼 활용되는 것 📗 임시변수를 왜 줄여야 하나요? 임시객체를 const로 사용한다고 하더라도 함수가 커지면 전역공간이나 다름없는 나올 수 있습니다. 문제를 줄이기 위해 함수를 잘게 나누어야 하는데 임시변수 안에서 계속 로직을 작성하게 된다면 명확하지 못한 코드가 될 수 있습니다. 임시변수를 쓰게 되면 명령형으로 가득한 로직이 나옵니다. 어디서 어떻게 잘못됐는지 디버깅이 어렵습니다. 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽습니다. 코드 유지보수가 어렵습니다. 밑에서 예시와 예시를 수정한 코드를 살펴보고 해결책을 살펴보도록 하겠습니다. (예시 코드는 그저 예시를 위한 코드로 동작을 예상하는 코드는 아닙니다..

Given an array arr, replace every element in that array with the greatest element among the elements to its right, and replace the last element with -1. After doing so, return the array. 배열 arr가 주어지고 모든 엘리먼트를 오른쪽에 있는 엘리먼트 중 제일 큰 엘리먼트로 바꾸세요. 그리고 마지막 엘리먼트는 -1로 바꾸세요. 마지막으로 배열을 리턴하세요. - 처음 푼 코드 var replaceElements = function(arr) { let greatestNumber; for (let i = 0; i < arr.length; i++) { greatestN..

Given an array nums of integers, return how many of them contain an even number of digits. 정수가 담겨있는 배열이 주어지고, 짝수 자릿수가 몇 개인지 리턴하세요. Example 1: Input: nums = [12,345,2,6,7896] Output: 2 Explanation: 12 contains 2 digits (even number of digits). 345 contains 3 digits (odd number of digits). 2 contains 1 digit (odd number of digits). 6 contains 1 digit (odd number of digits). 7896 contains 4 digits ..