useState/useRef 와 setTimeout/setInterval
useState/useRef 와 setTimeout/setInterval
useState/useRef 와 setTimeout/setInterval
setTimeout/setInterval
ES6
OOP(Object-Oriented Programming) 간단 정리
Webpack 등장 배경
useEffect
React Native 작동 원리 간단정리
DOMContentLoaded, load, beforeunload, unload
defer, async 스크립트
JS 렉시컬 스코프
Vanilla JS SPA 미니 프로젝트 계획
ajax vs fetch vs axios
마이크로 태스크
interface vs type
TypeScript as, is
브라우저 실행 환경 정리
이벤트 루프와 매크로·마이크로태스크
Lazy Loading 간단 정리
Event
SPA 설계
Location
document.documentElement.clientWidth/clientHeight : 컨텐트가 실제 보여지는 영역의 너비와 높이
Web Socket
state vs 변수
Deploying Your Next.js
API Routes
Dynamic Routes
Pre-rendering and Data Fetching
Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리
Next.js 튜토리얼 Navigate Between Pages 간단 정리
Next.js 튜토리얼 Create a Next.js App 간단 정리
DocumentFragment
window.history 간단 정리
코드 스플리팅
S 는 싱글 쓰레드?
react-dom
python 딕셔너리 키 유/무 체크
create-react-app
npx
정규 표현식
웹 컴포넌트
JS 와 Python 의 외부 변수 참조
TS 로 python range 구현하기 part 2
JS 로 python range 구현하기
styled-components Global Style
JEST
Lazy Evaluation
디바운싱
쓰로틀링
Redux-Saga takeLatest
Redux-Saga call
Redux-toolkit PayloadAction
Redux-toolkit 에서 Redux-Saga
createSlice
Redux-toolkit 에서 createAsyncThunk
JS match
브라우저에서 단말기 정보 얻어오기
렌더링 최적화를 위한 useMemo, useCallback, useMemo
React Layout 공통 컴포넌트
Redux Toolkit
Dynamic Import
내가 겪은 Redux 안티 패턴
Redux State 에서의 Error 객체 처리
React 이 불변성
Redux, Redux-saga
AWS Amplify
react-testing-library
redux-saga & SSR
Redux 를 쓸 타이밍
Next.js
React
Redux-Saga
Redux
당연하지만 당연하지 않은 코드
React vs Angular
개발자 기본기
Vanilla JS
redux
클래스형과 함수형 컴포넌트
async/await
프라미스화
Geolocation API
Promise
JsonResponse
.catch
프라미스 체이닝
‘try…catch’ 와 에러 핸들링
클래스와 기본 문법
프로토타입 상속
프로퍼티 플래그와 설명자
재귀와 스택
원시값의 메서드
객체란
객체는 몇 가지 특수한 기능을 가진 연관 배열
객체가 어떤 작업 할 떄 JS 명세서에 정의된 ‘내부 메서드’ 가 관여 (명세서에 정의된 메서드라 개발자가 코드 직접 호출 불가능)
eval(code) 호출 시 문자열 형태의 code 가 실행됨
BigInt 는 길이의 제약 없이 정수를 다룰 수 있게 해주는 숫자형
참조 타입은 JS 내부에서 사용되는 타입
커링은 단일 호출로 처리하는 함수를 각각의 인수가 호출 가능한 프로세스(다중 callable 프로세스)로 호출된 뒤 병합되도록 변환하는 것
import/export 문은 코드 구조의 중심 잡기 위해(모듈링 위헤) 모듈 경로에 원시 문자열만 가능하며 런탕미이나 조건부로 모듈 불러올 수 없음
import/export 문은 정적인 방식으로 모듈 경로엔 원시 문자열만 가능(함수 호출 불가능)
모듈은 하나의 파일
이터레이터와 제네레이터는 동기 작업만 가능
제네레이터는 제네레이터 함수 function* f(...) {...} 사용해 만듬
async/await 는 프라미스 기반으로 작동함
모든 프라미스 동작(핸들러) 는 “마이크로태스크 큐” 라 불리는 내부 ‘프라미스 잡’ 큐에 들어가서 처리 되기 때문에 프라미스 핸들링은 항상 비동기로 처리됨
‘프라미스화’는 콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것
Promise 클래스에는 에는 5가지 정적 메서드 존재
.catch는 프라미스에서 발생한 모든 에러 다룸
프라미스 체이닝이란 result 가 .then 핸들러의 체인을 통해 전달된다는 점에서 착안한 아이디어
promise 는 ‘제작 코드’ 와 ‘소비 코드’ 연결해 주는 특별한 JS 객체
JS 호스트 황경에서 제공하는 여러 함수 사용시 비동기 동작 스케쥴링 가능
커스텀 클래스는 Error 나 다른 내장 에러 클래스 상속받아 만들 수 있음(super호출, name프로퍼티 신경 쓰기)
에러 발생 시 스크립트는 ‘죽고(즉시 중단)’ 콘솔에 에러 출력
믹스인은 객체 지향 언어에서 범용적으로 쓰이는 용어로, 다른 클래스들의 메서드 조합을 포함하는 클래스를 의미
obj instanceof Class 는 obj 가 Class 에 속하거나 Class 상속받는 클래스에 속하면 true 반환
내장 클래스도 확장 가능
객체 지향 프로그래밍에선 내부/외부 인터페이스 구분하는 것을 캡슐화 라는 용어 사용해 설명
정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 ‘전체’에 필요한 기능 만들 때 사용
클래스 확장은 class Child extends Parent 로 Child class 는 Parent를 상속 받음
JS 는 명세서가 계속 갱신되지만 JS 엔진이 표준 전체를 지원하지는 않음
조건에 따라 다른 행동 취해야 할 때 if 문과 조건부 연산자 ‘?’ 사용
피연산자는 연산자가 연산을 수행하는 대상
문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환
브라우저는 사용자와 상호작용할 수 있는 세 자기 함수 제공
문(statement) 는 어떤 작업을 수행하는 문법 구조 와 명령어 의미
JS 는 호환성을 위해 이전의 코드 문제들이 돌아가는 환경을 기본형으로 놔둠
JS 엔 8가지 기본 자료형 있음
변수는 데이터를 메모리에 저장할 때 쓰이는 ‘이름이 붙은 저장소’
class 문법으로 동일한 종류의 객체를 여러 개 생성할 수 있음
프로토타입에 직접 접근 시 모던 메서드 사용 가능
모든 내장 객체의 메서드는 해당 내장 생성자 함수의 프로토타입에 저장됨
생성자 함수의 prototype 프로퍼티는 new 생성자를 호출할 때 만들어지는 새로운 객체의 [[prototype]] 설정
프로토타입 상속
객체 프로퍼티는 데이터 프로퍼티, 접근자 프로퍼티 로 나눔
프로퍼티 플래그와 설명자
화살표 함수는 this 를 가지지 않아 함수의 컨텍스트 유지하기 용이
함수 바인딩
call/apply와 데코레이터, 포워딩
setInterval(func, delay, …args), setTimeout(func, delay, …args) 은 delay 밀로추 후 func 를 규칙적으로, 또는 한번(스케쥴링) 실행하게 해줌
new Function 문법으로 함수 만들 수 있음
함수는 객체
전역 객체를 사용하면 언제 어디서나 사용가능한 변수를 만들 수 있음
var 는 let, const 와 다른 특성 보임
코드 블록 안에서 선언한 변수는 블록 안에서만 사용 가능
‘…‘은 나머지 매개변수나 전개 문법으로 사용
함수가 필요에 의해 자기 자신을 호출할 때 이를 재귀 라 부름
JSON 과 메서드
Date 객체와 날짜
구조 분해 할당
Object.keys, values, entries
JS 엔진은 가비지 컬렉션 으로 메모리 관리
맴과 셋
iterable 객체
배열과 메서드
배열
문자열
숫자형
원시값의 메서드
객체를 원시형으로 변환
심볼형
옵셔널 체이닝 ‘?.’
유사한 객체 여러 개 만들 때 new 연산자와 생성자 함수 사용
메서드와 ‘this’
가비지 컬렉션
객체는 참조에 의해 할당되고 복사됨
객체의 특징
테스트는 ‘왜’ 하는가?
닌자 코드
주석
진정한 프로그래밍 기술이란 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드를 작성해 해결하는 것. 코드 스타일이 도움 됨
디버깅
화살표 함수 기본
함수 표현식
함수
switch
while 과 for 반복문
’??’
|| (OR)
전역 객체를 사용하면 언제 어디서나 사용가능한 변수를 만들 수 있음
컴포넌트 추상화
ApolloClinet Error Handling
Recoil undefined
FRONT에서 CORS 이슈 해결하기
graphql-compose-mongoose mongooseResolver
GraphQL 사용기
Recoil 사용기
React Native 에서 NFC 사용하기
Recoil 간단 정리
Apollo Client
GraphQL 간단 정리
graphql-compose
ES6
OOP(Object-Oriented Programming) 간단 정리
Webpack 등장 배경
useEffect
React Native 작동 원리 간단정리
DOMContentLoaded, load, beforeunload, unload
defer, async 스크립트
JS 렉시컬 스코프
Vanilla JS SPA 미니 프로젝트 계획
마이크로 태스크
TypeScript as, is
브라우저 실행 환경 정리
이벤트 루프와 매크로·마이크로태스크
Lazy Loading 간단 정리
나만의 프론트 엔드 일 처리
state vs 변수
Deploying Your Next.js
API Routes
Dynamic Routes
Pre-rendering and Data Fetching
Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리
Next.js 튜토리얼 Navigate Between Pages 간단 정리
Next.js 튜토리얼 Create a Next.js App 간단 정리
브라우저 이벤트
DocumentFragment
window.history 간단 정리
코드 스플리팅
S 는 싱글 쓰레드?
react-dom
python 딕셔너리 키 유/무 체크
create-react-app
Next.js SSG vs SSR
SSR vs SSG
웹 컴포넌트
JS match
브라우저에서 단말기 정보 얻어오기
반응형 웹 넓게 viewport 잡기
반응형 웹 쉽게 설명하기
웹 브라우저에서 앱 링크 활용하기
반응형 웹 고려 사항
반응형 웹 설계
반응형 웹 vs 적응형 웹
Redux-toolkit with TypeScript 에서 Redux-thunk vs Redux-saga
React + TypeScript Props
Index Signatures
CRA 에 대한 생각
redux-toolkit 선택
목적
FSA 규칙
CRA without eject
React + TypeScript + Hooks
React + TypeScript 후기
앞으로 사용해보고 싶은 기술들과 계획
프로젝트 생성
렌더링 최적화를 위한 useMemo, useCallback, useMemo
grid vs flex
내가 겪은 Redux 안티 패턴
Redux State 에서의 Error 객체 처리
React 이 불변성
Redux, Redux-saga
AWS Amplify
react-testing-library
redux-saga & SSR
Redux 를 쓸 타이밍
Next.js
React
Redux-Saga
Redux
당연하지만 당연하지 않은 코드
코드 스플리팅
Babel
Recoil undefined
Recoil 사용기
useState/useRef 와 setTimeout/setInterval
React - S3 - CloudFront CORS 에러
Recoil 간단 정리
OOP(Object-Oriented Programming) 간단 정리
Webpack 등장 배경
useEffect
React Native 작동 원리 간단정리
S 는 싱글 쓰레드?
react-dom
python 딕셔너리 키 유/무 체크
create-react-app
styled-components Global Style
Redux-Saga takeLatest
Redux-Saga call
Redux-toolkit PayloadAction
Redux-toolkit 에서 Redux-Saga
createSlice
Redux-toolkit 에서 createAsyncThunk
TypeScript + Context API
Redux-toolkit with TypeScript 에서 Redux-thunk vs Redux-saga
Index Signatures
CRA 에 대한 생각
redux-toolkit 선택
FSA 규칙
CRA without eject
React + TypeScript + Hooks
React + TypeScript 후기
프로젝트 생성
SVG 파일 ReactComponent 이슈
렌더링 최적화를 위한 useMemo, useCallback, useMemo
React Layout 공통 컴포넌트
AWS CodePipeline 환경 변수 React 에서 참조
Redux Toolkit
Redux State 에서의 Error 객체 처리
React 이 불변성
React
redux
클래스형과 함수형 컴포넌트
다중 프로세서 시스템 구조
병렬컴퓨터의 분류
병렬처리의 단위
병렬처리의 개념 및 필요성
DMA 를 이용한 I/O
인터럽트를 이용한 I/O
I/O 장치의 접속
버스 중재
시스템 버스
RAID
자기 디스크
최신 기억장치 기술
캐시 메모리
기억장치 모듈의 설계
반도체 기억장치
계층적 기억장치 시스템
마이크로프로그램의 순서제어
마이크로 프로그래밍
마이크로명령어의 형식
기억장치의 분류와 특성
제어 유니트의 구조
제어 유니트의 기능
부동소수점 산술 연산
부동소수점 수의 표현
정수의 산술 연산
시프트 연산
논리 연산
정수의 표현
ALU의 구성요소
명령어 세트
명령어 파이프라이닝
명령어 실행
CPU 의 기본 구조
컴퓨터 구조의 발전 과정
시스템의 구성
정보의 표현과 정보
컴퓨터의 기본 구조
프로세스 제어 블록과 문맥 교환
프로세스의 개요
병렬 처리
Monotonic Stack(단조 스택)
컴퓨터 성능 향상 기술
CPU 와 메모리
컴퓨터의 기본 구성
운영체제의 구조
운영체제의 역사
운영체제 소개
다이나믹 프로그래밍
그리디 알고리즘
비트 조작 논리 회로 ALU 는 비트 조작의 담당자이자 현대 디지털 컴퓨터의 기본 개념이자 근간 부울 연산자 AND, OR, NOT 은 기본 부울 연산자 기본 부울 연산자를 결합하거나 조합해 보조 연산(XOR) 생성 XOR 매우 중요 ...
이진 검색
해시 테이블
데크, 우선순위 큐
연결 리스트
문자열 조작
리스트, 딕셔너리
빅오, 자료형
프로그램 언어 선택
코딩 인터뷰
스택, 큐
Django Blank or Null
WSGI
JS 와 Python 의 외부 변수 참조
분산 시스템의 고가용성
분산 시스템
네트워크와 인터넷
유닉스 파일의 특징
디스크 파일 할당
디렉터리의 구조
파일 시스템의 개요
하드웨어의 규격과 발전
디스크 스케줄링
디스크 장치
입출력 시스템
프레임 관련 이슈
스레싱과 프레임 할당
페이지 교체 알고리즘
요구 페이징
세그먼테이션-페이징 혼용 기법
세그먼테이션 기법
페이징 기법
가상 메모리의 개요
파일, 파이프, 소켓 프로그래밍
임계구역 해결 방법
공유 자원과 임계구역
프로세스 간 통신
인터럽트 처리
스케줄링 알고리즘
스케줄링 시 고려 사항
스케줄링의 개요
프로세스의 연산
리눅스
커널
프로세스 제어 블록과 문맥 교환
프로세스의 개요
병렬 처리
Monotonic Stack(단조 스택)
컴퓨터 성능 향상 기술
CPU 와 메모리
컴퓨터의 기본 구성
운영체제의 구조
운영체제의 역사
운영체제 소개
다이나믹 프로그래밍
그리디 알고리즘
비트 조작 논리 회로 ALU 는 비트 조작의 담당자이자 현대 디지털 컴퓨터의 기본 개념이자 근간 부울 연산자 AND, OR, NOT 은 기본 부울 연산자 기본 부울 연산자를 결합하거나 조합해 보조 연산(XOR) 생성 XOR 매우 중요 ...
이진 검색
해시 테이블
데크, 우선순위 큐
연결 리스트
문자열 조작
리스트, 딕셔너리
빅오, 자료형
프로그램 언어 선택
코딩 인터뷰
스택, 큐
기타 네트워크 계층 프로토콜 - ARP 프로토콜 IP 주소로부 터 MAC 주소를 얻는 기능 수신 호스트의 IP 주소를 매개변수로 하여 ARP 프로토콜을 통해 수신 호스트의 MAC 주소를 얻어냄 - 필요성 ...
IPv6 프로토콜 - IPv4 의 한계 32비트의 주소 공간을 지원하는 현재의 IP 프로토콜은 최대 232개의 호스트를 수용할 수 있음 - IPv6 - 주요 변경 사항 - 주소 공간 확장 주...
IP 프로토콜 인터넷 환경에서 네트워크 계층의 데이터 전송 프로토콜로 이용 호스트 주소 표기, 패킷 분할에 관한 기능을 지원 - 특징 비연결형 서비스 제공 패킷을 분할/병합 하는 기능 수행 데이터 체크섬은 제공하지 않고, 헤더 ...
라우팅 프로토콜 - 간단한 라우팅 프로토콜 - 최단 경로 라우팅 패킷이 목적지에 도달할 때까지 거치는 라우터 수가 최소화될 수 있 도록 경로를 선택하는 방식 - 플러딩 자신에게 입력된 패킷을...
네트워크 계층의 기능 - 기본 기능 - 라우팅 송수신 호스트 사이의 패킷 전달 경로 선택 라우팅 테이블을 이용해 송수신 호스트 사이의 패킷 전달 경로를 선택하는 과정 - 혼잡 제어 ...
HDLC 프로토콜 일대일 혹은 일대다로 연결된 환경에서 데이터의 송수신 기능을 제공하는 프로토콜 데이터 통신을 위해 연결된 호스트들은 주국과 종국으로 구분되고, 다시 이들의 기능을 모두 지닌 혼합국으로 정의 - 용어 - 주국 명령을 보내는...
슬라이딩 윈도우 프로토콜 두 호스트 간의 프레임 전송을 위한 일반적인 통신 프로토콜 오류 제어와 흐름 제어 기능을 함께 지원 정보 프레임을 전송하는 송신 호스트는 보내려는 데이터뿐 아니라 프레임의 순서 번호, 오류 검출 코드 등을 프레임에 표기한 후에 정해진 순서 번호에 따라...
데이터 링크 계층 프로토콜의 기초 물리적 전송 매체에 의해 일대일로 직접 연결된 호스트 사이의 오류 제어와 흐름 제어 기능 제공 - 점대점 송신 호스트에서 전송한 프레임은 점대점으로 직접 연결된 수신 호스트에 라우팅 과정 없이 전달됨 - 멀티 드롭 ...
토큰 링 점대점으로 연결한 호스트가 순환 구조 형태로 LAN을 구성 링 주위에는 항상 토큰이라 불리는 제어 프레임이 일정한 방향으로 순환 데이터 프레임을 전송하고자 하는 호스트는 먼저 토큰을 획득해야 하고, 토큰을 확보한 호스트만 데이터 프레임을 전송할 수 있음 - 토큰 프...
토큰 버스
MAC 계층과 IEEE 802 시리즈
다항 코드
오류 제어
데이터 전송 방식
서비스 품질 (QoS)
인터네트워킹
LAN, MAN, WAN
교환 시스템
TCP/IP 모델
OSI 참조 모델
TCP/IP 모델
계층적 모듈 구조
네트워크 주소의 표현
네트워크의 기능
네트워크 관련 기초 용어
IP
TCP
HTTP 간단 정리
DOMContentLoaded, load, beforeunload, unload
Event
Location
document.documentElement.clientWidth/clientHeight : 컨텐트가 실제 보여지는 영역의 너비와 높이
브라우저 이벤트
DocumentFragment
브라우저 작동 원리
window.history 간단 정리
window.print()
웹 브라우저
JS 로 이벤트 객체 만들어서 직접 이벤트 생성
각 이벤트엔 브라우저 기본 동작이 대응함
유사한 요소에 동일한 핸들러 적용할 떄 주로 사용함
이벤트 발생 시 이벤트가 발생한 가장 안쪽 요소가 타깃 요소(event.target) 가 됨
이벤트는 무언가 일어났다는 신호로 모든 DOM 노드(DOM에만 한정된 건 아님)는 이런 신호 만들어냄
DOM 요소는 여러 기하 프로퍼티 지원
JS 로 DOM style 프로퍼티와 style 프로퍼티 둘 다 수정
JS로 문서를 수정할 땐 DOM 조작
속성은 HTML 태그 안에서 쓰이며 프로퍼티는 DOM 객체 안에 쓰임
JS 가 돌아가는 플랫폼을 host 라고 부름
DOM 노드는 일반 JS 객체이며 각 DOM 노드는 고유한 클래스에 속하고 클래스들은 계층 구조를 형성
DOM 에서 원하는 노드 검색하게 해 주는 주요 메서드 존재
DOM 조작하려면 DOM 객체에 접근하는 것이 선행되어야 함
HTML/XML 문서는 브라우저 안에서 DOM을 태그 트리 구조로 표현됨
파일의 분할과 헤더파일의 디자인
매크로와 선행처리기
메모리 관리와 메모리의 동적 할당
파일 입출력
구조체와 사용자 정의 자료형
구조체와 사용자 정의 자료형 1
문자와 문자열 관련 함수
함수 포인터와 void 포인터
다차원 배열과 포인터의 관계
포인터의 포인트
다차원 배열
포인터와 함수에 대한 이해
포인터와 배열의 시작
포인터의 이해
1차원 배열
조건에 따른 흐름의 분기
반복실행을 명령하는 반복문
printf 함수와 scanf 함수 정리
상수와 기본 자료형
데이터 표현방식의 이해
변수와 연산자
프로그램의 기본 구성
이것이 C 언어다
Django Blank or Null
ViewSet & Router
관계 & 하이퍼링크 API
클래스 기반 뷰
Serialization(직렬화)
재사용의 중요성
관리자 폼 커스터마이징
정적 파일
자동화된 테스트
미니멀 폼 작성
view
DB 설치
초기 설정
Python 기반의 풀스택 웹 프레임워크
조건에 따라 다른 행동 취해야 할 때 if 문과 조건부 연산자 ‘?’ 사용
피연산자는 연산자가 연산을 수행하는 대상
문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환
브라우저는 사용자와 상호작용할 수 있는 세 자기 함수 제공
문(statement) 는 어떤 작업을 수행하는 문법 구조 와 명령어 의미
JS 는 호환성을 위해 이전의 코드 문제들이 돌아가는 환경을 기본형으로 놔둠
JS 엔 8가지 기본 자료형 있음
변수는 데이터를 메모리에 저장할 때 쓰이는 ‘이름이 붙은 저장소’
화살표 함수 기본
함수 표현식
함수
switch
while 과 for 반복문
’??’
|| (OR)
Redux-Saga takeLatest
Redux-Saga call
Redux-toolkit PayloadAction
Redux-toolkit 에서 Redux-Saga
createSlice
Redux-toolkit 에서 createAsyncThunk
TypeScript + Context API
Redux-toolkit with TypeScript 에서 Redux-thunk vs Redux-saga
redux-toolkit 선택
FSA 규칙
Redux Toolkit
내가 겪은 Redux 안티 패턴
Redux, Redux-saga
Redux 를 쓸 타이밍
Redux
React - S3 - CloudFront CORS 에러
AWS elastic beanstalk 간단 정리
AWS Route 53, S3, CloudFront 로 WWW 대응할 때 Endpoint
CloudFront 배포 딜레이
AWS Route 53, S3 로 WWW, naked 도메인 대응하기
CI/CD 후기
AWS 인프라만을 사용하여 정적 웹 사이트 배포 후기
AWS Route 53
AWS CloudFront
AWS CodePipeline 환경 변수 React 에서 참조
AWS S3 + CodePipeLine + CodeBuild 를 이용한 React CI/CD 배포 중 이슈
AWS CodeBuild
AWS IAM
Amazon S3
데이터의 이동과 변환을 자동화하는 웹 서비스
프라미스화
Promise
JsonResponse
.catch
프라미스 체이닝
async/await 는 프라미스 기반으로 작동함
모든 프라미스 동작(핸들러) 는 “마이크로태스크 큐” 라 불리는 내부 ‘프라미스 잡’ 큐에 들어가서 처리 되기 때문에 프라미스 핸들링은 항상 비동기로 처리됨
‘프라미스화’는 콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것
Promise 클래스에는 에는 5가지 정적 메서드 존재
.catch는 프라미스에서 발생한 모든 에러 다룸
프라미스 체이닝이란 result 가 .then 핸들러의 체인을 통해 전달된다는 점에서 착안한 아이디어
promise 는 ‘제작 코드’ 와 ‘소비 코드’ 연결해 주는 특별한 JS 객체
JS 호스트 황경에서 제공하는 여러 함수 사용시 비동기 동작 스케쥴링 가능
Vercel
AWS elastic beanstalk 간단 정리
AWS Route 53, S3, CloudFront 로 WWW 대응할 때 Endpoint
CloudFront 배포 딜레이
AWS Route 53, S3 로 WWW, naked 도메인 대응하기
CI/CD 후기
AWS Route 53
AWS CloudFront
AWS CodePipeline 환경 변수 React 에서 참조
AWS S3 + CodePipeLine + CodeBuild 를 이용한 React CI/CD 배포 중 이슈
AWS CodeBuild
AWS IAM
Amazon S3
데이터의 이동과 변환을 자동화하는 웹 서비스
재귀와 스택
화살표 함수는 this 를 가지지 않아 함수의 컨텍스트 유지하기 용이
함수 바인딩
call/apply와 데코레이터, 포워딩
setInterval(func, delay, …args), setTimeout(func, delay, …args) 은 delay 밀로추 후 func 를 규칙적으로, 또는 한번(스케쥴링) 실행하게 해줌
new Function 문법으로 함수 만들 수 있음
함수는 객체
전역 객체를 사용하면 언제 어디서나 사용가능한 변수를 만들 수 있음
var 는 let, const 와 다른 특성 보임
코드 블록 안에서 선언한 변수는 블록 안에서만 사용 가능
‘…‘은 나머지 매개변수나 전개 문법으로 사용
함수가 필요에 의해 자기 자신을 호출할 때 이를 재귀 라 부름
전역 객체를 사용하면 언제 어디서나 사용가능한 변수를 만들 수 있음
원시값의 메서드
JSON 과 메서드
Date 객체와 날짜
구조 분해 할당
Object.keys, values, entries
JS 엔진은 가비지 컬렉션 으로 메모리 관리
맴과 셋
iterable 객체
배열과 메서드
배열
문자열
숫자형
원시값의 메서드
Recoil 사용기
OOP 원칙
failed to emit precompiled header bridging header
React Native iOS Module map Not Found
React Native 클라이언트와 React Native WebView 끼리 통신하기
iOS input type=file crash
Recoil 간단 정리
Web Socket
JWT
토큰이란
JS 렉시컬 스코프
Vanilla JS SPA 미니 프로젝트 계획
ajax vs fetch vs axios
interface vs type
TypeScript as, is
TypeScript + Context API
Redux-toolkit with TypeScript 에서 Redux-thunk vs Redux-saga
React + TypeScript Props
Index Signatures
React + TypeScript + Hooks
React + TypeScript 후기
프로젝트 생성
MongoDB Aggregate
WAS 간단 정리
MongoDB TimeStamp
TypeGoose
Mongoose
TypeGoose
Mongoose
NoSQL
MongoDB
MySQL 간단 정리
Nginx 간단 정리
객체란
객체는 몇 가지 특수한 기능을 가진 연관 배열
객체를 원시형으로 변환
심볼형
옵셔널 체이닝 ‘?.’
유사한 객체 여러 개 만들 때 new 연산자와 생성자 함수 사용
메서드와 ‘this’
가비지 컬렉션
객체는 참조에 의해 할당되고 복사됨
객체의 특징
구조에서의 주체와 흐름
문제 해결?
왜?
잘못된 지식의 위험성과 사고방식
습관
개발하기 좋은 회사
자료
개발은 협업
스타트업
지금 상황
state vs 변수
Deploying Your Next.js
API Routes
Dynamic Routes
Pre-rendering and Data Fetching
Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리
Next.js 튜토리얼 Navigate Between Pages 간단 정리
Next.js 튜토리얼 Create a Next.js App 간단 정리
AWS Amplify
react-testing-library
DOM 요소는 여러 기하 프로퍼티 지원
JS 로 DOM style 프로퍼티와 style 프로퍼티 둘 다 수정
JS로 문서를 수정할 땐 DOM 조작
속성은 HTML 태그 안에서 쓰이며 프로퍼티는 DOM 객체 안에 쓰임
JS 가 돌아가는 플랫폼을 host 라고 부름
DOM 노드는 일반 JS 객체이며 각 DOM 노드는 고유한 클래스에 속하고 클래스들은 계층 구조를 형성
DOM 에서 원하는 노드 검색하게 해 주는 주요 메서드 존재
DOM 조작하려면 DOM 객체에 접근하는 것이 선행되어야 함
HTML/XML 문서는 브라우저 안에서 DOM을 태그 트리 구조로 표현됨
MySQL 간단 정리
회복
관계 모델
ER 모델
커넥션 풀
데이터의 무결성
관계형 DB
DB
Backtracking
알고리즘 한줄 변태 되기
두 개의 트리구조 비교는 튜플로 묶고 stack
트리나 그래프를 방문 또는 탐색하는 방법.
어떤 문제를 풀기 위해 그 문제를 더 작은 문제의 연장선(나누기)으로 생각하고 과거에 구한 답을 활용하는 방식의 알고리즘 설계 기법
투포인터
정렬 알고리즘
탐욕법
클래스와 기본 문법
믹스인은 객체 지향 언어에서 범용적으로 쓰이는 용어로, 다른 클래스들의 메서드 조합을 포함하는 클래스를 의미
obj instanceof Class 는 obj 가 Class 에 속하거나 Class 상속받는 클래스에 속하면 true 반환
내장 클래스도 확장 가능
객체 지향 프로그래밍에선 내부/외부 인터페이스 구분하는 것을 캡슐화 라는 용어 사용해 설명
정적 메서드는 특정 클래스 인스턴스가 아닌 클래스 ‘전체’에 필요한 기능 만들 때 사용
클래스 확장은 class Child extends Parent 로 Child class 는 Parent를 상속 받음
class 문법으로 동일한 종류의 객체를 여러 개 생성할 수 있음
Next.js 에서 TypeScript 와 styled-components
Deploying Your Next.js
API Routes
Dynamic Routes
Pre-rendering and Data Fetching
Next.js 튜토리얼 Assets, Metadata and CSS 간단 정리
Next.js 튜토리얼 Navigate Between Pages 간단 정리
Next.js 튜토리얼 Create a Next.js App 간단 정리
MongoDB Aggregate
MongoDB TimeStamp
TypeGoose
Mongoose
TypeGoose
Mongoose
MongoDB
CSS 애니메이션
반응형 웹 고려 사항
반응형 웹 설계
grid vs flex
CSS 네이밍
CSS 를 하게 되면서 단계를 스스로 만들었다
Position
JWT와 쿠키를 이용한 계정 관리, 권한 부여를 바탕으로 한 게시판과 댓글 기능까지 끝냈다.
Django-REST-Framework
인증 (/auth)
HTTP 기반(RESTful 하게) API 설계
요구사항
백 엔드
공부 세부 계획
계획
계획
웹 프론트 엔드 엔지니어가 반드시 공부해야 할 것이 몇가지 있다.
글을 쓸 때 시간을 너무 들인다는 것이다. 결국 블로그는 공부를 위함이고 그 시간을 넘긴다는 것은 본래 목적에 맞지 않다. 그럼으로 계획을 JS 계획을 세웠다 추후에 전체적인 계획 또한 쓰려한다.
JS 는 명세서가 계속 갱신되지만 JS 엔진이 표준 전체를 지원하지는 않음
테스트는 ‘왜’ 하는가?
닌자 코드
주석
진정한 프로그래밍 기술이란 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드를 작성해 해결하는 것. 코드 스타일이 도움 됨
디버깅
React Native 에서 NFC 사용하기
OOP 원칙
failed to emit precompiled header bridging header
React Native iOS Module map Not Found
React Native 클라이언트와 React Native WebView 끼리 통신하기
React Native 작동 원리 간단정리
프로토타입 상속
프로토타입에 직접 접근 시 모던 메서드 사용 가능
모든 내장 객체의 메서드는 해당 내장 생성자 함수의 프로토타입에 저장됨
생성자 함수의 prototype 프로퍼티는 new 생성자를 호출할 때 만들어지는 새로운 객체의 [[prototype]] 설정
프로토타입 상속
객체가 어떤 작업 할 떄 JS 명세서에 정의된 ‘내부 메서드’ 가 관여 (명세서에 정의된 메서드라 개발자가 코드 직접 호출 불가능)
eval(code) 호출 시 문자열 형태의 code 가 실행됨
BigInt 는 길이의 제약 없이 정수를 다룰 수 있게 해주는 숫자형
참조 타입은 JS 내부에서 사용되는 타입
커링은 단일 호출로 처리하는 함수를 각각의 인수가 호출 가능한 프로세스(다중 callable 프로세스)로 호출된 뒤 병합되도록 변환하는 것
JS 로 이벤트 객체 만들어서 직접 이벤트 생성
각 이벤트엔 브라우저 기본 동작이 대응함
유사한 요소에 동일한 핸들러 적용할 떄 주로 사용함
이벤트 발생 시 이벤트가 발생한 가장 안쪽 요소가 타깃 요소(event.target) 가 됨
이벤트는 무언가 일어났다는 신호로 모든 DOM 노드(DOM에만 한정된 건 아님)는 이런 신호 만들어냄
Redux-Saga call
Redux-toolkit PayloadAction
Redux-toolkit 에서 Redux-Saga
createSlice
Redux-toolkit 에서 createAsyncThunk
ApolloClinet Error Handling
graphql-compose-mongoose mongooseResolver
GraphQL 사용기
Apollo Client
GraphQL 간단 정리
graphql-compose-mongoose mongooseResolver
TypeGoose
Mongoose
TypeGoose
Mongoose
Linked List
List
부모 노드 밑에 여러 자식 노드가 연결되고, 자식 노드 각각에 다시 자식 노드가 연결되는 재귀적 형태의 자료구조.
해시 함수
네트워크 요청은 오리진(도메인, 프로토콜, 포트 이 세 가지에 의해 결정)이 요청하는 네트워크의 오리진과 일치/불일치에 따라 성공/실패
fetch(url, [options]는 JS 의 내장 네트워크 요청 메서드로 접근하고자 하는 URL에 options 넣어서 요청하고 프라미스가 반환되며 반환된 프라미스는 fetch() 호출하는 코드에서 사용됨
웹 스토리지 객체 localStorage/sessionStorage 사용 시 브라우저에 키-값 저장.
쿠키는 브라우저에 저장되는 작은 크기으의 문자열로 HTTP 프로토콜의 일부이며 주로 웹 서버에서 만들어짐
OOP 원칙
failed to emit precompiled header bridging header
React Native iOS Module map Not Found
iOS input type=file crash
프로퍼티 플래그와 설명자
객체 프로퍼티는 데이터 프로퍼티, 접근자 프로퍼티 로 나눔
프로퍼티 플래그와 설명자
‘try…catch’ 와 에러 핸들링
커스텀 클래스는 Error 나 다른 내장 에러 클래스 상속받아 만들 수 있음(super호출, name프로퍼티 신경 쓰기)
에러 발생 시 스크립트는 ‘죽고(즉시 중단)’ 콘솔에 에러 출력
import/export 문은 코드 구조의 중심 잡기 위해(모듈링 위헤) 모듈 경로에 원시 문자열만 가능하며 런탕미이나 조건부로 모듈 불러올 수 없음
import/export 문은 정적인 방식으로 모듈 경로엔 원시 문자열만 가능(함수 호출 불가능)
모듈은 하나의 파일
CI/CD 후기
AWS CodePipeline 환경 변수 React 에서 참조
AWS S3 + CodePipeLine + CodeBuild 를 이용한 React CI/CD 배포 중 이슈
AWS Route 53, S3, CloudFront 로 WWW 대응할 때 Endpoint
CloudFront 배포 딜레이
AWS Route 53, S3 로 WWW, naked 도메인 대응하기
ApolloClinet Error Handling
GraphQL 사용기
Apollo Client
이터레이터와 제네레이터는 동기 작업만 가능
제네레이터는 제네레이터 함수 function* f(...) {...} 사용해 만듬
웹 스토리지 객체 localStorage/sessionStorage 사용 시 브라우저에 키-값 저장.
쿠키는 브라우저에 저장되는 작은 크기으의 문자열로 HTTP 프로토콜의 일부이며 주로 웹 서버에서 만들어짐
네트워크 요청은 오리진(도메인, 프로토콜, 포트 이 세 가지에 의해 결정)이 요청하는 네트워크의 오리진과 일치/불일치에 따라 성공/실패
fetch(url, [options]는 JS 의 내장 네트워크 요청 메서드로 접근하고자 하는 URL에 options 넣어서 요청하고 프라미스가 반환되며 반환된 프라미스는 fetch() 호출하는 코드에서 사용됨
웹 기술 간단 정리
CDN (Contents Delivery Network)
TypeScript d.ts
TypeScript
SVG 파일 ReactComponent 이슈
이슈 픽스
Redux-toolkit 에서 Redux-Saga
Redux-Saga
함수형 프로그램에서의 순수 함수
사이드 이펙트
목적
앞으로 사용해보고 싶은 기술들과 계획
OOP(Object-Oriented Programming) 간단 정리
Webpack 등장 배경
graphql-compose-mongoose mongooseResolver
graphql-compose
TypeGoose
TypeGoose
Git
인터프리터 방식의 언어
좋은 개발자란 뭘까 라는 의문이 다시끔 들었고 구글링을 했다. 예전에도 봤던 비슷한 글 중 하나이긴 했지만 블로그에 한 번 정리해야겠다 라는 생각이 들어서 간단히 정리해보겠다
Geolocation API
최근 주말 제외 4일 연속 면접을 보고 있고 앞으로도 3번의 면접이 더 남아있다
API (Application Programming Interface)
Unit Test 와 Integration Test
배포 자동화
네트워크 기초 용어
redux-saga & SSR
redux-saga & SSR
TDD (테스트 주도 개발)
진행중인 프로젝트에 대한 생각
진행중인 프로젝트에 대한 생각
Docker
redux-toolkit 선택
웹 브라우저에서 앱 링크 활용하기
Redux-Saga takeLatest
JEST
정규 표현식
CSS 애니메이션
npx
2021-05-03 1일 1커밋, 1일 1블로그글 실패에 대한 성찰
개발 자료 모음집
Nginx 간단 정리
SPA 설계
객체 지향 5원칙
graphql-compose
NoSQL
나만의 개발 학습
React - S3 - CloudFront CORS 에러
FRONT에서 CORS 이슈 해결하기
클라이언트/서버 아키텍쳐에서 클라이언트의 불확실성
컴퓨터 언어의 수준
CLI 간단 정리
ShellScript 간단 정리
클라이언트-서버