내맘대로 frontend 낙서장

https://www.jasonchoi.dev/posts/publish-nextjs-to-gh-pages Next.js Github Pages 가장 쉽게 배포하기 가장 쉽게 배포하는 방법을 알아보자. www.jasonchoi.dev 해당 블로그를 참조하면 배포하는 방법이 매우 쉽다 그러나 13.3이후 버전을 쓴다면 조금 수정을해야한다. 위 블로그를 그대로 따라하되 2가지만 수정하면된다. 1. build명령어를 "next build"로 한다.(뒤에 next export는 지우면된다.) 2. next.config.ts에 다음과 같이 추가한다. const nextConfig = { output: 'export', basePath: '/레포지토리이름', }; 그러면 잘되는 걸 확인할 수 있다. 왜그렇게 되었냐면..

vue 프레임워크는 react의 장점과 angular의 장점을 가져와서 만든 프레임워크인데 이번에 해볼 것은 그 중에서도 angular의 양방향 바인딩을 가져와 만든 v-model! v-model 기본예시 // 부모 {{ message }} //자식 실행결과 해당 v-model은 실제 템플릿 컴파일러에서 다음과 같이 작동합니다. //자식 input //부모 자식 컴포넌트의 동작방식은 input 엘리먼트 value 속성을 modelValue의 바인딩을 하고 input 이벤트가 트리거 되면 새값으로 update:modelValue 커스텀 이벤트를 내보냅니다. // 자식 컴포넌트에서 computed , get, set을 써서 사용가능 다음과 같이 computed를 이용하는 방법도 있습니다. 동작은 동일합니다...

Vue에서 상태 변화에 대한 전환이나 애니메이션 작업을 돕기위해 존재하는 컴포넌트가 두가지 있는데 - 요소나 컴포넌트가 DOM에 들어오거나 나갈 때 애니메이션을 적용하는 데 사용됩니다. - v-for 리스트 내에 컴포넌트가 삽입 ,제거 및 이동 할 때 애니메이션을 적용하는데 사용됩니다. 컴포넌트 Transition은 내장 컴포넌트로써 별도로 import하지 않아도 어떤 곳에서든지 사용할 수 있습니다. 이 컴포넌트는 기본 슬롯을 ㄷ통해 전달된 요소나 컴포넌트에 대해 Enter, Leave 애니메이션을 적용하는데 사용 될 수 있습니다. Enter , Leave는 다음 조건 중 하나에 의해 트리거 되는데 v-if, v-show 같은 조건부 렌더링 특정 컴포넌트 요소를 통한 동적 컴포넌트 토글 특별한 Key 속..

시작하기에 앞서 우리는 부모 자식간의 데이터를 전달 할 때 props를 사용합니다. 그러나 위 사진에서 root에서 DeepChild로 데이터를 전달하는 것 처럼 계속해서 Props로 데이터를 전달할 시에 프롭 드릴링(prop drilling)문제가 생기게 됩니다. ** prop drilling : 동일한 prop을 전달하는 중첩 컴포넌트의 수가 증가함에 따라서 종속성 트리(dependecy tree)가 깊어지고 코드 유지관리가 어려워지는 문제 prop drilling은 다음과 같은 문제를 야기하는데 성능 저하 : prop을 전달하는 컴포넌트의 수가 증가함에 따라 성능에 영향을 미칠 수 있습니다. 또한 각 컴포넌트에 prop을 렌더링 함으로써 불필요한 처리가 발생할 수 있습니다. 코드 유지 관리 : 종속..