profile
지식을 나눠요 📖
태그 목록
전체보기 (375)자바스크립트(105)JavaScript(103)React(39)리액트(39)git(30)CSS(26)html(25)자료구조(22)노드(18)데이터베이스(17)node.js(16)알고리즘(14)C(14)네트워크(12)디자인 패턴(12)타입스크립트(12)typescript(11)(11)내장 객체(10)mysql(9)함수(9)정렬(9)컴포넌트(8)리덕스(8)ES6(7)scss(7)hook(7)트리(6)객체(6)mongodb(6)github(6)OSI 7 Layer(6)리스트(6)redux(6)CLEAN CODE(6)그래프(5)연산자(5)자바스크립트 함수(5)Sass(5)이벤트(5)반복문(5)깃허브(5)몽고디비(5)css 전처리기(5)리덕스 미들웨어(4)비동기 처리(4)이진 트리(4)프로토콜(4)폼 요소(4)클래스(4)라우터(4)브랜치(4)검색(4)클린 코드(4)자바스크립트 이벤트(3)클래스형 컴포넌트(3)function(3)프로그래밍 패러다임(3)OSI(3)배열(3)자바스크립트 연산자(3)OSI 7계층(3)라이브러리(3)셀렉터(3)연결 리스트(3)함수형 컴포넌트(3)미들웨어(3)array(3)(3)함수 리터럴(3)HTML 폼(3)Koa(3)TDD(3)merge(3)DOM(3)&&(3)http(3)병합(3)데이터 조작문(3)정규 표현(2)(2)타입(2)메소드(2)커밋(2)Map(2)쿠키(2)관계형 데이터베이스(2)모달(2)네트워크 계층(2)인라인 요소(2)자바스크립트 배열(2)프론트엔드(2)반응형 웹(2)에러(2)branch(2)주석(2)데이터 타입(2)Props(2)모듈(2)블록 요소(2)컴포넌트 스타일링(2)패킷(2)js(2)원격 저장소(2)리액트 라우터(2)재귀(2)그래프 탐색(2)ip(2)프로젝트(2)REST(2)소프트웨어 공학(2)자바스크립트 알고리즘(2)템플릿 문자열(2)소스트리(2)템플릿 엔진(2)소프트웨어(2)modal(2)useState(2)(2)State(2)express(2)클린코드(2)브랜치 병합(1)선형 리스트(1)Restful(1)redux thunk(1)redux saga(1)다크 모드(1)스코프(1)옵저버 패턴(1)List(1)플렉스 박스(1)코드 스플리팅(1)single page application(1)linked list(1)stack(1)queue(1)스크럼(1)애자일(1)스프린트(1)호이스팅(1)show()(1)html 하이퍼링크(1)git revert(1)반응형 웹 페이지(1)이더넷(1)조건부 렌더링(1)tagged template strings(1)최대공약수(1)자바스크립트 에디어(1)react router dom(1)클라우드 컴퓨팅(1)osi 모델(1)선언형 프로그래밍(1)heap(1)세션(1)sourcetree(1)nunjucks(1)반응형(1)이터레이터 패턴(1)BSON(1)BOM(1)패키지(1)캡쳐링(1)함수형 프로그래밍(1)순수 함수(1)시맨틱 태그(1)generator(1)iterator(1)이중 연결 리스트(1)콘텐츠(1)DSU(1)velog(1)XMLHTTPRequest(1)데이터통신(1)웹 프레임워크(1)DDL(1)Promise 객체(1)스타일 우선순위(1)마진(1)rgb(1)하이퍼링크(1)fs(1)상수(1)전송 계층(1)모뎀(1)비구조적 프로그래밍(1)노드 취득(1)서브넷(1)동적 웹 페이지(1)산술 연산자(1)버블 정렬(1)CSS 스타일 시트 적용(1)계획(1)브라우저 객체 모델(1)Augmented Reality(1)라우팅(1)노드 워킹(1)리피터(1)파괴적인 메소드(1)허브(1)git rm --cached(1)투두 리스트(1)float(1)객체지향 프로그래밍(1)AVL 트리(1)구조적 프로그래밍(1)표현 계층(1)라이프사이클(1)힙 정렬(1)슬라이드 메뉴(1)클라우드(1)전개 연산자(1)HTTP2(1)리덕스 사가(1)개발자 도구(1)스타일시트(1)버전 관리(1)await(1)네트워크 7계층(1)서버(1)storybook(1)HTML Comment(1)useEffect(1)응용 계층(1)비교 연산자(1)JOIN(1)ajax(1)테스트 주도 개발(1)문서 객체 모델(1)세그먼트(1)px(1)Fetch API(1)for ~ in(1)react redux(1)비동기통신(1)그리드 레이아웃(1)(1)컴포넌트 생명주기(1)데크(1)원형 큐(1)인접 리스트 그래프(1)데이터 모델(1)number(1)코덱(1)자바스크립트 주석(1)async(1)Linear List(1)ref(1)parameter(1)padding(1)class(1)while(1)for(1)network(1)내부 스타일 시트(1)리액트 훅(1)hue(1)git stash(1)웹 스토리지(1)엄격 모드(1)정적 메소드(1)Flex(1)데코레이터 패턴(1)HTML 특수문자(1)github pages(1)선형 검색(1)아날로그(1)nesting(1)Deque(1)익스프레스(1)플렉스 박스 레이아웃(1)자바스크립트 자료형(1)git diff(1)tcp(1)카운팅 정렬(1)틸드 연산자(1)SCSS 컴파일(1)인수(1)frontend(1)색상 표기법(1)optional chaining(1)스키마(1)AR(1)비동기 통신(1)Backend(1)레이아웃(1)그룹 셀렉터(1)(1)jasmine(1)Link태그(1)pug(1)span(1)div(1)Koa 미들웨어(1)상대 경로(1)절대 경로(1)클라이언트 사이드 렌더링(1)테두리(1)데이터 제어문(1)파일 시스템(1)조건문(1)break(1)문자열(1)캐스케이딩(1)테스트(1)replaceAll(1)margin(1)객체 확장 표현식(1)git log(1)sloppy mode(1)UDP(1)퍼그(1)발생자(1)switch(1)@media(1)명령형 프로그래밍(1)2021년(1)REST API(1)find(1)json(1)continue(1)비동기처리(1)슈퍼넷(1)React Color(1)이벤트 객체(1)const(1)커맨드 패턴(1)클로저(1)기본 값 매개변수(1)회고록(1)파일 경로(1)브루트포스(1)readme(1)스위치(1)filter(1)타입 추론(1)bootstrap(1)패딩(1)변수명(1)반복자(1)HTML 폼 요소(1)프로그래밍(1)스테이지(1)스타일 상속(1)리액트 리덕스(1)데이터 링크(1)대입 연산자(1)포트 번호(1)Global 객체(1)koa router(1)스테이트 패턴(1)비트 연산자(1)인터페이스(1)String 객체(1)(1)스토리북(1)구글 웹 폰트(1)String(1)class 셀렉터(1)tree(1)commit(1)박스 모델(1)git merge(1)웹 폰트(1)데이터 정의문(1) 셸 정렬(1)가운데 정렬(1)BFS(1)union(1)태그 셀렉터(1)퀵 정렬(1)외부 스타일 시트(1)미디어 쿼리(1)Math 객체(1)useMemo(1)useRef(1)this(1)이벤트 구동 모델(1)타이머(1)protected(1)테이블(1)세션 계층(1)컴파일러(1)예외처리(1)update(1)middleware(1)자바스크립트 this(1)이벤트 핸들러(1)styled components(1)useCallback(1)자바스크립트 변수(1)script(1)reduce(1)border(1)가상 클래스(1)토플로지(1)정규식(1)CSR(1)SSR(1)절차적 프로그래밍(1)선택문(1)프록시 패턴(1)비트(1)구조 분해 할당(1)팝업창(1)git reset HEAD(1)Boyer Moore 법(1)하노이 탑(1)id 셀렉터(1)화살표 함수(1)(1)www(1)console(1)크기(1)바나나(1)순차 검색(1)git reset(1)유클리드 호제법(1)최소공배수(1)Array 객체(1)strict mode(1)클래스 상속(1)staging(1)애로우 함수(1)이진 탐색 트리(1)이진 검색(1)Tracked(1)마크다운(1)readonly(1)tryCatch(1)로컬 스토리지(1)스택(1)form(1)tsconfig(1)extends(1)이벤트 리스너(1)Fetch(1)어댑터 패턴(1)단순 삽입 정렬(1)spa(1)display(1)rem(1)jest(1)지역 저장소(1)type 속성(1)nosql(1)연산자 우선순위(1)자바스크립트 이벤트 객체(1)상속(1)백준(1)퍼사드 패턴(1)JSX(1)react.js(1)데이터 통신(1)인접 행렬 그래프(1)git show(1) 도수 정렬(1)병합 정렬(1)변수(1)git-bash(1)소프트웨어 개발 프로세스(1)DFS(1)html 링크(1)타입 단언(1)자료형(1)스위칭(1)Proxy 객체(1)정적 웹 페이지(1)regexp(1)script태그의 위치(1)iframe(1)브루트 포스(1)깃 GUI(1)디지털(1)너비 우선 탐색(1)인접 리스트(1)전체 셀렉터(1)릴레이션(1)버블링(1)독서(1)do~while(1)numeric separators(1)HTML 테이블(1)템플릿 메소드 패턴(1)순회(1)캘린더(1)Date(1)Function 생성자(1)바이트(1)프로토타입 체인(1)HTML 폼 속성(1)em(1)문자열 검색(1)트리 순회(1)소프트웨어 개발 생명주기(1)자바스크립트 바나나(1)기수 정렬(1).gitignore(1)HTML 주석(1)상태관리(1)data structure(1)closure(1)private(1)깊이 우선 탐색(1)memo(1)물리층(1)for ~ of(1)set(1)연결 셀렉터(1)stash(1)타입스크립트 함수(1)인터프리터(1)자바스크립트 반복문(1)SCSS 변수(1)nullish coalescing(1)세션 스토리지(1)싱글턴 패턴(1)계수 정렬(1)contextAPI(1)컴포넌트 반복(1)오픈 소스 소프트웨어(1)연관 배열(1)repl(1)익명 함수(1)html 시맨틱 태그(1)테스트 도구(1)vim(1)논리 연산자(1)git clone(1)switch문(1)소프트웨어 개발 프로세스 모델(1)git add(1)분기문(1)테스트 프레임워크(1)argument(1)(1)16진수 표기법(1)서버 사이드 렌더링(1)리포지토리(1)인접 행렬(1)데이터링크층(1)증강현실(1)Symbol 객체(1)mixin(1)json 문서(1)object(1)인라인 스타일(1)회고(1)html 태그(1)스테이징(1)position(1)pakcage.json(1)SPA 페이지(1)가상 요소(1)정적 프로퍼티(1)script태그(1)팩토리 패턴(1)import(1)hsl(1)백엔드(1)넌적스(1)원형 연결 리스트(1)부트스트랩(1)style 태그(1)타입 주석(1)fast-forward(1)id(1)속성 셀렉터(1)HTML 이미지(1)TCP/IP(1)자바스크립트 스코프(1)npm(1)단순 선택 정렬(1)schema(1)ES2021(1)DML(1)인자(1)오픈 소스(1)이벤트 핸들링(1)git commit(1)popup(1)redux-logger(1)Graph(1)프레임워크(1)
post-thumbnail

