민규의 개발블로그

공통점 computed, watch 둘 다 Vue 인스턴스 내에 정의된 데이터 값에 대해 변경이 일어나는지 감시하고, 변경될 때 마다 함수가 재실행 된다. computed -- 반응형 getter computed에 정의한 함수는 함수이자 동시에 Vue 인스턴스 데이터가 된다. copmuted에 정의해 사용하면 화면 여러군데에 사용해도 한번만 연산된다. watch -- 반응형 callback watch 역시 computed처럼 vue 인스턴스 데이터가 값이 변경되는지 감시하고, 변경되면 실행된다. 그러나 computed는 기존에 값을 기반으로 새로운 데이터 값을 위해 활용 된다면 watch는 정의된 데이터 값 하나만을 위해 사용된다. watch의 경우 데이터가 바뀌기전 까진 실행되지 않는다. 쉽게 말해서 ..

기존에 무한 스크롤시 중복 요청을 보내는 것을 lodash의 throttle로 지연시간을 주어 해결했었다. 그러나 지연시간을 짧게 주었을 경우 0.2~1초 1초 사이에 api를 불러오면 프로그램내에서 처리시간(스터디 데이터 불러와서 마지막 id 체킹)이 지연시간 보다 길다보니 중복 데이터를 불러오는 경우가 생겼었다. 처음 생각한 해결 방법은 "편하게 지연시간을 2초로 넉넉히 주자"가 있었지만 그건 좋지 못한 방법이 었고 차분하게 생각해보니 그냥 서버에서 온 값과 기존 데이터를 비교해서 중복이면 추가해주지 않으면 된다는 간단한 생각이 들었다. 그로인해 필요한 건 내 es6 역량이었다. 결국엔 두개의 배열 내 객체 id 값 비교 여기서 payload.contents는 서버로부터 온 값, state.study..

문제 현재 진행하고 있는 프로젝트에서 find 페이지에 접속하면 서버에서 api 호출후 study 데이터를 3개씩 끊어서 가져오는 무한 스크롤을 구현했었다. redux-thunk로 비동기 관리를 해주었는데 기존 redux-saga를 사용할때 썼었던 throttle 헬퍼 함수를 쓰지 못해 get 요청의 반복 요청의 빈도를 제한하지 못해 스크롤 이벤트에 따라 요청을 무수히 보내버렸다. (throttle을 사용하면 인자값으로 넣어준 시간 만큼 요청이후 지연 시간이 생긴다. 지연 시간 동안의 요청은 무시한다.) 해결방법 우선 Lodash의 throttle을 적용했다. _.throttle(func, [wait=0], [options={}]) 첫번째 인자에 함수 두번째 인자에 지연시간을 넣었다. 그러나 이렇게 까지..

vercel로 배포한 gyumongeats에 커스텀 도메인을 해주기 위해 도메인을 구매하고 연결해준 내용을 기록한다. 도메인 구매 도메인은 가비아에서 구매해 주었다. 현재 이벤트 중인 1년에 500원인 shop인 도메인을 구매하였고 My가비아 -> 서비스 관리 -> 관리 툴 -> DNS 정보 : 도메인 연결 설정 -> 설정 -> 레코드 수정 아래와 같이 vercel과 연결하기 위해 레코드를 수정하였다. A 레코드는 DNS의(Domain Name System) 레코드 중 하나로써 웹서버의 IPv4 주소를 매칭 할 때 사용한다. TTL(Time To Live)은 다음 레코드 변경사항이 적용될 때까지 걸리는 시간(초)을 결정하는 DNS 레코드 값이다. CNAME 레코드는 gyumongeats.shop 필드뿐만..

오늘 프로젝트를 하면서 하루 종일 에러와 다퉜다.... 이유는 pre render 에러 때문.. 배포할 때마다 해당 에러가 나서 골머리를 썩었다. 결국 장시간의 삽질끝에 해결 이유는 즉슨 선배 개발자님왈) netlify getServerSideProps 메서드 지원 안 해요.... 이것 때문에 사전 렌더링이 안되었던 것 같다. 바로 varcel로 배포하니 짜잔...! 아직 로그인 쿠키 문제가 해결되진 않아서 완벽하진 않지만 배포했다는 것에 크나큰 의의를 두고 있다.. 감동 ㅠㅠ https://gyumongeats.vercel.app/

나는 그동안 프로젝트를 하면서 코드를 짤 때 구현에 급급한 코드만을 작성해 왔다. 때문에 당장 일주일 전에 짠 코드만 봐도 한눈에 무슨 생각을 가지고 코드를 짰는지 코드를 작성한 나조차 한눈에 파악이 어려웠다. 클린 코드란 무엇일까? 원하는 로직을 빠르게 찾을 수 있는 코드다. 실무에서 클린 코드의 의의는 유지보수 시간의 단축이다. 그러면 어떻게 해야 클린 코드를 짤 수 있을까? 첫째 응집도 같은 목적인 코드는 뭉쳐두자 예를 들면 커스텀 훅 등이 있다. 커스텀 훅을 작성할 때는 어떤것인지 직관적으로 알 수 있어야 한다. 당장 몰라도 되는 디테일을 뭉쳐야 좋다. 클린코드는 짧은 코드가 아니다. (선언적 프로그래밍: 핵심 데이터만 전달받고 세부 구현은 뭉쳐 숨겨두는 개발 스타일) 둘째 단일 책임 함수명만 봐..

프로젝트 개발을 하면서 코드의 가독성을 위해서 유저 인증 부분을 따로 커스텀 훅으로 빼주었다. api 호출은 swr을 이용하고 있으며 로그인시 로컬 스토리지에 jwt 토큰을 저장하고 토큰 유무에 따라 swr로 데이터를 불러온다. /hooks/useMyInfo.ts 우선 CSR 환경만 고려해서 작성한 훅이다. 로컬스토리지에 토큰이 있을 경우 헤더에 토큰을 담아 api를 호출한다. 그리고 isLoggedIn 상태를 true로 설정해준다.(근데 굳이 swr data값의 유무에 따라 isLoggedIn의 역할을 대신해 줄 수 도 있을 것 같아 isLoggedIn을 그냥 없앨까도 고민 중이다. 추후 회의 후 결정) 최종적으로 swr로 가져온 data를 내보내준다. /components/Header 로그인 유무에 ..

HTML doctype을 선언하는 이유에 대해서 아시나요? HTML은 버전 별로 지원하는 태그가 다르기 때문에 HTML이 작성된 버전 정보를 미리 선언해 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것입니다. 점진적 렌더링(Progressive Rendering)에 대해서 설명해주세요. 점진적 렌더링(Progressive Rendering)은 서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍 하는 기술이다. SEO에 대하여 설명해 주세요. 적용 사례가 있으면 구체적인 적용 방법도 같이 설명해주세요 검색 엔진 최적화라는 뜻이다. 검색 엔진 봇들은 사이트의 데이터를 크롤링할 때 자바스크립트 파일을 해석할 수 없기 때문에 ..