프론트엔드 개발

JS에서 prototype이 필요한 이유 function Person(name, fir, sec, thi) { this.name = name; this.fir = fir; this.sec = sec; this.thi = thi; this.sum = function() { return this.fir + this.sec + this.thi; } } const kim = new Person('kim', 100, 100, 100); console.log(kim.sum()); // 300 kim.sum = function(){ return (this.fir + this.sec )/ this.thi } console.log(kim.sum()); // 2 const park = new Person('park', 5..

자바스크립트에서 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 함수의 호출 방식 1. 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. apply / call / bind 호출 const tell = function () { console.dir(this); }; // 1. 함수 호출 tell(); // window // 2. 메소드 호출 const person = { say: tel..

undefined undefined는 데이터 타입이자, 값을 나타냅니다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다. temp라는 변수를 선언하였지만, 값을 할당하지 않았기 때문에 temp변수에 undefined를 할당하게 됩니다. 변수만 선언했지만 값을 가지게 되어 undefined는 값이면서 데이터 타입인 것입니다. let currentUser; console.log(currentUser, typeof currentUser); // undefined, "undefined" null null 타입 변수의 경우는 명시적으로 '값이 비어있음'을 나타내는데 사용합니다. 다시 말해, 아무것도 참조하고 있지 않다는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용합..

왜 쿠키와 세션을 쓰게 된 걸까? client와 server는 항상 연결되어 있는 상태가 아니라 요청(request)과 응답(response)의 반복으로 데이터를 주고받는다. 서버는 사용자를 기억하지 못하는데, 이는 HTTP가 다음과 같은 특성을 따르기 때문이다. - connectless(request -> response -> 연결 종료) - stateless(no connect -> no memory) 이를 해결하기 위해 쿠키와 세션을 사용하게 되었다. 쿠키(cookie) 클라이언트 측 로컬 브라우저에 저장되는 Key-Value쌍의 작은 데이터 이후 클라이언트가 데이터를 요청 시, header에 쿠키를 넣어 서버에 보내게 되고, 서버가 쿠키를 읽어 사용자 식별. 로그인 정보가 쿠키에 담겨 있다면, 더..

정규표현식이란? 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 문자 검색(search), 문자 대체(replace), 문자 추출(extract)와 같은 역할을 수행합니다. 예를들어, 많은 텍스트 중에 전화번호의 텍스트를 찾거나 웹사이트의 패턴을 찾을 수 있습니다. 이렇게 찾아진 패턴을 다른 문자열로 변환시킬 수도 있습니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit https://example.com. Officia veniam molestias iure rem vero totam fuga rerum consequatur sed placeat? Sed, fugit dolor voluptatem libero...

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JSON은 완벽하게 언어로부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그 외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다. Json 특징 JSON stands for JavaScript Object Notation JSON is a lightweight data-interchange format JSON is "self-describing" and easy to un..

NEXT JS Environment Variables를 번역했습니다. Next.js 버전 9.4 이상용입니다. 이전 버전의 Next.js를 사용하는 경우 next.config.js에서 환경 변수를 업그레이드하거나 참조하세요. (github.com/vercel/next.js/tree/canary/examples/environment-variables) Exposing Environment Variables to the Browser 기본적으로. env.local을 통해로드 된 모든 환경 변수는 Node.js에서만 사용할 수 있는데, 브라우저에 변수를 사용하려면 변수 앞에 NEXT_PUBLIC_을 붙여야합니다. NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk process.env.NEXT_..

form.fordate.org/#/test 회사에서 만든, 서비스 중 하나에서 예시를 들어봤다. 네트워크 탭에서, F5를 누르면 하단에는 종합정보 좌측부터 다운로드 요청갯수 : 23 requests 수신한 데이터 크기 : 2.8MB 웹페이지 총 크기: 2.9MB 다운로스 소요시간: 8.97s DOM Tree 구조를 그리는데 걸리는 시간: 2.51s 웹페이지 렌더링 완료시간: 3.03 s 다운로드 크기와 페이지 크기가 서로 다른 이유 웹 서버가 압축된 리소스를 전송했기 때문에,