파피루스

오류 발생 가능성을 높이거나 최적화 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킴으로서, 자바스크립트 문법을 좀더 엄격히 적용한 것이다.  유사한 역할로서 린트들을 사용하는데, 린트 도구는 제한 오류부터 코딩 컨벤션까지 설정 파일 형태로 정의할 수 있기에 조금 더 강력하다.  stric mode 적용하기 전역의 혹은 함수 몸체의 선두에 'use strict';를 추가한다.'use strict';function foo() {    x= 10;               //ReferenceError : x is not diefined (stric mode가 아니면 에러가 나지 않음)}foo(); strict mode 적용 시, 뭐가 다른가요?Reference Error: 선언하지 않은 변수를 참..

1. props drilling전역 변수 관리라는 개념이 없었을 땐, 부모가 자식에게 계속해서 내려주는 형태였다.grand parent > parent > childparent 는 사용하지 않지만 child가 필요로 하는 props를 grand parent로 부터 받아 내려주는 것을, props drilling이라고 한다.props drilling 을 해결하기 위해 redux가 나왔고, 이후에 React 개발진이 전역관리를 위해 내놓은 해결책이 context 이다.  2. redux 전역 변수를 자유롭게 쓰고 싶은데, 너무 쉽게 하면 여기저기서 쓸까봐 걱정이 된 것인지, redux 까다롭게 정해진 규격으로만 전역변수를 쓰거나 읽을 수 있게 했다. store라는 저장소에 전역변수들을 저장하고, 전역변수에 ..

1. autufocus2. 메모 작성 시 첫 줄 title 보여주기 (길면 줄여쓰기)3. 새로운 메모하면 최상단에 추가 (최신순 정렬)4. 현재 열려있는 memo 데이터 삭제 시 제일 최신 것 선택하기그 외에는 view와 동일 https://teamsparta.notion.site/03-5965145e055b4912b4dd3bb6611a1363 과제 03 - 메모앱 만들기 | Notion메모앱 만들기teamsparta.notion.site  # 메모앱 만들기## 01. 과제 샘플- https://www.notion.so/teamsparta/03-5965145e055b4912b4dd3bb6611a1363- [링크: https://memo-app-ashen.vercel.app]  ## 02. 요구사항### ..

사용 목적 : 전역 상태 관리 단점 1. 복잡하다 + 러닝커브가 있다.2. 아주 간단한 상태 관리를 위해서도, 초기 작성해야하는 코드 량이 많다. 단점 개선을 위한 라이브러리1. Recoil, Zustand : 쉽게 쓸 수 있도록 개선2. React Query : 클라이언트 상태 관리에서 비동기 통신 작업이 어려워 (코드 양이 많음) 서버 상태와 실시간 동기화가 어렵다는 단점을 개선/개량하기 위함 + 서버 데이터 캐싱은 부가적인 장점3. Context Api : 리액트 라이브러리만으로 비동기  특징1. 단방향 데이터 흐름 (flux 아키텍쳐처럼 단방향 데이터 흐름이다.)2. 의도된 복잡함(까다로움) -> 데이터를 엄격하게 변경하기 위해 (유지보수와 예측가능성을 위해서)3. 배우기 조금 까다로움 핵심개념-..

1. css import 하기import "./Card.css" 2. sass module 사용하기❓ sass module의 장점 ❓ : css 적용을 위한 classname이 중복이 되지 않도록 하나뿐인 이름을 지정할 수 있다.// Card.module.scss.title {      color : red;     > span {          background-color : blue;     }}.hello { .... }// Card.jsximport "./Card.module.scss"....    return (             );.... 3. styled-components 라이브러리 사용하기https://styled-components.com/ 에서 인스톨 받은 후 아래처럼 쓸 수..

불필요한 렌더링을 줄이기 위해 사용하는 방법들- React.memo : 컴포넌트 캐싱- useCallback : 함수캐싱- useMemo : 값 캐싱 React.memofunction Box () {     return 박스; }export default React.memo(Box);  ❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다. -> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.function Parent () {     const [count, setCount] = useState(5);     const initCount..

useState: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)const [state, setState] = useState(initialState);    - initialState : 초기 설정값const [age, setAge] = useState(28);console.log(age); // 28setAge(30); console.log(age); // 30   useEffect: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)useEffect( setup, dependencies? );    - setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다.    - dependencies : 값이 변경될 때마다 setup을 실행합니다. ..

순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수 같은 내용을 행하더라도, 이렇게 보면 다르다.let a = 1;// 순수 함수const sum (num) {    return num + 5;}console.log(sum(a));   // 6// 비순수 함수const sumCopy(){    return a + 5;     // 변수 a에 의존적이다.} console.log(sumCopy());   // 6    같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자..