profile
#프론트엔드
태그 목록
전체보기 (236)MonthSub Refactoring(24)WaffleCard Refactoring(21)리액트(14)TypeScript Project(14)읽을거리(10)벨로퍼트(10)코드스피츠 스터디(9)Vanilla TS - i(4)클로저(4)컴포넌트(4)NotionClone Refactoring(4)typescript(3)JavaScript(3)React(3)DFS(2)네트워크(2)반응형(2)함수형 프로그래밍(2)자료구조(2)리액트 라이프사이클(2)useEffect(2)OOP와 FP(2)vue(2)axios(2)숫자 증가 애니메이션(2)호이스팅(2)hook(2)Interceptor(1)nodejs(1)lifecycle(1)intersection observer(1)객체(1)컴포넌트 패턴(1)노션 클로닝(1)project(1)정렬 알고리즘(1)DP(1)TDD(1)scrollEvent(1)프로토타입(1)computed(1)클린 코드(1)리액트 form태그 렌더링 최적화(1)코드스피치 스터디(1)기능중심(1)라이프 사이클(1)TS문법(1)js(1)대괄호 표기법(1)비동기(1)함수형 setState(1)SOLID(1)react hook(1)재귀 알고리즘(1)Flex(1)JS 실행 컨텍스트(1)socket(1)콜백함수(1)리액트 컴포넌트와 패러다임(1)브라우저 프로세스(1)리액트 컴포넌트(1)트리 탐색(1)Route(1)cs공부(1)함수 저장(1)z-index(1)MonSub Refactoring(1)vanilla js(1)v-for(1)리액트 컴포넌트 패턴(1)async/await(1)동적프로그래밍(1)자바스크립트의 객체 지향(1)웹 호환성(1)watch(1)BFS(1)ClearTimeout(1)socket.io(1)JS런타임 환경(1)프론트엔드 테스트(1)useMemo(1)this(1)setTimeout(1)getter setter(1)고양이 사진첩(1)MonthSub Refacroting(1)CSS(1)무한 스크롤(1)useCallback(1)미디어쿼리(1)제어/비제어 컴포넌트(1)breakpoint(1)Context API(1)CSR(1)SSR(1)애플리케이션/컴포넌트 인스턴스(1)useInterval(1)생성자 함수(1)이터러블 프로토콜(1)Java Script(1)data(1)CustomEvent(1)링크트 리스트(1)Compound Component Pattern(1)spa(1)템플릿 문법(1)프로그래밍 패러다임과 역사(1)상속(1)아토믹디자인패턴(1)JSX(1)express(1)v if(1)일급 함수(1)클래스와 스타일 바인딩(1)methods(1)이벤트 루프(1)객체 지향 프로그래밍(1)form 상태관리(1)웹 표준(1)algorithm(1)websocket(1)emotion(1)디자인패턴(1)v-on(1)메모리(1)React.memo(1)웹 접근성(1)배열(1)promise(1)heading tag(1)history API(1)React 공부(1)API(1)시맨틱 마크업(1)프로그래머스(1)브라우저 렌더링(1)server(1)코드 스플리팅(1)js 메모리(1)

[HTTP 완벽 가이드] 1. HTTP: 웹의 기초 - 4장 커넥션 관리

http는 어떻게 tcp커넥션을 사용하는가?tcp커넥션의 지연, 병목, 막힘병렬 커넥션, keep-alive커넥션, 커넥션 파이프라인을 활용한 http의 최적화지구상의 컴퓨터와 네트워크 장비(인터넷)에서 널리 쓰이고 있는 패킷 교환 프로토콜들의 계층화된 집합.전 세계

2022년 10월 26일
·
0개의 댓글
·

[실시간 채팅 웹앱 만들기](2) - 프로젝트 세팅 및 소켓 연결

server와 clinent로 폴더를 분리했다.server는 localhost:8080포트 사용clinen는 localhost:3000포트 사용express, socket.io 패키지를 설치한 후 app.js파일에 서버를 만들고 socket.io와 연결했다.http모듈

2022년 10월 17일
·
0개의 댓글
·

[HTTP 완벽 가이드] 1. HTTP: 웹의 기초 - 3장 http메세지

