본문 바로가기

전체 글

(60)
A non-serializable value was detected in the state, in the path umc study를 하면서 redux를 쓰는 과정에서 겪었던 오류다. export const userSlice = createSlice({ name: "user", initialState: { id: "", pw: "", res: {}, }, reducers: { login: (state, action) => { state.id = action.payload.id; state.pw = action.payload.pw; state.res = action.payload.res; window.localStorage.setItem("token", state.res.data.accesstoken); window.localStorage.setItem("id", state.id); }, logout: (state) ..
프로토타입, 클래스, 그리고 OOP 프로토타입 이란? [JavaScript] 프로토타입과 프로토타입 체인 - 하나몬 (hanamon.kr) [JavaScript] 프로토타입과 프로토타입 체인 - 하나몬 결론 자바스크립트는 프로토타입 기반 언어이다. 프로토타입은 원형(유전자)라는 뜻이다. (객체의 원형, 즉 객체의 부모가 가지는 유전자 즉, 상속받은 데이터, 메소드) 함수 객체에는 프로토타 hanamon.kr 팩토리 함수와 생성자 함수 JavaScript-클래스 사용하기(팩토리, 생성자) (velog.io) JavaScript-클래스 사용하기(팩토리, 생성자) 객체를 생성하기 위하 템플릿(서식)클래스는 2015년에 자바스크립트에 추가된 문법으로, 이전에는 아래의 코드와 같이 함수로 객체를 만들었다.가장 간단하게 객체를 return 하는 함수..
AJAX 와 API API https://m.blog.naver.com/PostView.naver?blogId=kistiscienceon&logNo=222722915536&navType=by API 뜻? 오픈 API? 쉽게 설명해줄게~ 비전공자도 이해할 수 있도록, API A to Z 파악해볼까요? 여러분 API에 대해 알고 계시나요? AP... blog.naver.com AJAX & FETCH & AXIOS https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch [개발상식] Ajax와 Axios 그리고 fetch 여러분들이 프로젝트를 진행하다보면 클라이언트와 서버 간 ..
비동기식 javascript 콜 스택 (Call Stack) & WebAPI와 단일 스레드 작동 방식 https://new93helloworld.tistory.com/358 자바스크립트 호출 스택(Call Stack) 이해하기 시작하기에 앞서자바스크립트를 심도 있게 이해하기 위해 "모든 자바스크립트 개발자가 알아야할 33가지 개념(https://github.com/yjs03057/33-js-concepts)"의 항목들과 링크되어있는 블로그 글들을 정리하 new93helloworld.tistory.com callback 지옥 & promise https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB..
js DOM 이벤트 랜덤 컬러 연습하기 Click me! change 이벤트와 this 키워드 https://m.blog.naver.com/nuberus/221463728867 [JavaScript] this 키워드 / Event 1. JavaScript 에서의 this 의 의미 - 기본적으로 this 키워드는 JAVA 나 JavaScript 나 객체 자기... blog.naver.com 이벤트 객체 https://tangoo91.tistory.com/32 [JavaScript] 자바스크립트 이벤트 객체 앞의 포스팅에서 이벤트가 발생했을 때 실행하는 함수에는 이벤트 핸들러와 이벤트 리스너가 있다고 설명했다. 이들도 함수이기 때문에 인수를 받을 수 있는데 그 인수를 이벤트 객체라고 한다 tangoo91.tistory.com ..
DOM getElementById Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용하다. 반환 값 주어진 ID와 일치하는 DOM 요소를 나타내는 Element 객체. 문서 내에 주어진 ID가 없으면 null. Document.querySelector()나 Document.querySelectorAll()과는 달리 getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문...
js 최신 기능들 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org 객체 스프레드 구문 추가 설명 const feline = {legs: 4, family: 'Felidae'} const canine = { isFurry: true, family: 'Caninae'} {...feline, ...canine} {legs: 4, family: 'C..
javascript 참조 타입과 동일성 테스트 let temp1 = [1,2,3]; let temp2 = [1,2,3]; temp1 === temp2 --> false 이유 : js에서 새롭게 만들어진 배열은 특정 주소값이 등록되어(즉, 배열의 고유한 주소인 참조를 갖게 됨.), temp1과 temp2의 주소값이 달라 false가 나옴. let nums = [1,2,3]; let nums2 = nums; nums === nums2 --> true 이유 : 이땐 nums 배열 자체를 nums2에 할당해줬기 때문에 메모리에서 같은 것을 참조하게 된다. 즉, 둘은 연결되어 있기 때문에 nums를 push, pop, shift(앞에서 뺌), unshift(앞에서 넣음)을 하면 nums2에도 똑같이 반영되는 것을 알 수 있다.(역도..