[React] 게시판 만들기 1일차
프로젝트의 목적 혼자서 공부할 겸 간단한 게시판 CRUD 기능을 가진 페이지를 만들어 보려고 한다. 이 프로젝트를 하는 학습 목적은 아래와 같다. 리액트 Class형 Redux react-router-dom 그동안 나는 리액트 함수형, 글로벌...
React Class 적응하기
회사의 React 프로젝트들에서 Class로 되어 있는 부분이 많이 있다. 그러다 보니 소스 코드를 보다 보면 아예 이해가 되지 않는 것은 아니지만 그동안 익혀왔던 함수형 만큼 익숙하지 않아서 어려움이 있는 편이다....
PropTypes VS Typescript
개인적으로 공부하던 중에 React에서 Typescript와 같이 타입검사를 하는 PropTypes를 제공하는 것을 알게 되었다. React PropTypes 공식문서보기 예시 아래의 코드를 보면 Btn 컴포넌트가 props로 2개(text와 fontSize)의 값을 전달 받고 있다. 그리고...
React/Next.js 프로젝트 Github-Page에 배포하기
깃허브 페이지에 React && Next.js 프로젝트 배포하기 1. next.js 프로젝트 생성 2. package.json 파일 작성 homepage Url 추가 build 명령어에 export 추가 deploy 명령어 추가 next build : next 프로젝트...
React 프로젝트 Github-Page에 배포하기
깃허브에 react 정적 페이지 배포하기 next.js를 사용하면 배포 방법이 다른 것 같다.확인이 필요함 1. 깃허브 레파지토리 생성하기 2. 로컬 PC에서 react 프로젝트 생성하기 npx create-react-app my-app cd my-app // 생성된...
_app.jsx 파일이 하는 일이 멀까?
나의 경우 그동안 next.js를 이용하여 프로젝트를 생성하고 코딩을 했었다. 그런데 항상 pages 폴더에 있는 _app.jsx(또는 _app.tsx) 파일이 있었다. 그동안은 어떤 역할을 하는지 자세히 모르고 그냥 복붙해서 쓰고 있었는데, 한번 정리해보려고...
[리팩토링] 헤더 메뉴들의 onClick 함수 통합
팀 프로젝트 반응형 작업이 어느정도 되어서 진짜 코드 리팩토링을 해보고 싶다는 생각이 들었다. 그래서 가장 먼저 헤더의 메뉴들마다 바인딩 되어 있는 onClick 함수들을 살펴보았다. 변경 전 Container 헤더의 메뉴들마다 각각...
React + Next.js .env 파일 설정하기
git public 레파지토리에 구글 API Key 처럼 공개하면 안되는 정보가 생겼다. .gitignore 로 처리를 해야하나 고민하다가 .env 파일로 할 수 있다고 해서 해봤는데, 조금 헤맸던 부분이 있어서 기록 기록.. 1....
Next.js 빌드 시 알아둘 Tip
1. 폴더 구조 그대로 out 생성하기 build를 했을 때 생성된 out 폴더의 내부 폴더구조가 로컬과는 다르게 생성되는 일이 있었다. 이때 아래와 같이 next.config.js 에 코드를 추가하면 로컬과 동일한 폴더 구조로...
40대의 코드캠프 부트캠프 후기
3개월의 프론트엔드 코드캠프 부트캠프를 무사히 마치게 되었다. 피곤함에 푹 쉬려고 했으나 혹시나 나처럼 늦은 나이에 개발자의 길을 꿈꾸며 부트캠프에 도전할 분들에게 도움이 될까 하는 생각에 기록으로 남겨보려고 한다. 그래서 늦은...
callback 과 promise(.. then)
callback 콜백에 관련한 설명은 이전에 작성한 글로 대신하도록 하겠다. callback 관련 이전 글 보기 이전 글에서 설명했듯이 콜백의 경우 너무 남발하게 될 경우 콜백지옥 또는 멸망의 피라미드에 빠지게 된다. 다시...
그때 그떄 달라요 this, 그러지마 bind
this MDN this 문서 보러가기 JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해...
내가 짠 코드는 어떻게 실행되고 있을까(Event loop)
Eventloop이란 MDN eventloop 바로가기 JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는...
프로그래밍의 패러다임 OOP vs FP
프로그래밍 패러다임 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해 주고, 결정하는 역할을 한다. 프로그래밍 패러다임의 종류는 다양한데 대표적인 것은 아래와 같다. 명령형 프로그래밍 절차적 프로그래밍: 수행되어야 할 연속적인 계산 과정을...
CI/CD란?
CI/CD는 소프트웨어 개발 방법론적인 내용이다. 관련하여 글 링크를 하나 첨부하였다. Redhat CI/CD 관련글 바로 가기 지속적 통합(CI)이란? CI로 더 많이 알려진 지속적 통합은 동일한 소프트웨어 프로젝트에서 작업하는 모든 사람이 코드...
자유자재로 변하는 웹디자인(반응형디자인)
Responsive Design(반응형 디자인)이란? MDN 반응형 디자인 바로가기 PC화면 만 있던 시대와 달리 현재는 스마트폰, 태블릿과 같이 디스플레이 사이즈가 다양하게 존재한다. 그런데 PC모니터의 넓은 화면을 그대로 작은 기기의 화면에 보여주게 되면...
컨테이너의 혁명?! 도커
docker(도커)란? docker홈페이지 바로가기 도커는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 컨테이너는 라이브러리, 시스템 도구, 코드 등 소프트웨어 실행에 필요한 모든 것이...
S하나 붙였을 뿐인데.. HTTP와 HTTPS
HTTP란? MDN HTTP문서 보러가기 HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에...
짜장면과 짬뽕 (SQL과 NoSQL)
데이터 베이스란? 데이터베이스는 일반적으로 컴퓨터 시스템에 전자적으로 저장되는 구조화된 정보 또는 데이터의 모음이라고 할 수 있다. 데이터베이스는 일반적으로 데이터베이스 관리 시스템(DBMS)에 의해 제어되는데 이때 데이터와 DBMS를 하나로 묶어 데이터베이스 시스템이라고...
React Router vs Nextjs Router
React Router React에서는 Router는 Routes안에 있는 Router 들 중에서 조건에 만족한 첫번째 Router를 불러와 실행한다. import React, { Suspense, lazy } from 'react'; import { BrowserRouter, Routes, Route } from...
검색 엔진 최적화
SEO(검색엔진최적화) MDN 공식 문서 바로가기 SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고도 한다. 이를 개선하면 구글이나 네이버에서 나의 웹페이지 정보를 잘 가져가서 검색에...
SPA와 MPA 비교 및 장단점 정리
SPA(Single Page Application) 인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 다운로드 되고 렌더링 된다. 이때 SPA는 웹 애플리케이션에 필요한 모든...
timeago 쉽게 구현하기
timeago.js 라이브러리 카카오톡 메시지나 페이스북 게시물에 보면 타임스탬프가 단순 날짜가 아닌 경우가 많다. 방금 전 게시 되었습니다. 1시간 전에 보낸 메시지 이렇게 다양한 경우의 수로 타임스탬프가 표현되는 경우가 있다. 테스트때...
도메인? dns? 호스팅? 그게 뭐야
Domain(도메인)이란? 도메인은 인터넷에 연결된 컴퓨터를 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글 등)로 만든 인터넷주소입니다. 법률상으로는 인터넷주소자원에 관한 법률 제2조에 따라 도메인은 인터넷에서 인터넷 프로토콜 주소를 사람이 기억하기 쉽도록...
객체가 어떻게 변할수 있니? 불변 & 가변
Immutable 이란? 내용이 변하지 않는 것을 말한다.그렇기에 불변하다, 불변 객체라고 부르기도 한다. 이전 변수 관련 글에서도 언급했지만 자바스크립트에서 아래의 원시값들은 전부 불변하다 Boolean null undefined Number String Symbol (New in...
React의 중요개념 가상돔(VDOM)
React 공식문서 보기 Virtual DOM이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 이 접근방식이...
브라우저는 무슨일을 하고 있을까?
MDN 공식문서 보기 참고로 위 링크의 한글 문서는 현재 초안 작성 중이다 DOM 트리 생성 브라우저는 다운로드 받은 문서에서 HTML을 통해 DOM(Document Object Model)트리를 생성한다. CSSOM 트리 생성 CSS를 분석하여...
스코프란 무엇인가
Scope MDN Reduce 문서 보러가기 현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 “표현”되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 “해당 스코프”내에 있지 않다면 사용할 수...
Array 메소드 중 가장 어려운 메소드 Reduce
Reduce 메소드 MDN Reduce 문서 보러가기 배열 메소드 중 이해하기 어려운 메소드 중 하나이다. 일반적으로 합계를 구할 떄 많이 사용한다. Reduce 설명 reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각...
왜 전부다 리렌더링해? 난 메모해
Memoization 메모이제이션은 특정 연산이나 특정 함수의 값을 기억해 놓은 후 State의 변화로 화면이 리렌더 되더라도 함수가 초기화 되지 않고, 기존에 저장된 값을 그대로 사용할 수 있게한다. 메모이제이션 기능을 사용하면 컴포넌트의...
컴퓨터의 착한 거짓말 Optimistic-UI
Optimistic UI Apollo GraphQl 문서 보러 가기 아무리 인터넷과 컴퓨터가 빨라졌다고 하더라도 클라이언트와 서버의 통신에 물리적인 시간과 비용이 드는 것은 사실이다. 0.001초의 간격이나 지연은 어쩔수가 없다. 하지만 세상 모든 곳의...
[js] 빨리 보여줄까? 나중에 보여줘도 되지?
Pre Load MDN Pre Load 문서 바로가기 미리 사용자에게 보여줄 컨텐츠를 다운로드 했다가, 필요할 떄 바로 보여주는 것을 말한다. Pre Load가 가능한 타입 audio: Audio file, as typically used in...
[js] 줄서서 Promise를 할 필욘 없자나? Promise all
Promise.all MDN Promise All 문서 바로가기 만약 여러개의 프라미스를 동시에 실행시킨다고 가정을 해보자. 1번 Promise 실행 -> 완료 10초 1번 종료 후 2번 Promise 실행 -> 완료 10초 2번 종료...
[js] Observable Object
Observable 객체 아쉽게 MDN에서 정확한 문서를 찾지는 못했다. 하지만 연관있는 문서 몇개를 찾아서 링크를 남겨둔다 MDN Observer Api 문서 바로가기 모던 자바스크립트 Proxy 바로가기 Observable 위의 링크들을 남겨둔 이유는 Observable가...
[js] 난 400이 제일 무섭더라.. Http status code
Http 상태코드표 MDN Http 상태코드표 바로가기 section 10 of RFC 2616 바로가기 HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인...
[js]객체 복사가 이렇게 어려운 것인가..
얕은 복사(Shallow Copy) 일반적으로 사용하는 배열, 객체의 경우 원시값과 다른 점 중 하나가 참조에 의해(by reference) 저장되고 복사된다는 것이다. 원시값의 경우 값을 할당하면 값 그대로 저장 할당이 되는점에서 차이가 있다....
[보안]나의 토큰을 노리는 것들
토큰(Token) JWT에는 두 가지 종류의 토큰이 있다. Access Token, Refresh Token 유저는 Access Token을 통해서 민감한 정보에 접근할 수 있으며 두 가지 토큰중에서 실제 권한에 접근하는 토큰이다. 짧은 유효기간을 가지며...
[JS]과하면 멸망하는 콜백 함수
Callback 콜백 함수는 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 말한다. 동기식 Callback function greeting(name) { alert('Hello ' + name); } function processUserInput(callback)...
[JS]깊이가 있는 배열과 객체
flatten 일반적으로 알고 있는 객체와 배열의 모습은 아래와 같다. [itme1, item2, item3] { key1 : value1, key2 : value2, key3 : value3, key4 : value4, } 위와 같은 배열과 객체의...
useMutaion은 왜 배열로 구조분해할당을 받는가
Q : 왜 useMutation은 배열로 구조분해 할당을 받나요? GraphQl 문서보기 구조 분해 수업을 듣고 문득 궁금한 점이 있어서 알아본 내용이 있어서 정리를 위해 남긴다. 나는 useMutation의 경우 아래와 같이 배열로...
[JS]나를 부르는 함수 재귀함수
재귀함수(Recursive function) MDN 문서 바로가기 자신을 호출하는 함수의 행위를 재귀함수라 한다. 재귀함수는 더 작은 하위 문제를 포함하는 문제를 해결하는 데 사용된다. 재귀 함수는 기본 케이스(재귀 종료) 또는 재귀 케이스(재귀 재개)의...
[JS] 값의 종류(Primitive, reference)
값의 종류(타입) 자바스크립트에서 값의 종류는 아래와 같다 원시값(Primitive) 수 (Number) BigInt 문자열 (String) 부울 (Boolean) 기호 (Symbol) (ES2015에 새롭게 추가) 정의되지 않음 (Undefined) 널 (Null) 객체 (레퍼런스 타입) 함수 (Function)...
[js] Chrome V8 엔진이란?
앞서 Node.js 홈페이지에서 아래의 문구를 봤었다. Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 그렇다면.. Chrome V8 JavaScript 엔진은 무엇일까? 홈페이지에 들어가서 하나씩 살펴보았다. Chrome V8 JavaScript 엔진 바로가기 V8 is...
[js기초] node.js란?
node.js란? Ryan Dahl이 2009년에 발표했다. node.js 홈페이지 바로가기 위의 홈페이지에 들어가보면 아래와 같은 문구가 있다. Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 그렇다면 JavaScript 런타임은 무엇을 뜻하는 것일까? 브라우저가 아닌...
[js기초] 변수 선언 3가지 방법
자바스크립트에서 변수 선언은 3가지 방법이 존재한다. var : 오래된 변수 선언 키워드입니다. 현재는 사용을 권장하지 않는다. 오래된 코드에서 볼 수 있다. const : ES2015에 추가되었다. let과 비슷하지만, 변수의 값을 변경할...
[js기초] ES2015(es6) 모던자바스크립트
ES6 이란? ECMA 6번째 표준이라 ES6라고도 함. ECMAScript 2015의 줄임말 => ES2015 하지만 연도를 붙여 부르는 것이 올바른 방법이기 떄문에 ES2015라고 불러야한다. ECMA 스크립트란? 쉽게 말해 자바스크립트를 표준화하기 위해 만들어졌다....
[js기초] Strict equality
1. ==(동등 비교 연산자 : 느슨한 비교) MDN 공식문서 보기 동등 비교 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean을 반환한다. console.log('1' == 1); // expected output: true 2. ===(일치 비교...
React 커링기법이란?
커링(Currying) 기법 커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다. function helloFunc(word, name) { console.log(`${word}, ${name}`); } word와 name이라는 두 개의 인자를 받아서 출력해주는 단순한 형태의...
컴포넌트 재사용을 위한 고급 기술 HOC와 HOF
고차컴포넌트(HOC, Higher Order Component) HOC MDN 공식문서 보러가기 이전에 작성한 클로저의 연장선상에 있는 포스트이다. 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의...
클로저(closure)란..
클로저(closure) Closure MDN 공식문서 보러가기 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 공식문서 첫 문장 내용인데, 쉽게 와닿지가 않는 표현이라 이해하기가 쉽지 않다.. 예시를 살펴봤다. 1 function makeFunc() { 2...