post-thumbnail

aws amplify 배포

회사 홈페이지 배포를 aws amplify로 하기로 했다. 정적 웹사이트라 백엔드도 필요없고, 쉽게 배포할수 있는 방법을 찾아보니 aws amplify, 파이어베이스 등이 있었는데 어차피 aws를 계속 사용해야 해서 aws amplify로 결정했다.amplify 배포에

2021년 11월 16일
·
0개의 댓글

리액트 이미지 미리보기 구현

기존에 구현되어 있는 이미지 미리보기가 여러 라이브러리를 쓰고 있고, 코드가 복잡해 리팩토링을 하게되었다.일단 input 태그를 이용해 파일을 선택한다.img태그에 이미지를 넣으려면 src를 입력해야 한다. input 태그로 선택한 파일은 아직 업로드 되지 않았기 때문

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

2021-10-15 TIL

백엔드없이 간단하게 소셜로그인 기능을 붙이기 위해 파이어베이스를 사용해봤다. 파이어베이스 버전이 지속적으로 올라가고 있기때문에 블로그나 책에 있는 예제코드만으로는 구현할 수 없었다.회원가입 코드는 아래와 같다signWithPopup에 매개변수로 auth(유저 인증 정보

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

2021-10-14 TIL

동영상이나 파일용량이 크면 업로드가 완료되었는지 알 수가 없다. 업로드 로딩 프로그레스를 구현해보았다.에서 될 줄 알았지만 없었다.axios.post의 구현부에 들어가 동영상 업로드 프로그레스를 구현 할 수 있을것 같은 코드를 발견했다.axios.post는 위와같은 매

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

2021-10-12 TIL

Material-UI Grid리액트 머티리얼ui Grid 컴포넌트를 이용하여 반응형 레이아웃을 꾸며보았다. styled-components등으로 미디어 쿼리를 사용하는 것 보다 시간이 많이 단축되었다.머티리얼 ui는 스크린 가로 사이즈에 따라 xs, sm, md, lg

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

컴포넌트 합성

자바스크립트를 사용한 컴포넌트 합성 예제예제 코드와 다르지만 일단 넘어가자.하지만 타입 스크립트는?props에 타입을 선언해주지 않으면 컴파일이 되지 않는다. 예전에 React.ReactNode라는걸 써본적 있는것 같은데, 그땐 뭔지도 모르고 아무렇게나 썼다. 뭔가 c

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

커스텀 훅

비동기 리퀘스트를 위한 커스텀 훅을 만들어서 사용해봤다.뭐 대충 이렇게 짰던것 같다. 리스트를 렌더링하려고 구현했는데, 리스폰스 받는데 시간이 조금 걸리면 리스트가 제대로 렌더링되지 않는 문제가 발생했다. 그래서 리액트 공식문서를 보다가 커스텀 훅을 이용해 해결할수 있

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

CRA 셋팅(2)

js cra 프로젝트를 새로 생성하는데 .eslintrc, .jsconfig.js, .prettierrc.json 설정에 애를 먹었다. 프로젝트 셋팅은 언제나 새로워. 할때마다 오래걸려..jsconfig.js 파일 생성 후 아래와 같이 붙여넣는다.아래와 같이 설치해준다

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

복잡한 유효성 검사

요구사항 하위 항목이 여러개 있는 datetime range 유효성 검사를 해야한다. 활성화된 항목만 유효성 검사(뒤의 시간이 앞의 시간보다 늦어야 함. 유효성 검사에 실패하면 에러 메시지를 띄운다(submit 불가능))를 한다. main range의 라디오버튼의 a

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

TodoList & ReduxToolkit

회사에서 redux를 써야 하는데, redux를 내가 개념도 못잡고 있어서 생존;을 위해서라도 redux를 배워야 했다. 일단 Todo List는 최소한의 기능만 구현하기로 했다. 할일 추가 및 할일 삭제.text input에 글을 작성하고 제출하면 항목이 추가되고,

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

useState와 비동기

하위 컴포넌트의 상태를 갖고 있는 상위 컴포넌트가 있다. 저번에도 포스팅 했던것 같다. 계속 구현하다보니 뭔가 이상한점이 발견되었다.와 같이 코드를 작성했다. 콜백으로 내려간 someHandler가 SomeComonent에서 상태를 잘 가져오고 있는지 보려고 콘솔을 찍

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

2021-06-10 event handler

전개구문에서 {...props, (props의 프로퍼티)}와 같이 작성해야 한다고 생각했는데 date.startDate가 오류가 있음. 왜 안되는지 한참 고민하다가, 그럼 전개구문을 두 번 빼보자 라고 생각함.props의 date를 전개구문을 이용하여 date 오브젝트

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

form data 관리

자식 컴포넌트에 from이 있는경우 자식 컴포넌트에서 따로 form data를 관리하려고 해보았다. 그래서 매번 setState로 from data를 관리하고 부모 컴포넌트에서 handler를 내려보내서 콜백을 하는 구조가 되었다. 그렇게 만들고 보니 세상 한심해서 부

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

2021-05-25 코드리뷰

onChange=>{} 내부에 이벤트를 각각 구현하고 있었다. 코드 길이도 길어지고, 가독성도 좋지 않은 상태였음.handleChangeForm(...) 이라는 핸들러를 만들고, onChange={} 이벤트 내부에 핸들러 함수 하나만을 이용해서 이벤트를 컨트롤 하게 만

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

Material-ui 컴포넌트 스타일링

요즘은 거의 Material-ui를 이용해 컴포넌트를 작성하고 있다. 처음엔 Storybook도 써봤는데, 아무래도 주니어 프론트엔드 개발자가 아토믹 디자인으로 컴포넌트들을 처음부터 작성하는 것이 무리였나보다. 개발 속도가 너무 더뎌서 결국 Material-ui를 이용

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

React 절대경로 설정

아무생각없이 임포트를 하다보면 과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.위와같이 설정을 하고, 프로젝트가 위와같이 구성이 되어있다고 한다면, 과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀

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

Material-ui 선택자

최근에는 머티리얼 ui를 이용해서 빨리빨리 만들려고 하고 있다. 컴포넌트도 그냥 갖다 쓰면되고, 약간씩 변경하는건 styles를 이용하면 된다.근데 css 선택자를 사용해야 하는 상황이 발생했다. 도큐먼트에는 해당 항목 설명이 없고(내가 못찾았을지도)...대충 '&'가

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

CRA / Typescript / eslint / prettier 셋팅하기

CRA: create-react-apptypescript: javascript의 슈퍼셋 언어eslint: 타입스크립트의 문법 에러를 잡아주는 패키지prettire: 에디터 코드 스타일 잡아주는 패키지까먹을까봐 남겨둔다.https://velog.io/@kmlee

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