module.exports exports requiremodule은 단지 파일 하나에 불과하고 스크립트 하나는 모듈 하나이다.module.exports는 내보내는 방법으로 말 그대로 module을 내보내는 것이다. 이 객체에 module을 담고 다른 file에서 req

Redux와 Typescript를 공부하던 중 직접 간단한 웹 서비스를 만들어보며 적용해보는게 좋을 것 같아 만들게 되었습니다.react hook styled-component redux typescript유저(name) 검색유저 즐겨찾기 추가 및 삭제유저 리스트 첫

typescript를 복습하기 위해 기본적인 예제를 만들어보는 시간 next.js, redux, Typescript 를 사용하였습니다. 예제 생성은 npx create-next-app --example with-typescript with-typescript-app

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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