분류 전체보기

CRA (Craete-React-App) CLI 도구를 이용해 React 초기 환경 세팅을 자동으로 해줘서 매우 편한데 대표적으로 Webpack, Babel이 있다. '알아서 세팅해주니 좋네'보단 why에 포커스를 두자. 📌 웹팩 Webpack은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러(static module bundler)이다. Webpack은 애플리케이션을 구성하는 다양한 자원(HTML, CSS, JavaScript, 이미지 등)을 모듈로 보고 의존 관계를 가진 모듈을 하나의 번들로 묶어준다. 이렇게 번들링된 자원은 브라우저에서 로딩할 수 있는 형태가 되며, 이를 이용하여 웹 애플리케이션을 실행할 수 있다. 중요한 것은 자바스크립트만 모듈이 아니라 웹 어플리케이션 동작에 필요한 구성요소 모..

📌 REST API REST API는 웹 서비스를 설계하고 구현하는 아키텍쳐 스타일 중 하나다. 그냥 클라이언트와 서버가 통신하며 리소스를 공유하기 위한 방법론 URI를 사용해 리소스를 표현한다. HTTP Request Method(GET POST PUT PATCH DELETE)를 사용해 리소스에 대한 행위를 정의한다. 클라이언트와 서버가 데이터를 주고받는 포멧으로 XML, JSON을 사용한다. 📌 RESTful API REST 아키텍처 스타일의 제약 조건을 충족시키고 있다는 의미다. 컨벤션에 따라 API를 작성함으로서 이해도 및 호환성을 높이는 것이 주 목적이다. 제약 조건 클라이언트와 서버는 독립적이어야 하며, 서로간의 의존성이 없어야 한다. - 클라이언트와 서버 구조 서버는 클라이언트의 상태를 저장..

vite로 리액트 프로젝트 환경 생성하다 발생 .eslintrc.cjs 파일 들어가서 env: { ..., node: true } 추가하기 As-is To-be

무엇인지는 알겠는데 시원하게 이거다라고 단언 할 수 없는 느낌.. 제너레이터 함수는 이터러블을 생성하는 함수이다. 비동기 처리에 유용하게 사용됨 ❓ 이터러블 이터러블 프로콜을 준수한 객체, 데이터 컬렉션의 순회를 가능하게 해준다. (for ~ of 문 순회, speard 연산자) 이터러블은 key Symbol.iterator를 값으로 이터레이터를 반환하는 메서드를 소유하고 있다. ❓ 이터레이터 next 메서드를 소유하고 호출 시 이터러블을 순회하며 반환값으로 value, done 프로퍼티를 가지고 있는 객체 value - 해당 차례에 반환할 값 done - 순회 종료 여부 (boolean) 📌 제너레이터 함수의 특징 일반적인 함수와 다르게 제너레이터 함수는 함수 호출 결과를 반환하는 것이 아니라 제너레이..

쓰니까 쓰지말고 뭔지 알고 쓰자 📌 key props key props는 배열을 렌더링 할 때 필요한 속성으로 React는 각각의 요소를 고유하게 식별할 수 있으므로, 변경된 요소만 업데이트하며 이를 통해 React의 성능을 향상 시킬 수 있다. 📌 Key props를 배열의 인덱스로? 만약 key props를 지정하지 않으면 React는 기본적으로 배열의 인덱스를 사용하여 요소를 식별한다. 이 경우 배열의 요소가 추가, 삭제, 이동 등 변경 될 때마다 React는 배열 요소의 인덱스를 다시 계산하고, 변경된 부분을 업데이트한다. 이 과정에서 각 요소가 리렌더링 되므로 성능상의 문제가 발생할 수 있다. 그렇기 때문에 key props의 값으로는 각 요소를 고유하게 식별할 수 있는 값을 사용한다. (본인은..

쓰니까 쓰지말고 뭔지 알고 쓰자 useState의 setter 함수는 비동기적으로 실행된다. 대표적인 예시로 1씩 카운트가 증가하는 코드가 있다. const [count, setCount] = useState(0); const countHandler = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); } 위 코드의 count 결과값은 1이다. React는 렌더링 최적화를 위해 setState연산이 한꺼번에 수행되며 이는 배치(일괄)로 처리하기 때문이다. 📌 함수형 업데이트 그렇다면 이전 상태를 참조해 동기적인 업데이트를 수행하고 싶다. 이 때 함수형 업데이트를 이용한다. const [count, setCount] = useSt..

원시값에 속성접근자를 사용하여 객체처럼 사용할 수 있는 이유 래퍼 객체 (wrapper object) const str = 'abcde'; console.log( str.length, str.toUpperCase(), str[0] ); str.length, str.toUpperCase(), str[0]이 실행될 때 그 순간 일시적으로 객체화 되는 것을 허용한다. str = new String('abcde') 코드가 일시적으로 생성되어 인스턴스로 만들어 기능이 실행되는 것 원시값을 객체화 시켜주는 객체형데이터 타입을 래퍼 객체라 한다. 해당 기능 사용 후에는 원시 객체로 돌아간다 (메모리 절약)

뭐야 .. 원격 저장소 git pull 했을 때 새로 생성한 브랜치는 외 않가져와..? 🤔 이것을 해결하기 위한 원격 저장소 정보를 최신 정보로 업데이트 하는 git 명령어..! 원격 저장소 정보 업데이트 git remote update ➡ 원격 저장소의 모든 branch 정보를 업데이트한다. 원격 저장소의 branch 가져오기 git checkout -t [원격 저장소의 branch 이름] ➡ 로컬의 동일한 이름의 branch를 생성하면서 해당 branch로 checkout을 한다.