일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 백준
- 클라우드
- HTML
- docker
- k8s
- 이슈
- 타입스크립트
- CSS
- kubernetes
- 솔리디티
- 자바스크립트
- 가상화
- 파이썬
- 프론트엔드
- 백엔드
- 이더리움
- TypeScript
- BFS
- react
- node.js
- 웹
- es6
- 쿠버네티스
- AWS
- 알고리즘
- 컴퓨터공학
- next.js
- JavaScript
- 블록체인
- 리액트
- Today
- Total
목록전체 글 (241)
즐겁게, 코드
이미지나 외부 파일을 불러오기 위한 HTTP 요청은 페이지 로딩 시간에 많은 영향을 미치게 됩니다. 만약 페이지에서 불러와야 할 이미지가 50개라면 HTTP 요청을 최소 50번 이상 보내야 할텐데요, 이러면 3G나 네트워크 환경이 좋지 않은 환경에서는 세월아 네월아 로딩되는 페이지를 보면서 분을 삭혀야 합니다. 오늘은 이미지 파일 요청을 최소화하기 위한 CSS 스프라이트 라는 기법을 알아보겠습니다. CSS 스프라이트 CSS 스프라이트는 여러 이미지를 한 장으로 묶은 후 CSS의 배경 포지셔닝을 통해 처리하는 기법입니다. 위 사진은 여러 서비스에서 CSS 스프라이트를 사용한 예시인데요, 버튼과 로고 이미지를 일일히 HTTP 요청을 통해 불러온다면 용량이 아무리 작다 해도 브라우저의 최대 동시 요청수 제한*..
ES6부터는 for...of 라는 새로운 문법으로 배열을 순회할 수 있게 되었습니다. const student = ["찬민", "연주"]; for (let i of student) { console.log(i); } // 찬민 // 연주 이렇게 for...of 등 "반복 가능" 한 동작을 수행할 수 있는 객체*를 반복 가능한(iterable)한 객체 라고 부르는데요, 오늘은 이터러블한 객체를 생성하는 방법을 소개하려 합니다. (* 배열 역시 Array 객체이므로 객체 라는 표현을 사용했습니다.) 이터레이터 프로토콜 / 이터러블 프로토콜 이터러블한 객체를 만들기 전에 먼저 이터러블과 이터레이터를 정확히 구분해야만 합니다. 둘을 구분하기 위한 규칙 역시 아래와 같이 존재합니다. 이터레이터 프로토콜 - 반복의..
서버 편 과 이어지는 글로, 클라이언트 제작 과정을 여기서 정리하려 했지만 너무 분량이 길어져 중요한 부분만 짚기로 하였습니다. 전체 서버 & 클라이언트 코드는 아래 깃허브 저장소 링크에서 확인할 수 있습니다. C17AN/react-socket-chat socket.io와 리액트를 활용한 채팅 어플리케이션. Contribute to C17AN/react-socket-chat development by creating an account on GitHub. github.com 이 글에서는 리액트 클라이언트에서 socket.io-client를 활용하는 팁만을 다룹니다. 1. 클라이언트와 서버 연결하기 - 언제나 훅을 사용하자 클라이언트에서는 socket.io-client에서 불러온 객체를 활용해 서버와 연결..
socket.io를 활용하면 사용자간 실시간 양방향 통신 어플리케이션을 만들 수 있습니다. 오늘은 socket.io / Express / React 스택을 활용해 채팅 어플리케이션을 제작해 보도록 하겠습니다. [제작할 기능] - 방, 유저네임 설정 - 방 입장 시 유저 입장 알림 - 유저간 채팅 - 방 퇴장 시 유저 퇴장 알림 1. 디펜던시 설치 - npm 또는 yarn을 활용해 먼저 express 와 socket.io 를 설치해줍니다. npm i express socket.io // 또는 yarn add express socket.io 2. 코드 작성 이후, server.js 파일을 생성하고 다음과 같이 코드를 작성합니다. // server.js const express = require("expres..
HTML, CSS, 자바스크립트. 과연 셋의 조합이 어떻게 웹 페이지를 만들어내는 걸까요? 오늘은 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보도록 하겠습니다. Critical Rendering Path (CRP) 이름이 크리티컬하다고 겁먹지 마세요. CRP는 HTML 코드를 실제 페이지로 만드는 일련의 과정입니다. 전체적인 순서는 위 도식과 같은데요, 이제부터는 각 단계에서 일어나는 일을 소개하겠습니다. (※ 이번 글은 페이지 렌더링 프로세스에 관한 글로써 자바스크립트 실행 및 처리 과정은 제외했습니다.) 1. HTML을 DOM으로 변환하기 우리가 열심히 짠 HTML 코드를 브라우저가 받아들면 제일 먼저 DOM 트리를 생성합니다. 트리라... 우리가 알고 있는 그 트리가 맞나요? 맞습니다! , ..
리액트를 다룰 때 함수 컴포넌트에서 속성(prop)을 받아오는 방법은 아마 익숙할 것입니다. const App = ({ name, age }) => { return ( 이름 : {name} 나이 : {age} ) } * 편의상 export default 구문은 따로 표기하지 않았습니다. App 컴포넌트에서 name과 age 라는 속성을 구조 분해 할당 문법으로 받아오는 모습인데요, 만약 상위 컴포넌트로부터 name과 age 속성을 전달받지 못하면 해당 값은 undefined 가 됩니다. 이런 경우를 방지하기 위해 리액트에서는 defaultProps 라는 특수한 프로퍼티를 사용해 속성의 기본값을 정해줄 수 있습니다. const App = ({ name, age }) => { return ( 이름 : {na..
[백준 온라인 저지 - 문제 링크] 이 문제에는 시간 초과라는 무시무시한 함정이 깔려 있습니다. 따라서 여느 DP 문제처럼 DP 테이블을 그려 해결하되, 테이블을 조금 더 창의적으로 고안해야만 합니다! 처음 제가 구상한 알고리즘은 증가하는 인덱스 i ~ N까지의 원소 중 최댓값을 각 i 별로 구한 후, 이 중에서 최댓값을 찾는 방법이었습니다. 이를 기반으로 거친 생각과 불안한 마음을 안고 코드를 짜 봤으나... [실패 코드 (Python)] # 시간 초과 코드 T = int(input()) d = [0] * 100001 arr = list(map(int, input().split())) ans_list = [] temp_list = [] d[0] = arr[0] for i in range(1, T): t..