FrontEnd :-)

팀 과제 질문 답변 (모범 답변 및 우리 조 답변 참고해서 새로 정리) 1. 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 차이점 : 배열의 내장함수 사용 여부 Array.from, 해당 유사배열이 사용할 수 있는 반복문 등을 이용해 배열로 바꾼 후 배열의 내장함수를 통해 변경하거나 유사배열 요소 하나하나에 직접 접근해 바꾸어야 한다. 유사배열 배열의 형태로 ([ ])로 생겼지만 배열의 내장함수를 사용하지 못하는 배열 Array.from 함수 예시 ↓ // 배열화 한다. const my_name = "mean0"; const my_name_array = Array.from(my_name); console.log(my_name_arra..

5-1. 리덕스에서 FireStore 데이터 가지고 놀기 (1) 미들웨어가 뭐냐구요? 리덕스 데이터를 수정할 때 [액션이 디스패치 되고 → 리듀서에서 처리] 하던 과정 기억하시죠? 미들웨어는 이 과정 사이에 미리 사전 작업을 할 수 있도록 하는 중간 다리 같은 것. 즉! [액션이 일어나고 → 미들웨어가 할 일 하기 → 리듀서에서 처리] 이 순서로 처리. yarn add redux-thunk redux-thunk는 뭐하는 미들웨어일까? redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해줍니다! 리덕스는 기본적으로는 액션 객체를 디스패치합니다! → 즉, 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있겠죠!! import { cre..

4-1. keyframes keyframes는 styled-components에 포함되어 있음. 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용. transition: 단순한 엘리먼트 상태변화에 쓰기 좋고, (2배로 키운다고 하면, 일정한 속도로 커진다) animation: 다이나믹한 효과를 주는데 쓰기 좋아요! (2배로 키운다고 하면, 천천히 커지다가 갑자기 슉 커지는 속도 조절이 가능) Keyframes은 animation에서 사용하는 속성 중 하나! css에서는 이런 식으로 keyframes를 씁니다. .box { width: 100px; height: 100px; background: #444; } .box.active { animation: b..

3-7. 리덕스를 통한 리액트 상태 관리 리덕스란? => 전역 상태 저장소. 상태관리 라이브러리 ==>장점) 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용. 코드 깔끔. 유지보수 굳. 전역데이터가 있는 곳 : 스토어 데이터를 실제로 수정하는 곳 : 리듀서 [리덕스 상태관리 흐름도] (1) 리덕스 Store를 Component에 연결한다. (2) Component에서 상태 변화가 필요할 때 Action을 부른다. ("액션을 디스패치했다", "액션을 일으켰다" ) (3) Reducer를 통해서 새로운 상태 값을 만들고, (4) 새 상태값을 Store에 저장한다. (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?) 3-8. 리덕스 살펴보기 리..

CS 스터디 >> 항해99 / 7기 / D반 / 테즈먼해 >> ⌜1일 1로그 100일 완성 IT 지식 - 브라이언 W.커니핸/하성창 옮김/인사이트⌟ 일별 목표 챕터 읽기 I부 하드웨어 > 010 비트 모아 데이터 이진수 이진수->십진수 : 비트가 1인 자릿값에 해당하는 2의 거듭제곱을 합산. 십진수->이진수 : 1) 십진수를 2로 나누기를 반복하고, 나눌 때마다 0 또는 1이 되는 나머지 값을 적고, 몫은 다음 나누기를 위한 값으로 사용. 몫이 0이 될 때까지 나누기를 계속한 뒤, 나머지 값을 역순으로 나열. 2) 원래 수에서 2의 거듭제곱을 하나씩 내려가면서 뺌으로써 십진수를 이진수로 변환하는 방법. 수가 포함하는 가장 큰 2의 거듭제곱부터 시작, 거듭제곱 값을 뺄 때마다 1을 쓰고, 남은 값보다 거듭..

리액트 사용할 때, 함수형 컴포넌트를 사용한다면 '리액트 훅'을 사용한다. 리액트 훅(React Hook)이란? => 함수형 컴포넌트에서 React state와 생명주기(lifecycle) 기능을 “연동(hook into)“할 수 있게 해주는 함수. => React 버전 16.8(2018년도 추가)부터 새로 추가됨. 리액트 훅(React Hook) 특징은? => Hook은 class형 컴포넌트 안에서는 동작하지 않음. => (선택적 사용) 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용 가능. ==> 당장 Hook이 필요 없다면, Hook을 사용할 필요 없음. => 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것이 가능. => useState 같은 ..

SPA란? 👉 Single Page Application! => 서버에서 주는 html이 1개뿐인 애플리케이션. => SPA는 주로 CSR(클라이언트 사이드 렌더링) 방식으로 렌더링한다. => SPA는 딱 한 번만 정적 자원을 받아 온다. 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 갱신한다. => React, Angular, Vue 등 프론트엔드 기술이 등장하며 크게 유행하고 있다. SPA 장점: 사용성 굳. 깜박거림 없음->자연스러운 사용자 경험(UX), 필요한 리소스만 부분 로딩, 컴포넌트별 개발 용이, 모바일 앱 개발한다면 동일한 API 사용하도록 설계 가능 SPA 단점: 초기 구동 속도 느림, SEO(검색 엔진 최적화) 어려움, 보안 이슈 더보기 → 단..

3주 차 팀 과제 문제 하나, event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야 할까요? 간결한 답 함수형 컴포넌트에서는 useEffect() 훅을 이용한다면 return 구문에서 removeEventListener()를 이용한다. (useEffect() 훅은 클래스 컴포넌트에서 componentDidMount와 componentDidUpdate, componentWillUnmount 역할을 함) React.us..