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

기존 이미지 업로드가 Blob 타입을 업로드 하도록 되어있었다. 그래서 File 타입을 Blob으로 변환하는 방법을 찾아보았다.결과적으론 이렇게 짧은 코드로 변환이 가능했다.ArrayBuffer: ArrayBuffer 객체는 일반적인 고정 길이 원시 이진 데이터 버퍼를

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

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

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

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

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

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

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

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

문제해결 능력을 키우는데 있어서 중요한 것은 어디에서 정보를 얻는지보다 정보를 어떤 방식으로 이용하는지의 문제.프로그래밍에서 문제해결은 연역적 사고를 통한 추론의 영역이지 암기나 검색 기술의 영역이 아님. 물론 검색을 통해 중요한 실마리를 찾는건 매우 흔한일이지만, 똑

클론 받을때마다 항상 crlf 에러가 발생했다.https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettiereslint.js rules에 위 코드만 넣어

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

body를 클릭시 모든 detail 태그의 open class를 지우는 이벤트 리스너 등록wrapper 이벤트 리스너에 event.stopPropagation() 함수 등록body 클릭시 디테일을 감추는 이벤트까지 올라가는 버블링 방지됨정리를 더 하자면...바디 클릭이

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

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

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

RootContainer에서 height를 100vh로 설정하면 죽어도 컨테이너들이 페이지에 맞게 들어가지 않았다. 문제는 애초에 Route상위에 PageWrapper가 100vh와 스크롤이 설정되어 있지 않았다. PageWrapper가 100vh가 아니어서 그 아래요

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

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