http메세지는 무언가를 담아 보내는 소포와 같다.http메세지는 http애플리케이션 간에 주고받는 데이터의 블록들이다.클라이언트 - 프락시 서버 - 서버 사이를 흐른다.인바운드, 아웃바운드, 업스트립, 다운스트림은 메세지의 방향을 이미하는 용어다.트랜젝션 방향을 표현

2022년 10월 17일
·
0개의 댓글
·

[실시간 채팅 웹앱 만들기](1) - 기능 정의 & 화면 설계

페이지별 기능 정리 1. 로그인 페이지 닉네임을 입력하고 프로필 이미지를 선택한다. 시작하기 버튼을 누르면 로그인이 되고 서비스를 사용할 수 있다. 2. 채팅방 목록 페이지 (다수와의 채팅) 채팅은 불특정 다수와 함께 할 수 있다. 사용자가 채팅방을 만들 수 있다.

2022년 10월 15일
·
0개의 댓글
·

[클린 코드 JS] 타입/경계 다루기

반환값은 string원시타입을 주로 검사함수처럼 사용할 수도 있다. typeof ('문자열')js에서 타입검사할 때 주의해야하는 이유참조타입은 typeof로 판별해내기 어렵다.null은 object로 나온다 → 오류임object생성자로 만든 값들은 거의 object로

2022년 10월 15일
·
0개의 댓글
·

[HTTP 완벽 가이드] 1. HTTP: 웹의 기초 - 2장 URL과 리소스

URL은 인터넷의 리소스를 가리키는 표준이름이다. 브라우저가 정보를 찾는데 필요한 리소스의 위치를 가리킨다.좀 더 일반화된 부류인 URI의 부분 집합이다.URI에는 URL과 URN가 속해있다. (주로 URL이 쓰인다.)1\. 스킴(어떻게)클라이언트가 리소스에 어떻게 접

2022년 10월 14일
·
0개의 댓글
·

[실시간 채팅 웹앱 만들기](0) - 필요지식 학습

실시간 채팅 기능을 만들기 위해선 webSocket Api를 이용해 통신해야한다.서버와 클라이언트에 각각 Socket통신 설정과 이벤트 등록을 해야한다.express를 사용해 서버를 구축하고 socket.io라이브러리를 사용하기로 결정했다.서버는 클라이언트의 요청을 받

2022년 10월 13일
·
0개의 댓글
·

[HTTP 완벽 가이드] 1. HTTP: 웹의 기초 - 1장 HTTP개관

HTTP는 전 세계의 웹 서버로부터 대량의 정보를 빠르고, 간편하고, 정확세게 사람들의 pc에 설치된 웹 브라우저로 옮겨주는 전송 규칙 체계이다.클라이언트는 웹서버에게 Http요청을 보낸다.웹 서버는 데이터(웹 리소스)를 저장하고, 클라이언트가 요청한 데이터를 http

2022년 10월 13일
·
0개의 댓글
·

React - 이미지 캐러샐 구현하기

스무스하게 이동하는 이미지 캐러샐 구현하기\~~SLIDE_WIDTH : 슬라이드 엘리먼트 너비SLIDE_MARGIN_RIGTH : 슬라이드 엘리먼트 오른쪽 마진currentSlideIndex : 현재 보여지는 슬라이드의 index를 담는 상태sliderRef : 위치를

2022년 10월 11일
·
0개의 댓글
·

NextJS - 무한스크롤 & 스크롤 위치 되돌리기 구현

스크롤이 페이지 하단에 도달하면 다음 상품을 이어서 보여줍니다.더 이상 가져올 데이터가 없는 경우 요청이 나가지 않아야 합니다.상품 상세 화면으로 이동했다가 다시 이전 페이지(/infinite-scroll)로 돌아오면 기존의 스크롤 위치로 되돌아와야합니다.상품 리스트

2022년 10월 11일
·
0개의 댓글
·

NextJS - 페이지네이션 구현하기

한 번에 보이는 페이지의 갯수는 5개 여야합니다.페이지 클릭 시 url path가 변경되어야 합니다.이전 범위 버튼 클릭 시 이전 범위의 마지막 페이지를 보여줘야 합니다.다음 범위 버튼 클릭 시 다음 범위의 첫 번째 페이지를 보여줘야 합니다.한 페이지 당 보여지는 상품

