서울특별시청을 찾아가기 위해서는 서울특별시청의 주소를 알아야 합니다. 마찬가지로 네트워크 상에서 서울특별시청에 근무하는 김코딩 사무관의 PC에 접속하기 위해서는, 김코딩 사무관의 PC를 가리키는 주소를 알아야 합니다. 이렇게 네트워크에 연결된 특정 PC의 주소를 나타내는 체계를 IP address(Internet Protocol address, IP 주소)라고 합니다. 이번 콘텐츠에서는 네트워크 상에서 특정 PC를 나타내는 IP 주소와 그 주소에 진입할 수 있는 정해진 통로, PORT(포트)에 대해 학습합니다. IP address 공유기를 설치하고 비밀번호를 설정하려면, 공유기 관리 페이지에 접속해야 합니다. 웹 브라우저에 닷(.)으로 구분된 네 덩이의 숫자를 입력하면, 공유기의 관리 페이지로 접속할 수..
브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타냅니다. 예를 들어 https://codestates.com:443/ 사이트에 접속하게 되면, codestates.com 주소가 가리키는 서버의 기본 폴더를 뜻합니다. CLI 환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있습니다. 그러나 기본적인 보안의 일환으로 외부에서 직접 접근이 가능한 경우는 거의 없습니다. 이번 콘텐츠를 보다 쉽게 이해하기 위해, 크롬 브라우저에 다음 url을 입력해 보세요. # username에는 사용자 이름을 입력합니다. # Ubuntu: file://127.0.0.1/home/username/Desktop/ # macOS: ..
화면에서 자주 바뀔것 같은 부분은 state에 담는다. state 만드는 법 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있다. 이번에 state를 이용해 데이터를 잠깐 저장해보도록 하자. import { useState } from 'react'; import './App.css' function App(){ let [title,setTitle] = useState('리액트 useState hook'); let posts = '리액트 JSX 문법'; return ( 동욱의 블로그 {title} 2월 17일 발행 ) } 맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서 useState('보관할 데이터') 쓰면 state에 데이터를 잠깐 저장할 수 ..
1. 렌더링 차단 리소스 제거하기 렌더링 차단 리소스란, 페이지의 렌더링을 차단하는 리소스를 의미합니다. 이러한 리소스를 최적화하면 페이지의 로딩 속도를 개선할 수 있습니다. Lighthouse를 사용하여 웹 사이트를 테스트할 때, 렌더링 차단 리소스 제거를 제안하는 경우가 있습니다. 이를 위해 WordPress에서는 CSS 로딩 최적화 외에도 더 많은 조치를 취할 수 있습니다. 렌더링 차단 리소스를 제거하기 위해서는 우선 렌더링 차단 URL을 파악해야 합니다. Lighthouse나 Page Speed Index와 같은 사이트 퍼포먼스 테스트 진단 결과를 확인하면 FCP(First Contentful Paint)를 차단하는 모든 URL이 나열됩니다. 렌더링 차단 URL을 파악한 후, 다음과 같은 방법으로..
리액트에서는 html 대신 JSX라는 걸 써서 웹 페이지를 만들어나간다. JSX 문법 1. html에 class 넣을 땐 className (App.js) function App(){ return ( 동욱의 블로그 ) } App.js 파일에 html 코드와 비슷한 코드는 html이 아니라 JSX이다. 원래 리액트 환경에서 하나 만들고 싶으면 자바스크립트로 React.createElement('div',null) 이런 식으로 어렵게 코드를 짜야한다. 근데 이러면 리액트를 사용하는 유저들이 다 도망갈것이다. ㅋㅋ😭 그래서 리액트 개발자들은 JSX라는 언어를 대신 사용하게 해주었다. JSX는 html과 사용방식은 비슷하다. 근데 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 ..
📌 React, Vue, Angular, Svelte의 공통적인 목적 웹에서 웹 페이지가 아닌 SPA(Single Page Application)를 만든다. 📌 웹 페이지 웹 페이지라 하면 네이버, 다음을 생각하면 된다. 각각의 페이지들이 명확하게 나누어져있는 사이트들이다. 📌 SPA (Single Page Application) SPA는 웹에서 모바일 앱처럼 앱 같은느낌이 나는 사이트들이다. SPA는 실제로 기존의 웹 페이지보다 더 많은 기능을 제공한다. 그래서 복잡하고 어려워졌다. 이게 프론트엔드 개발자가 나온 이유이기도 하다. SPA의 예시로 Gmail, 웹 액셀,웹 파워포인트,웹 워드들을 생각하면 좋다. 실제로 Gmail을 사용하면 웹 사이트가 아니라 하나의 애플리케이션같은 느낌을 받을것이다. 웹..
자바스크립트는 기본적으로 동기식 처리 (Synchronous) 동기식 처리란 한번에 코드 한 줄씩 차례대로 처리한다는 뜻이다. 자바스크립트를 실행하는 웹 브라우저(런타임)는 stack이라는 코드 실행 공간이 있다. 거기서 코드를 한줄한줄 차례로 실행한다. 위 코드는 1,2,3이 한줄씩 차례대로 실행된다. 왜냐하면 자바스크립트는 synchorous 하기 때문이다. 거의 대부분의 프로그래밍 언어들은 이런 특징을 가지고 있다. 자바스크립트는 비동기처리 (asynchoronous)라는 것도 가능하다 일단 자바스크립트에서 비동기처리란? ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. 특정 코드를 1초 후에 실행하고 싶으면 어떻게 할까? 파이썬에서 위 ..
일단 웹 브라우저 동작원리를 왜 알아야 할까? - 자바스크립트를 웹 브라우저가 실행하기 때문이다. 웹 브라우저의 동작원리를 알면 자바스크립트가 동작하는 흐름에 대해 더 잘 알게 될 것이다. 웹 브라우저란? - 서버에서 받아온 HTML CSS JS 를 실행시켜주는 프로그램이다. 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 준다. console.log(1); setTimeout(() => { console.log(2)}, 1000); console.log(3); // 1 // 3 // 2 stack이란? 스택(stack)은 자료 구조 중 하나로, 데이터를..
API란? Application Programming Interface의 약어이다. 일단 Interface가 무엇인지부터 알아보자. Inteface란? 무언가와 상호작용하는 방식을 의미한다. 예를 들면, 집에 있는 TV은 Interface를 가지고 있다. TV를 끄도록 하는 버튼이 있기 때문이다. 그 버튼이 사용자와 텔레비전과 상호작용을 할 수 있도록 하는 Interface이다. 웹 사이트도 Interface를 가지고 있다. 사용자가 웹사이트와 상호작용할 때 누르는 버튼들 이런것들이 다 Interface라고 할 수 있다. Interface는 기본적으로 사용자에게 노출되어있는 버튼이고, 그걸 통해 어플리케이션이나 전자기기 등 무엇이든지 상호작용할 수 있다. 또 한가지 예를 들면 아래에 있는 리모콘도 Int..
위 코드에서 externalVariable은 external.js 파일에서 정의되었으며, index.html 파일에서 src 속성을 사용하여 해당 파일을 불러왔습니다. index.html 파일 내부의 태그에서는 externalVariable을 사용할 수 없지만, var localVariable = externalVariable;와 같이 다시 정의하여 사용할 수 있습니다. 이후 console.log(localVariable);을 실행하면, "Hello, world!"가 출력됩니다.
