개인 공부용 블로그

Redux란? JavaScript 상태관리 라이브러리 Node.js 모듈 Redux 작동 구조 Action -> Reducer -> State redux를 사용하면 store에서 모든 상태 관리가 일어난다. 상태 변화를 일으켜야 할때 action (type : 객체) 이라는 것을 store에 전달한다. 상태 변화시 객체를 참조해 변화를 일으킴 (이 과정을 디스패치라고 한다.) Redux 사용 규칙 Redux의 state는 읽기 전용이다. (dispatch를 통해서만 state변경이 가능하다) 참고: https://jjy0821.tistory.com/40 Redux는 무엇이고, 어떤 장점이 있는가? 첫 프로젝트 때는 클라이언트 사이드 구성에서 데이터 흐름에 대해 하위 컴포넌트들이 깊게 들어가지 않으니 상태..

1. Enact CLI 설치 npm install -g @enact/cli 2. webOS template 설치 enact template install @enact/template-webostv 3. template 만들기 enact create [] 새로운 앱 생셩하는 명령어. []

** 자체적으로 제공하는 Hook이 있고, custom hook이 있음. ** Hook 사용시 use붙이기 ** Hook 사용시 최상위에서만 호출할 것 (반복문, 조건문에서 호출 XX) Hook의 규칙 Hooks API Reference✨ 1. useState const [state, setState] = useState(초기값); //state : get //setState : set 문제1. useState를 사용해서 button 클릭시 시간이 변경되게 하기 그림 1-1과 같이 지정하게 되면 클릭시 숫자가 계속 counting된다. newTime이라는 새로운 변수를 만들고 12라는 숫자보다 크면 다시 1을 갱신해준다. 문제2. input에 값을 upload할때 누적되어서 보여지게 하기 예제 2-1. ..

1. 3-way 2. fast-forward 3. squash git merge --squash 새브랜치명 4. rebase * rebase는 기존 커밋을 그대로 사용하는 것이 아닌 내용은 같지만 다른 커밋을 새로 만든다. * 로컬 작업시 히스토리 정리를 위해 rebase는 할 수 있다. 단, push로 내보낸 commit에 대해서는 절대 rebase하지 말것 3.6 Git 브랜치 - Rebase 하기 장점 단점 1. 간단하고 짧은 branch들은 깔끔한 log를 확인 할 수 있다. 1. 충돌이 많이 남 rebase&merge 명령어 1. 변경점을 바꿀 새로운 브랜치로 switch한다. (rebase 이미지 1-2의 연두색 commit) 현재 핑크색의 subFile이라는 branch생성됨 2. git r..

branch 만들기 기존 코드에 새로운 기능을 부여해야할 경우 새로운 복사본을 만들어 기능을 추가할때 보통 branch를 만들어서 실행한다. git branch 복사할파일명 예시) git branch testFile 사본으로 만들 파일명을 생성한다 git switch 복사한 파일명 예시) git switch testFile 해당 파일의 브랜치로 이동 1. gitTest폴더 생성 -> gitTest01.html 파일 생성 1. master는 현재 d052203 커밋의 고유값을 가진다. 2. branch 를 통해 slide라는 파일을 하나 생성 slide.html파일을 수정한 뒤 commit을 해주고 log를 찍어보면 3. slide파일 생성 후 commit해주었음 4. slide파일이 commit됨에 따라..

vscode 사용시 파일이 변경되면 좌측에서 아래 이미지를 클릭해보면 다음과 같은 탭이 나온다. 관리할 파일이 많다면 좌측 탭에서 commit을 통해 파일 관리를 하는 것도 유용하다고 하다. 또 다른 방법 extention > git graph를 다운받아 설치 그럼 탭에 추가로 graph모양이 생긴다. 터미널로 commit을 했었던 기록이 직관적으로 보여진다.

템플릿 리터럴이란? 이중 따옴표나 작은 따옴표 대신 백틱 `` 을 이용한다. //이전 표현식 var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20." //template literals var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // "Fifteen is 15 and // not 20." +를 이용해 문자열을 조합하지 않아도 되어 가독성면에서 좋다. // template literals var name = `Aaron`; var t..

1. for 문 특징 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용 arrayList, array는 for문을 사용하면 성능면에서 빠르다. 단점 for문의 로직이 간단하지 않을 경우 코드 분석이 어려울 수 있다. For-each문은 For문 보다 얼마나 빠를까? 2. forEach문 문법 array.forEach( function( currentElement, index, array ){ }); currentElement : 처리할 현재 요소 index: 처리할 현재 배열 요소의 인덱스 array: forEach()를 호출한 배열 반환값: undefined 특징 자신의 내부에서 반복문 실행 배열의 경우 forEach문 사용 인덱스에 접근할 수 있다. 배열을 ..

파일 우클릭 Copy Path/Reference 클릭

See the Pen 개인study by limhaneul2244 (@limhaneul2244) on CodePen. 1. 간단한 메소드 만들기 let person = { name: 'nana', sayHi: function(){ console.log(`안녕 나는 ${this.name}`) } } person.sayHi(); //안녕 나는 nana 2. 오브젝트 내의 데이터를 전부 더해주는 메소드만들기 let 자료 = { data : [1,2,3,4,5] }; 자료.전부더하기 = function () { let total = 0; this.data.forEach(function(a){ total = a + total; }); console.log(total) } 자료.전부더하기() 여기서 자료의 obje..