[React] Context API

상태관리는 리액트에서 state(= 상태) 데이터를 효율적으로 관리하는 것을 말합니다. 리액트는 상태(state)의 전달을 단방향(부모 -> 자식)으로만 받기때문에 트리구조로 얽힌 컴포넌트 구조에서는 props들이 어디서부터 내려온 것인지 알기가 어렵게 됩니다.이 현상

약 18시간 전
·
0개의 댓글
·
post-thumbnail

[Javascript] 캡쳐링과 버블링

자바스크립트가 어떻게 이벤트를 처리하는지에 대해서 알아보겠습니다.자바스크립트의 이벤트는 특정 요소에서 발생합니다. 그리고 이 DOM은 여러 객체들로 이루어져있고요. 그래서 이벤트가 발생하면 부모 요소부터 시작해서 이벤트가 발생한 하위 요소까지 전달되며, 이 단계를 캡쳐

2일 전
·
0개의 댓글
·
post-thumbnail

[Javascript] 이벤트 객체

지난 시간에 다뤘던 이벤트 핸들러와 이벤트 리스너는 인수로 이벤트 객체라는 것을 받습니다. 이 이벤트 객체를 통해 핸들러와 리스너 내부에서 이벤트 발생에서 얻을 수 있는 정보들을 얻을 수 있습니다.위 코드에서 두 번째 인자인 리스너에 전달된 e가 바로 이벤트 객체입니다

