React (18) 썸네일형 리스트형 [Nextjs] nextjs 이미지 컴포넌트 비율 맞추기 넥스트js에선 이미지의 비율을 맞추는게 마음처럼 되지 않는다. 요렇게 요상하게 나오는 이미지를 볼 수 있다. 나는 이런 그림을 원하지 않는다. 내킨김에 공식문서를 차분하게 읽은 다음 적용을 해보았다. 그리고 아래와 같이 코드를 작성해주었다. ... const ImageWrapper = styled.div` width: 320px; height: 200px; position: relative; `; 우선 layout="fill"을 적용해준다음, objectFit 속성을 적용한다. objectFit은 말그대로 우리가 css에서 사용하던 그 object-fit이다. 나는 cover를 원했기 때문에 cover를 적용했다. 그리고 내가 원하는 이미지의 사이즈를 저 이미지를 덮어주는 태그에 넣어줬다. 이때 posi.. [리덕스 사가 공식문서 번역] takeEvery이펙트와 takeLast 이펙트의 차이 https://redux-saga.js.org/docs/basics/UsingSagaHelpers Using Saga Helpers | Redux-Saga Using Saga Helpers redux-saga.js.org 본 글은 리덕스 사가 공식문서를 번역한 글입니다.(*주의 : 필자의 의역이 섞여있습니다. ) 더보기 redux-saga provides some helper effects wrapping internal functions to spawn tasks when some specific actions are dispatched to the Store. The helper functions are built on top of the lower level API. In the advanced s.. [리덕스 사가 공식문서 번역] 리덕스사가에서 에러처리하기 / Error handling https://redux-saga.js.org/docs/basics/ErrorHandling Error Handling | Redux-Saga Error handling redux-saga.js.org 본 글은 리덕스 사가 공식문서를 번역한 글입니다.(*주의 : 필자의 의역이 섞여있습니다. ) 더보기 In this section we'll see how to handle the failure case from the previous example. Let's suppose that our API function Api.fetch returns a Promise which gets rejected when the remote fetch fails for some reason. We want to handl.. [리덕스 사가 공식문서번역] 이팩트에 대한 일반적인 추상화 / A common abstraction: Effect https://redux-saga.js.org/docs/basics/Effect Effect | Redux-Saga A common abstraction: Effect redux-saga.js.org 본 글은 리덕스 사가 공식문서를 번역한 글입니다.(*주의 : 필자의 의역이 섞여있습니다. ) 더보기 To generalize, triggering Side Effects from inside a Saga is always done by yielding some declarative Effect. (You can also yield Promise directly, but this will make testing difficult as we saw in the first section.) What a Saga .. [리덕스사가 공식문서 번역] 액션을 스토어에 디스패치하는 방법(Dispatching actions to the store) https://redux-saga.js.org/docs/basics/DispatchingActions Dispatching Actions | Redux-Saga Dispatching actions to the store redux-saga.js.org 리덕스 사가의 공식문서를 번역한 글입니다. 더보기 Taking the previous example further, let's say that after each save, we want to dispatch some action to notify the Store that the fetch has succeeded (we'll omit the failure case for the moment). We could pass the Store's dispatc.. [react] propTypes - 리액트에서 type을 확인하는 방법 앱이 커짐에 따라서, 타입검사를 하면 많은 에러를 잡을 수 있다. 자바스크립트의 유연한 타입 특성상 에러가 많이 날 수 있는데, 이를 보완하기 위해 나온 언어가 타입스크립트이다. 그런데 꼭 이 언어를 사용하지 않더라도, 리액트도 내장된 타입검사 기능을 가지고 있다. 오늘은 이것을 알아보자. proptypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. 아래의 예시 코드를 보자. 우선, prop-types 패키지에서 PropTypes 객체를 임포트해야한다. (리액트 내장기능이기 때문에 따로 설치할 필요는 없다. ) import PropTypes from 'prop-t.. [리액트] 왕초보 개발자의 웹성능 최적화 수기 실전프로젝트가 끝났다. 이번에 우리 조가 했던 서비스는 생각보다 잔잔한 기능들이 많았고 디자인도 여러번 바뀐 탓에 css 작업이 많아 여러모로 시간이 부족했다.때문에 리팩토링 및 성능최적화를 할 시간이 부족했다. 하지만 빠른 웹사이트를 만들어내는 것은 프론트엔드의 중요한 덕목이라고 생각했고 이것을 신경쓰는 개발자라는 것을 보여주고 싶어, 발표전까지 어떻게든 성능최적화 해내기 위해서 노력했다. 성능을 최적화하기 위해서 이것저것 구글을 검색해 정보를 얻어 내가 만든 사이트에 최적화를 적용했다. 이 과정을 공유해보고자 한다. 성능을 최적화하기에 앞서, 성능이란 무슨 말인가? 성능이 좋다는 말은 무엇인가? 웹 성능이란 사용자에게 얼마나 빠르게 웹 콘텐츠를 전달할 수 있는가를 말하는 것이다. 즉 주소창에 도메인 .. [React] image 파일 압축해서 FormData형식으로 서버에 보내기 사용할 라이브러리 : browser-image-compression yarn add browser-image-compression //설치후 사용할 컴포넌트에서 import해오기 import imageCompression from 'browser-image-compression'; 먼저 이미지를 업로드 할 HTML 태그를 만든다. 나는 styled-components를 사용해서 만들었다. //form 태그 //input태그 게시하기 //button 태그 버튼을 클릭했을 때, 파일을 가져온다. 이 때 주의해야 할 점은, 여타 다른 선택자로 파일을 가져와서는 안된다. onChange에서 event를 통해서 파일을 가져와야 한다는 사실을 잊지말자. 나는 이 부분 때문에 많은 시간을 허비했다... //이미지 가.. 이전 1 2 3 다음
