GitHub 와 GitLab 의 핵심적인 차이는 DevOps 워크플로우 통합 수준과 사용하는 목적 이다.GitHub: 오픈소스 공유, 커뮤니티 협업(SaaS 위주) 강점, 속도우선 <<프로젝트 중심>>GitLab: 자체 호스팅가능, 내장된 CI/CD로 올인원

구글의 V8 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js가 등장함으로써 웹의 영역에서 벗어나 서버 사이드 애플리케이션 영역까지 커버할 수 있는 범용 개발 언어가 되었다.그래도 역시나 주력 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션 의 클라

| set객체는 중복되지 않는 유일한 값들의 집합이다.이러한 Set 객체는 배열과 유사하지만 몇 가지 차이점이 있다.(배열은 이 반대의 특징을 가진다는 의미겠지?)배열과 다르게 동일한 값을 중복 포함할 수 없다.배열과 다르게 요소 순서에 의미가 없다.배열과 다르게 인덱

"내가 기준이야! 기준!!" 이터러블 프로토콜이란? | 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위한 약속한 규칙이다. ES6이전에는 각자의 방법으로 데이터 컬렉션을 순회하였지만, ES6에서는 이터러블 로 통일시켜 'for...of문', '스프레드 문법', '배열 디스트럭처링 할당' 의 대상으로 사용할 수 있도록 일원화했다. 이터러블이란? | 이...

"내가 바로 유일무이한 7번째 타입!" 들어가면서, 자바스크립트가 ECMAScript로 표준화되면서 6개의 타입(문자열, 숫자, 불리언, undefined, null, 객체 타입)이 존재하게 된다. 그런데 ES6에서 7번째 데이터 타입으로 등장한 것이 있는데, 그

| 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다.정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.(패턴 매칭 기능: 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능)정규표현식 사용시, 반복문과 조건문없이 패

| React 기반의 메타 프레임워크로 웹 애플리케이션을 구축하는데 사용하는 도구이다.React는 UI구성에 포커스를 맞춘 라이브러리인 반면, Next.js는 React 개념에 렌더링과 서비스 제공에 특화된 추가 기능을 더해서(+) 제공하는 프레임워크이다. ✋🏻 잠깐

| PHP → RSC 오래 전, 대부분의 개발자들이 풀스택 개발의 시작점이였던 LAMP 스택(Linux, Apache, MySQL, PHP) 로 풀스택 웹 개발을 시작했다.PHP 는 HTML 의 상위 집합으로 모든 HTML문서가 유효한 PHP문서가 될 수 있다. (호환

개념은 익히고 NEXT.js로 넘어가자 CSR 이란? | Client Side Rendering 즉, 클라이언트 측에서 렌더링이라는 의미이다. SSR 이란? **|

"내가 가지고 있는 속성을 원해? 주문(super)을 외쳐봐!" 클래스 정의방법 클래스는 class 키워드를 사용하여 정의한다. 생성자 함수와 마찬가지로 파스칼 케이스를 사용한다. (단, 파스칼 케이스를 사용하지 않아도 에러가 발생하지는 않는다🤷🏻‍♀️) 일반적이

리액트에서 핵심이 되는게 뭘까? 라고 했을때 많은 것들이 있겠지만, 상태관리가 빠지면 섭섭할 것 같다.리액트 훅을 소개하면서 가장 먼저 소개한 훅도 useState 였던만큼 상태관리를 빼놓고 리액트를 얘기할 수는 없다.사용자가 어떤 동작을 했을 때, 요청을 보내고 응답

리액트 훅이라고하면 일반적으로 use- 접미사로 시작을 한다.그런데 use 만 덩그러니인 것이 나타났다!?이건 리액트 훅일까 아닐까? 🧐| Promise 나 Context 와 같은 데이터를 참조하는 React API 이다.resource참조하려는 데이터로, 데이터는

🚦"나는야 교통정리원" 예고편 되돌아보기 🎥 Suspense 글의 마무리에서 예고했던 내용을 되돌아보자. 페이지가 로딩될 때 전체적인 레이아웃은 보이는데, 내용은 희미하게 처리되어 보이는 화면을 본 경험이 있을 것이다. (있다고 해주세요 제발) 이렇게 상태 전환이 급하지 않아서 이미 공개된 컨텐츠를 대체UI(fallback) 로 숨기느니 이전 페...

"엇박자의 조화로움을 보여줄게" 예고편 되돌아보기 🎥 Suspense 글의 마무리에서 예고했던 내용을 되돌아보자. 검색어를 입력하는 상황에서 '사' 라고 입력하고 다음 글자로 '과'를 입력하는데 지연이 발생했다고 하자. 자동완성기능에 '사'로 시작하는 단어들이 나왔다가 '과'를 입력하니까 '로딩중...' 이라고 렌더링이 됐다면? 사용자는 😲"이게뭐...

볼륨이 큰 웹 앱을 만들어가다보면, 컴포넌트도 점점 많아지고 자연스레 코드도 커지게 된다.이 때, 모든 코드를 빠짐없이 한 번에 다운로드하게되면 페이지 하나를 여는 데도 오랜 시간이 걸리게 된다.그렇게되면 불필요한 자원낭비와 느려진 로딩속도만 남는다...(덩그러니)그렇

기존에는 로딩상태표시와 에러표시를 해야할 때 상태 변수를 사용하였다.useState 를 활용하여 진행을 해도 문제는 없다.하지만, 관리해야하는 로딩 및 에러상태가 많아진다면 코드가 길어져 가독성이 떨어질 것이다.이 때, 리액트에서 기본적으로 제공하는 Suspense 를

"내가 널 기억할게" 영화 코코(coco)를 아시나요? 영화 속 수많은 장면들 중에 사진과 같은 장면이 있다. 클로저 에 대해 알아보기 전에 이 사진을 기억하고서 시작해보면 좋을 것 같아 사진을 넣어보았다. 사진을 기억하며 클로저에 대해서 알아보자! (remem

리액트에서는 컴포넌트간 상태공유를 할 때, 부모 컴포넌트에서 상태관리를 하면서 자식 컴포넌트에는 상태정보를 props 로 전달한다.다음과같이 단순한 구조에서는 상태를 공유하고 관리하는 것이 어렵지 않다.하지만, 상태 끌어올리기 글에서도 다뤘듯이 자식 컴포넌트에서 관리중

'상태관리하는 훅' 이라고하면 자연스럽게 useState 를 떠올리게 된다.하지만, 관리해야하는 상태의 규모가 커지고 복잡해진다면 useState 만 사용해서 관리하기엔 (코드가독성저하, 유지보수등 여러 관리측면으로)어려워 질것이다.그럴때 사용하는 것이 useReduc

useReducer 에 대해서 알아보기전에 리액트의 단방향 데이터흐름 패턴에 대해서 간단하게 살펴보자.페이스북에서만든 데이터 흐름 패턴으로, 데이터의 단방향 흐름을 파악하여 상태관리를 쉽게 할 수 있도록 이해를 높여준다.사용자의 입력이나 이벤트가 해당됨예: 버튼클릭,