# nextjs 13버전 - 폴더기반 자동라우팅 - 새로디자인한 서버API 기능 - 쉬운 DB연결 - 직관적인 rendering 전략 선택기능 - hydration없는 server-side rendering - 파워풀한 캐싱 - 이미지와 폰트 최적화 # 개발 환경 셋팅 - nodejs 설치(lts버전 - node 18버전이상) - vscode 에디터 설치 - nextjs 설치 (npx create-next-app@latest) # 폴더 설명 - app 폴더 : 코드짤 폴더 - page.js : 메인페이지 (typescript를 쓰고 싶다면 tsx로 확장자를 바꾸면 된다.) - layout.js : 메인페이지 감싸는 용도의 페이지 - public 폴더 : 이미지나 static 파일 보관용 - api 폴더 ..
#nuxt.js 뷰 서버사이드 랜더링을 구현할 때 가장 많이 쓰는 프레임워크 SEO 전달 서버 사이드 렌더링이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미 쓰는이유 : 검색 엔진 최적화,빠른 페이지 렌더링 ssr이 무조건 좋은건가? 서버쪽에서 환경 구성이 되므로 서버빌드에 대한 이해도가 필요하다 node.js 환경에서 실행 되므로 브라우저 관련 api 다룰 시 주의 해야한다. 또한 beforeCreate나 created에서 window, document같은 브라우저 객체에 접근할 수 없다. 😉컴포넌트가 최초로 생성되는 시점이 브라우저 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없습니..
#vue 백그라운드를 html에서 넣을 때 data bind로 백그라운드를 넣을때는 아래와 같이 넣어야지 된다. :style="{'background-image': 'url(' + require(`~/assets/img/이미지명`) + ')'}" 스택오벌플로우 참조👀 https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working #console.error 콘솔로그 쓰다가 console.error를 쓰면 빨갛게 떠서 더 알아보기 쉽다. 또한 콘솔창에서 에러만 모아서 보기 때문에 더 수월하게 작업할 수 있다. 콘솔종류 확인하기👀 #vue 확장 파일이 없을 때 확인법 콘솔창에서 window.$nuxt...
#뷰 템플릿(Template) HTML, CSS 등 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 1. 뷰템플릿안에서 {{}}를 이용하여 데이터를 연결 2. 디렉티브(Directive) HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미 이 디렉티브에 v-if 와 v-show가 있다. v-if와 v-show는 조건의 참거짓에 따라 그 요소를 표시하거나 표시하지 않거나 컨트롤 할 수 있다. 차이점은 v-show는 요소가 항상 DOM에 유지된다는 점 이다. v-show는 css를 제어하므로 조건이 거짓일 경우 display:none을 반환한다. 그렇다고 참일때 block을 반환하지는 않는다. 따라서 v-show를 ..
#window.open, window.close , window.resizeTo 1) window.open은 새창으로 열기 위하여 사용하는것 이라는 것은 누구나 안다. var 새창이름 = window.open(url, name, specs, replace); 여기서 주목할 것 name이다. name부분에 _blank이렇게 적었던 것을 기억한다. 이번에 알게 된것은 바로 name에 임의의 이름을 붙여주었을때 일어나는 일이다. 가령 어떤 버튼을 눌러서 이름이 붙은 새창을 연다고 생각해보자. 이럴경우 버튼을 계속 눌러도 이미 이름이 붙은 새창에서 계속 리로드 될것이다. 이렇게 하면 새창을 무한으로 띄우지 않는다. https://offbyone.tistory.com/312 2) window.close 말그대로 ..
#computed 1. vue3 state 선언문 내에 computed 속성에 대한 선언 구문을 추가하는 것으로 변화 const 변수명 = computed(() => 계산식; // Composition api가 추가 되면서 함수형식으로 가져옴 2. vue2 - class 컴포넌트일 경우 getter 함수 - 나의 경우 class 형식으로 만들었기 때문에 아래와 같이 작성하였음 - class가 아니라면 함수형으로 적으면 된다. get 함수명(): 리턴타입 { // 리턴타입 예) string - 타입스크립트를 사용하지않을경우는 타입을 적지 않아두 됨 return 조건문 ? true일때값 : false일때 값; // 3항 연산자 } ++ 컴포넌트 내부에서 함수명으로 사용할 수 있다. 예) v-if="함수명" ..
1. retrun문 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환하는 것 1) 조건문을 줄때 중첩된 if문을 쓴다면 function 함수명() { if (조건문) { if (조건문) { ... } } } 이렇게 쓰는경우가 있는대 가독성이 떨어지고 복잡해 보인다. 2) 이럴때 처음부터 조건에 맞지 않을 경우 리턴 시켜버리면 중첩은 줄어들고 가독성은 올라간다. function 함수명() { if(조건문1) return; if (조건문2) { ... } } 조건문1에 맞지않으므로 2를 타지 않고 종료해 버린다. 중복된 조건이 있다면 조건식과 반대되는 경우 return을 선언하고 그다음 필요한 조건을 작성하면 된다. 자바스크립트 function 안에선 return 이라는 키워드를 만나면 retur..
#(--variable) /* 전역 변수 설정 --변수명:값 */ /* 변수의 element 적용 var(변수명) */ // 인라인 스타일 변수 확인 document.documentElement.style.getPropertyValue("변수명"); // 글로벌로 변수 확인 getComputedStyle(document.documentElement).getPropertyValue("변수명"); // 인라인 스타일에 변수 설정 document.documentElement.style.setProperty("변수명", "변수속성"); 🙄위를 응용하여 만든 셀렉트 값에 따른 박스 높이 조정 See the Pen css 변수를 자바스크립트로 제어 by dev_Sunny (@sunny_dev) on CodePen...
#naver flicking 캐러셀 = 롤링배너 기존 사용해본 플러그인으로 부트트스랩 캐러셀, bx슬라이더, 슬릭, 스와이퍼 등등 여러 라이브러리를 써봤는대 네이버에서 캐러셀이 나왔다고 해서 한번 써보았다. 작업중에 샘플사이트를 확인하던중 네이버에서 만들었다는 캐러셀을 처음봐서 당장 써보았다. 첫 작업이라 익숙하지 않았던 차에 깃허브에 문의 사항을 문의하니 친절하게 예시 작업을 아래와 같이 코드펜으로 답변을 주셨다!!!😘👍👍 2가지 섹션으로 주신것은 답변으로 주신 예시이다. 아래 이미지가 들어간 것은 실제로 작업한 나의 작업!! 두개를 합쳐서 마치 바뀌는것과 같은 효과를 원하셔서 해당작업을 진행했다. 샘플사이트를 올릴려고 했으나 해당사이트는 디자인을 바꿔서 볼수가 없었다..!! 그래도 처음 써본 라이브러..
Vuex - 상태관리 라이브러리 컴포넌트를 효율적으로 관리하는 라이브러리 주요속성 : state, getters, mutations, actions 🙌 1. state = data : 컴포넌트 간에 공유하는 데이터 또는 상태 2. getters = computed : 연산된 state 값을 접근하는 속성 / 캐싱하는 속성도 있음 3. mutations = method : state값을 변경하는 이벤트 로직, 메서드 / 인자가 있다면 getters보다 muations 사용을 권장 👀state를 직접변경하지 않고 뮤테이션을 변경하는 이유 : state를 직접변경하면 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵기 때문에 commit을 이용하여 뮤테이션을 변경함(반응성, 디버깅, 테스팅혜택) a..
