profile
°˖✧ Dreams come true ✧˖°
태그 목록
전체보기 (62)redux(5)computer science(4)frontend(4)React(3)반복문(3)starbucks(2)Bang & Olufsen(2)break(2)2020.12.11 TIL(2)network(2)continue(2)JavaScript(2)데이터 타입(2)middleware(2)hooks(2)none(2)CS(2)instagram(2)기록하고 싶은 코드(2)3가지 규칙(1)Immer(1)else if문(1)object(1)cors(1)버튼 테두리 없애고 싶다면(1)front end(1)web(1)변수 선언(1)position(1)D-day 계산(1)article(1)footer(1)nav(1)aside(1)section(1)refactoring(1)min-width(1)if 조건문 예제풀이(1)JS Functions(1)responsive web(1)데이터 타입 종류(1)데이터 할당(1)absolute(1)osi 7 layers(1)D-day(1)header(1)relative(1)오픈 API(1)push(1)뱅앤올룹슨(1)prompt(1)projects(1)불(boolean), 비교 연산자, 논리 연산자(1)동적 라우팅(1)how the web works(1)Thread(1)process(1)Proxy(1)데이터 타입 배경 지식(1)for문(1)첫 프로젝트(1)개요(1)right(1)boolean(1)lifecycle(1)connect()(1)sequence(1)Template literal 장정(1)정보처리기사(1)Redux Basics(1)array method(1)반응형 웹(1)garbage collection(1)float(1)Inherit(1)필요한 경우(1)Document(1)개발자 도구(1)while문(1)await(1)sessionStorage(1)비교 연산자(1)left(1)fixed(1)img(1)코로나(1)for ~ in(1)semantic tags(1)async(1)버튼 디자인 (속성)(1)return(1)while(1)for(1)성능 최적화(1)reverse proxy(1)&&(1)pagination(1)Redux 기본 개념(1)main(1)Flexbox(1)가비지 컬렉터(1)div(1)Template literal 단점(1)hoisting(1)첫 팀 프로젝트(1)팀 프로젝트(1)inline-bloc(1)문자열(1)Reusing(1)@media(1)let(1)var(1)String(문자열)(1)filter(1)application(1)String(1)코어 자바스크립트(1)instagram instamg(1)media query(1)함수(1)작업 환경 준비(1)DOM(1)redux-middleware(1)axios(1)특정부분 font(1)기본 개념(1)button(1)object.entries(1)버튼(1)import 모듈(1)브라우저 동작 원리(1)splice(1)font(1)background image(1)cons(1)localstorage(1)Pop(1)block(1)inline(1)do while문(1)array(1)코로나 예방접종센터(1)난수(1)Query String(1)display(1)redux-actions(1)객체 지향 기법(1)instamg(1)FrondEnd(1)cookie(1)slice(1)semantic web(1)변수(1)무한 루프(1)atomic design(1)(1)object.keys(1)template literal(1)Map(1)else(1)if(1)object.values(1)max-width(1)뱅앤올라프(1)closure(1)Git test(1)range(1)보이기(1)OS(1)static(1)scope(1)git(1)백틱(1)redux-devtools(1)논리 연산자(1)감추기(1)사용 패턴(1)
post-thumbnail

Network 02 | CORS

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제웹 애플리케이션은 리소스

2021년 10월 9일
·
0개의 댓글
post-thumbnail

CS 04 | 성능 최적화

사용자가 사이트를 접속했을 때 느리다고 느낀다면, 그리고 그것을 개선했을 때 회사에는 어떤 영향이 있을까?실 사례가 있다. Pinterest는 긴 로딩 시간으로 인해 사용자가 페이지를 나가는 비율이 높았다. 하지만 최적화를 통해 사용자 이탈률을 줄이고 매출은 40%로

2021년 10월 9일
·
0개의 댓글
post-thumbnail

CS 03 | 브라우저 동작 원리

웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어글에서 설명하는 브라우저 :오픈소스 브라우저 (파이어폭스, 크롬, 사파리 등)사용자가 선택한 자원\*을 서버에 요청하고 브

2021년 10월 8일
·
0개의 댓글
post-thumbnail

Network 01 | 프록시(Proxy)

프록시 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것 프록시 서버 그 중계 기능을 하는 것클라이언트는 프록시 서버를 '서버'라고 인식서버는 프록시 서버를 '클라이언트'처럼 인식→ (의미적으로) 프록시 서버가 클라이언트의 Request와 서버의 Re

2021년 10월 5일
·
0개의 댓글
post-thumbnail

OS 01 | 프로세스(Process)와 스레드(Thread)

프로그램이란작업을 위해 실행 가능한 파일프로세스란실행 중인 프로그램프로그램 실행 = 프로그램을 프로세스로 바꾸기운영체제는 프로그램을 실행하기 위해서, 프로그램을 메모리의 적당한 위치로 가져온다.동시에 운영체제는 PCB(Process Control Block)을 생성한

2021년 10월 5일
·
0개의 댓글
post-thumbnail

JavaScript | 가비지 컬렉터 (Garbage collection)

프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 해제하는 기능메모리 관리 기법 중의 하나메모리의 힙(Heap) 영역에 할당된 부분이 참조되지 않는데도 해제되지 않은 채로 메모리를 계속 점유하고 있는 것JS는 도달 가능성을 사용해 메모리 관리 수행도

2021년 10월 5일
·
0개의 댓글
post-thumbnail

CS 02 | OSI 7 layers

