뭘 배웠지?

엘리스 SW 엔지니어 트랙 55일차 온라인 강의날 Promise 콜백 헬(콜백이 중첩 되는 것)을 좀 더 보기좋게 사용할 수 있는 기술 아직 가져오지 않은 데이터(이게 왜 Promise라고 불리는 이유일까?)에 대해 .then | .catch | .finally 등 핸들러를 붙여서 데이터 처리, 오류 처리, 정리 로직을 실행한다 .then 체인으로 비동기 실행을 마치 동기 실행처럼 동작하게 한다 Promise 사용 예시 function returnPromise() { return new Promise() => { setTimeout(() => { const randomNumber = generateRandomNumber(100) if(randomNumber < 50) resolve(randomNumber..

엘리스 SW 엔지니어 트랙 54일차 온라인 강의날 MPA(Multi Page Application) 서버에 미리 여러 페이지 두고 유저가 요청시 적합한 페이지 전달 서버에 라우팅 처리하는 기능 있고, 서버에서 여러 페이지 관리 페이지 요청마다 모든 리소스 받아오니까, 페이지 간 데이터 재활용하기 힘들다 SPA는 데이터를 재활용하기 편하다는 뜻이겠구나 SPA(Single Page Application) 한 페이지에서 다른 페이지로 안넘어가고 전체 웹앱을 사용 Client side routing 기술 활용해서 페이지 진입시 리로드 없이 라우팅 AJAX 기술 활용, 페이지 이동시 서버에 데이터만 요청하고 자바스크립트로 페이지 만든다 여러 페이지를 구성요소로 보고 여러 페이지 스타일 컴포넌트 재활용 자바스크립트..

엘리스 SW 엔지니어 트랙 53일차 실시간 강의날 CRUD 복습 Update 복습을 하자! 제일 복잡하니 라우팅 url을 공유할 수 있게 만들어준다 window.history를 사용해서 만들면 코드가 엄청 길어주는데 react-router-dom 이라는 녀석을 npm에서 다운받아서 사용하면 편하다 npm install react-router-dom 웹 어플리케이션을 만들 때 라우팅이 반이다 어떻게 라우팅을 하는지 중요하다 react-router-dom 배우긴 어렵지만 강력한 기술 최상위 컴포넌트에서 라우터를 쓰겠다고 선언해야된다 => 라우터 어렵다 안익숙해서 그렇지 CORS(Cross Origin Resource Sharing) 보안(유저 보호) 위한 정책 브라우저가 막지만, 설정은 서버가 해야된다. 다..

엘리스 SW 엔지니어 트랙 52일차 온라인 강의날 좋은 앱이란? 1. 번들 사이즈에 대한 고려 HTML, CSS, JS가 차지하는 사이즈 번들 사이즈가 커지면 로딩 길어진다 2. 앱 성능 animation, transition 등 유저와 상호작용에서 스타일 코드 성능이 중요 요소 3. 사용자에게 유리한 UI/UX 스타일링에 대한 지식 필요 4. 자바스크립트와 스타일 적절하게 조합 UI 토글링, 애니메이션, 다크보드, 복잡합 UI 컴포넌트 등 자바스크립트 지식만으로 구현하기 힘들다 5. 유지보수가 용이하고 확장 가능한 코드 스타일 코드 작성하고, 관리하는 지식 필요 React 스타일링 방법 3가지 1. CSS import CSS 파일을 import 해서 사용 자바스크립트 파일 분리 2. CSS module..

엘리스 SW 엔지니어 트랙 51일차 새해 첫 실시간 강의날 State useState는 굉장히 중요하다 상태 관리를 최근 여러번 들었는데 아마도 이것을 사용해서 상태 관리를 하나보다 그럼 state 사용법에 익숙해지면 상태 관리에도 도움이 되겠지? 리액트에서 바꿀 값은 state로 지정해주는 느낌이다. 리액트는 렌더링을 하며 그려주는 방식인데, state를 변경하면 다시 렌더링되며 바뀐 state로 다시 그려준다 => state만 조작하면 된다 보아하니 가장 상단 컴포넌트에서 state를 조작하고 만지네 상단만이 아니다 수정이 필요한 값이거나 props의 값을 바꾸고 싶으면 상단 컴포넌트건, 하단 컴포넌트건 state를 선언하고 사용해서 값을 바꾼다 링크 링크(a tag)는 서버에서 어떤 정보를 가져올 ..

엘리스 SW 엔지니어 트랙 50일차 온라인 강의날 오늘은 Hooks에 들어간다 함수 컴포넌트의 꽃이라고 하신다 워드프레스 만질 때도 많이 보였던 Hook 비슷하지 않을까 생각된다 Hooks 컴포넌트에서 데이터 관리(State) 데이터 변경될 때 상호작용(Effect) 하기 위해 사용 지금까지 사용했던 useState가 State Hook Hook 등장 배경 State와 생명주기 관리하려고 클래스 컴포넌트 사용했다 근데 클래스 컴포넌트 잠깐 봐도 복잡하지 않나? 이걸 해결하기 위해 Hook이 나왔다 Hook 주의사항 React 함수(컴포넌트, Hook) 안에서만 사용 가능 이름은 반드시 'use'로 시작 예. useState 최상위 중괄호 안에서만 사용가능 State Hook useState는 동적인 데이..

엘리스 SW 엔지니어 트랙 49일차 온라인 강의날 Props(Properties) Component에 원하는 값을 넘겨줄 때 사용 모든 JavaScript 요소 넘겨줄 수 있다 컴포넌트 재사용을 위함 Props 값 변경하지 말자! 렌더시 문제 일어날 수 있다고 한다 State 컴포넌트 내에서 변하는 값을 관리 개발자 의도, 사용자 입력에 따라 새로운 값으로 변경 State 값이 변하고 재렌더링 필요시 리액트가 자동으로 변경된 부분 렌더링 주의사항 State 값은 직접 변경하지 말자 => setState 함수 사용 State 변경 방법 setState 내에 변경할 값 넣기 useState(초기값) const [ count, setCount ] = useState(0) setCount(count + 1) s..

엘리스 SW 엔지니어 트랙 48일차 온라인 강의날 Props 상위 컴포넌트에서 하위 컴포넌트로 데이터 넘길 때 사용 State(상태) 이해 useState의 첫 번째 값은 state(상태) 두 번째 값은 state를 변경시키는 함수 변경 시킬 때 반드시 setState 사용해야된다 let _mode = useState("WELCOME"); let mode = _mode[0]; let setMode = _mode[1]; // 같은 내용 let [mode, setMode] = useState("WELCOME"); 컴포넌트가 다시 렌더링 되는 조건은 2가지 1. props 2. state 즉 state를 setState로 변경시키니까 컴포넌트가 다시 렌더링을 하게된다. data set data-id 앞의 da..

엘리스 SW 엔지니어 트랙 47일차 온라인 강의날 SPA(Single Page Application) 최초에 서버로부터 HTML 전달받고 페이지 변경이 필요할 때 필요한 부분 JSON 같은걸로 전달 받음 => 변경된 부분만 다시 그린다 리액트 이용시 SPA 간단히 사용가능 React(리액트) 사용자 인터페이스 만들기 위한 자바스크립트 라이브러리 사내 소프트웨어 사용하기 위해 개발됐다 Component 레고 블럭처럼 독립적인 단위로 쪼개서 구현 Virtual DOM 리액트가 가상 돔을 그리고 실제 돔이랑 다른 부분을 다시 그리는(동기화) 해준다 JSX JavaScript 내에서 HTML 같은 녀석을 사용할 수 있도록 해주는 것 Why React? 생산성 / 재사용성 Component와 Hook 활용 개발자..

엘리스 SW 엔지니어 트랙 46일차 egoing님 리턴! 실시간 강의날 프로젝트에 관한 이야기 생활속 반복되는 일 중 Automation이 가능한 일을 만들면 그게 작더라도 프로젝트다 Create React APP 리액트 개발환경 만들기 엄청 어려운데 create-react-app 한 줄로 만들어지는 혁신이라고 하신다 npm install --global create-react-app npx create-react-app react-app(프로젝트이름) 링크 => https://create-react-app.dev/ React 개발 순서 npm run start 개발 장소 src/index.js 엔트리 파일 public/index.html html 템플릿 파일 import 'filename.css'를 이..