뭘 배웠지?

엘리스 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'를 이..