rexondex's blog

this - JavaScript | MDN this - JavaScript | MDNJavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.developer.mozilla.org 자바스크립트에서 함수의 `this` 키워드는다른 언어와 조금 다르게 동작합니다. 대부분의 경우 `this`의 값은 함수를 호출한 방법에 의해 결정됩니다.실행중에는 할당으로 설정할 수 없고,함수를 호출할 때 마다 다를 수 있습니다.  const test = { prop: 42, func: function () { return this.prop; },};console.log(test.func());// Expected output: 4..

items.json은 깃허브에 배포한 제 블로그의 게시물 데이터 파일입니다. 제 items.json 또한 공개된 장소에 누구나 접근할 수 있으므로 Nest.js에서 Axios로 데이터를 요청해 보았습니다. -- Next.js 설치npx create-next-app@latest-- 프로젝트 디렉토리로 이동cd my-nextjs-project-- 프로젝트 실행npm run dev   Next.js에서는 `/app` 하위에 있는 `page.tsx`가 기본 화면으로 동작합니다. 그래서 `/app/page.tsx`가 `localhost:3000/` 에 접속했을때 보이는 기본 화면이 됩니다. 저는 `/app` 하위에 `/request` 를 생성한 후, `page.tsx`를 생성했습니다. 이 `/reqeust/pag..

변수와 상수 (JAVASCRIPT.INFO) 변수와 상수 ko.javascript.info var, let, const ─ 변수와 상수 대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작합니다. 예를 들어, 1. 온라인 쇼핑몰 ─ 판매 중인 상품이나 장바구니 등의 정보2. 채팅 애플리케이션 ─ 사용자 정보, 메시지 등의 정보 변수는 이러한 정보를 저장하는 용도로 사용됩니다.  ▶ 변수 :데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용합니다. 자바스크립트에선 `let` 키워드를 사용해 변수를 생성합니다. 아래 문 (statement)는 'message'라는 이름을 가진..

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.developer.mozilla.org 브라우저는 어떻게 동작하는가 사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다.따라서 개발자는 이 두가지 목표를 달성하기 위해서 부단히 노력해야합니다. 실제 성능 및 체감되는 성능을 향상시키는 방법을 이해하기 위해서 브라우저가 어떻게 동작하는지 이해하는 것이 도움이 됩니다.  웹 성능에 있어서 두 가지 주요한 문제는 지연시간과브라우저..

웹의 동작 방식 - Web 개발 학습하기 | MDN 웹의 동작 방식 - Web 개발 학습하기 | MDN*'웹의 동작 방식'*은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.developer.mozilla.org 웹의 동작 방식▶ 웹의 동작 방식은 우리가 상점으로 걸어가는 것과 유사하다고 합니다. 1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다. (상점의 주소) 2. 그  다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달리는 HTTP 요청 메세지를 서버로 전송합니다. (상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연..

rakaso598.github.io Timeline rakaso598.github.io 깃허브에는 `유저명.github.io` 리포지토리를 통해 정적 웹페이지를 배포하는 기능이 있습니다. 이번에 유저명 저장소를 업데이트 한 겸, 후기를 작성합니다.  HTML로 전체적인 구조를 정의하고 `/` 루트 위치에 배치했습니다.`/images` 에는 이미지가 들어가도록,그리고 `/items`에는 게시물을 담당하는 데이터를 넣었습니다. `/items/items.json` 파일은 게시물의 데이터를 표현합니다.  이렇게요! JSON은 문자열 데이터 포맷으로, 문자열을 구조화하여 저장합니다.가장 큰 틀을 대괄호로 감싸고 중괄호로 게시물을 구분하게 했습니다. 중괄호 `{}`안에는 키와 값으로 구분되도록 데이터를 정리하면 됩..

시맨틱 태그는 콘텐츠의 형식 뿐만 아니라 콘텐츠의 의미와 구조를 설명합니다.시맨틱 태그를 사용하면 접근성과, SEO, 가독성 측면에서 다양한 이점을 얻을 수 있습니다. 인용 출처 - 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 - TBWA 데이터랩  시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 말합니다. 이번 글을 통해 시맨틱 태그 요소의 종류와 이점까지 확인해보세요.seo.tbwakorea.com ■ 시맨틱 (Semantic) 단어 자체의 뜻은? `의미의, 의미론적인` 라는 뜻이 담겨있습니다. 이로 유추해보면, 시맨틱 태그는 태그 내용에 의미를 부여하는 ..

종속형 스타일 시트(Cascading Style Sheets, CSS)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어입니다.브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어져 있습니다. 인용 출처 : CSS - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN  그러면 Cascading이란 무엇일까요?MDN Docs에서 찾아봤습니다. MDN Docs에 따르면,Cascade는 사용자 에이전트가 서로 다른 소스에서 생성된 속성 값을 결합하는 방법을 정의하는 알고리즘입니다. 이렇게 들어서는 이해가 잘 안돼서, 한국어로 정리된 자료를 찾아봤습니다. 캐스케이드는 CSS에서 한 요소에 여러 개..

저는 이전에 카페24 워드프레스 호스팅을 구매했었습니다. 워드프레스를 도메인에 연결하고 세팅한지는 좀 되었지만 .. 늦게서나마 검색엔진최적화를 진행한 후기를 올립니다. 제가 진행한 검색엔진 최적화는 총 5가지입니다. 워드프레스 Yoast SEO 활성화구글 서치콘솔 (Google Search Console) 등록빙 웹마스터툴 (Bing Webmaster Tools) 등록네이버 서치어드바이저 등록다음 웹마스터도구 등록 간단하게 사진과 함께 설명드리겠습니다.  [First-time configuratin]을 클릭해 첫 세팅을 완료했습니다.  두번째는, 구글 서치 콘솔입니다. RSS는 주소에 /feed 를 붙이면 됩니다.(예를 들어, https://rexondex.tistory.com/feed 형식으로) Sit..

:: PaaS 서비스란? :: 클라우드 컴퓨팅 서비스는 크게 IaaS, PaaS, SaaS로 구분할 수 있어요. IaaS는 Infrastructure as a Service, 인프라 서비스로, 가상화된 컴퓨터 자원을 이용할 수 있는 서비스에요.PaaS는 Platform as a Service. 플랫폼 서비스로, 개발자들이 어플리케이션을 개발하고 실행할 수 있는 환경을 제공해요.SaaS는 소프트웨어 서비스로, 사용자가 인터넷을 통해 애플리케이션을 직접 이용할 수 있게 제공하는 소프트웨어 서비스에요. Saas의 예시로는 Google Workspace, Microsoft 365, Dropbox, Adobe Creative Cloud, Zoom 등이 있어요, 이 소프트웨어들의 공통점은 클라우드를 사용하여 사용자..