데브코스를 시작한지도 어느 덧 3개월이 훌쩍 지났습니다. 이번 달의 강의에서는 Vue와 React를 중점으로 배우고 프로젝트를 진행했습니다.강의에서는 pinia의 option stores를 사용하여 프로젝트를 진행하였습니다. 영화 검색기에도 option store를 사

바닐라 자바스크립트 함수형 컴포넌트 만들기 시리즈1편: 컴포넌트 생성하기2편: useState 만들기지난 포스트에서 useState까지 만들어봤습니다. 이번 포스트에서는 현재 프로젝트의 큰 문제점인 전체 컴포넌트 리렌더링 이슈를 개선해보겠습니다.useState의 set

이전 포스트에서는 컴포넌트를 생성하는 함수를 구현하고 현재 사용 중인 상태 관리 방식의 문제점들에 대해 살펴보았습니다. 특히, 외부에서 state 변수를 직접 조작하는 구조의 위험성과 복잡성에 초점을 맞추었습니다. 이런 접근은 예기치 못한 사이드 이펙트를 일으키고, 상

바닐라 자바스크립트는 웹 개발의 기본이며, 많은 프론트엔드 개발자들이 처음에 접하게 되는 언어입니다. 이에 따라 많은 초보 개발자들은 바닐라 자바스크립트를 통해 기본적인 웹 어플리케이션을 구축하게 됩니다. 그러나 대부분의 자료와 예제는 전통적인 클래스 기반의 컴포넌

데브코스를 시작한지도 어느덧 한 달이 지났습니다. 데브코스 시작 전, 감사하게도 면접 기회를 얻게 되었고 9월 18일에 면접을 보게 되었습니다. 결국 면접에 떨어져 데브코스를 오게 되었는데, 많이 아쉬우면서도 지금 상태로 운 좋게 붙었다 하더라도 회사에 1인분으로, 역

HTTP의 특징과 쿠키와 세션을 사용하는 이유 쿠키와 세션을 사용하게 된 이유는 HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용합니다. 우선 HTTP 프로토콜의 특징에 대해 알아보겠습니다. HTTP 프로토콜 HTTP는 TCP 기반으로 데이터를 주고 받는데 사용

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계와 초기화 단계가 한 번에 진행됩니다. 변수 선언문을 포함한 모든 선언문(함수 선언문, 클래스 선언문 등)은 모두 스코프 최상단으로 끌어올려진 것 처럼 작동합니다. 런타임 이전에

웹 서버와 웹 어플리케이션 서버(WAS)의 차이에 대해서 알아봅시다.우선, 정적 페이지와 동적 페이지에 대해서 알아봅시다.static pages는 바뀌지 않는 페이지로, 웹 서버는 파일 경로의 이름을 받고, 경로와 일치하는 file contents를 반환합니다.항상 동

slash 구경하기

프레임워크 없이 만드는 SSR을 읽고 SSR로 유명한 Next.js가 어떤 방식으로 SSR과 SSG를 하는지 알아보았다. SSG, SSR의 개념에서 build time이나 run time 등에 관한 개념이 나오므로 이 들의 개념을 먼저 알아보았다.build time,

컴포넌트가 여러 개일 때 useState 만들기 블로그 글에 생략된 코드가 있어 이해에 어려움이 있었다.

Obserber pattern은 객체의 상태 변화를 관찰하는 옵저버들의 목록을 객체에 등록해서 상태 변화가 발생할 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버들에게 통지하도록 하는 디자인 패턴.관찰할 대상 = react의 상태렌더 관련 함수 = 옵저버객체에

render VS mounted 컴포넌트를 분할하면서, 원래 render 메서드 하나로만 관리하다가 render 메서드와 mounted 메서드를 분리했다. render와 mounted를 분리한 이유가 뭘까? render 안에서 mounted가 호출된다. 만약 특정 돔

프리온보딩을 수강하며 알게된 것들 react query 적용기 react query를 써봤다고 할 수 있나 개발 동아리 활동을 하면서 react query를 한 번 사용해 본 적이 있다. 깊게 알아보고 사용한건 아니었고, 요즘 react query를 많이 사용한다,

요즘 다양한 웹 사이트에서는 현재의 웹 사이트에서 사용자에 대한 인증을 요구할 때, 외부 서버에서 이미 인증되어 있는 정보를 전달받아 현재 웹 서버에 인증을 하는 방식을 지원하고 있습니다. 이 때 사용되는 프로토콜이 OAuth 프로토콜입니다. 이러한 방식은 사용자에게

웹의 기본, 세션과 쿠키 그리고 JWT에 대해서... 📌 HTTP 요청 현재 모바일이나 웹 서비스에서 가장 많이 사용하고 있는 통신은 HTTP 통신입니다. HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야 합니다. HTTP 프로토콜은 connecti

Next.js 시작하기 📌 프로젝트 Setup Next.js는 create-next-app을 이용하여 어플리케이션을 생성하는 것을 권장합니다. create-next-app은 set up에 필요한 것들을 자동적으로 준비해줍니다. 만약 타입스크립트를 사용하고 싶다면

Vitual Dom이란? Virtual Dom은 말 그대로 가상 돔입니다. 그런데, 가상 돔이 왜 필요할까요? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있습니다. 📌 브라우저 작동 방식 "브라우저 엔진"과 "렌더링 엔진"은 뭘까요? 그

웹팩은 리액트를 배우고 있다면 다들 한 번쯤 들어봤을 프레임워크입니다. 그렇다면 웹팩은 무슨 일을 하는걸까요?웹팩은 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러입니다. 웹펙에서 모듈이란, 웹 애플리케이션을 구성하는 모든 자원을 말합니다. HTML, C

원소가 n개인 배열의 일부 원소를 골라내서 만든 부분 수열 중, 각 원소가 이전 원소보다 크다는 조건을 만족하고, 그 길이가 최대인 부분 수열을 최장 증가 부분 수열이라고 합니다.예를 들어 다음 수열이 있다고 가정합시다.\[3, 5, 7, 9, 2, 1, 4, 8]위