마이라이프해피라이프

go get으로 github에 있는 go package를 가져오려고 할 때 오류가 발생할 수 있다. gopath가 잘못 설정되어있을 때 그럴 수 있다는데,, 솔직히 잘 모르겠다. go.mod, vendor같은 것들은 정말 이해할 수가 없었다. 구글링을 열심히 하다가 한 블로그를 참고해서 github의 코드 자체를 다운받아 사용하기로 했다. [순서] 1. github에서 .zip 파일을 다운받고, src 폴더 (go를 설치하면서 만들었던 src폴더)안에 넣는다. 2. 압축해제하고 폴더명을 적절하게 수정한다. (대부분 수정 안 해도 될 것 같다) 3. import 후 잘 작동하는지 확인한다. [폴더 구조] src/github.com// 에서 압축해제 src/github.com// -> 내 작업 공간 src/..

1. React.memo를 통한 컴포넌트 리렌더링 방지 2. useReducer reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다. useReducer 의 사용법은 다음과 같습니다. const [state, dispatch] = useReducer(reducer, initialState); 여기서 state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생..

1. useEffect useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다. 주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있습니다. props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이브러리 사용 (D3, Video.js 등...) setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약 그리고 언마운트 시에 하는 작업들은 다음과 같은 사항이 있습니다. setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterv..

1. map map 은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어집니다. forEach를 사용하면 array.forEach(n => { squared.push(n * n); }); map을 사용하면 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); const squared = array.map(n => n * n); console.log(squared); 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하시면 됩니다. {users.map..

1. 리액트 컴포넌트를 만들 땐 import React from 'react'; 를 통하여 리액트를 불러와주어야 합니다. 2. 코드의 최하단 export default Hello; 이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미입니다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있습니다. 3. JSX JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 입니다. 불필요한 div 로 감싸는게 별로 좋지 않은 상황도 있습니다. 예를 들어서 스타일 관련 설정을 하다가 복잡해지게 되는 상황도 올 수 있고, table 관련 태그를 작성 할 때에도 내용을 div 같은걸로 감싸기엔 애매하죠. 그럴 땐, 리액트의 Fragment ..

1. 이벤트 처리하기 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. -> event 받아서 event.preventDefault() 2. map const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2);console.log(doubled); const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number}); 3. key 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장..

# crud 학습 복제본을 바꾼다 newValue = {...value} -> value 복제 newValue 변경 netValue(newValue) 같은 데이터라면 렌더링하지 않음 update = create + read 원하는 화면에서만 나타내게 해주기. 기본 null로 주고 조건문 안에서 변수에 tag 할당 {} 변수 보여주기 -끝- props는 어명같은 거! props에서 state로 환승 -> onChange로 값을 바꾼다. 꼭 복습하기 ! 10번 잊으면 다음에는 기억한다 다음 강의 - redux https://www.youtube.com/watch?v=Jr9i3Lgb5Qc&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc

# 노트 리액트 핵심 => 사용자 정의 태그 만들기 문법 2개 class vs function 요즘은 function으로 만드는게 흔함. (예전 수업을 찾아보면 class 방법 배울 수 있음) npm start -> 3000번 포트에서 브라우저 실행 src 폴더 안에 index.js = 입구 파일 index.js를 받고 이 안에 있는대로 동작하게 됨 npm run build -> build 폴더가 생성됨 npx serve -s build -s 옵션: 사용자가 어떤 경로로 들어오든 간에 index.js 파일 서비스해줌 build 파일 안의 index.js 서비스해줌 react에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야 핢 사용자 정의 태그라는 표현 대신 컴포넌트라는 표현을 사용함. 컴포넌트..

1. camelCase JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. 2. 객체 표현 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 3. 엘리먼트 엘리먼트는 React 앱의 가장 작은 단위 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React 엘리먼트를 루트 DOM 노드에 렌..

1. 문자열도 역시 객체 메소드 사용 가능 .length 'hello'.charAt(0); // "h" 'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" 'hello'.toUpperCase(); // "HELLO" 2. JavaScript에서 새로운 변수는 let, const, var 키워드로 선언됩니다. let을 사용하면 블록 레벨 변수를 선언할 수 있습니다. 선언된 변수는 "변수가 선언된 블록"에서 사용할 수 있습니다. const는 값이 변경되지 않을 변수를 선언할 수 있게 합니다. 변수는 "변수가 선언된 블록"에서 사용할 수 있습니다. var 키워드는 let, const 키워드가 가지는 제한을 가지지 않습니다. 이는 JavaScript..