공부 및 일상기록

항해 플러스 과정에서 CSR을 바닐라 JS로 직접 구현했던 적이 있다.이번에는 그 CSR 구조를 바탕으로 SSR(Server Side Rendering)과 SSG(Static Site Generation) 를 직접 구현해 보는 것이 과제였다.추가로 React로 SSR, SSG를 구현하는 과제도 있었는데, 일단은 바닐라 JS 쪽을 먼저 정리한다.(Next.js로 SSR/SSG 경험은 있었지만, 직접 바닥부터 짜보려니 꽤 막막했다.) 시작하기 전에 알아보는 CSR, SSR, SSG CSR(Client Side Rendering)브라우저가 빈 HTML + JS를 받고, JS가 실행되면서 fetch로 데이터를 가져와 DOM을 채움.→ 단점: 초기 로딩이 늦고, SEO에 불리.SSR(Server Side Rend..

문제세준이는 양수와 +, -, 그리고 괄호를 가지고 식을 만들었다. 그리고 나서 세준이는 괄호를 모두 지웠다.그리고 나서 세준이는 괄호를 적절히 쳐서 이 식의 값을 최소로 만들려고 한다.괄호를 적절히 쳐서 이 식의 값을 최소로 만드는 프로그램을 작성하시오. 입력첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 많이 연속되는 숫자는 없다. 수는 0으로 시작할 수 있다. 입력으로 주어지는 식의 길이는 50보다 작거나 같다. 나의 풀이let fs = require('fs')let input = fs.readFileSync('/dev/stdin').toString()..

다른 언어에서의 this와 자바스크립트의 this는 많이 다르다고 한다.하지만 나는 자바스크립트에서만 사용해봐서 사실 크게 체감하지는 못한다.다만.. 너무 어렵다고만 느껴왔던것 같아서 다시 한번 정리해 본다. ** 여기서 사용되는 변수, 함수, 클래스에 사용된 이름은 아무 의미가 없고, 변수명이 떠오르지 않아 사용한 것 뿐입니다.. 1. 브라우저 환경에서 this를 바로 호출해보기console.log(this) //Window 브라우저 환경에서 this를 호출하면 window객체가 보이게 될 것이다.그 이유는 자바스크립트에서 기본 컨텍스트가 전역 컨텍스트, 즉 전역 객체이기 때문이다.브라우저에서 전역객체는 window 객체이다. 2. 함수 안에 this를 넣고 호출해보기function simpleFunc..

스택이란 스택은 쌓는다는 의미로 데이터를 순서대로 쌓아올린 모습을 생각하면 된다. 흔히 LIFO (Last In First Out)라고 표현하며 말 그대로 제일 마지막에 입력한 데이터가 제일 먼저 꺼내진다. 자바스크립트의 Array 자바스크립트의 내장 자료구조 중 하나인 배열을 이용하면 스택을 매우 쉽게 구현할 수 있다. const arr: string[] = []; arr.push("a"); arr.push("b"); arr.push("c"); arr.push("d"); console.log(arr.pop()); // d console.log(arr.pop()); // c console.log(arr.pop()); // b console.log(arr.pop()); // a Array 메서드 중 pus..

Side프로젝트로 진행하는 방탈출 관련 웹페이지를 만들고 있다. 오늘은 방탈출 테마들을 여러가지 카테고리를 받아서 해당하는 테마만 필터링 하는 기능을 만들었다. 아직 백엔드쪽에서 서버도 구현되지 않고 API 명세서도 확실하지 않아서 기능만 구현된 상태다. 여기서 한가지만 선택한다면 쉽게 구현되었겠지만 나는 중복 선택을 가능하도록 만들어야 했다. 버튼컴포넌트 먼저 저 버튼들을 만들어줄 컴포넌트를 만들었다. //버튼 컴포넌트 import { useEffect } from "react"; import styled from "styled-components"; const CategoryBtn = ({ categoryIndex, state, setState }) => { useEffect(() => { if (s..

arr.push() : arr배열 맨 뒤에 원소 삽입 arr. pop() : arr배열 맨 뒤 원소 삭제 arr.unshift() : arr배열 앞에 삽입 arr.shift() : arr배열 맨 앞 삭제 arr.splice(n,m) : 특정 요소 지움 n : 시작위치 index, m : 개수 let arr = [1,2,3,4,5]; arr.splice(1,2);// 인덱스번호 1번부터 2개를 지워라 (2,3 지워짐) console.log(arr); //[1,4,5] arr.splice(n,m,x) : 특정 요소 지우고 추가 let arr = [1,2,3,4,5]; arr.splice(1,3,100,200); //인덱스번호1번부터 3개를지우고 1번자리부터 100과 200을 추가 console.log(arr..

set() 사용하여 배열에서 중복 제거하는 방법 filter(), indexOf() 사용하여 배열에서 중복 제거하는 방법 reduce(), includes() 사용하여 배열에서 중복 제거하는 방법 for() OR forEach(), includes() 사용하여 배열에서 중복 제거하는 방법 Object.fromEntries(), map(), Object.keys() 사용하여 배열에서 중복 제거하는 방법 set() 사용하여 배열에서 중복 제거 const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']; console.log(array);// ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'] let result1..

먼저 자료형에 대하여 알아보자 Boolean (불리언) 원시 자료형 중 하나이다. true(참) 혹은 false(거짓) 값으로만 표현할 수 있다. String (문자열) 원시 자료형 중 하나 '값' 또는 "값" 와 같이 따옴표 혹은 쌍따옴표나 외따옴표를 쌍으로 값을 묶어 표현한다. Number (숫자) 원시 자료형 중 하나 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현한다. 10 그리고 '10' 두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없다. undefined 원시 자료형 중 하나 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가진다. null 원시 자료형 중 하나 어떤 값이 비어있음을 의도적으로 표현할 때 사용된다. 1. 느슨한 타입(loosely ty..