전체보기 (62) 썸네일형 리스트형 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이 두 렌더링 방식 중 각 어플리케이션의 구조 또는 서비스 페이지의 특징에 따라 적절히 사용하는 것이 중요한 것같아 이번 기회에 정리를 했다. Client Side Rendering 사이트에 접속 -> 브라우저가 서버로부터 인덱스 파일을 받아옴 -> 받아온 인덱스 파일은 비어 있기에 사용자에게는 아무 화면도 보여지지 않음 -> 모든 로직이 담긴 자바스크립트를 요청 -> 동적으로 HTML을 생성할 수 있는 웹 어플리션 로직이 담긴 JS 파일을 받아옴 -> 사용자는 웹사이트가 보여짐 이 기술을 활용한 방식으로 SPA가 있다. 페이지가 딱 한개 존재하고 사용자 어떤 행위를 취했을 때 다른 페이지를 불러오지 않고 자바스크립트를 이용해 사용자가 보고 있는 부분을 DOM의 조작을 통해 변경한다. server side .. Unexpected comma using map() map을 사용했는데 의도하지 않은 쉼표가 출력되는 상황이 발생했다. 검색해보니 map 함수가 문자열 형태로 값을 리턴할 때는 기본적으로 쉼표(,)로 묶어서 리턴한다고 합니다. template literals로 결합한 내용도 문자열 형태로 리턴되는 값! map 함수 뒤에 join('') 추가해주니 문제가 해결됐다. Receives *all* click events DOM 리스너를 추가 document.addEventListener(...)하면 React 이벤트를 확인 할 수 있습니다. React 16 및 이전 버전에서는 e.stopPropagation() React 이벤트 핸들러를 호출하더라도 여전히 수신이 가능하지만 React 17을 사용하면 document 핸들러가 실행되지 않습니다. 캡처 단계를 사용하도록 리스너를 변환하여 이와 같은 코드를 수정할 수 있습니다. document.addEventListener('click', function() { // Now this event handler uses the capture phase, // so it receives *all* click events below! }, { capture: true }); .만 Fix a missing dependency warning 해당 경고 이미지는 위키피디아 api를 이용한 검색 기능을 구현하는 과정에서 발견했다. 검색을 해보니 useEffect내에 사용하고 있는 state를 배열안에 추가시켜 달라는 의미라고 한다. 1. 첫번째 시도 const [term, setTerm] = useState('programming'); const [results, setResults] = useState([]); useEffect(() => { const search = async () => { const { data } = await axios.get('https://en.wikipedia.org/w/api.php', { params: { action: 'query', list: 'search', origin: '*', format: 'jso.. How to Use Redux with React Hooks 각 클래스 컴포넌트에 connect( ) 함수를 사용하여 저장소를 연결하고 전역 상태 및 디스패치 메서드를 wrapping 하는 형태가 함수형 컴포넌트에서 사용 할 때 가독성이나 api 호출하는 부분이 불편했습니다. Hooks for React-Redux: Redux hook API는 connect()를 대신해서 useSelector, useDispatch, useStore과 같은 훅스를 사용할 수 있습니다. useSelector(): useSelector hook is a replacement of the mapStateToProps. It runs whenever function component renders. Its purpose is to extract data from the Redux sto.. Async Actions with Redux Thunk 리덕스는 아래와 같은 흐름으로 동작합니다. 리덕스 미들웨어가 있을때 동작하는 흐름은 아래와 같습니다. 리덕스는 동기적인 흐름을 통해 동작합니다. 액션 객체가 생성되고, 디스패치가 액션 발생을 스토어에게 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정입니다. 그러나 동기적인 흐름만으로 처리하기 어려운 예로 -외부 데이터 요청하여 그에 따른 응답을 화면에 보여주어야 할 때 -시간을 딜레이시켜 동작하게 할 때 이러한 경우를 위해 비동기 작업을 처리하리하는 데 있어 미들웨어를 주로 사용합니다. 외부 데이터를 요청하여 화면에 보여주기위해 다음과 같이 구조를 만들었습니다. blog -src -- actions --- index.js -- apis --- jsonPlacehold.. CORS for multiple origins cors npm 패키지는 origin value에 대한 함수를 작성하는 옵션을 제공한다. 여러 도메인에 대해 CORS를 활성화하는 데 도움이 된다. const cors = require('cors'); const allowedDomains = ["http://localhost:3000", "https://d-day.netlify.app"] app.use(cors({ origin: function(origin, callback) { if(!origin) return callback(null, true); if(allowedDomains.indexOf(origin) === -1) { const msg = `This site ${origin} does not have an access. Only specifi.. heroku 서버 - 이미지 업로드 오류 발생 - 이미지 직접 호스팅 개발 환경에서는 이미지 업로드 기능과 업로드 한 이미지를 가져오는 데 문제가 없었다. 그러나 heroku 서버에 배포 후 아래와 같은 문제점들이 발생했다. herokuapp.com/images/NoImage.png 접근이 가능하지만 uploads폴더에 업로드 이미지가 정상적으로 저장이 안된다. 기존에 있는 이미지는 읽어올 수 있는데 배포 후 새로 업로드한 이미지를 못읽어온다면, heroku가 배포했을때 그 상태의 파일만 읽어오고 이후에 새로 디스크에 추가된 파일들은 호스팅에서 지원하지 않는게 원인일 수도 있다는 생각이 들었다. 그래서 이미지를 직접 호스팅하는 방안으로 찾아보았다. devcenter.heroku.com/articles/s3#s3-setup Using AWS S3 to Store Static.. 이전 1 ··· 3 4 5 6 7 8 다음
