전체 글

Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다 크게 데이터 바인딩과 디렉티브가 존재한다 데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다 { title } // React{{ title }} // Vue.js  디렉티브 :  화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음  Hello Vue.js 추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다

개요캐싱 2025.01.05 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ] 이전 글에서 Next의 캐싱 중 Request Memoization, DataCache에 대하여 다루어 보았다 Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은 다른 목적, 시기, 실행 위치가 다르다. Next.js에서는 성능 향상과 비용 절감을 목적으로 선택 해제하지 않는 이상 가능한 많이 캐싱한다. 아래 사진은 빌드 시 그리고, 정적 경로가 처음 방문될 때의 동작을 보여준다. 캐싱 동작은 경로가 (정적,동적) 렌더링 방식과 데이터의 캐싱 여부와 초기 방문 혹은 후속 네비게이션에 따른 요청인지에..

Infinite Scroll 무한스크롤화면을 아래로 스크롤 할 때 콘텐츠가 지속적으로 로드되어야 하는경우 페이지네이션 대신 무한스크롤이 사용된다 장단점으로는 다음과 같다 장점1. 새로운 콘텐츠 조회의 편리함 : 다음, 더 보기와 같은 상호작용 없이 바로바로 로드가 가능 2. 모바일 기기에 적합 : PC에서도 마찬가지로 작은 뷰 구성엔 적합한 경우가 빈번 단점1. 특정 콘텐츠 조회의 어려움 : 특정 위치의 콘텐츠를 조회 및 기억하기가 어려움 2. 페이지 속도의 감소 : 콘텐츠가 방대할 수록 로드하는데에 더 많은 시간이 소요됨 3. 푸터가 fixed가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한..

Input의 빈번한 사용과 문제 발생프로젝트에서 텍스트를 작성하고 post하는 과정은 매우 빈번하다 검색창, 채팅, 블로그 글, 회원가입, 로그인 등 하지만, 가끔 위 사진과 같이 애를 먹는 경우가 있는데 다름 아닌 enter 이벤트를 통해 입력 값을 처리할 때 종종 등장하곤 한다 위와 같은 상황이 발생하는 경우는 다음과 같다 1. 영어가 아닌 한글을 작성 후 Enter를 클릭하는 경우2. 한글 작성 후 스페이스바를 누르지 않고 바로 Enter를 클릭하는 경우  const handleKeyDown2 = async (e: React.KeyboardEvent) => { if (e.key !== "Enter") return; setLogs2((prev) => [...prev, message2]);..

개요  현재 프로젝트에서는 팀원 3명 모두 새롭게 Vue를 사용해서 개발하고있다. 프로젝트 코드가 일관되게 유지하고자 여러 컨벤션들이랑 룰들을 미리 정했다. 1. 상세한 코드리뷰2. 변수, 함수, 파일, 폴더 명명 규칙 수립3. prettier, esLint와 같은 코드 포매팅 tool을 통한 코드 구조 통일화  하지만 우리끼리 규칙을 정하고, 좋은 코드를 찾고 하는건 귀찮고 더군다나 새로운 언어를 접한 우리 팀의 입장으로서는 반갑지 못한 일이었다. 위에서 언급한 방법들을 지키며, Vue에서 권장하는 방식으로 개발을 할 수 있는 방식이 있으니 그건 바로 Vue 스타일 가이드이다. https://ko.vuejs.org/style-guide/ Vue.jsVue.js - The Progressive JavaS..

개요 Vue 현재 진행중인 프로젝트에서 난 FE파트 PL을 맡게 되었다. 원래대로라면 Next.js로 진행하려던 프로젝트였을텐데.. 팀원들의 고민과 vue 추천으로 인해 끝내 Vue.js로 프로젝트를 작업하게 되었다. 물론, 프로젝트에 걸맞는 이유들이 있어 설득된 것이지만, 분명 프로젝트에서 활용될 Next의 장점들도 많다고 생각했다. 결과적으로, 내가 쓰고싶었던 건 Next.js였으나 사실 Next에 대해서 잘 아는 것보다 Vue.js를 잘몰라서 뭔가 팀원들에게 강하게 의견제시를 못하지 않았나 싶다. 단순히 한 기술에 대해서 잘 이야기할 수 있는건 단순 그 기술에대해서 정보를 나열할 때고, 대조를 하는경우 그 대조군에 대한 이해가 필요하다는 걸 깨달은 한 주 였다. 그럼 이제 내 친구가 될 Vue에 대..