3일 전
·
0개의 댓글
·
post-thumbnail

[Javascript] 원본 배열을 변경하는 Array 객체의 메소드

Array 객체는 배열을 다양하게 가공할 수 있는 메소드들을 지원하고 있습니다. 이 중에는 배열의 요소를 삭제하거나 추가하거나 가공하는 메소드들이 있는데요. 이 메소드들은 종류에 따라서 원본 배열을 직접 가공, 복사본을 만든 뒤 가공하는 두 종류의 메소드로 나뉘어집니다

5일 전
·
0개의 댓글
·
post-thumbnail

소프트웨어 개발 - 계획

소프트웨어 개발은 여러 과정을 거치면서 진행이 됩니다. 이 과정을 소프트웨어 개발 생명주기라고도 합니다.계획 -> 분석 -> 설계 -> 구현 -> 테스트 -> 유지보수이 중에서 첫 번째 단계인 계획단계에 대해서 이야기해보려고 합니다.소프트웨어를 개발하기 위해서는 비용,

6일 전
·
0개의 댓글
·
post-thumbnail

소프트웨어 개발 프로세스

일을 처리하는 과정이나 순서를 프로세스라고 합니다. 즉, 프로세스는 주어진 일을 해결하기 위한 목적으로 순서가 정해져 수행되는 일련의 절차라고 할 수 있습니다. 소프트웨어를 개발하는 과정에서 수행하는 가장 작은 단위를 작업(task)라고 합니다. 그리고 소프트웨어 개발

