Alice53 [ 엘리스 SW 엔지니어 트랙 ] 56일차(12주차: React III - 상태관리, Redux, 테스팅 기법, jest, react-testing-library ) 📍 56일 차 1.11. 화. 실시간 강의 오늘은 React에서 난이도가 어렵다고 느끼는 Redux에 대해서 배웠다. 이전까지 만들었던 프로젝트들은 규모가 작아 Redux를 사용해야 할 필요성을 느끼지 못했고, 어떤 예제로 Redux를 공부해야하나라고 생각하는 중에 커리큘럼에 Redux가 포함되어있어 깊게는 아니어도 발을 얕게나마 담글 수 있음에 감사함을 느꼈다. ❏ Redux Redux는 React에 사용하려고 만들어졌지만, 실제로 다른 UI 라이브러리 혹은 프레임워크와 함께 사용할 수도 있다.(angular-redux, ember-redux 등) Redux 는 앱의 복잡성을 획기적으로 낮추어 예측 가능하게 만들어주는 환상적인 도구이다. 하나의 상태(객체)를 유지하여 앱의 복잡성을 낮춘다. 외부로부터 .. 2022. 1. 11. [ 엘리스 SW 엔지니어 트랙 ] 55일차 📍 55일차 1.8.토. 온라인 강의 오늘은 JS 비동기, 동기, API 요청, callback, promise, async - await, OpenAPI, CORS 에 대해서 배웠다. 이전에 한번 배운내용이었고, 오늘 다시 복습한다는 마인드로 공부하니까 이해가 잘됐다. ❏ 자바스크립트 비동기 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 JS에는 별도의 비동기 처리가 필요하지 않음 Ajax 기술의 등장으로 페이지 로드 없이 client-side 에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 XMLHttpRequest 객체를 이용해 서버로 요청을 보낼 수 있게 됨 JS 는 single-thread 이므로, 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 된다.. 2022. 1. 8. [ 엘리스 SW 엔지니어 트랙 ] 54일차 📍 54일 차 1.7. 금. 온라인 강의 오늘은 SPA, MPA, React-router-dom 속성에 대해서 배웠다. 이후에 useReducer를 사용해 문제를 푸는데 useReducer를 사용해본적이 많지 않아 난이도가 조금 어렵게 느껴졌다. ❏ SPA(Single Page Application) 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌(새 로고 침 없이 화면 전환이 된다.) html 코드를 읽다가 script 태그를 만나면 다시 서버에 요청하고 서버에서 다시 브라우저로 넘겨준다. 브라우저에서 JS 코드를 파싱한 다음 app.js 가 렌더링된다. CSR 기술을 활용하여, 페이지 진입 시 리로드 없이 라우팅 한다. AJAX 기술을 활용, .. 2022. 1. 7. [ 엘리스 SW 엔지니어 트랙 ] 50일차 + 壬寅年 📍 50일 차 22.1.1. 토. 온라인 강의 22년 임인년이 밝았다. 새해를 맞으며 온라인 강의를 들으니까 별 감흥이 없었다. 내게 중요한 목표는 작년부터 준비하고 있는 프런트엔드를 잘 살려서 상반기에는 꼭 취업을 했으면 하는 바람이 있다. 그럼 FE 교육을 들으면서 배웠던 내용을 복습해보자.. ❏ State Hook useState 는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook 입니다. 최초에 useState 가 호출될 때 초기값으로 설정되며 재 렌더링이 될 경우 무시됩니다. state 는 읽기 전용이므로 직접 수정하지 마세요. state 가 변경되기 위해서는 setState 를 이용합니다. state 가 변경되면 자동으로 컴포넌트가 재 렌더링 됩니다. const App = () => { .. 2022. 1. 2. [ 엘리스 SW 엔지니어 트랙 ] 48일차 📍 48일 차 12.30. 목. 온라인 강의 오늘은 react의 useState, props, Hooks, function component, class component등에 대해서 배웠다. 나의 문제, 주변에 쉽게 해결 할 수 있는 작은 기능들을 만들어보자 나중에 도움이 된다.(영우 봇 - 지하철 실시간 도착, 영화 순위) useState 를 consol.log 하면 첫 번째 값은 내가 설정한 값이고 두 번째 값은 state 의 값을 바꾸는 함수다. state 가 바뀌면 해당 컴포넌트는 재 랜더링 된다., props 의 값이 바뀌어도 새로 렌더링 된다. 이때 자식들의 component 까지 재 렌더링 된다. HEAD: 워킹 디렉터리가 누구와 같은지 알려준다. data-attribute : data를 임.. 2021. 12. 30. 이전 1 2 3 4 5 6 7 ··· 11 다음
