전체 글

[JavaScript][clean-code] Object.freeze

* Object.freeze 객체 동결 Object.freeze는 기본적으로 내장되어있다. 간단하게 인자로 취해주면 동결된다. [참고내용] https://latte1114.tistory.com/362 * Object.freeze예시 코드 const STATUS = Object.freeze({ PENDING: 'PENDING', SUCCESS: 'SUCCESS', FAIL : 'FAIL', }); STATUS.PENDING = 'P2' // 변경이 되지 않는다. STATUS.NEW_PROP = 'P2' // 추가 되지 않는다. * Object.isFrozen을 이용하면 동결 여부를 알 수 있다. Object.isFrozen(STATUS) // true * Object.freeze의 경우 shallow co..

[JavaScript][clean-code] Object Destructuring (객체 구조 분해 할당)

* Object Destructuring (객체 구조 분해 할당) * 생성자 함수로 보는 예시 function Person(name, age, location) { this.name = name; this.age = age; this.location = location; } const hyeonwoo = new Person('hyeonwoo', undefined, 'korea'); - 기존에는 값을 안넣을경우 undefined를 작성해줘야한다. * 객체 구조 분해 할당 function Person( name, { age, location }) { this.name = name; this.age = age; this.location = location; } const pocoOptions = { age :..

[JavaScript][clean-code] Lookup Table

* lookup table (순람표) key와 value로 관리된 배열이 나열된 형태이다. excel의 lookup을 생각하면 된다. * 일반적인 if else예시 function getUserType(type) { if (type === 'ADMIN') { return '관리자'; } else if (type === 'INSTRUCTOR') { return '강사'; } else if (type === 'STUDENT') { return '수강생'; } else { return '해당 없음'; } } - 이렇게 if else가 길어질 경우 switch case를 사용하는것을 권한다. * switch case예시 function getUserType(type) { switch(key) { case 'AD..

[React_study] React에서의 List 생성 (map)

* 자바스크립트에서의 map 함수 사용하는 방법 모든 array 자료에는 map() 메서드를 사용할 수 있다. map() 메서드가 가지고 있는 기능을 예시를 통해 확인 * 예시 코드 (기능1) - array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행 - console.log(1) 3번 실행 const array = [1,2,3]; array.map(function(){ console.log(1) }); * 예시 코드 (기능2) - 콜백함수의 첫번째 인자값을 넣어서 array안에 있던 모든 자료를 하나씩 출력해준다. - 2, 3, 4가 콘솔창에 출력된다. const array = [1,2,3]; array.map(function(a){ console.log(a) }); * 예시 코드 (기능3) ..

[React_study] 리액트 환경에서 동적인 UI 만드는 법

* 리액트에서 동적인 UI 만드는 step - 동적인 UI는 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등등의 UI들을 의미한다. html, css를 이용해 미리 UI디자인을 만들어놓는다. UI의 현재 상태를 state를 이용해 저장해둔다. state에 따라서 UI가 어떻게 보일지 조건문을 이용해 작성한다. * 모달창을 이용한 동적인 UI 예시 코드 * html, css 디자인 Title Date Content .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } * UI의 현재 상태를 state로 저장 let [modal, setModal] = useState(false); (stat..

[React_study] 많은 div들을 한 단어로 축약하려면 (Component)

* 복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 이를 Component라고 하며 Component를 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽃아넣을 수 있다. * Component 예시 코드 function App (){ return ( ) } function Modal(){ return ( Title Date Content ) } function을 이용해서 함수를 하나 만들어주고 작명한다. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다. 사용을 원하는곳에서 을 사용하면 아까 축약해두었던 HTML이 나타난다. 이렇게 축약한..