본문 바로가기

전체 글

 (50)
[Javscript] 깊은 복사, 얕은 복사 얕은 복사 (Shallow Copy) 참조값이 같다 = 연산자 // 아예 선언을 따로 한 경우 const obj1 = {value : 10}; const newObj1 = {value : 10}; console.log(obj1 === newObj1); // false - 참조값이 다르다 // = 연산자를 이용해 얕은 복사(객체) const obj = {value : 10}; const newObj = obj; console.log(obj === newObj); // true - 참조값이 같다 // = 연산자를 이용해 얕은 복사(배열) const arr = [1, 2, 3] const newArr = arr console.log(arr === newArr) // true - 참조값이 같다 // 참조 값이 ..
[React.js] 리액트 기초 - State, Props State state만 잘 관리하면 화면을 다시 그려주는 걸 신경쓰지 않아도 되는 편리함이 있다. 기존의 DOM Rendering 방식을 생각해보자. export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; document.getElementById("name").innerHTML = name; } return ( Hello {name} Change name ); } h2 태그의 id값을 주어 innerHTML로 name을 랜더링 하였다. setState 사용하기 import { useState } from "react"; export default ..
[React.js] 리액트 기초 - Import/Export, Style, Event Import/Export src/component/Hello.js Export const Hello = () => { return Hello; }; export default Hello; export default function Hello() { return Hello; } Import src/App.js import "./App.css"; import Hello from "./component/Hello"; function App() { return ( ); } export default App; React.js 로 스타일을 지정하는 방법 1. 태그 안 인라인으로 작성 src/App.js import "./App.css"; function App() { return ( Welcome ); } expo..
시간복잡도, 공간복잡도 시간복잡도? 1초 = 3-5억개의 연산 (대략 1억개의 연산으로 보는 사람도 많다) 고로 시간제한이 1초라면 당신의 프로그램은 3-5억개의 연산을 처리하고 종료되어야 한다는 뜻 아래의 메서드에서 몇번 연산이 필요한지 알아보자. function func(int arr[], int n) { int cnt = 0; // int cnt를 선언하는데 연산 1번 // 0을 넣는 연산 1번 for(int i=0; i
[JavaScript] 클린코드 참고자료 - 2 (객체) 객체 Object freeze 1차원적인 것만 가능 OPTIONS 같은 경우는 freeze 되지 않는다. const STATUS = Object.freeze({ PENDING: "PENDING", SUCCESS: "SUCCESS", FAIL: "FAIL", OPTIONS: { GREEN: "GREEN", RED: "RED", }, }); STATUS.PENDING = "P"; console.log(STATUS.PENDING); // PENDING - 변하지않음 STATUS.NEW_PROP = "PP"; console.log(STATUS); // {"PENDING":"PENDING","SUCCESS":"SUCCESS","FAIL":"FAIL"} - 추가되지 않음 console.log(Object.isFro..
[JavaScript] 클린코드 참고자료 - 1 (변수, 배열) Udemy 클린코드 강의를 수강하고 내가 지키지 않고 있거나 익숙해 져야 할 것들 정리 변수 타입 검사 console.log(Object.prototype.toString.call("")); // [object String] console.log(Object.prototype.toString.call(new String(""))); // [object String] console.log(Object.prototype.toString.call(arr)); // [object Array] console.log(Object.prototype.toString.call(func)); // [object Function] console.log(Object.prototype.toString.call(date)); /..
[Javascript] plain DB 데이터로 Tree 쉽게 만들기 Tree를 만드려면 염두해야할 두가지 1. DB 데이터를 어떻게 추출하여 트리를 만들 수 있는 JSON 형태로 만들 것인가 2. 만든 JSON을 어떻게 태그로 추출할 것인가 만들 TREE 구조는 이러하다. 이런 트리를 만드려면 다음과 같이 각각의 노드의 Id와 parentId가 필수적으로 필요하다. const data = [ { id: 56, parentId: 62 }, { id: 81, parentId: 80 }, { id: 74, parentId: null }, { id: 76, parentId: 80 }, { id: 63, parentId: 62 }, { id: 80, parentId: 86 }, { id: 87, parentId: 86 }, { id: 62, parentId: 74 }, { id:..
[Javascript] Method Chaining 메서드 체이닝 메서드 체이닝(Method Chaining)이란? 동일한 객체에서 여러 함수가 연속적으로 호출되는 Javascript의 패턴이다. 왜 사용할까? 동일한 개체 참조를 사용하여 여러 기능을 호출 할 수 있기 때문에 코드의 가독성을 높이고 중복성이 줄어든다. 10, 20을 더하고 10을 곱하고 10을 나누는 함수를 생성해보자. 메서드 체이닝 사용 전 const Obj = { result: 0, addNumber: function(a, b) { this.result = a + b; }, multiplyNumber: function(a) { this.result = this.result * a; }, divideNumber: function(a) { this.result = this.result / a; } };..

티스토리툴바