[JS] 자기호출 익명함수

이번에 회사에 입사하게 되면서 업무에 익숙해지고자 진행하고 있는 솔루션 소스를 통해 공부를 진행하면서 처음보는 JS 문법이 존재하여 정리하면 좋을 것 같아서 정리합니다 :)익명함수이름이 없는 함수.아래와 같은 형식으로는 사용될 수는 없지만, 다른 함수의 매개변수로 사용될때는 사용이 가능하다.function(){ // 내용} 자기 호출 익명 함수 (IIFE)스스로 실행가능한 이름이 없는 익명함수선언과 동시에 실행이 가능한데, 단 한번만 호출 가능하고 다시 호출할 수 없다.(function () { // 내용}) ();느낌표를 사용한 자기 호출 익명 함수 (IIFE)자기호출을 가능하게 하며, 느낌표를 앞에 붙이면 function을 괄호로 묶지 않아도 사용이 가능하다.또한 뒤에 ()를 통해 함수 내에서 사용할..

• format_list_bulleted FE/JS
• · 2024. 10. 6.
• textsms

[React JS] memo, useMemo 그리고 useCallback

이번에는 memo와 useMemo 그리고 useCallback에 대해서 공부하던 도중 성능 최적화를 위해서 정리가 필요하다고 판단해서 정리해본다.  참고로 log js 파일을 생성하여 컴포넌트의 레벨에 따라 렌더링이 되는지 확인을 해보았다. export function log(message, level = 0, type = 'component') { let styling = 'padding: 0.15rem; background: #04406b; color: #fcfabd'; if (type === 'other') { styling = 'padding: 0.15rem; background: #210957; color: #ede6b2'; } const indent = '- '.repeat(..

• format_list_bulleted FE/ReactJS
• · 2024. 5. 5.
• textsms

[React JS] useState 동작방식

react를 공부하면서 아주아주아주 흥미로운 사실을 알게되어 간결하게 정리한다. 우리가 상태관리를 위해 useState를 사용합니다. 만약 아래와 같은 소스가 있다고 가정해봅시다. import { useState } from 'react' import './App.css' function App() { const [count, setCount] = useState(0) function handleClick() { setCount(count + 1) // 이부분 setCount(count + 1) // 이부분 } return ( count is {count} ) } export default App 간단한 버튼만 구현한 것입니다. 신기하게도 두번의 setCount 를 호출하였는데 값은 1씩 증가합니다. 그..

• format_list_bulleted FE/ReactJS
• · 2024. 3. 31.
• textsms

[React JS] Virtual DOM이란 무엇인가??

이번에 React JS관련 공부를 진행하면서 기본적인 이론과 더불어 정리를 해 나가고자 한다. 먼저 Virtual DOM이다. Virtual DOM ?? 우리가 DOM은 많이 들어봤을 것이다. 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해보자. 사슴에 관한 진실. 그렇다면 우리는 HEAD 태그 아래 TITLE태그가 존재하고 BODY 태그 안에 H1 태그가 존재한다. 이와 같이 트리형태로 구성되어있는것이 DOM구조 이다. 그런데 React 에서는 Virtual DOM을 사용한다. 쉽게 말하자면, 실제 DOM을 건드리고 조작하는 방식이 아닌 실제 DOM을 모방한 가상의 DOM을 구성하여 차이점을 골라내 변경된 부분만 Rerendering 시켜주는 방식으로 동작한다. Virtual DOM을 사용하는 ..

• format_list_bulleted FE/ReactJS
• · 2024. 3. 31.
• textsms

[Next JS] Next JS란 무엇일까?

이번에 뜬금없이 Next JS에 대해서 알아보고자 한다. 새해 다짐으로 이것저것 경험해보고자 프론트 백엔드 구분없이 경험하고 있다보니 제일 관심이 갔던 것들부터 실행하고있다. 그중에서도 NextJS 라는 키워드가 제일 많이 보이기도 하였고, Full Stack Web Application 이 가능하다는 것에서 매력을 느꼈다. 현재 해외 유튜버의 클론코딩 영상을 보면서 감을 익히는 중인데, 틈틈히 개념을 정리하면서 넘어가보고자 작성해본다.Next JS란?Next JS는 리액트를 기반으로 만든 오픈소스 자바스크립트 웹 프레임워크다. 기존에넌 CSR ( Client Side Rendering ) 이었다면 Next JS는 SSR ( Server Side Rendering )을 가져간다. SSR ( Server ..

• format_list_bulleted FE/NextJS
• · 2024. 1. 1.
• textsms