프론트엔드 복습노트 프론트엔드 복습노트

분류 전체보기

• [NextJS] Tiptap(WSIWYG Editor) - NextJS 문서 편집기(Rich Editor) 구축기

  frontend/react&next 2022. 3. 2. 16:32

  매일 개인 개발을 할 때 글 쓰기를 만들 때 내 입맛대로 만들고 싶을 때 어떤 에디터를 사용할까라는 고민을 정말 많이 해왔던 것 같습니다. 저 또한 Quill, CK, TUI, Editor, TinyMCE 등 많은 에디터 들이 있지만 그 중에서 가장 제가 원하는대로 깔끔하게 커스텀 가능했던 에디터를 소개해드릴려고 합니다. Vue이용자들은 Tiptap에디터를 꽤 많이들 사용하는 것으로 알고 있습니다. Tiptap의 가장 큰 장점은 다양한 프레임워크 지원이 아닐까 싶습니다. Vue, React 뿐만 아니라 Nuxt, Next 등의 SSR에서의 환경을 제공한다는 것은 매우 만족 스러웠습니다. quill을 이용했을 때는 매번 dynamic을 써서 어거지로 넣었던 기억이 있습니다. 이 에디터는 매우 강력하고 스타..

  Read More
• [ReactJS] React Query + IntersectionObserver = Infinite Scroll Paging(리액트 쿼리 + 옵저버 = 무한 스크롤 페이징)

  frontend/react&next 2022. 2. 24. 14:53

  최근 Client State와 Server State관리에 대하여 많은 Redux에 Redux Saga등 덕지덕지 붙으며 본연의 클라이언트 상태관리의 의미가 퇴색되고 서버측 상태(API데이터 등)이 주가 되고 있어서 이런 구조적 문제를 타파하고자 Client Side(Mobx , Recoil) 등과 React Query를 이용해서 작업하는 경우가 참 많은거 같습니다. 저 또한 하나의 기능을 만들기 위하여 과하게 작업되는 경우가 많은거 같아서 Redux + Redux Saga로 작업되는 개인 프로젝트에서 이 구조를 버리고 Recoil + React Query(리코일 + 리액트쿼리)로 작업하였는데 작업 중에 Infinite Scroll(무한스크롤)을 구현한 케이스가 있어서 이를 공유하고자 글을 써봅니다. 잡..

  Read More
• 이벤트 위임 - 캡처링/버블링 (Event Delegation - Captruring / Bubbling)

  frontend/javascript&web 2022. 2. 21. 19:45

  쉽게 이해하는 이벤트 위임(Event Delegation) 이벤트 특정 행위시 발생하는 사건 브라우저는 이벤트를 감지할 수 있고 이벤트 발생 시 알려줄수 있으며 이를 통해 웹 페이지와 상호작용가능하며 핸들러를 통해 원하는 함수와 연결해 사용할 수 있습니다. 이벤트 타입 마우스 click(클릭), dbclick(더블 클릭), mouserover(마우스 오버), mouseout(마우스 아웃), mousedown(마우스 눌림), mouseup(마우스 뗌), mousemove(마우스 움직임), contextmenu(오른쪽 마우스) 키보드 keydown(키 눌림), keyup(키 뗌), keypress(키 눌린상태) 폼 focus(포커스 인), blur(포커스 아웃), change(값 변경), submit(제출)..

  Read More
• 자바스크립트 this

  frontend/javascript&web 2022. 2. 18. 10:16

  쉽게 이해하는 자바스크립트 this this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기참조변수 자바스크립트의 this는 자바를 비롯한 여타 언어들과는 상이하게 동작합니다. 이 개념을 잘 이해하신다면 우리가 특정 변수나 객체에 접근할 때 발생할 수 있는 문제에 대하여 사전에 방지할 수 있는 효과를 가지게 될 것입니다. this의 동작방식 this 값은 호출방법에 의해 결정됩니다. 실행중에 할당으로 설정할 수 없고 호출할 때마다 다르게 동작합니다. 우리는 이러한 this의 값 결정 방식을 5가지로 분류 해볼 수 있습니다. 전역공간 함수 호출 메소드 호출 생성자 함수 호출 apply / call / bind 호출 함수와 메소드를 혼동하지 맙시다. 함수는 객체로 부터 독립적이지만, 메소드는 ..

  Read More
• 브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )

  frontend/javascript&web 2022. 2. 17. 16:45

  이론편 : 브라우저 저장소 ( Theory of Browser Storage ) 브라우저 저장소 분류 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 웹 스토리지 ( Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage ) ..

  Read More
• 프로토타입(Prototype)

  frontend/javascript&web 2022. 2. 16. 08:49

  Concept By 프로토타입 (Concept By Prototype) 프로토타입 자바스크립트는 프로토타입 기반의 언어, 객체 원형인 프로토타입을 이용하여 새로운 객체를 생성 자바스크립트는 프로토타입이라는 특수한 객체를 가지고 있으며, 이는 말그대로 다른 객체의 원형이 되는 객체 입니다. 새로운 객체를 만들어 낼 때 객체의 원형인 프로토 타입을 이용하며, 이를 통해 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있도록 도와줍니다. 예시 let fn = { // (1) getName() { return this.name }, getAge() { return this.age } }; function Person(name){ // (2) let newPerson = {}; Object.setPrototyp..

  Read More
• NextJS : document is not defined 오류

  frontend/오답노트 2022. 2. 15. 17:30

  문제 : document is not defined Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 해당 시점에 document에 접근하려고 하면 접근할 수 없어서 에러를 뱉어내게 된다. 해결방안으로는 다음과 같다. 해결방법 : function getCookie = (user:string) => { if(typeof window !== 'object') return; let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)"); return value ? value[2] :..

  Read More
• NextJS : Prerendering 쿠키 접근시 오류

  frontend/오답노트 2022. 2. 15. 17:23

  문제 : NextJS getCookie의 값으로 화면 렌더링시 발생가능 문제 Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 그렇기 때문에 프리렌더 과정에서 쿠키에 직접접근하여 데이터를 읽어서 화면을 구성하려하면 문제가 발생한다. 해결방법 : const [user, setUser] = useState(); useEffect(()=>{ setUser(getCookie("user")); },[]); 위와 같이 Mounted시점에 쿠키에서 받아서 user에 할당하여 주면 해결할 수 있다.

  Read More