맨땅에 헤딩

uuid란 리액트에서 사용하는 라이브러리로서, 고유한 id값을 자동으로 추가해줘서 편리하다. 1. 사용법 1️⃣ install npm install uuid npm을 사용하면 위와같은 코드를, yarn을 사용하면 yarn add uuid 를 통해서 install 해준다. install이 완료되면 아래와 같이 나온다. 2️⃣ import import { v4 as uuidv4 } from 'uuid'; 사용하는 곳에서 uuid를 import해준다. 만약 List.jsx라는 파일에서 사용하고 싶으면 그 파일의 상단에 import해주면 된다. (v4버전을 사용하기 때문에 v4라고 적어줌, 버전에 유의하자! 버전의 자세한 설명을 보고 싶으면 npm uuid 사이트에 들어가서 정보를 볼수있다) 3️⃣ 고유 key..

1️⃣ 실행컨텍스트 코드를 실행하는데 필요한 환경을 제공하는 객체 (환경: 코드 실행에 영향을 주는 조건이나 상태) 식별자결정을 더욱 효율적으로 하기 위한 수단 모든 자바스크립트의 모든것은 실행컨텍스트 내에서 발생한다. 이 실행컨텍스트는 전체 자바스크립트 코드가 실행되는 큰 상자 또는 컨테이너라고 가정할 수 있다. 자바스크립트를 실행시키면 자바스크립트 엔진은 콜스택이라는 통에 전역실행컨텍스트를 담는다. 만약 전역에서 함수A를 호출할 경우, 함수A의 실행 컨텍스트를 생성해서 또 스택에 담는다. (가장 상위에 있는 실행컨텍스트가 현재 활성화된 실행컨텍스트이다) 1 함수를 호출한 후 순서대로 나열하면, 호출된 함수에 2 실행컨텍스트를 생성하고 이를 3 실행컨텍스트 스택에 push한다. 그 후 함수는 본인의 4..

🤩 useRef 🤩 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다. 1. 형식 1️⃣ 생성 const 변수명 = useRef(초기값) useRef는 변수명에 초기값을 적는 식으로 만든다. ➡️ 이러한 결과값으로, {current: 초기값} 을 지닌 객체가 반환된다. useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 ..

리액트에서 여러개의 input상태를 useState를 통해서 관리하는 것을 연습하였다. input상태를 하나하나 각각 관리하는것은 그래도 이해가 잘됐는데 여러개를 한꺼번에 관리하기 위해서 useState에 객체의 형태로 넣어주고, 그것을 e.target의 name의 값으로 받아오는 작업을 하면서 헷갈리는 지점이 발생하였다. 그래서 부족했던 부분에 대해서 더 깊게 공부를 하고 이 코드를 완벽히 이해하려고 노력하였다. 내가 부족했던 부분을 크게 정리하면 아래와 같다. 1.. 자바스크립트의 객체의 Key값으로 쓰이는 []값 2. 객체의 구조분해할당 3.이벤트핸들링을 통해서 name의 값을 변경하는 것 일단 만든 결과물은 아래와 같다. 두개의 input에 하나는 이름, 하나는 닉네임을 입력하는 창을 만들었다. ..

1. 자바스크립트의 함수정의 4가지 자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다. 1. 함수 선언식 2. 함수 표현식 3. Function 생성자 함수 4. 화살표 함수 (ES6) case 1 :함수 선언식 function add(x,y){ return x+y; } case 2: 함수 표현식 var add = function(x,y){ return x + y; } case 3: Function 생성자 함수 var add = new Function('x','y', 'return x+y'); case 4: 화살표 함수(ES6) var add = (x,y) => x+y; 2. 함수선언식과 함수표현식의 차이 1️⃣ 형식 함수선언식 function 함수명() { 구현 로직 } 함수표현식 var 함수명 ..

2.20. 오늘은 아침부터 운동하고 공부하러 왔다! 요즘에 운동을 그래도 꾸준히 하니까 체력이 생기고 있는거같다 뿌듯💪💪 앞으로도 계속해서 건강도 잘챙겨야지!! 오늘은 이론스터디하는 날이라서 생성자함수와 this, 콜백함수에 대해서 공부했다. 자바스크립트는 프로토타입기반의 언어라서 생성자함수를 이용하여 객체를 생성했는데, 대부분의 언어들이 클래스기반의 객체지향이라서 모던한 프로그래밍을 위해서 현재는 대부분이 생성자함수보다는 클래스를 사용한다는것을 공부하였다. this를 공부하면서 알게 되었는데 화살표함수는 단순하게 코드축약만 해주는 것이 아니라, 렉시컬환경을 기억한다. 그래서 화살표함수에서 this는 바로 상위스코프를 가리킨다. 리액트로 투두만들기를 하고 있는데 코드를 완벽하게 이해하고 싶어서 같은 코드..

1. 자바스크립트 객체의 형태 {key: value} property 자바스크립트의 객체는 태그와 같은 역할을 하는 key와 거기에 실질적인 값이 들어있는 value로 구성되어있다. 이러한 key + value의 값을 합쳐서 property라고 한다. const user = { id: 1, name: "hihi" } user라는 이름을 가진 객체이다. id와 name이 key값이고, 1과 hihi가 각각의 키에 들어있는 value이다. 🤔 객체의 key값으로 가능한 4가지 형태 1️⃣ 그냥 써주기 { id: 1 } 위의 코드에서 id가 key값이다. 이런 것처럼 키값을 그냥 써주면 된다. 2️⃣ "" (쌍따옴표) 안에 써주기 { "my name": "hihi" } 위의 코드에서는 my name이 key값..

구조분해할당 (Destruncturing assignment) 구조분해할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 1. 배열 구조분해 배열은 순서가 들어있다. 그래서 1번째에 넣은 값은 첫번째에, 두번째에 넣은 값은 두번째에 차례로 들어간다. let [x,y] = [1,2] console.log(x); // 1 console.log(y); // 2 아래와 같이 순서대로 들어가서 x=1, y=2 가 들어간다. users라는 이름의 배열이 있다. user1, user2, user3라는 이름의 변수를 대괄호를 묶어서 선언하고 users 배열을 할당했다. let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] =..

Ajax란? (Asynchronous JavaScript and XML) 자바스크립트를 사용하여 ① 브라우저가 ② 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 장점: 웹페이지의 변경에 필요한 데이터만 서버로부터 비동기 방식으로 전송받음 ➡️ Ajax는 기술, 프레임워크, 라이브러리가 아니다. Ajax는 그저 자바스크립트와 (XMLHttpRequest 객체를 사용해서/ Fetch / Axiox) 클라이언트와 서버가 비동기 방식으로 통신하는것을 말한다. 🤔 동작원리 Ajax는 브라우저에서 제공하는 호스트 객체 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위..

자바스크립트의 객체문법을 사용하는 데이터 포맷(저장) 형식 목적: 데이터를 전송하기 위한 수단 / 설정파일 (ex> Vs code extension) 형식: 1️⃣ key, value값으로 이루어짐 2️⃣ {} , [] 괄호를 이용해서 각각의 데이터를 묶음 XML의 단점을 해결하기 우해 고안된 데이터 형식 자바스크립트의 객체 속성과 동일 { "Influencers" : [ { "name" : "Jaxon", "age" : 42, "Works At" : "Tech News" } { "name" : "Miller", "age" : 35 "Works At" : "IT Day" } ] } 서버가 주고 받는 데이터는 한줄로 쭉 되어있다. 이러한 한줄로 쭉 이어진 텍스트들을 구조화하여 나타낼 수 있어야한다. 데이터..