렌더링 이해하기 - 얕은 비교 (Shallow Equal) , 깊은 비교 (Deep Equal)

얕은 비교 Shallow Compare란? 숫자, 문자열 등 원시 자료형은 값을 비교한다. 배열, 객체 등 참조 자료형 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교한다. const obj1 = {a : 1, b : 2}; const obj2 = {a : 1, b : 2}; console.log(obj1 === obj2); // fasle obj1과 obj2에 들어있는 값은 같지만, 참조 값을 비교하기 때문에 obj1과 obj2의 참조 값이 달라 false가 반환된다. user = { name : "devbean", surname : "Ohh" } const user = this.state.user; user.name = "hb" console.log(this.state.user === user)..

• format_list_bulleted 개발
• · 2024. 1. 17.
• textsms

[ES6] var 와 let / const의 차이

회사에서 이번년도 신규 프로젝트에 TypeScript 와 ES6 이상의 문법을 무조건적으로 사용하기로 결정했기 때문에 (사실 이전부터 ES6 이상을 사용하고 싶었지만, 제일 큰 고객사인 삼성 전자의 IE 사용 때문에 힘들었다.) 차근차근 ES6에 대해서 알아가 보려고 한다. 처음으로 ES5 와 ES6 의 차이를 생각해보자면 변수 선언의 차이라고 생각이 든다. ES5에서는 모든 변수를 var로 선언했다면 ES6 let 과 const로 나뉘게 된다. ES5를 사용하면서 var 변수만을 사용해 왔는데 var 변수는 단점이 꽤 많이 있다. 대표적으로 나열하자면, 암묵적 결합이 가능 생략 호이스팅 함수 레벨 스코프 위와 같은 단점이 var에 대해서 내가 느낀 단점과, 많은 개발자 분들이 느낀 점이었다. 하나씩 예..

• format_list_bulleted 개발
• · 2023. 1. 6.
• textsms

[Javascript - Jquery] find by attr

[name] 해당하는 속성을 가지고있는 노드 [name=value] 주어진 문자열과 속성이 동일한 노드 [name~=value] 공백으로 구분된 단어와 속성이 일치하는 노드 [name*=value] 주어진 문자열을 포함하고있는 노드 [name$=value] 주어진 문자열로 끝나는 노드 [name!=value] 주어진 문자열이 속성과 다른 노드 [name^=value] 주어진 문자열로 시작하는 노드 [name=value][name2=value2] 다중속성선택자 항상 잊고 다시 구글링 하지말자는 마음에 오랜만에 블로그에 기록. 출처: https://javacpro.tistory.com/38 [버물리의 IT공부:티스토리]

• format_list_bulleted 개발
• · 2022. 6. 16.
• textsms

Node JS , React 를 이용한 Boiler-plate 구현하기 - Client Part

클라이언트 구현 React의 userState를 사용하여 Email, Password를 받을 수 있도록 함. useDispatch를 React-redux에서 import 해서 redux store에 있는 action에 연결함. (useDispatch function은 redux store에 설정된 action에 대한 dispatch를 연결하는 hook으로써, 실제 updateExampleProfile이라는 action을 연결할 수 있도록 선언해줍니다. (관련된 부분은 상단에 props내의 action을 사용할 때와 동일합니다.) withRouter를 import 하여 페이지 history를 push 할 수 있도록 함. useState를 사용하여 각각에 맞는 개인정보를 입력받을 수 있도록 적용 버튼이 클릭..

• format_list_bulleted React
• · 2021. 2. 1.
• textsms

[프로그래머스] 이진 변환 반복하기

문제 설명 0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다. x의 모든 0을 제거합니다. x의 길이를 c라고 하면, x를 c를 2진법으로 표현한 문자열로 바꿉니다. 예를 들어, x = "0111010"이라면, x에 이진 변환을 가하면 x = "0111010" -> "1111" -> "100" 이 됩니다. 0과 1로 이루어진 문자열 s가 매개변수로 주어집니다. s가 1이 될 때까지 계속해서 s에 이진 변환을 가했을 때, 이진 변환의 횟수와 변환 과정에서 제거된 모든 0의 개수를 각각 배열에 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 s의 길이는 1 이상 150,000 이하입니다. s에는 '1'이 최소 하나 이상 포함되어 있습니다. 입/출력 풀이 d..

• format_list_bulleted Algorithm
• · 2021. 1. 27.
• textsms

[프로그래머스] 폰켓몬

문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

• format_list_bulleted Algorithm
• · 2021. 1. 27.
• textsms

<