6일 전
·
0개의 댓글
·
post-thumbnail

[Clean Code] 6장 객체와 자료구조

클래스의 자료는 추상적인 개념으로 표현하라.단순히 자료를 감추고 조회/설정(get/set) 함수로 자료를 다루는 것은 좋은 클래스가 아니다. 또한 인터페이스를 제공한다고만 해서도 좋은 클래스는 아니다.추상화된 인터페이스를 제공해서 사용자가 클래스 내부의 구현을 모른채로

7일 전
·
0개의 댓글
·
post-thumbnail

[React] React에서 모달창 구현하기

예전에 CSS와 자바스크립트를 이용해서 모달창을 구현했습니다. 마찬가지로 리액트로도 모달창을 구현할 수 있는데요. 바닐라 자바스크립트와는 조금 다르기에 방법을 소개해보려고 합니다. 제가 소개드린 방식으로도 리액트 환경에서 모달을 구현할 수 있습니다.classList 속

2023년 5월 18일
·
0개의 댓글
·
post-thumbnail

투두 리스트가 있는 캘린더

지난번의 타이머 앱처럼 리액트에 대한 감을 되찾고자, 간단히 진행해 보았습니다.투두 리스트는 일반적으로 날짜 개념이랑 엮어서 많이 쓰는데, 기존에 클론 코딩했던 Velopert님의 투두 리스트를 다시 한 번 더 클론 코딩하면서 기능을 추가해 보았습니다.결과물 링크Git

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

[GitHub] 깃허브 README.md에 gif올리기

깃허브에 프로젝트를 만들고 결과물을 간단하게 보여주는 방법에는 글, 이미지, 움직이는 사진, 동영상 등이 있습니다. 이 중에서 저는 가장 효과적이면서도 편리하게 결과물을 보여주는 방법이 움직이는 사진(.gif, .webp 등)이라고 생각합니다.그래서 오늘은 깃허브 RE

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

HTTP의 발전

지난 포스트에서 HTTP에 대한 소개를 했습니다. 이번엔 HTTP 프로토콜이 어떤식으로 발전했고, 현재는 어떤 기능들을 가지고 있는지에 대해 알아보도록 하겠습니다.팀 버너스 리에 의해 웹(www)이 개발되면서 같이 등장한 초기형 HTTP는 초기 웹의 형태인 검색, 참조

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

