본문 바로가기

study

 (80)
Next.js 13 - Warning: Prop `style` did not match. Server 오류 오류 메세지는 아래와 같다. Warning: Prop `style` did not match. Server: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill-mode:both;animation:react-spinners-GridLoader-grid 0.6140239847719086s -0.18597601522809143s infinite ease" Client: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill..
Next.js 13 - ReferenceError: window is not defined 오류 오류 메세지는 아래와 같다. ReferenceError: window is not defined api 모듈에서 window객체에 있는 함수를 사용하였는데 서버 컴포넌트에서는 당연히 사용할 수 없지만 클라이언트 컴포넌트에서도 오류가 발생하였다. 문제 발생 원인 // window is not defined error export const commonApi = { getUserOs() { const userOs = window.navigator.userAgent.replace(/ /g, '').toLowerCase(); ..... ..... ~ ..... ..... }, }; 위의 getUserOs 함수를 클라이언트 컴포넌트에서 사용하였다. export default function App() { // g..
Js - 화살표 함수(Arrow Function) 1. 화살표 함수 사용법 2. 화살표 함수의 this 화살표 함수는 es6에서 나온 문법이며, function을 사용하여 함수를 만드는 것보다 간단하게 함수를 작성할 수 있다는 장점이 있다. 화살표 함수의 특징을 보자면 아래와 같다. this, super에 대해 바인딩할 수 없다. 메소드로 사용할 수없다. call, apply, bind 메소드를 사용할 수 없다. 생성자 함수로 사용할 수 없다. 항상 익명 함수이다. 1. 화살표 함수 사용법 // 매개 변수가 없는 화살표 함수 const foo = () => { console.log("sik"); }; // 매개 변수가 있는 화살표 함수 const foo = (a, b) => { return a + b; }; foo(1, 2) // 3 // return이..
Js - this에 대하여 1. 일반 함수에서 호출하는 this 2. 메소드에서 호출하는 this 3. 생성자 함수에서의 this 4. 콜백 함수에서의 this 5. 화살표 함수에서의 this 우선 간단히 중요한점을 요약 하자면 전역에서 사용한 this 전역 객체에서 사용한 this는 항상 window이다. 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. 자바스크립트 런타임에서 모든 변수 및 함수는 window라는 전역 객체의 프로퍼티와 메소드이다. 함수 내부에서 사용한 this 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다. function 키워드로 선언된 함수는 일반 함수이다. 객체안에 선언된 함수는 전역에 선언된 함수와 비교하기 위해 메소드라고 한다. 전역에 선언된 함수와 function..
Network - Http Get, Post 차이 1. Get 메소드란 2. Post 메소드란 3. Get과 Post의 중요한 차이점 Get과 Post는 브라우저가 서버에 데이터를 요청할 수 있는 메서드이다. 1. Get 메소드란 Get은 서버에 요청을 전송할 때 요청파라미터를 Url에 쿼리스트링으로 닮아 전송한다. 기본적으로 Url 끝에 ?와 함께 키와 값을 넣어 파라미터를 전달한다. 만약, 요청 파라미터가 여러개일 경우 &로 연결하여 요청을 한다. Get 요청의 예시를 보면 아래와 같다. www.exampleurl.com/user_info?name1=value1&name2=value2 또한 Get요청은 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있다. 이미지 같은 정적인 컨텐츠는 데이터 양이 크고 변경될 일이 적어 계속해서 동일한 요청을 할 필..
css - position(static, relative, absolute, fixed, sticky) 1. position: static 2. position: relative 3. position: absolute 4. position: fixed 5. position: sticky css에서 position 속성은 html 문서에서 엘리먼트가 배치되는 방식을 결정한다. position 속성은 엘리먼트의 정확인 위치 지정을 위하여 top, left, bottom, right 속성과 함께 사용한다. 1. position: static position 속성을 별도로 지정하지 않는다면 기본값인 static이 적용된다. position이 static인 엘리먼트는 html문서에 작성된 순서대로 브라우저 화면에 표시된다. static일 경우 top, left, bottom, right 속성값은 무시된다. See ..
vue - 라이프사이클(LifeCycle) 1. Vue2 라이프사이클 2. Vue2와 Vue3의 라이프사이클 차이점 1. Vue2 라이프사이클 Vue의 라이프사이클은 크게 create, mount, update, destroy 등 4개의 단계로 이뤄지며, 각 단계의 Hook을 제공한다. beforeCreate 라이프사이클 중 가장 먼저 실행되는 훅이다. Vue 인스턴스가 초기화 된 직후에 발생된다. 컴포넌트가 DOM에 추가되기 이전이여서 엘리먼트에 접근할 수 없으며, data, method 등에서 접근할 수 없다. Created 인스턴스가 생성되면 실행되는 훅이다. 해당 단계에서는 data, computed, method, watch등이 활성화되어 접근할 수 있다. 하지만 아직 DOM이 추가되지 않은 상태이기때문에 엘리먼트에는 접근할 수 없다. ..
Web - 웹 폰트(Web Font) 최적화 1. 웹 폰트란 무었인가? 2. 웹 폰트의 장, 단점 3. 웹 폰트 확장자 4. 웹 폰트 최적화 방법(폰트 파일사이즈 줄이기, 서브셋 폰트 사용) 웹 성능 최적화 관련 공부를 하다가 네트워크 탭을 보아았는데 폰트 파일의 크기가 무려 3.8MB였다...... OTF 확장자의 폰트를 사용했기 때문이다. 분명 웹페이지 로딩 속도에 상당히 영향을 주었을것이다. 오늘은 이 무지막지한 폰트파일의 사이즈때문에 충격을 먹어 폰트 최적화에 대해 공부하려고 한다. 1. 웹 폰트란 무었인가? 웹 폰트란 웹사이트 방문자의 컴퓨터에 폰트 설치 여부와 상관없이 웹사이트의 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 역할을 한다. 2. 웹 폰트의 장, 단점 장점 웹 폰트를 사용하면 사용자의 컴퓨터에 해당 폰트가 없어도..

티스토리툴바