즐겁게, 코드

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..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..