태그 목록
전체보기 (56)WeCode(25)React(10)인스타그램 클론(8)마켓컬리 클론(3)마켓홀리(2)Airbnb 클론(2)TIL(2)코드 리뷰(2)Flask(2)에어비엔비 클론(2)참조형(1)react router(1)react 불변 객체(1)contextAPI(1)git(1)기본형(1)정규표현식(1)React.memo(1)인증(1)redux-action(1)인가(1)상수와 불변값(1)마켓컬리 상세페이지(1)position(1)sticky(1)scroll event(1)uuid(1)클론코딩(1)js id 유효성 검사(1)에어비엔비 프로젝트 후기(1)absolute(1)relative(1)redux-logger(1)에어비엔비 프로젝트(1)컴포넌트 재사용성(1)스코프(1)http(1)Flask 라우팅(1)호이스팅(1)prop-types(1)조건부 렌더링(1)polyfill(1)Conventions(1)redux store(1)js password 유효성 검사(1)슬라이드(1)함수형 컴포넌트(1)display inline-block(1)리액트 캐러셀 슬라이드(1)getBoundingClientRect(1)이중호버(1)스코프체인(1)redux description(1)display block(1)arbnb clone(1)알고리즘(1)백엔드 개발자가 하는 일(1)python 데코레이터(1)float(1)데코레이터(1)useEffect(1)ajax(1)마켓컬리 nav(1)ux(1)map key(1)fixed(1)python(1)react 이미지 슬라이드(1)python flask(1)lodash times(1)keyup event(1)React map(1)export default(1)export(1)react 의존성 배열(1)불변 객체(1)UI(1)React Component(1)React 렌더링 성능(1)Link태그(1)의존성 배열 관리 팁(1)JWT(1)react state(1)VariableEnvironment(1)useImperativeHandle(1)css Conventions(1)getTime()(1)flask error(1)의존성 배열(1)component 최적화(1)JSON WEB TOKEN(1)Flask Route(1)숙소 리스트 hover(1)airbnb clone(1)display inline(1)데이터베이스(1)리액트 캐러셀(1)useContext(1)useMemo(1)useReducer(1)useRef(1)redux-middleware(1)마켓컬리 클론 프로젝트(1)axios(1)state props 개념(1)scroll opacity(1)퀵정렬(1)hook(1)useCallback(1)useLayoutEffect(1)classnames(1)프로젝트 후기(1)데이터타입(1)google map api(1)python flask error handler(1)clear(1)변수와 식별자 차이(1)opacity(1)marketkurly clone(1)westargram react(1)Wecode 후기(1)마켓컬리 hover(1)LexicalEnvironment(1)에어비엔비 클론 프로젝트(1)Fetch(1)실행 컨텍스트(1)객체 프로퍼티 접근(1)github(1)함수형 업데이트(1)onClick(1)environmentRecord(1)Link state(1)부수효과함수 와 async/await(1)float clear(1)Marketkurly(1)Math.random(1)redux reducer(1)new Date(1)이미지 슬라이드(1)google-map-react(1)submit event(1)실행 컨텍스트 구조(1)상태값 변경 함수(1)redux(1)mockdata(1)

React redux

redux에 대해 알아보고 간단한 테스트를 해봤습니다. 개인적인 기록 용도입니다.간단히 설명하자면 상태 관리 라이브러리로 액션(Action), 미들웨어(middleware), 리듀서(Reducer), 스토어(Store)가 있다.미들웨어에선 리듀서가 액션을 처리하기 전

2일 전
·
0개의 댓글

자바스크립트 데이터 타입

코어자바스크립트를 1회독 하고 정리할 겸 개인 목적으로 정리하는 글입니다. 데이터타입 기본형 참조형 기본형 기본형 데이터에는 숫자, 문자열, boolean, null, undefined이 존재하고 ES6에서 Symbol이 추가되었다. 기본적으로 기본형은 불변값이

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

자바스크립트 실행 컨텍스트