2022년 10월 10일
·
0개의 댓글
·

[클린 코드 JS] 변수 다루기

var는 선언, 재할당을 중복으로 할 수 있다.var가 중복 선언이 될 경우 (원래 오류가 나야하지만) 중복 선언이 무시되고 할당으로만 작동한다.let/const는 중복 선언 시 에러가 뜬다. let은 재할당 가능, const는 불가능하다.let은 선언 먼저 한 후 나

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

클린 코드 규칙

특정 코드의 중복만을 얘기하는 좁은 의미가 아니라 (ex. 한 함수 내에서의 코드 중복)로직, 의도, 비즈니스 로직 이 모든 것들이 중복되지 않도록 한다. (ex. 여러 함수 내에서의 특정 로직 중복)반복되는 코드가 있다면 추출해서 관리하자.code - 너무 축약되지

2022년 9월 6일
·
0개의 댓글
·

프로그래밍 패러다임과 역사와 프론트엔드의 패러다임

문제인식문제를 해결하는 새로운 기술이 등장하고 이름 명명됨기술의 부흥새로운 한계점 봉착→ 싸이클 반복순차적 프로그래밍과 goto원시타입 데이터와 for, while만으로 순차적으로만 프로그래밍.함수가 없기 때문에 특정 구간을 반복하려면 goto를 이용해 실행 순서 변경

2022년 8월 25일
·
0개의 댓글
·

자바스크립트의 객체 지향

함수형으로 만들고 싶었으나 그 당시 주류였던 객체 지향을 무시할 수 없어최대한 간결한 방법으로 객체지향(상속, 추상화, 다형성)을 할 수 있도록 함.no class언어, 상속이 아닌 공유.객체지향+함수형의 멀티 패러다임.객체지향 언어class를 선언해야만 생성할 수 있

2022년 8월 25일
·
0개의 댓글
·

리액트와 프로그래밍 패러다임의 관계

클래스 컴포넌트React.Component에서 공통 메소드들을 상속받아 사용라이프 사이클도 포함각 LifeCycle 메소드에 모든 로직을 집어넣었어야 했음한 메소드 안에 관심사가 다른 로직들이 관리되므로 유지보수가 어렵다.코드를 각 LifeCycle 메소드에 중복으로

2022년 8월 25일
·
0개의 댓글
·

프론트엔드 테스트

모던 프론트엔드 테스트 전략드림 코딩 엘리 - 테스트와 TDD소프트웨어가 원하는 대로 동작하는 지 확인하는 것.확인하는 요소는 함수, 특정 기능, ui, 성능, api스펙 등등이 있다.목적소프트웨어 품질 확인버그 찾기 효과실제 변경 시에 테스트 코드를 이용해 이전 답과

2022년 8월 25일
·
0개의 댓글
·

리액트 컴포넌트 패턴

컴포넌트를 구현할 때 생각해봐야 할 점다양한 사례에 적용할 수 있는 재사용 가능한 컴포넌트를 어떻게 개발할까?사용하기 쉽고 심플한 API를 제공하는 컴포넌트는 어떻게 만들까?UI와 기능 모두에서 확장성 가능한 컴포넌트를 개발하려면 무엇이 필요할까?방법단일 책임레이아웃

2022년 8월 25일
·
0개의 댓글
·

프론트엔드 성능 최적화

html파싱이나 렌더링을 막는 리소스js - html파싱 블록 리소스css - 렌더링 블록 리소스css, js둘 다 html파싱을 막는 리소스지만, css는 html을 바꿀 가능성이 없기 때문에렌더링 엔진이 link태그를 만나면 자동으로 preload를 해주어 파싱과

2022년 8월 25일
·
0개의 댓글
·

코드 스플리팅과 dynamic import

모든 웹 페이지의 속도를 결정 짓는 첫번째 요소는 첫 페이지를 그릴때 필요한 자원의 양이다.필요한 자원이 많으면 많을 수록 네트워크 상에서 다운받는 시간이 오래 걸린다.Webpack 같은 bundler 들은 모든 JS 코드를 하나의 거대한 파일로 만들어 내었고, 이는

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