이번에는 Computer Science의 기본 중 하나인 OSI 7 layers에 대해 알아볼 것입니다.소프트웨어 아키텍처 중에 Layered Architecture 라는 것이 있습니다. 이를 따르는 대표적인 예가 네트워크 시스템인데요, 이 네트워크 시스템은 하나의 거

2021년 10월 3일
·
0개의 댓글
post-thumbnail

Redux-middleware 01 | 개요 (필요한 경우 / 작업 환경 준비)

리액트 웹 애플리케이션에서 API 연동 시→ API 요청에 대한 상태 관리 잘해야예시요청 시작 → 로딩 중 명시요청 성공 or 실패 → 로딩 끝났음 명시성공 응답에 대한 상태 관리실패 에러에 대한 상태 관리 리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)

2021년 9월 23일
·
0개의 댓글
post-thumbnail

JavaScript | 데이터 타입 2 (변수 선언 / 데이터 할당)

이번 게시글은 지난 게시글 (데이터 타입(종류 / 배경지식))에 이어서 데이터 타입 그 중, 변수 선언과 데이터 할당에 대해 알아보도록 하겠습니다.동작 원리를 알아 볼 것입니다.기본적인 변수 선언식은 아래와 같습니다.말로 풀어 쓰면, "변할 수 있는 데이터를 만든다.

2021년 9월 12일
·
0개의 댓글
post-thumbnail

JavaScript | 데이터 타입 1 (종류 / 배경 지식)

이번 게시글은 자바스크립트의 기본기를 다지기 위하여, '데이터 타입'에 대해 알아보도록 할 것 입니다.목표는, 자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써, 기본형과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 활용 가능하도록 하며, 데이터 타입 관련 중

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

Redux 04 | Hooks

hooks(react-redux 제공)로 컨테이너 컴포넌트 제작 가능 (connect 대신)리덕스 상태 조회 가능사용법 const 결과 = useSelector(상태 선택 함수)컨테이너 컴포넌트에서 액션을 디스패치 할 때 사용useCallback과 함께 사용 추천컴

2021년 8월 5일
·
0개의 댓글
post-thumbnail

Redux 03 | redux-actions / immer

더 짧게 작성 → 가독성 ⬆, 객체 직접 작성xcreateAction 사용(액션에 필요한) 추가 데이터 : payload형태기본형 예시예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면creatAction 2번째 함수에 따로 선언예시 2.

2021년 7월 31일
·
0개의 댓글
post-thumbnail

Redux 02 | Basics (리액트 앱 적용 / container & connect)

src/index.js → 스토어 제작 & 리액트 app에 리덕스 적용 작업형태 예시스토어 사용 위해→ <App/>를 <Provider>로 감쌈<Provider>'react-redux' 제공store: props로 전달리덕스 개발자 도구크롬 확장 프로그

2021년 7월 25일
·
0개의 댓글
post-thumbnail

Redux 01 | Basics (개념 / 3가지 규칙 / 사용 패턴)

리액트 상태 관리 라이브러리 (가장 많이 사용하는)컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 → 더 효율적인 관리 가능컴포넌트끼리 똑같은 상태 공유 필요 시 → 여러 컴포넌트 거치지 않고 손쉽게 상태 값 전달/업데이트 가능최적화(실제 업데이트 필요한 컴포넌트

2021년 7월 18일
·
0개의 댓글
post-thumbnail

CS 01 | 객체 지향 기법

현실의 개체(Entity)를 하나의 객체(Object)로 만들어 소프트웨어를 개발할 때 객체들을 이용해 프로그램을 작성할 수 있도록 하는 기법재 사용성, 확장성 -> 개발 기간 단축, 유지 보수 쉬움복잡한 구조를 단계적, 계층적으로 표현데이터 병렬 처리데이터와 데

2021년 7월 11일
·
0개의 댓글
post-thumbnail

React | 함수형 vs 클래스형 컴포넌트

함수형: x (가비지컬렉팅=1번 실행→ 메모리 상 제거)→ hooks는 클로저 원리 이용해서 state 저장클래스형 : o함수형 : o (hooks 를 통해서)클래스형 : o함수형 : hooks: 로직 분리 시킴 → 로직 재사용 가능클래스형 : 어렵 (action과 분

2021년 4월 28일
·
0개의 댓글
post-thumbnail

JavaScript | Closure

함수와 함수가 선언된 어휘적 환경의 조합특징자신이 생성될 시점의 환경을 기억하는 함수 → 함수 실행이 끝나고도 메모리에 스스로를 남겨둘 수 있는 방법클로저를 통해서 JS에는 없는 (비)공개 속성/메소드 구현 방안 마련 가능(외부 함수에 의해 반환되는 내부 함수를 가리

2021년 4월 28일
·
0개의 댓글
post-thumbnail

[개인 프로젝트] 오픈 API를 활용한 코로나 예방접종센터 조회

공공 데이터 API를 활용해 코로나 예방접종센터 조회 페이지 구현하나의 웹페이지로 구성 (화면 리스트 페이징) → centerName : 센터명, centerType : 센터유형, facilityName : 시설명, address : 주소구글 맵 센터 정보 표시

2021년 4월 18일
·
0개의 댓글
post-thumbnail

Developer | LocalStorage vs SessionStorage vs Cookie

클라이언트 정보 저장형태: key와 valueHTML5에서 쿠키의 단점 보완해서 만든 기술 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보

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

JavaScript | async & await

자바스크립트의 비동기 처리 패턴 문법장점콜백 함수 & 프로미스의 단점 보완 (기존의 비동기 처리 방식)개발자가 읽기 좋은 코드 작성 가능함수 앞에 async (예약어) 붙임 → 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 붙임주의: 비동

2021년 4월 10일
·
0개의 댓글