1) 데이터 타입 1.1) 데이터 타입 종류 기본형 타입(primitive type) 참조형 타입(reference type) 1.1.1) 기본형 타입(primitive type) 기본형 타입으로는 bool,숫자형,문자열,null,undefined,Symbol(

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

React 렌더링 성능 최적화 기법에 대하여

리액트는 가장 많은 자원을 사용하는 것은 렌더링 이다.리액트는 데이터와 컴포넌트 함수로 화면에 출력되게 되는데 그 과정에서 대부분의 연산은 컴포넌트 함수의 실행과 가상돔에서 발생한다.component ➡ Virtual Dom 비교 ➡️ 실제 Dom 반영컴포넌트를 렌더링

2021년 5월 29일
·
1개의 댓글

React useEffect

useEffect > 사용하는 방법은 정말 간단한데 의존성 배열에 어떠한 값들을 넣어줘야 하는지를 정확히 판단하기가 어려움이 있어서 정리를 해보려고 한다. ✅ 의존성 배열 의존성 배열을 꼭 사용해야하는 건 아니지만 필요할 때 사용하게 되는데 의존성 배열을 잘못 관

2021년 5월 28일
·
0개의 댓글

TIL : prop-types, 조건부 렌더링(가독성 향상), 컴포넌트의 재사용성 및 가독성

자바스크립트는 동적 타입 언어로 타입에 대한 고민 없이 코드를 작성할 수 있다.그래서 간단한 프로그램을 작성할 때에는 생산성이 좋기도하다.하지만 큰 규모의 프로그램을 작성할 땐 오히려 생산성이 떨어진다 (typescript가 인기를 얻는 이유)리액트에서는 속성값 타입을

2021년 5월 28일
·
0개의 댓글

TIL : getBoundingClientReact, React 내장 훅, 함수형 컴포넌트

요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.메모이제이션된 값을 반환한다. 첫 번째 인자로는 함수, 두 번째는 의존성 값의 배열을 전달한다.의존성이 변경되었을 때만 첫 번째 인자에 전달한 함수가 실행된다.즉, 의

2021년 5월 26일
·
0개의 댓글

효율적인 컴포넌트 작성법

실전 리액트 프로그래밍 인강을 보고 공부하면서 자주 볼 것 같아서 정리합니다.컴포넌트를 사용하는 입장에서 컴포넌트를 직접 작성한 사람, 컴포넌트를 처음본 사람 등 컴포넌트를 사용하려면 속성값을 입력을 해야하는데 올바른 값을 입력하려면 타입을 올바르게 입력해야하기 떄문이

2021년 5월 26일
·
0개의 댓글

TIL : classnames(npm), useState 파라미터, contextAPI/useContext, ref 속성 값

React 라이브러리 중 하나로 className을 적용하는데 있어 다양한 옵션을 사용하여 className을 적용할 수 있다.true : 클래스 네임 추가(적용)false : 클래스 네임 삭제(미적용)삼항 연산자를 사용하는 것보다 훨씬 깔끔하게 작성이 가능하다. 자세

2021년 5월 25일
·
0개의 댓글

TIL : lodash times, JS(every,some), dexport default/export 차이

콜백 함수를 반복 횟수만큼의 데이터를 배열로 반환한다.조건을 만족하지 않는 값이 발견되면 그 즉시 성능을 위해 순회를 중단시킨다.조건을 만족하는 값이 발견되면 즉시 성능을 위해 순회를 중단두 종류로 유명(named)와 기본(default) 내보내기가 존재.유명 내보내기

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

TIL : 사용자 편의성, polyfill, React 상태값 변경 함수, 부수효과 함수 반환하는 값, 훅 규칙, URL 입력시 발생하는 일

편의성을 생각해서 prefers-reduces-motion이 있다. 이것은 접근성을 위한 미디어 쿼리로 시력에 불편이 있으신 분들은불쾌하게 작용할 수 있으니 미디어 쿼리를 사용해 너무 화려한 애니메이션이나 깜빡임, 반짝이는 애니메이션을 보여주지 않는게 사용자를 위한개발

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

Flask error handler

프론트지만 Flask를 이용한 MVC 패턴으로 백엔드 API를 설계하고 있다. 우선 가장 먼저 내가 맡은 error_handler를 만들어 전체적인 에러 관리를 한 곳에서 모여 처리할 수 있도록 만들었다.먼저 error_handle 함수를 선언하고 그 안에 발생할 수

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

Python 데코레이터

1차(마켓컬리), 2차(에어비엔비) 프로젝트를 하면서 백엔드와 소통할 때 어렴풋이 데코레이터라는 용어를 들었는데 이번에 Flask 기술을 익히는데 개념이 나와서 알아보도록 하겠습니다.

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

Flask 라우팅

네트워크 상에 존재하는 자원을 구분하는 식별자(ID)로서 의미가 강하다.웹에서 어떠한 자원을 찾기 위해서 browsers에 의해 사용되는 메카니즘으로 웹에서 정해진 유일한 자원의 주소이다.https://velog.io 와 같은 것을 URL이라고 한다. 즉 네트

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

Python Flask 알아보기

프론트엔드로 brandi 인턴을 나갔는데 주 업무가 백엔드 ERD 모델링과 API설계라서 이번 한 달은 프론트보다 백엔드에 집중하기로 했다. brandi는 기본적으로 Python Flask 웹 프레임 워크와 프론트는 Vue를 사용한다고 한다. 열심히 해보자

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

에어비엔비 프로젝트 후기

1차 프로젝트인 마켓컬리에 이어 2차 프로젝트는 에어비엔비를 하게되었다. 이번에 프로젝트를 함께 한 팀원들백엔드김세형님, 박국현님프론트윤찬호(나), 권유진님, 김미현님, 김상연님1차 마켓컬리 프로젝트 팀원인 세형님과 유진님이 다시 같은팀이 되었다 😁1차때는 뭔가 "이

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

Airbnb 클론 프로젝트 #4 숙소 마커 모달창 기능 / 페이지네이션 기능

지도의 하이라이트! 마커 표시 클릭시 해당 숙소 정보가 미니 모달창으로 뜨게 만들었다! 👍🏻google-map-react 라이브러리가 마커 부분 커스터마이징하기가 수월해서 정말 다행이라고 느꼈다.감사합니다 라이브러리 제작해주신 개발자님 😍해당 숙소 마커를 클릭하면

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

Airbnb 클론 프로젝트 #3 숙소 마커 Hover 기능

.gif) > 오늘 구현한 기능은 숙소 리스트에서 해당 숙소에 마우스 hover를 하면 해당 숙소가 지도 마커 부분에 표시되도록 했다. 어떻게 했나? 최상단 컴포넌트에서 Hover한 숙소 id값을 알 수 있도록 state값을 선언했다.

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

Airbnb 클론 프로젝트 #2 숙소 리스트 지도 마커 출력

오늘 4.22 일 00:20분에 성공한 리스트에 있는 숙소 좌표값을 지도에 직접 마커로 표시한 기능 여기서 에어비엔비는 마커가 34,000처럼 나오기 때문에 이거 때문에 많이 좀 힘들었다.처음 시도했던 라이브러리로 간단하게 사용할 수 있다는 장점이 있었지만 마커 부분을

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

Airbnb 클론 프로젝트 #1 숙소 리스트

초기 세팅은 1차 프로젝트와 동일하기 때문에 생략했다.이번 Airbnb 클론 코딩에서 내가 맡게 된 기능은 숙소 리스트를 보여주는 부분이다이번에 구현해야 할 기능은 크게 지도에서 센터 값을 기준으로 숙소 리스트를 보여줘야 한다. 단, 프로젝트 범위는 서울 지역 이내로

2021년 4월 1일
·
1개의 댓글