프론트엔드 개발자라면 다들 들어본 비슷하지만 다른..? 렌더링 방식에 대하여 정리하고자 합니다. 우선 간단하게 용어부터 정리 해보겠습니다 SPA(Single Page Application) : 한 개의 페이지로 구성된 애플리케이션 MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 애플리케이션 CSR(Client Side Rendering) : 클라이언트 측에서 렌더링을 하는 방식 SSR(Server Side Rendering) : 서버 측에서 렌더링을 하는 방식 대부분 CSR + SPA 한 묶음, SSR + MPA 한 묶음 이라고 정의하곤 합니다. 이유는 많이 사용되는 React, Vue, Angular 등 JS 라이브러리나 프레임워크를 쓰면 HTML, CSS, JS ..
멋쟁이 사자처럼에서 진행하는 'DDC 2023 : DEV DAY' 참석 후기 입니다. 장소는 코엑스 오디토리움에서 진행 되었습니다! 우선 10시 30분 부터 입장이 가능했는데 컨퍼런스에 참가하는 기업들의 부스가 운영되어서 여러가지 정보와 선물을 받을 수 있었습니다. 스티커를 받고 붙이면서 '정말 휼륭하고 좋은 개발자, 사람들에게 지식을 공유 할 수 있는 개발자가 되자' 다시 다짐하게 되었습니다. 세션은 총 6개로 진행 되었습니다 😀 세션의 소개와 더불어서 현장에서 기록했던 내용들을 가져왔습니다. 그때의 기억과 감정을 유지하고 싶어서 정리나 추가하지는 않겠습니다!! 1. 데이터사이언티스트입니다. 무신사도 괜찮나요? 대기업에서 일하시다가 본인의 임팩트를 만들 수 있는 회사를 찾기 위해 무신사로의 이적을 선택..
React 를 사용하면서 state 를 변경 했지만, 리액트가 제대로 감지하지 못하여 변화가 일어나지 않아 자료를 찾아보다가 🥺 리액트는 불변성을 지켜야 한다. 위와 같은 말을 많이 접하게 되었습니다. 리액트를 처음 배울 때 몇 번 들어봤던 말인데 그 당시 제대로 잡고 갔어야하는데 다시 같은 실수를 방지하고자 공부하여 정리합니다. 자바스크립트 메모리 구조 Call Stack(콜 스택) 실행 중인 함수를 추적하여 계산을 수행하고, 지역 변수를 저장 (LIFO 방식) 고정된 크기로 메모리에 저장(실제 데이터가 변수에 할당) 원시 타입이 이곳에 저장 됩니다. ( Boolean, String, Number, Null, Undefined, Symbol ) Memory Heap(메모리 힙) 콜 스택과 달리 메모리 ..
원인 ❓ router.push( { pathname: `/list/categorylist`, query: { code: code, sort: sort, list: list, }, }, `/list/categorylist` ); router 또는 Link 태그를 사용해서 페이지 전환 시 query 옵션을 통해서 data 룰 전달 할 수 있습니다. ➡ 하지만, 배열 데이터가 정상적으로 전달이 되지 않음.. 해결 ✅ router.push( { pathname: `/list/categorylist`, query: { code: code, sort: sort, list: JSON.stringify(list), }, }, `/list/categorylist` ); ➡ JSON 으로 string 변환을 먼저 한 후,..
✅ useState 변수 선언 후 사용 안할 때 에러 제거 // eslint-disable-line no-unused-vars ✅ useEffect 내 해당 변수를 [ ] 안에 사용하지 않았을 때 에러 제거 // eslint-disable-line react-hooks/exhaustive-deps ✅ 정규식 에러 제거 //eslint-disable-line
컴포넌트란 ❓ 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈 컴포넌트 개념의 유래 ❓ 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어집니다. ➡ 따라서, 문제가 발생 했을 때 해당 부분의 모듈만 교체하면 다시 문제없이 작동 합니다. 하지만, 소프트웨어는 다릅니다. 소프트웨어는 독립적으로 개발되지 않은 경우가 많고, 혹여나 독립적으로 개발되었다 하더라도 다른 모듈과의 호환을 생각하지 않으면, 재사용을 어렵게 하고 유지보수 비용이 증가되는 원인이 됩니다. ➡ 즉, 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 입니다. 좋은 컴포넌트란 ❓ 다른 컴포넌트들과 연결되어 있지 않고 (응집도) 독립적 재사용성이 높은 것 ➡ 위의 3가지는 결국 컴포넌트를 나누는 기준이 됩니다. 참고..
1. Error 항목 Unhandled Runtime Error Error: Multiple children were passed to with href of / but only one child is supported https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace. 1. 원인 ❓ {post.name} 위와 같이 하나의 Link컴포넌트 안에 두 개 이상의 컴포넌트 혹은 태그를 넣을 시 발생 1. ✅ 해결 {post.name} Link태그를 따로 분리 2. Error 항목 Warning: Function components cannot be g..
Props ❓ Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 ✔ Props 특징 자식 컴포넌트에서 데이터를 변경 할 수 없습니다. ( 컴포넌트 내부의 속성이라고 봐도 무방 합니다 ) 이미 HTML 를 사용하면서 태그에 대한 속성을 알고 사용하고 있습니다. ( id, class, onClick 등 ) Hello world! React에서는 이 속성 개념에 데이터를 전달하는 느낌으로 추가 확장 const Text = ({text}) => { return {text} } const App = () => { return } 결과, 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world! 라는 문자열이 출력 됩니다. State ..
