👨💻📱✍️🎢314 Mixin을 사용해보며 느낀점들 📌 Mixin 이란? 객체지향 프로그래밍에서 mixin 은 필요한 메서드들을 포함하고 있는 클래스를 이용해서 상속없이 다른 클래스에 행동을 더해주는 하나의 방법입니다. 주로 서로 다른 컴포넌트에서 유사한 기능을 공유하고자 할때 사용하며 이러한 경우를 횡단 관심사 라고 합니다. 널리 사용되는 패러다임인만큼 React 와 Vue 등의 다양한 FE 아키텍쳐에서도 이 개념을 이용해서 재사용 가능한 로직을 분리하는 방법을 제시하고 있습니다. 1️⃣ ES6 의 class 를 이용한 mixin Object.assign 을 이용한 메서드 복사를 사용하면 간단하게 mixin 패턴을 구현할 수 있습니다. const GreetingMixin = { sayHi() { alert('Hello') } sayBye() { aler.. 2022. 7. 2. [NPM] npm i 과 npm ci … 차이점은? 📌 npm i (npm install) npm i(npm install) 는 프로젝트에 필요한 패키지를 설치하기 위해 사용하는 명령어입니다. npm i 는 크게 두가지 방식으로 동작합니다. 1️⃣ 특정 패키지 설치 $ npm install "package-name" 특정 패키지를 설치할 경우 npm i (name) 과 같은 형식으로 사용합니다. 이외에도 사용 가능한 명령어 형식이 정말 다양한데, 자세한 내용은 공식문서 를 참조하시면 됩니다. 2️⃣ 프로젝트가 의존하고 있는 모든 패키지 설치 $ npm install 특정 패키지명을 명시하지 않을 경우에는 package.json 에 명시되어있는 모든 의존 패키지를 설치해 node_modules 에 적재하는 것이 가능합니다. 💡 두 방식의 공통점 두 방식 모.. 2022. 6. 18. [NPM] package-lock.json 은 무엇일까? 📌 package.json 의 한계점 npm 을 이용해서 프로젝트를 진행하면 package.json 을 통해 해당 프로젝트에서 사용하는 외부 패키지 의존성을 관리하게됩니다. 다음은 package.json 예시입니다. { "name": "package json example", "version": "1.0.0", "description": "example", "main": "index.js", "scripts": { "start": "webpack serve --mode development", "build": "webpack --mode production", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license":.. 2022. 6. 18. Next.js window is not defined 원인 및 해결방법 📌 새로고침 시 오류 페이지가 떠요! 현재 회사에서 Next.js 를 이용한 프로젝트를 진행하고 있는데 특정 페이지에서 새로고침을 하거나 URL 을 통해 직접 접근을 시도할 경우 에러가 발생하며 에러 페이지로 리다이렉션되는 이슈가 있었습니다. 📌 오류 발생 원인은? 해당 페이지에서는 custom hook 을 사용하고 있었는데 여기서 문제가 발생한 것이었습니다. 💡 문제가 된 custom hook 다음은 이번에 문제를 일으킨 주범인 custom hook 의 간단한 예시입니다. export default const customHook = () => { const [flag, setFlag] = useState(Number(localStorage.getItem(countKey) || '0')) // 몇가지 작.. 2022. 6. 17. [Design Pattern] PUB-SUB 패턴 📌 PUB-SUB 패턴 PUB-SUB 패턴은 Observer 패턴의 일종이며 다수의 consumer 가 자신이 관심 있는 이벤트를 비동기적으로 수신할 수 있도록 합니다. (단, sender 와 receiver 는 coupling 되지 않아 서로의 존재를 모릅니다.) 📌 PUB-SUB vs Observer 위는 Observer Pattern 의 동작 흐름입니다. 이러한 흐름을 구현한 애플리케이션은 Observer Pattern 을 구현했다고 말할 수 있습니다. 그렇다면 PUB-SUB 는 어떤 차이가 있는 것 일까요? PUB-SUB 의 경우 Subject -> Publisher 그리고 Observer -> Subscriber 라는 명칭상의 변경만 존재할 뿐 눈에 띄는 차이점은 없어 보입니다. 그래서 많은 서.. 2022. 6. 13. Safari 브라우저 scroll-behavior 이슈 📌 부드러운 scroll 동작 구현하기 이전 회사에서 프로젝트를 진행할 때 이벤트 페이지에서 앵커 버튼 클릭 시 특정 위치로 이동해야하는 요구사항이 있었습니다. 직접 offsetTop 을 지정해주는 애니메이션을 구현하거나 window 객체에서 제공하는 Web API 를 사용하는 방법들이 있는데, 구현을 간단하게 하기 위해서 이중 window.scrollTo 를 사용했습니다. 그리고 부드러운 움직임을 위해 behavior 로 smooth 로 지정했습니다. window.scrollTo({ top: 100, behavior: 'smooth' }) 📌 AOS 에서는 잘 되는 것 같은데.. iOS는..? 해당 코드를 앱에 배포해보니 안드로이드 폰에서는 잘 동작하는데 아이폰에서는 smooth 동작이 적용되지 않는 .. 2022. 6. 11. 이전 1 ··· 9 10 11 12 13 14 15 ··· 53 다음
