Frontend/엘리스 SW 엔지니어 트랙87 [ 엘리스 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 엔지니어 트랙 ] 53일차 📍 53일 차 1.6. 목. 실시간 강의 오늘은 CORS, React-router-dom에 대해서 배웠다. 실습강의 중 React-router-dom를 사용하지 않고 useState를 이용해 라우팅하는것처럼 구현하는 시간이 있었는데, 이해가 잘 안 됐다. 그런데, React-router-dom 라이브러리를 사용하면서 코드를 줄여나가니까 이것들이 왜 사용되었는지 그리고 해당 라이브러리가 중요성에 대해 알게 되었다. 결론: React-router-dom 최고. JS immutability: 해당 라이브러리 사용시 객체 자료형은 값이 바뀌지 않는다.(얕은 복사 후 객체 value을 변경하게 되면 원본 객체까지 변경되나, 해당 라이브러리를 사용하면 원본 객체의 값은 그대로 유지할 수 있다.), 생활코딩님 강의영.. 2022. 1. 6. [ 엘리스 SW 엔지니어 트랙 ] 52일차 📍 52일 차 1.5. 수. 온라인 강의 오늘은 react에서 스타일링과 관련한 내용을 배웠다. CSS-import, CSS-module, CSS-in-JS인데, 나는 CSS-in-JS 방식 중 하나인 styled-componentns를 줄곧 사용해왔었고, CSS-module은 처음 듣는 용어였는데, 각 방식의 장/단점과 차이점들을 배우고 나니까 이해가 잘됐다. ❏ React styling 스타일링을 통해 사용성을 높이면 유저경험이 높아진다. 좋은 앱을 만들기 위해서는... 1. 번들 사이즈: CSS코드가 차지하는 사이즈는 무척 중요한 요소, 번들 사이즈가 클수록 서버로부터 파일을 받아 파싱하고 유저에게 보이는 시간이 길어질 것이다. 2. 앱 성능: animation, transition 등 유저와의 상.. 2022. 1. 5. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음
