호팍이
[Js] 객체의 불변성
JavaScript 2024. 4. 30. 21:46

프로젝트를 진행하던 중에 객체의 형식을 상수로 만들어서 초기값을 모조리 0으로 두고, 이걸 state의 초기값으로 담았었다.이 변수의 값을 api 작업을 통해 바꿔주게 되었었고, 이 값을 setState를 통해 바로 state를 변경시켜주었다.그런데 여기서 예상치 못한 일이 생겼다. setState로 변경을 했는데 값이 2번 변경되어 count가 +1이 되어야 하는데 +2가 돼버린 것이다.. 이는 상수로 만든 객체를 참조하고 그대로 변형시켜 버린 탓이었다.객체 참조가 이루어지기 때문에, 설령 state의 값을 변경하더라도 원래 상수의 초기값인 0도 같이 늘어나 +1이 됐던 것이다.따라서 state의 count+1, 상수 객체의 count+1가 되어 도합 count+2가 된 것이다. 이 경험으로 인해서 객..

article thumbnail
비동기
JavaScript 2022. 9. 16. 01:08

동기(Synchronous)와 비동기(Asynchronous)의 차이 동기 : 동기는 말 그대로 동시에 일어난다는 뜻. 요청과 그 결과가 동시에 일어난다. 쉽게 말해 한 작업이 끝날 때까지 그 작업만 해야한다는 뜻이다. 비효율적임. (ex. 카페 직원이 1명 뿐이라 커피가 나와야 다음 사람이 주문을 할 수 있다.) 비동기 : 동시에 일어나지 않는다. 한 작업이 끝날 때까지 주구장창 기다리는 것이 아니라 다른 작업을 하면서 기다릴 수 있다. 효율적임. (ex. 카페 직원이 500억명 있어 여러 주문을 한 번에 처리할 수 있다.) 콜백(Callback) 함수 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있다. 하지만 자바스크립트에서는 출력값이 없고 그 대신에 콜백 함수를 입력받는 함수들이 많이 있..

article thumbnail
2022.03.07
JavaScript 2022. 3. 8. 10:09

* Return 함수를 사용할 때 반환값을 얻는 것 함수의 기능을 외부에서 사용하고자 할 때 return을 쓴다. 또한 현재 진행중인 함수를 중지 시킨다. return 뒤에 쓰는것은 실행이 되지 않음. * typeof X X의 타입을 알려줌 string인지 number인지 등등 .. * prompt("솰라솰라") 웹 창에 솰라솰라가 나오고 값을 받는 창이 나옴 * parseInt string을 number타입으로 바꿔줌 숫자가 아닐시 NaN으로 표기됨 숫자만 number 타입으로 변환 * boolean 참 거짓을 판별하는 기능을 통틀어 하는 말. * if 만약에~라는 뜻으로 조건문이다. 조건을 여러개 넣을 수 있으며 조건에 합당하는 것을 내보내는 기능. * || , && or과 and를 나타낼때 씀

object 객체 (Javascript, 코린이 공부)
JavaScript 2022. 2. 24. 18:48

object란 단어 해석 그대로 물체, 객체이다. 예를 들어, 사과가 있다. 사과는 물체이며 객체이기 때문에 object이다. 변수로 지정된 값이 객체이기도 하다. (const asdf = ""; -> asdf가 객체) 이 object로 property 즉 속성을 만들자면 apple.color = "빨강" apple.smell = "무취" apple.width = "100g" 등을 만들 수 있다. (객체. 프로퍼티) method도 만들 수 있고.. 참조하는 방법으로는 const apple = { color: "빨강" smell: "무취" width: "100g" } 이렇게 위처럼 힘들게 하나하나 apple을 안치고 프로퍼티를 만들 수 있다. 여기서 method를 만드는 법은, const apple = {..

article thumbnail
배열이란.. (Javascript, 코린이 공부)
JavaScript 2022. 2. 24. 17:55

배열(array)이란? 자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의한다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다. 배열은 만드는 방법은 간단하다. const asdf = ["a", "b", "c", "d" ]; 와 같이 대괄호로 묶어주면 된다. 배열 속에서 요소들은 쉼표로 구분을 해준다. console.log에서 배열 속 요소를 데려오는 법은 console.log(asdf[0]); 와 같이 첫 번째가 0에서부터 시작. 두 번째를 불러오고 싶다면 console.log(asdf[1]); 이런 식으로 해주면 된다. push를 통해서 배열 속에 요소를 추가 할 수 있다.

article thumbnail
const와 let의 차이 그리고 string (Javascript, 코린이 공부)
JavaScript 2022. 2. 24. 17:10

const와 let은 변수를 선언하는 가장 기초적인 방법이다. 둘의 차이점으로는 const는 변경이 불가하다. 하지만 let은 변경이 가능하다. 대부분은 const를 쓰고, 변경하고 싶은 게 있다면 let으로 변수를 만들어준다. 위의 사진처럼 const는 한번 설정하면 hopakisgood = "qute"로 못을 박아버리는 것이고, let은 언제든지 자유자재로 hopakisbad = "ugly" 등등으로 바꿀 수 있다. string이란 문자열 선언으로 작은 따옴표나 큰 따옴표로 가려서 사용한다. console.log("12345"); ("") 속의 숫자가 숫자로 보이겠지만 큰 따옴표 속에 들어가 버렸기 때문에 문자열로 바뀌었다. 예를 들어 const hopakIsFat = "true"; console.l..