profile
Programmer
post-thumbnail

네트워크

복잡한 인터넷 망으로 연결되어 있다.수많은 중간 노드(서버)들을 거쳐서 메세지를 전송하고 있다.ip 주소 부여지정한 IP 주소(IP Address)에 데이터 전달패킷(Packet)이라는 통신 단위로 데이터 전달IP 패킷 정보클라이언트에서 출발지와 목적지가 담긴 IP 패

2022년 7월 2일
·
0개의 댓글
·

옵저버 패턴에 대해

아래 그림처럼 유튜버가 구독자 한 명 한 명에게 구독자 알림을 보내지 않듯이 옵저버 패턴도 마찬가지로 구독자들에게 <span style = "background :   옵저버패턴이란 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

Javascript로 Deque를 직접 구현하는 이유

 Javascript로 Queue자료형을 통해 BFS관련 로직을 짜려고 하였다. 하지만 기존에 사용하던 python과는 다르게 <span style='background-color:   대신 javascript에는 배열의 첫번째 요소를 뽑아먹을 수 있는 shift

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

슬라이더 구현

코드코드 구현 설명!codesandboxcarousel-emielm슬라이더를 구현하기 위해서는 다섯가지 슬라이더 블록을 한 곳에 모두 겹치게 하여 .active, .prev, .next에 각각 css 스타일링을 부여하여 구현할 수 있다. .active : 겹쳐지는 다섯

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

progress bar 구현

목차 코드 코드 설명 1. 코드 !codesandbox[progressbar-bef3gn] 2. 코드 설명 a) 브라우저의 요소 사이즈와 스크롤에 대한 이해 우리가 사용하는 자바스크립트는 브라우저의 요소의 높이나 너비를 계산해주는 관련 객체를 제공해줍니다. 프

2022년 4월 13일
·
0개의 댓글
·
post-thumbnail

자바스크립트 객체

객체 리터럴과 객체클래스와 객체프로퍼티 속성메서드 다형성메서드 추상화상위 클래스 메서드 호출소스 코드의 고정된 값을 대표하는 용어예제 코드 Javascript라는 언어는 거의 대부분이 객체 로 구성되어 있다는 점이다. 따라서 지금 다룰려고하는 프로퍼티가 매우 중요하다.

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

SPA + CSR + SSR

SPA (싱글 페이지 어플리케이션) CSR (클라이언트 사이드 렌더링)SSR (서버 사이드 렌더링)정리리액트를 다루는 기술 13장노마드 코더 Next.js서버 사이드 렌더링이란?https://linked2ev.github.io/devlog/2018/11/15/

2022년 1월 29일
·
0개의 댓글
·
post-thumbnail

컴포넌트 성능 최적화

React.memo함수형 업데이트useReducerreact-virtualized리액트를 다루는 기술 11장렌더링 되는 순서https://code-masterjung.tistory.com/67 나는 앞서 간단한 일정관리 앱을 만들어보았다. 그 과정에서 데이터가

2022년 1월 25일
·
0개의 댓글
·
post-thumbnail

react 일정관리 앱(미니프로젝트)

앱 설명코드구현 시 신경썼던 점 새로 알게되었던 점리액트 다루는 기술 10장리액트 다루는 기술 10장에 있는 미니프로젝트(TODOLIST)를 내 식대로 조금씩 바꾸어가면서 구현을 해보았다. 이 TODOLIST는 추가, 삭제, 수정, 그리고 토글 기능을 구현해 보았다.

2022년 1월 24일
·
0개의 댓글
·
post-thumbnail

REACT 컴포넌트 스타일링 방법

목차 > 1. 일반 CSS Sass CSS Modulesafd Styled-components 출처 리액트를 다루는 기술 9장 1. 일반 CSS react 컴포넌트 스타일링 첫번째 방법은 일반 CSS를 통한 작업입니다. 내가 CSS 작성에 자신이 있고 어떤 라이브

2022년 1월 22일
·
0개의 댓글
·
post-thumbnail

BEM 네이밍 규칙

BEM 네이밍 규칙이란?BlockElementModifierBEM 네이밍 규칙이란?https://velog.io/@nemo/bemBEM 네이밍 규칙 상세한 작성 방법https://nykim.work/15CSS 작업 시 우리는 CSS 클래스를 중복되지

2022년 1월 22일
·
0개의 댓글
·
post-thumbnail

Hooks

목차 > 1. useEffect useReducer useCallback useMemo useRef 커스텀 훅 실습 예제 출처 리액트를 다루는 기술 6장 useCallback과 useMemo 차이점 https://develogger.kro.kr/blog/LKHcodi

2022년 1월 21일
·
0개의 댓글
·
post-thumbnail

라이프 사이클에 대해

라이프 사이클이란 ??라이프 사이클 메서드 종류라이프 사이클 동작 과정에러 잡아내기 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이납니다. 이 라이프 사이클 메서

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

CSS flexBox

목차 > 1. flex 개념 flex의 다양한 설정 for container for items 1. flex의 개념 우리는 기존에 css 배치를 할 때 float이라는 개념을 많이 사용하였다. 하지만 css도 진화되고 배치를 손쉽게 하기 위해 flex와 grid의

2022년 1월 18일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 과정

전체적인 브라우저 렌더링 과정HTML 파싱과 DOM 생성CSS 파싱과 CSSOM 생성렌더 트리 생성자바스크립트 파싱과 실행리플로우와 리페인트자바스크립트 파싱에 의한 HTML 파싱 중단script 태그의 async/defer 어트리 뷰트모던 자바스크립트 38장브라우저 렌

2022년 1월 18일
·
0개의 댓글
·
post-thumbnail

CSS 우선순위

CSS Selector 이해https://www.nextree.co.kr/p8468/CSS 우선순위https://www.zerocho.com/category/CSS/post/588cb95ca63e64132496a5d5https://engkim

2022년 1월 17일
·
0개의 댓글
·
post-thumbnail

ref에 대해서

ref란?ref 선언하는 방법컴포넌트에서 ref를 선언하는 방법리액트를 다루는 기술 5장Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호

2022년 1월 17일
·
0개의 댓글
·
post-thumbnail

Debounce && Throttle

타이머에 대해디바운스와 스크롤에 대해scroll을 이용한 디바운스와 스로틀 비교모던 자바스크립트 41장디바운스와 스로틀https://webclub.tistory.com/607- https://dev-note-97.tistory.com/278자바 스크립

2022년 1월 17일
·
0개의 댓글
·
post-thumbnail

react 이벤트 핸들링

리액트 이벤트 시스템 주의사항class 컴포넌트에서 이벤트 핸들링input 여러 개 다루기이벤트 이름은 카멜 표기법으로 작성한다.ex) HTML의 onClick은 리액트에서 onClick으로 작성이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값

2022년 1월 16일
·
0개의 댓글
·
post-thumbnail

Ajax란?

Ajax란?JSONXMLHttpRequest출처 모던 자바스크립트 43장모던 자바스크립트 single Page Application & Routinghttps://poiemaweb.com/js-spa Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기

2022년 1월 16일
·
0개의 댓글
·