본문 바로가기

fe48

[ 엘리스 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.
[ 엘리스 SW 엔지니어 트랙 ] 47일차 📍 47일 차 12.29. 수. 온라인 강의 오늘은 SPA, React, Component, ES6, module, JSX 등에 대해서 배웠다. 바닐라 자바스크립트와 CRA를 통해 프로젝트를 생성할 때 다른 점이 있는데 CRA는 웹팩과 바벨을 자동으로 설정해준다는 것이다. 강의에서 배우는 내용과 별개로 웹팩과 바벨을 설정하는 방법을 공부하고 있는데 세팅이 끝나면 따로 포스팅으로 올려야겠다. 첫 접속시 HTML을 내려받는것은 전통적인 페이지와 동일하나, data 변경시 전체를 새로고침 하지 않고 변경된 data만 업데이트하는 것은 SPA 특징 중 하나이다. React를 사용하면 SPA를 편하게 사용할 수 있다. React: 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 component: .. 2021. 12. 29.