Study60 https 적용 시 cors 에러 미니 프로젝트에 ssl 을 적용시키면서 cors 에러가 발생했다. 이유를 찾아보니 인증정보가 담긴 요청에서는 cors의 withCredentials 속성을 false 값으로 둘 수 없으며, origin 속성 또한 특정 값을 넣어주어야 했다. 이상 짧은 메모. 2022. 6. 11. React ) redux-saga 기반 api 호출 연습 redux-saga 를 활용해 News WebApp 상태관리 하기 기존에 React Hook 방식을 이용해 구현했던 HackerRank News Web App 을 redux-saga 를 이용해 다시 구현해보았습니다. 실행 화면 주요 코드 fetchNews API 를 호출해 newsList 를 불러오는 코드만 올렸습니다. - NewsList.js function NewsList() { const dispatch = useDispatch(); const newsList = useSelector((state) => state.newsList); useEffect(() => { dispatch(allAction.getNewsList()); }, []); - actions/newsActions.js export .. 2022. 5. 11. React ) Recoil 로 Axios 비동기 처리하기 React-News Web App 에 Recoil 적용하기 기존에 react hook 방식과 redux-saga 를 적용해 만든 HackerRank News Web App 을 Recoil 을 이용해 상태를 관리하는 방식으로 다시 제작해봤습니다. HackerRank News OpenAPI 를 활용했습니다. 실행 화면 Code Recoil 초기 설정 먼저 npm i recoil 을 통해 recoil 을 설치합니다. Recoil 은 Redux 와 비교하면 초기설정이랄 것도 없습니다. import { RecoilRoot } from "recoil"; function App() { return ( ... ); } 그냥 RecoillRoot 로 감싸주면 끝입니다. 너무 좋습니다. atom.js import { at.. 2022. 5. 10. React ) HackerNews WebApp 제작을 통한 React 학습 React 로 HackerRank News WebApp 만들기 전체코드 보러가기 1.hook 브랜치에서 확인하실 수 있습니다. 사용기술 react- v18 react-router-dom - v6 실행화면 학습내용 react-router-dom 사용 App.js import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 태그를 사용하기 위해서는 위와 같이 태그로 감싸줘야합니다. path 에는 이동할 url 주소를 명시하고, element 에는 화면에 렌더링될 컴포넌트를 입력합니다. ToolBar.js import { Link } from "react-router-dom"; News Ask Jobs 클릭해서 해당 페이지로 넘어가고 싶.. 2022. 5. 7. React ) Class 형 보다 Hook(함수) 형을 권장하는 이유 React 공식 문서에서는 Class 보다 Hook 을 사용할 것을 권장하고 있습니다. 학습 동기부여를 위해(?) 왜 그런지 살펴보기로 했습니다. Hook 이 해결한 문제들 1. 컴포넌트 사이에서 상태 로직을 재사용하기가 어렵다. React 는 컴포넌트간에 재사용 가능한 로직을 연결하는 방법을 제공하지 않습니다. render props 나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결할 수 있습니다. 하지만 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 합니다. Hook 을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있기 때문에 이를 이용한 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2... 2022. 5. 6. ES6 ) Class 클래스 클래스 ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다. function Vacation(destination, length){ this.destination = destination; this.length = length; } Vacation.prototype.print = function(){ console.log(this.destination+" "+this.length+"일"); } var daegu = new Vacation("대구",5); daegu.print() // 대구 5일 객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다. ES6 부터는 클래스 선언이 추가되었습니다. 함수는.. 2022. 4. 17. VueJS 3 ) Chart.js + Ag-Grid-Vue3 연결(?)하기 chart.js + ag-grid-vue3 문제사항 위와 같이 같은 데이터를 나타내는 차트와 그리드가 있습니다. 우측의 그리드에서 데이터가 변경되었을 때 차트 또한 업데이트되도록 구현하고 싶었습니다. 사용한 json 데이터는 다음과 같습니다. [ { "name": "mark", "score": 100 }, { "name": "Nick", "score": 80 }, { "name": "Jack", "score": 60 }, { "name": "Mary", "score": 55 }, { "name": "John", "score": 90 } ] 해결 과정 순서 Props 로 동일한 data 공유하기 Grid 에서 변경된 데이터를 emit 을 이용해 App.vue 의 기존 데이터에 덮어쓰기 :key 속성 이용하.. 2022. 3. 24. VueJS 3 ) <script setup> 과 setup() 의 차이 script setup 과 setup() 이용의 차이 Composition API 를 기반으로 Vue 3 프로젝트를 진행하는 방법에는 아래의 두 가지 방식이 있었습니다. script setup setup() Vue 3 공식 가이드를 보면 export default 구문이 필요가 없어졌습니다. 또한 setup() 함수를 정의하는 부분도 필요가 없어졌습니다. 그러므로 return 문 또한 필요가 없습니다. import 한 컴포넌트를 정의하지 않고 바로 템플릿 태그에서 사용이 가능합니다. props 사용 상위 컴포넌트로부터 받은 props 를 사용하기 위해 defineProps 를 사용해야합니다. 방식 export default { props: { userInfo: { type: Object, }, }, };.. 2022. 3. 21. VueJS 3 ) Composition API 를 기반으로 한 NewsWebApp VueJS 3 ) HackerRank NewsWebApp 제작을 통한 Composition API 학습 전체코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. Github 바로가기 실행화면 Vue 2 로 제작한 NewsWebApp 과 동일합니다. 학습 내용 Router - transition Vue 3 에서도 라우터 트랜지션을 활용할 수 있습니다. Vue 2 Vue2 에서는 위와 같이 transition 태그 안에 router-view 태그가 들어있는 형식이었습니다. 하지만 Vue3 부터는 v-slot 과 함께 아래와 같은 형식으로 쓰입니다. Vue 3 Router 속성 이용하기 User 페이지 구현을 위해 Route 의 params 속성을 이용해야 했습니다. Vue2 에서는 this.$r.. 2022. 3. 21. 이전 1 2 3 4 5 ··· 7 다음 반응형