www

우리가 웹 브라우저를 열고 인터넷 서핑을 하게되면, 주소 앞에 항상 www를 치고 들어가게 됩니다. (물론 생략해도 웹 페이지를 이동할 수 있습니다.)이렇게 항상 웹 페이지 주소 앞에 따라다니는 www가 뭔지 알아보도록 하겠습니다.www는 월드 와이드 웹, World

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

제 7 계층 응용 계층

이번엔 사용자의 응용 프로그램이 동작하는 계층인 제 7 계층 응용 계층에 대해서 이야기해볼까 합니다.7계층을 다루지만 동시에 5계층인 세션 계층, 6계층인 표현 계층도 동시에 다루려고 합니다.왜냐하면 세션, 표현, 응용 계층은 모두 응용 프로그램이 동작하는 것과 관계가

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

좋은 글을 쓰기 위한 연구

지속적으로 연구를 하며 글을 갱신하려고 합니다.이유이건 오픈된 인터넷 공간에 글을 적음으로써 하나의 명확한 사실이 발생합니다.그것은 바로 "누군가가 내가 쓴 글을 읽는 다는 것"입니다.제가 블로그를 작성하는 이유에는 크게 두 가지 이유가 있습니다.공부했던 것들을 복습하

2023년 5월 4일
·
0개의 댓글
·
post-thumbnail

제4 계층 전송 계층

이번에는 4번째 계층인 전송 계층에 대해 알아보도록 하겠습니다.이전에 배운 물리 계층, 데이터 링크 계층, 네트워크 계층만 있어도 네트워크는 데이터를 전송할 수 있습니다. 하지만 도중에 오류가 발생하거나 데이터 손상이 발생할 경우 세 가지 계층으로만은 처리를 할 수 없

2023년 5월 4일
·
0개의 댓글
·
post-thumbnail

라우터

이어서 네트워크 계층에서 동작하는 장비인 라우터에 대해 알아보겠습니다.라우터(Router)는 네트워크 사이에서 데이터를 전달하는 역할을 하는 장치입니다. 최적의 경로를 설정하고, 이 경로에 따른 다음 노드로 이동시키는 장치입니다.라우터는 크게 두 가지 일을 합니다.패킷

2023년 5월 3일
·
0개의 댓글
·
post-thumbnail

서브넷, 슈퍼넷

지난 시간에 이어서 3계층 네트워크 계층에서 일어나는 일인 서브넷과 슈퍼넷에 대해 소개하도록 하겠습니다.A 클래스 네트워크는 대규모 네트워크를 구성하므로 브로드캐스트같은 전방위 전송을 사용하면 네트워크의 수 많은 컴퓨터에 전송을 하게됩니다. 이 경우 네트워크가 상당히

2023년 5월 3일
·
0개의 댓글
·
post-thumbnail

3계층 네트워크 계층

이번 포스트에서는 OSI 7 Layer의 3번째 계층인 네트워크 계층에 대해서 다뤄보도록 하겠습니다.이전에 설명한 2계층: 데이터 링크 계층에서는 대표적으로 이더넷을 이용해서 통신을 합니다. 이더넷을 따르면 같은 네트워크에서 속해있는 컴퓨터끼리는 통신이 가능하지만, 다

2023년 5월 3일
·
0개의 댓글
·
post-thumbnail

스위치

네트워크에 연결된 기계가 여러 대일 때는 서로 데이터를 주고 받기 위해 장치를 모두 선으로 연결해야합니다. 이때 네트워크에 연결된 장치가 많아질수록 모뎀, 허브 등의 장치는 효율이 떨어지는 문제가 발생합니다. 이러한 문제를 해결하고자 등장한 것이 바로 스위치(switc

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

2계층 데이터 링크 계층

이번에는 OSI 7 Layer의 두 번째 계층인 데이터 링크 계층에 대해서 알아보도록 하겠습니다.이더넷(Ethernet)은 LAN에서 데이터 통신을 수행하기 위해 사용하는 규칙입니다.여러 대의 컴퓨터가 통신을 할 경우 데이터들이 충돌을 일으킬 가능성이 있는데, 이더넷은

2023년 4월 26일
·
0개의 댓글
·