<<개발일지>>

Too many re-renders.에러 관리자 페이지를 만들다가 만난 문제를 해결하다가 오랜만에 발견한 에러였다 !! 이 코드를 보면 onClick = {forUpdateModal(user)} 로 작성을 했다. 나는 user이라는 객체를 매개변수로 담고 실행시키고 싶었다. 그렇기 때문에 저렇게 하면 되겠지 ~ 라고 했는데 이러한 오류가 나면서 rendering이 무한 반복이 되고 있다라며 에러 설명글이 있었다. 처음에 이걸 보는 순간 아차 싶었다..!! 과거 자바스크립트를 배울 당시 onClick ={콜백함수}를 해줘야 한다는 강사님의 말이 기억났다. 그래서 바로 그렇게 바꿨더니 오류 없이 정상적으로 작동이 되었다. 원인을 파악해 보면 일일반 함수를 넣을 경우 랜더링 되는 과정에서 그 함수가 바로 호출..

"fetch 와 axios는 모두 HTTP 요청을 보내는 데 사용되는 도구이다." fetch ES6 부터 들어온 JavaScript 내장 라이브러리이다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러릴라는 장점으로 상당히 편리하다. fetch("https://localhost:8080/user/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "jiho", description: "hello jiho", }), }).then((response) => console.log(response)); fetch의 장점 1. 자바..

JavaScript 코드를 작성하다 보면 코드 정렬이 깔끔하지 못할 때가 있다. 그럴때마다 매번 단축키를 활용해서 정렬을 해 줘야 하는데, 그냥 저장만으로 정렬을 가능하게 할 수 있는 방법이 있다. 1. cmd + shift + p -> 이 단축키를 클릭하면, 검색창이 나온다. 2.open user setting json -> 그 검색창에 위 문장을 쳐서 들어간다. 3.settings.json -> 아래 사진과 같이 settings.json에 들어간다. 4."editor.formatOnSave": true -> 위 사진에 드래그 해놓은 저 문장을 넣고 저장해 준다. 결과 -> 저장할 때 자동으로 정렬을 해줌으로써 일일이 정렬 단축키를 눌러줄 필요가 없다. !!

리퀘스트와 리스폰스는 헤드와 바디로 되어있다. 헤드에는 여러가지 있는데 그 중 Content-Type 은 뭘까? Content-Type 헤더 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다. 리퀘스트 또는 리스폰스의 바디에는 HTML, JavaScript 그리고 JSON 데이터 외에도 이미지 영상까지 많은 것들이 있다. 바로 이러한 데이터들의 타입 정보가 'Content - Type' 헤더에 담겨 있다. 이 'Content - Type 헤더는 '주 타입(main type) / 서브 타입(sub type) ' 형식으로 되어있따. 주 타입의 종류 1. 주 타입이 text인 경우(텍스트) 일반 텍스트 : text/plain CSS 코드: text/css HTML 코드: tex..

객체에 대한 정의와 목적은 다양하다. 단순한 목적으로의 객체는 주로 기본 타입으로 구성된 2개 이상의 값들을 묶어서 한 번에 관리하기 위한 용도가 있다. 1. 객체의 초기화(생성) JavaScript에서는 객체를 생성하는 방식으로 크게 2가지가 있다. Object() 생성자 함수 생성 방식 객체 리터럴 방식 1-1 Object() 생성자 함수 생성 방식 const mouse = new Object(); mouse.name = 'jason'; mouse.age = 29; mouse.color = 'white'; console.log(typeof mouse); // object console.log(mouse); // {name: 'jason', age: 29, color: 'white'} 1-2 객체 리터..

스코프: 사전 의미 그대로 범위를 의미한다. 프로그래밍 언어에서는 주로 특정 시점에서의 코드가 다른 위치의 변수나 값을 참조 가능한 범위의 기준을 의미한다. let result = 0; function add(a, b) { console.log(a, b); // 2, 3 함수 내부에서 자신의 스코프에 위치한 변수 참조 가능 console.log(result); // 0, 함수 내부에서 외부의 변수 참조 가능 return a + b; } add(2, 3); console.log(a, b); //a, b is not defined 외부에서 함수 내부의 변수 참조 불가능 따라서, 자신이 선언된 위치에 의해 다른 코드가 식별자(Identifier) 자신을 참조할 수 있는 유요한 범위가 결정된다. -> resul..

함수(Function) 함수의 어원적 의미는 어떠한 수를 상자에 담고 있다는 의미이다. 프로그래밍은 INPUT과 OUTPUT 사이의 Process를 작성하는 것이라고 볼 수 있는데, 그러한 일련의 코드들을 알기 쉬운 하나의 단위로 묶은 것도 함수라고 볼 수 있다. 우리가 책에서 원하는 내용을 찾기 위해서는 목차(인덱스)를 보거나 북마크 해둔 책갈피 등을 통해 원하는 페이지로 가서 내용을 찾을 수 있듯이, 코드 역시 내용이 길어지면 원하는 코드와 각 코드의 기능 별로 묶어서 관리하기 위해 함수를 사용한다. 현실 세계로 비유하면 무인 판매기인 키오스크나 음료 자판기 등을 예로 들 수 있다. -> 특정 동작에는 특정 결과값만 출력한다. 1. 함수의 기본 구조 2. 함수를 표현하는 여러가지 방식 1. // 첫 ..