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]위

k번째 수 한동안 코딩테스트 관련한 포스팅을 게을리하다, 이 문제는 다시 한 번 풀어도 헤맬 것 같아 미래의 나를 위해 정리합니다. 🛠문제 세준이는 크기가 N×N인 배열 A를 만들었다. 배열에 들어있는 수 Ai = i×j 이다. 이 수를 일차원 배열 B에 넣으면

함수나 클래스는 한 가지 일만 수행해야 합니다. 이는 리액트의 컴포넌트도 마찬가지입니다. 컴포넌트 하나가 수행하는 일은 하나인 것이 이상적입니다.예시를 통해 이해해봅시다.이 컴포넌트는 하는 일이 굉장히 많습니다.원격 데이터 가져오기데이터 필터링하기복잡한 상태를 관리하기

기초2 1. eval() 피하기 2. parseInt() 기수 쓰기 3. 코딩 규칙 준수하기

함수형 컴포넌트와 클래스 컴포넌트의 차이점 함수형 컴포넌트와 클래스 컴포넌트는 어떤 점이 다를까요? 문법적인 차이점은 쉽게 찾을 수 있겠지만 오늘은 내부 Reference > 이 글은 댄 아브라모프의 블로그 글을 보고 정리한 글입니다.https://overreac

트위터를 클론 코딩하다가 주의할 점을 알게되어 정리합니다.인라인으로 스타일링 하는 방법은 그다지 좋은 방법이 아니지만 프로젝트를 하다보면 어쩔 수 없이 사용해야 하는 경우가 있습니다. 렌더링에 있어서 중요한 점이지만 금방 까먹을 것 같아 블로그 글로 남겨둡니다.버튼 컴

소프트웨어의 버그를 고치는 데는 비용이 듭니다. 발견한 즉시 버그를 고칠 수 있다면 가장 좋겠지만 얼마간 시간이 흐르고 난 뒤 코드를 다시 들여다보면 해당 코드를 다시 이해하는데 시간을 할애해야 합니다. 프로젝트 규모가 크다면 버그를 만든 사람, 버그를 발견한 사람,

영문 한 글자를 입출력하는데 사용하는 자료형은 char입니다. 내부적으로 8비트 정수 형식이기 때문에 글자에 숫자를 더하거나 빼는 연산도 가능합니다.getchar() 함수는 문자 '하나'를 입력받기 위한 표준 입력 함수입니다. 함수 호출 전에 결정할 사항은 없고(voi

배치 처리 시스템은 여러 프로그램을 순차적으로 실행합니다. 그러다 보니, 어떤 프로그램은 실행 시간이 많이 걸려서 다른 프로그램을 실행하는데 많은 시간을 기다려야 합니다.만약, 음악을 들으면서 문서 작성을 하고 싶다면 어떻게 할까?또, 여러 사용자가 동시에 하나의 컴퓨