profile
°˖✧ Dreams come true ✧˖°
태그 목록
전체보기 (51)redux(3)반복문(3)React(3)instagram(2)기록하고 싶은 코드(2)Bang & Olufsen(2)break(2)none(2)middleware(2)2020.12.11 TIL(2)starbucks(2)continue(2)scope(1)git(1)백틱(1)redux-devtools(1)논리 연산자(1)감추기(1)Immer(1)else if문(1)object(1)버튼 테두리 없애고 싶다면(1)front end(1)web(1)position(1)D-day 계산(1)article(1)footer(1)nav(1)aside(1)section(1)refactoring(1)hooks(1)min-width(1)if 조건문 예제풀이(1)JS Functions(1)responsive web(1)absolute(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)for문(1)첫 프로젝트(1)right(1)boolean(1)lifecycle(1)connect()(1)sequence(1)Template literal 장정(1)Redux Basics(1)array method(1)반응형 웹(1)float(1)Inherit(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)pagination(1)Redux 기본 개념(1)main(1)Flexbox(1)div(1)Template literal 단점(1)hoisting(1)첫 팀 프로젝트(1)팀 프로젝트(1)inline-bloc(1)문자열(1)Reusing(1)@media(1)let(1)var(1)String(문자열)(1)CS(1)filter(1)application(1)String(1)instagram instamg(1)media query(1)함수(1)DOM(1)axios(1)특정부분 font(1)기본 개념(1)button(1)object.entries(1)버튼(1)import 모듈(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)cookie(1)slice(1)semantic web(1)변수(1)무한 루프(1)atomic design(1)(1)object.keys(1)template literal(1)Map(1)computer science(1)else(1)if(1)object.values(1)max-width(1)뱅앤올라프(1)closure(1)Git test(1)range(1)보이기(1)static(1)
post-thumbnail

Redux | redux-actions / immer

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

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

Redux | Basics_ 리액트 앱 적용 / container & connect

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

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

Redux | Basics_ 개념 / 3가지 규칙 / 사용 패턴

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

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

[CS] 객체 지향 기법

현실의 개체(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개의 댓글
post-thumbnail

[3rd 팀 프로젝트 및 인턴] instagram 회고록

Instagram을 모티브로 한 웹 사이트를 구현하는 팀 프로젝트팀 깃헙 레파지토리프로젝트 영상팀명 instamg팀 구성 프론트 3명 백엔드 2명소통 방식StandUp Meeting (Agile 방식)Trello 이용Backlog / This Week / In P

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

React | Axios

브라우저, Node.js를 위한 Promise api를 활용하는 HTTP 비동기 통신 라이브러리 = 백과 프론트랑 통신을 쉽게 하기 위해 AjAX랑 더불어 사용 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용P

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

JavaScript | D-day 계산

Date 생성자시간의 특정 지점을 나타내는 Date 객체 생성Date 객체 1970년 1월 1일 UTC(국제 표준 시) 00:00으로부터 지난 시간을 밀리 초로 나타내는 유닉스 타임 스탬프를 사용Date 객체 초기화자바 스크립트 Date 객체 생성 법= new 연산자

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

React | 동적 라우팅

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)방법 (2가지)Query parametersURL parametershistory이 객체를 통해 push, replace 를 통해 다른 경로로 이동 or 앞 뒤 페이

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

[3rd 팀 프로젝트] instagram 2주차 회고록

잘한 점 건강해진 생활 패턴 전보다 잘 먹고 잘 자고 더 편한 마음으로 진행 중 계획으로 적당한 긴장감을 가지려고 노력 시간이 길어져서 전체적으로 루즈해지는 면이 있지만 한달, 2주, 1주 단위로 나만의 목표를 정해서 긴장감을 놓치 않고 많이 생산해내려고

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

Developer | Atomic Design

디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식 = 컴포넌트 중심의 디자인 패턴 Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 함.Molecules

2021년 2월 21일
·
0개의 댓글
post-thumbnail

[3rd 팀 프로젝트] Instagram 기록하고 싶은 코드

선택 항목 (값을 있어도 되고 없어도 되는)을 fetch로 보낼 때의 코드 → phone, email 의 경우에는 값이 있어도 되고 없어도 되는 선택 항목

2021년 2월 21일
·
0개의 댓글
post-thumbnail

React | Reusing JS Functions

중복 로직 줄이기 (event 객체 사용)_ +, - 연산 sort 로직 (인자에 따라 다른 결과값을 반환) 줄이기 query string 파싱 함수 재사용

2021년 2월 14일
·
0개의 댓글
post-thumbnail

React | Pagination(Query string)

사용하는 경우데이터가 많아서, 한 화면에 전부 보여줄 수 없는 경우프/백 양 쪽에서 모두 구현해야 함프론트 전달 사항쿼리 스트링(Query String) 사용limit : 한 페이지에 보여줄 데이터 수offset : 데이터가 시작하는 위치(index)url에서 ? 기호

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

[2nd 팀 프로젝트] STARBUCKS 사이트 클론 회고록

팀 깃헙 레파지토리https://github.com/wecode-bootcamp-korea/16-2nd-starbugs-frontend팀명 STARBUGS 팀 구성 프론트 3명 백엔드 3명소통 방식StandUP Meeting (Agile 방식)Trello

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

[2nd 팀 프로젝트] STARBUCKS 기록하고 싶은 코드

https://github.com/katej927/STARBUGS_ListPage_210205전체 데이터를 한 번에 받고 그 후 모든 걸 front에서 처리한다.구조도최상위 컴포넌츠 (ProductList.js)카테고리 checkbox : ProductLis

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