코드존 코드존

하나 하나가 정말 너무 고달프네... Next.js 로 토이프로젝트를 진행하는데 정말 하나하나가 다 의문이고 모르는거 투성이다^^...모르는걸 배우는건 재밌지만 진도가 안나가는건 짜증나.. 그래도 어쩌겠어요.. 해야지.... 나는.. 얼은이니까.. 1. 발단두 줄 헤더에서 스크롤 이벤트가 발생하면, 첫 번째 줄 헤더가 위로 올라가고 두번째 줄 헤더만 고정되는 형식의 UI를 만들고 싶었다. 예를 들면 이런거..^^내가 만든 내꺼입니다. 근데 addEventListener를 어디다가 걸어야되는지, 사용할 hook은 뭔지 감도 안잡혔다^^.그래서 google 에 써치를 했는데 useCallback과 useEffect를 알려줬다. 2. useCallback ? useEffect ?useCallb..

Next.js의 hydration warning 해결하려다가 렌더링 공부한 글.. 0. 브라우저의 동작 원리프론트엔드 개발자라면 한번쯤 찾아봤을 브라우저의 동작 원리.CSR 이든, SSR 이든 브라우저 위에서 작동하기 때문에 다시 한번 회고해본다. 탐색 (Navigation)웹 페이지 로딩의 첫 단계. 웹 최적화의 목표 중 하나는 탐색(검색)이 완료될 때까지의 시간을 최소화 하는 것.탐색(검색)의 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것.( 예를 들어, https://example.com 의 HTML 페이지는 IP 주소가 93.184.216.34 인 서버에 위치함. )해당 페이지를 한번도 방문한 적이 없다면 DNS 조회가 필요.DNS 조회 (DNS: Domain Name System)..

Named Views 를 사용해서 공통 레이아웃을 정의하자! 1. 발단기존 프로젝트 Route 구성은 다음과 같이 되어있었다.// AppLayout.vue // 라우터 index.tsconst routes = [ { path: '/', name: 'main', component: () => import('@/layout/AppLayout.vue'), children: [ /* 하위 페이지들... */ ] }]main 페이지 하위에 공통으로 Sidebar 적용 그리고 App.vue 파일에는 기본 를 넣어 바로 AppLayout.vue로 넘어가도록 작성했다.// App.vue 모든 페이지에 HeaderComp..

Webview 로 연동된 내 도메인..로그는 어떻게 확인할 수 있나요ㅠ?1. 발단회사에서 개발한 솔루션을 고객사 WebView 내부에 연동하면서, 앱의 특정 기능을 트리거하는 Button Click 이벤트를 작성하게 되었다. 해당 과정에서 전달받은 WebView Bridge를 통해 Json 데이터를 전송하는데.... 외않되? 2. Slack api 등록앱 내부 이슈인지, WebView 이슈인지 확인하기 위해서 우선 WebView 내부 로그를 봐야겠다 생각하고..큰 동작은 없고, 전달하는 Json 데이터 및 WebView Bridge 의 존재 유무를 확인하는 정도라 앱 로그 확인의 기본(?)인 usb로 연결 및 크롬 inspect로 설정 까지는 필요 없어보여서 가볍게 slackhooks 를 사..

채팅 Textarea 깨끗하게 만들기!     채팅 컴포넌트를 만들고 있는데 Textarea에 불-편한 이슈를 발견해서 수정해보았다!쭉쭉 늘어나는 Textarea 의 높이...현재 적용된 기능은Shift + Enter 로 줄바꿈Enter로 채팅 전송Auto height resize인데, Enter키를 꾹- 누르고 있으니 해당 영상과 같은 현상이 나타났다..         적용된 코드를 살펴보니..  @input에서는 shiftKey가 true인지 false인지 알 수 없으니,@keydown 으로 shifKey 발생 여부를 onShiftKey 변수에 저장@input과 @keyup.enter 이벤트가 발생했을 때, onShiftKey가 false면 채팅 전송.으로 코드를 짰는데.. @keydown 코드 수정..

기존에 구현했던 Editable Text 컴포넌트를 수정해보았다..!회고: 내가 왜이렇게 어렵게 했찌..? (어리둥절)  결과물    뭔가.. 옛날의 나는 입력받은 Text와 Input Box Text의 스타일도 다르고, 지금은 기억 안나는 또 다른 이유(가 있겟지..?)에 의해 아래의 코드를 작성했던 것 같다. {{ defaultText }}  검토해 보자면...Props로 defaultText가 들어온다면, 기본 텍스트를 보여준다.기본 텍스트 클릭 시, onClickText이벤트를 사용해서 onEdit의 값을 바꿔주고,onEdit이 true면 컴포넌트를 보여준다. ( 기본 텍스트는 숨김 )VaInput 컴포넌트의 이벤트 핸들링을 사용해서- input: ..

index.html해당 코드로 index.jsx 모듈을 적용.화면에 보이는 HTML 코드가 없는 이유는 해당 작업을 react가 담당하기 때문index.jsximport App from "./App.jsx"해당 코드로 마크업 파일 호출.   JSX 란..?Javascript Syntax Extension자바스크립트 문법 확장자...   JSX 확장자자바스크립트 파일 내에서 html 마크업 코드를 작성할 수 있게함브라우저에서 사용 불가jsx 확장자를 가진 파일은 브라우저에 도달하기 전에 개발 서버에서 변환컴포넌트리액트에서 컴포넌트는 자바스크립트 함수와 같음2가지 규칙을 따라 컴포넌트 생성함수의 제목은 대문자로 시작함수에서 렌더링 가능한 값이 반환 되어야 함대체로 나중에 렌더 될 html 마크업이 반

Composition API의 활용 Composition API 란? : 대규모 Vue 애플리케이션에서의 컴포넌트 로직을 효과적으로 구성하고 재사용할 수 있도록 만든 함수 기반 API setup 메서드를 이용한 초기화 기존 옵션 API의 생명주기와 비교하자면 beforeCreate, created 단계에서 setup() 메서드 호출 setup 메서드 내부에서 작성한 데이터나 메서드를 템플릿에서 이용하고 싶다면 객체 형태로 리턴 setup() 메서드는 2개의 인자 사용 - props : 부모 컴포넌트로부터 전달 받는 속성 - context : 기존 옵션 API 에서 this 컨텍스트가 제공하던 정보, emit( this.$emit ) 등.. 반응성을 가진 상태 데이터 - ref 기본 타입(string, n..