이롭게 현명하게

목차 JSDoc이란?사용하는 이유 [JSDoc이란?]코드 리뷰를 받으면서 JSDoc을 알게 되었다.JSDoc은 자바스크립트에서 소스 코드와 함께 문서 주석을 직접 추가할 수 있는 방식이다./** * 두 숫자를 더합니다. * * @param {number} a 첫 번째 숫자 * @param {number} b 두 번째 숫자 * @returns {number} 합계 * * @example * const result = add(2, 3); * console.log(result); // 5 */export function add(a: number, b: number): number { return a + b;} 자바스크립트에서 라이브러리의 API를 문서화하기 위해 사용한다.JSDoc을 사용하여 모듈, ..

목차 EmailJS란?EmailJS 사용법참고사항 [EmailJS란?]개인 웹 포트폴리오나 회사 사이트에서 사용자가 문의사항을 남기는 이메일 폼 양식을 본 적이 있다. 이 폼을 보고 내 웹 포트폴리오에 적용하면 좋을 거 같다는 생각이 들었다.Contact 페이지에 적용시키기 위해서는 EmailJS를 사용하면 된다.EmailJS는 javascriptAPI를 사용해 웹에서 메일을 바로 전송할 수 있도록 지원한다.EmailJS를 사용하면 내 이메일 주소는 공개하지 않으면서 내 포트폴리오에 접속한 사람으로부터 메일을 받을 수 있는 기능이다.*  githubPage는 정적 페이지만 지원한다. 데이터베이스 등을 활용하여 백엔드에서 메일을 보낼 수 없다.그렇기 때문에 githubPage에서 사용하기 충분하다. 월별 ..

목차 code runner 확장 플러그인 node.js 자바스크립트를 실행하는 방법은 두가지가 있다. 브라우저에서 자바스크립트 실행하기 내장 터미널에서 자바스크립트 실행하기 [JavaScript] 자바스크립트 시작하기 / 개발환경 목차 내부 자바스크립트 코드 외부 자바스크립트 코드 자바스크립트를 적용하기 위해서는 에디터가 필요하다. [vscode 설치하기] [VSCODE] VSCODE 설치 / Visual Studio Code 설치하기 목차 VSCODE 설치 VSCODE devyihyun.tistory.com 이 게시글은 vscode 내장 터미널에서 자바스크립트를 실행하는 방법이다. 내장 터미널에서 자바스크립트를 실행하는 방법은 두 가지 방법이 있다. code runner 확장플러그인 실행 node.js..

목차 useReducer useReducer와 useState import [useReducer] 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 사용하는 Hook은 state이다. 공식 문서에서 언급된 것처럼 useReducer는 상태(state)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다. useState와 다르게 useReducer는 한 컴포넌트 내에서 상태(state)를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리되는 것을 가능하게 함으로써 코드의 최적화를 이루게 해 준다. 좀 더 복잡한 상태관리가 필요한 경우 useReducer를 사용할 수 있다. useReducer는 이전 상태와 action을 합쳐 새로운 state를 만드는 조작을 말한다. 콜백 대신..

목차 React.memo? 구조 [React.memo?] React.memo는 고차 컴포넌트(HOC : High Order Component)이다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있다. 즉 React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 재사용한다. React.memo는 props 변화에만 영향을 준다. 필요한 상황에서만 리렌더링을 하도록 설정한다. 컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 방지한다. props가 복잡한 객체인 경우 React.memo는 얕은 비교만 한다. 상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때..

목차 useCallback이란? import 예시 코드 정리 [useCallback이란?] useCallback은 useMemo와 비슷하다. useMemo : 특정 결괏값을 재사용할 때 사용 useCallback : 특정 함수를 새로 만들지 않고 새로 사용 useCallback을 사용하지 않는 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 함수를 새로 만드는 것은 메모리, cpu가 리소스를 많이 차지하지는 것은 아니다. 함수를 새로 선언한다고 해서 그 자체만으로 큰 부하가 생기지 않는다. 한번 만든 함수를 재사용할 수 있을 때 재사용하는 것이 좋다. 나중에 컴포넌트들이 props가 바뀌지 않는다면 Virtual DOM에 리렌더링 조차 안 하게 할 수 있다. 만약 props가 바뀌지 않았다면 V..