profile
°˖✧ Dreams come true ✧˖°
태그 목록
전체보기 (44)반복문(3)none(2)break(2)continue(2)2020.12.11 TIL(2)instagram(2)기록하고 싶은 코드(2)Bang & Olufsen(2)starbucks(2)static(1)scope(1)git(1)백틱(1)논리 연산자(1)감추기(1)else if문(1)object(1)버튼 테두리 없애고 싶다면(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)push(1)뱅앤올룹슨(1)prompt(1)projects(1)불(boolean), 비교 연산자, 논리 연산자(1)동적 라우팅(1)how the web works(1)for문(1)첫 프로젝트(1)right(1)boolean(1)lifecycle(1)sequence(1)Template literal 장정(1)React(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)for ~ in(1)semantic tags(1)async(1)버튼 디자인 (속성)(1)return(1)while(1)for(1)&&(1)pagination(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)filter(1)application(1)String(1)instagram instamg(1)media query(1)함수(1)DOM(1)axios(1)특정부분 font(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)Query String(1)display(1)instamg(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)Git test(1)range(1)보이기(1)
post-thumbnail

Developer | LocalStorage vs SessionStorage vs Cookie

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

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

async & await

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

6일 전
·
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개의 댓글
post-thumbnail

React | Hooks

React에는 4가지의 Built-in HooksuseState - 기본 & 핵심useEffect - 기본 & 핵심useRefuseReducerHooks란?함수 컴포넌트에서 React state &생명주기 기능(lifecycle features)을 “연동(hook in

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

React | Lifecycle

constructorrendercomponentDidMount최초 렌더가 되고 나서 불리는 메소드state변경 or fetch or 여러 비동기적 처리 등사용이유 데이터를 받아오기 때문에rendercomponentDidUpdate (setState 되었기 때문

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

[1st 팀 프로젝트] Bang & Olufsen 기록하고 싶은 코드

회원가입 페이지 기준text type input각 인풋의 onChange에 따라 값을 저장하는 state를 업데이트(setState 활용)한 후,값의 유무 & 2차 조건을 검사하는 메소드를 콜백함수를 통해 점검 및 업데이트(setState 활용) .checkbox ty

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

[1st 팀 프로젝트] Bang & Olufsen 사이트 클론 회고록

팀 깃헙 레파지토리https://github.com/wecode-bootcamp-korea/bang_olaf-frontend사이트 Bang & Olufsen (디지털 기기 판매)이라는 사이트 클론.기간 2021.01.11~01.22HTML/CSSJavaS

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

CSS | flexbox

아래 값들을 인자로 받아 요소를 가로선 상에서 정렬flex-start: 요소들 정렬 ⇒ 컨테이너의 왼쪽flex-end: 요소들 정렬 ⇒ 컨테이너의 오른쪽center: 요소들 정렬 ⇒ 컨테이너의 가운데space-between: 요소들 사이 ⇒ 동일한 간격space-

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

CSS | Responsive Web (반응형 웹)

디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미Responsive Web 을 구현하는 CSS technique특정 조건에서는 어떤 CSS 를 적용 하라는 규칙 부여 가능CSS에 @media 라는 문법으로 작성예시해석@media — media

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

Developer | [개발용어] Library, Framework, Architecture, Platform

간략 설명: 프로그램 제작 시 필요한 기능비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백예시 : jQuery재 사용이 필요한 기능 ( 반복적인 코드 작성을 없애기 위해 ) 언제든지 필요한 곳에서 호출하여 사용 가능Class나 Function으로 만들어짐그

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