왜 href에 javascript:void(0)를 사용할까? ... or Main레거시 사이트들의 소스를 살펴보면 위와 같은 형태로 a태그의 href를 처리한 경우를 볼 수 있다.왜 a태그에 href="javascript:void(0);"를 사용했을까?void(0)을 사용하면, undefinded가 반환된다. 즉, 위 코드는 a태그의 고유 동작인 링크 이동을 막기 위함이다.즉, a태그에 걸어둔 공통 CSS 스타일링을 유지하며 실제 Link 이동을 방지하기 위함이라고 볼 수 있다.하지만 위에 처럼 a태그의 리다이렉트를 막기 위해 javascript:void(0); 을 처리하게 될 경우, 어떤 문제가 발생할까?문제 : 마우스 우클릭 액션이 막힌다마우스 우클릭을 했을 때의 “새탭에서 링크 열기/링크 주소 복사..
useCallback()useCallback(함수, [검사값]) 검사값이 변경되었을 때에만 함수를 생성하는 Hook이다.함수를 memoize → 재사용하기 위해서 사용(랜더링 성능 최적화)검사값에 따른 랜더링 비교[] : 검사값이 비어있으므로, 최초 랜더링시에만 함수를 선언하고 이후 계속 재사용한다[number] : number 값이 변경되었을 때에만, 함수를 다시 선언사용 이유자식 컴포넌트에게 props로 함수를 전달할 때 사용 → 자식 컴포넌트의 불필요한 랜더링을 방지함수 변경이 없거나, 연산이 큰 함수를 최초에만 선언하기 위해서 사용 useEffect()사이드 이펙트를 방지하기 위해서 사용함상세 사례API Fetching : 컴포넌트 내에 axios를 선언해놓았는데, 해당 컴포넌트가 부모에 의해 계..
Getting Started | Next.jsWelcome to the Next.js documentation! If you're new to Next.js, we recommend starting with the learn course. The interactive course with quizzes will guide you through everything you need to know to use Next.js. If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.https://nextjs.org/docs/getting-started..
ℹ️ SSR (Server Side Rendering)서버 사이드 랜더링은 서버측에서 데이터를 모두 구성하여 클라이언트에게 전달해주는, 전통적인 랜더링 방식입니다. 서버에서 HTML을 모두 작성하여 브라우저에게 전달, 브라우저는 랜더링을 통해 사용자에게 보여주는 형태이죠.☀️ 장점검색 엔진 최적화(SEO)에 유리이미 HTML 내에 모든 정보가 포함되어 있으므로, 검색엔진이 사이트를 탐색할 때 해당 정보를 가지고 올 수 있습니다.🌧 단점서버의 부하 증가 + 웹 로딩 속도 증가웹의 정보가 많아질수록 서버에서 담당하는 처리양도 늘어나게 됩니다.웹에서 모든 정보를 다 처리해서 전달하므로, 서버의 부하가 클 수록 웹 로딩 속도도 증가하게 됩니다.사용자 경험(UX) 감소새로운 페이지로 이동할 때마다 새로고침(깜빡)..
하고자 하는 것자바스크립트에서 이벤트가 어디서 발생했는지 해당 DOM을 가져오고자 합니다.방법이벤트 부여 방식자바스크립트에서 이벤트를 부여하는 방식은 크게 아래 두가지가 있습니다. *바닐라 JS 기준 장바구니 위 처럼 a태그가 선언되어 있고, 여기에 클릭 이벤트를 걸려고 합니다. 마크업 안에 onclick으로 이벤트 걸기 장바구니 onclick을 통해, 해당 태그를 클릭했을 때 어떤 동작을 할지 설정하기!DOM을 가져온 뒤, addEventListener(”click”, ...)으로 이벤트 걸기let elem = document.getElementById('addCart'); elem.addEventListener("click", function(){ alert('장바구니에 담았습니다.'); });JS를..
결론 $(function(){ ... }) // 위/아래는 같은 의미이다. $(document).ready(function(){ ... }) 즉시실행 함수 앞에 제이쿼리 표시 구분자인 $가 있다면, document.ready를 축약적으로 적은 것이다. 사용 이유 페이지에서 document.ready의 사용빈도는 높은 편인데, 이를 간결하게 쓰기 위해서 축약형을 사용한다. 왜 사용빈도가 높냐면, window.onload의 경우 여러번 선언되어도 단 한번만 인식되지만, document.ready는 여러번 선언되면 그거만큼 여러번 실행되기 때문에 위험도가 적은 편이다. 또한 JSP 특성상 공통 컴포넌트에 대해 include 처리를 많이 하게 되는데, 그 과정에서 페이지의 계층 구조를 명확히 파악하지 못하면 o..
인트로 다른 사람의 Javascript 코드를 보다보면 매개변수로 들어오는 ...args를 자주 볼 것이다. 과연, ... 이 무엇일까? 용어의 다른 이름은? function sum(...args){ ... } 먼저 위 코드처럼 매개변수의 위치에 존재하고 있다. 따라서, 아래처럼 여러가지 이름으로 불리고 있다. 우선 여기선 확산 매개변수 라고 부르겠다. 확산 매개변수 나머지 매개변수 스프레드 변수 (외국) ... (외국) three dots 정의 확산 매개변수는 자바스크립트의 함수 선언의 매개변수에서 활용되는 개념이다. ES6에서 추가된 문법으로 ... 을 사용하여 매개변수로 들어오는 변수의 나머지 값들을 받아오게 하는 기능이다. ... 은 확산 연산자 / 스프레드 연산자 이다. 이는 배열의 나머지 값들..
인트로 자바 Java의 OOP 개념 중에 메소드 오버로딩 Method Overloading이 있다. 이는 메소드가 동일 이름을 가지고 있어도, 들어가는 매개변수가 다르면 다르게 인식된다는 의미이다. pulbic int getGrade(){...} pulbic int getGrade(int a){...} pulbic int getGrade(int a, int b){...} 위 getGrade() 함수는 모두 “getGrade” 라는 함수명을 가지고 있지만 모두 다른 함수로 사용 될 수 있다. 그래서 개발자는 메소드 오버로딩을 활용해 함수의 재사용성을 높일 수 있다. 그렇담, 자바스크립트 Javascript 에선 어떨까? 매개변수가 함수를 결정 짓지 않는다. 결론부터 말하면 자바스크립트는 매개변수가 없든, ..
인트로 HTML의 라디오 버튼을 접근 할 수 있는 방법은 무엇일까? 여러개의 선택지 중에 선택된 것을 고를 수 있을까? 라디오 버튼의 id는 label에 연결되는데, 여러개의 라디오 버튼을 어떻게 가져올까? ... 등등의 물음으로 시작한 서칭이다. Example 1점 2점 ... input type은 radio로 id 값은, label의 연결로 활용되었다. label은 for = id값 으로 연결해서 사용한다. 이렇게 연결하면 label을 클릭할 경우, 해당 id값의 input이 클릭 처리된다. jQuery 로 처리하기 $("input[name='review.score']:checked").val() // score의 라디오 중 체크된 것의 값만 가져옴 // 아무것도 선택안되어있으면, undefined ..
인트로 렌탈스튜디오 예약시 간단하게 웰컴가이드 를 제공하고 있다. 기존에는 MVP(minimum value production) 를 위해 구글 독스를 이용해 PPT 형식으로 만들었다. 하지만 가독성이 너무 좋지 않았고 브라우저별 조작(제대로 드래그가 안되는 등)이 원활하지 못했다. 홈페이지 개발의 갈증을 해소하고 싶은 만큼, 내가 직접 웰컴 가이드를 수정하고 싶다고 생각했다. 기존처럼 좌우로 스와이프 하는 형태의 웰컴가이드를 제작할까도 고민했지만, 많은 글을 전달해야 하는 정보 전달 특성 상 우리에게 익숙한 세로 스크롤 형태를 채택하게 되었다. 하지만 세로로 길게 되어있는 줄글의 형식 상 원하는 글로 바로 가는 것이 어려웠고, A부터 Z까지 다 훑어봐야 한다는 불편함이 있었다. 이를 해소하기 위해선 바로..
인트로 여러 공간에서 사용되는 API KEY가 존재하는데, 이를 한번에 변수처럼 관리하고 git에 업로드를 방지해야 한다. npm 라이브러리인, dotenv를 이용했다. 설정 npm install dotenv 를 하여 vue3에 해당 라이브러리를 추가한다. 최상위 폴더에 .env 파일을 추가한다. 파일 안에 필요한 API KEY를 작성한다. 💥 단, 앞에 VUE_APP_을 추가해야지 전역에서 정상적으로 인식한다. 추가로 전역 변수/상수의 경우 대문자로 작성하는 것이 일반적 규칙이다. 작성예) VUE_APP_API_KEY=abc!@#$ git에 업로드를 방지하기 위해, .gitignore에 위 파일을 추가한다. # local env files .env .env.local .env.*.local= main...
개발 환경 - Vue3 (v4.5.13) - typescript (v4.1.5) - vue-gtag-next (v1.14.0) 인트로 이번에 스튜디오 홈페이지를 개발하여 오픈했다. 프론트는 Vue3를 사용하였고, 백엔드는 따로 구성하지 않고 파이어베이스를 통해 진행하였고 호스팅까지 진행했다. 배포한 이후 몇명의 사용자가 오는지 측정하고자 하였는데, 그럴려면 DB에 사이트 조회수를 카운팅해야 했다. 물론 이것도 필요하긴 하지만, 그 추이를 파악하기 위해선 어드민 페이지도 필요했다. 당장의 MVP를 만들기엔 불필요한 부분이었다. 그리고아직 리얼타임 DB 적용해본적이 없다ㅎ 그래서 GA를 달기로 결정했다. 기본적으로 방문자 수 카운팅과 추이를 확인할 수 있었고, 많은 마케터들의 성과 측정 도구인 만큼 한번 사..