REACT

📍최근에 React에서는 function함수를 사용하고 class컴퍼넌트는 사용하지 않아 사용하진 않는 것을 권장한다고 한다 class는 변수, 함수를 많이 보관할 수 있는 통이라고 생각하면 된다constructor, super, render라고 작성하고 시작하면 됨

export default / import 문법리액트에서는 state를 만들고 데이터를 담아서 사용하는 편그러나 state에 넣어야할 데이터가 많을 때,useState() 안에 넣기엔 너무 길어서 다른파일에 보관했다가 import해서 사용할 수 있다. 넣고 싶은 많은

리액트는 Controller, Mode, View 3가지를 기본적인 구조로 작동한다 Controller는 model을 view로 보여주는 역할view의 사용자가 요청하는 사항들을 model이 보여줄 수 있도록 전달하는 역할을 한다.리액트에서 html문법과 비슷하게 사용

리액트의 기본 구조 : 컴포넌트에 컴포넌트가 들어가는 구조SASS 기본 구조 : 부모 클래스 아래 자식 클래스가 들어가는 구조구조 자체가 비슷하다보니 리액트에서 sass를 더 쉽게 사용할 수 있고,현업에서 순수 css보다 sass를 많이 사용하기도 한다고 합니다(또는

클래스형 컴포넌트만 사용하였고, 컴포넌트 별 상태 관리 지원라이프 사이클 기능 지원 (간단하게 컴포넌트 생성, 삭제까지 사람의 라이프스타일과 비슷하다고 하여 컴포넌트 라이프 사이클이라고 말함)최근 함수형 컴포넌트로 변경되면서 기존의 컴포넌틑별 상태 관리, 라이프사이클

react에서 컴포넌트도 라이프 사이클을 가지고 있다 (사람이 태어나고 죽는 것 처럼!)라이프사이클의 주기에 따라 렌더를 돌릴 수 있도록 함예시)랜더링 될 때마다 useEffect안의 내용이 실행됨 배열을 2번째 인덱스로 받을 수 있는데 value값이 바뀔 때마다 실행

취준생이 제일 궁금한 부분들이라고 생각한다. 실제로는 어떤식으로 코딩을 하는지, 내가 어느 부분을 더 잘 알아야하는지, 어떻게 해야 더 좋은코드인지 배울 수 있는 곳이 없었는데 무려 원티드 현직자가 직접 해주시는 강의를 듣는다는 것은 나같은 취준생에겐 감사한 일이였다.

일단 아래 명령어로 페이지 오픈해주기1.prettier, eslint를 설치한 후에 "yarn dlx @yarnpkg/sdks"이 명령어를 통해 실제로 yarn안으로 가져오는 것 (만약 plugin설치 안되어있다면 추가적으로 설치해야함 )설치를 권장하는 plugin(익

리액트를 시작할 수 있는 방법 중 "creact react app"을 주로 사용한다. 매번 그렇게 리액트를 시작했지만 오늘은 webpack을 설치해서 시작해보고자 한다. (시작한 김에 가상 키보드를 토이프로젝트로 만들어볼 예정이지만 일단 webpack으로 기본 세팅하는

게임 문항 전체 조회시작하기 버튼월드컵게임

개발 중 기존 쿠폰 등록하는 부분의 UI 수정과 함께 플로우도 수정되며 새로 작성한 코드가 있어 기록해두고자한다 기존엔 쿠폰함에 가면 바로 쿠폰번호를 등록했다면 수정 후 플로우 : 버튼 선택 -> 쿠폰등록 dialog 오픈 -> 번호 작성 및 확인 -> 등록, 에러처

drag와 onClick 기능이 함께 있을 경우 drag를 하나의 스테이트에 따로 관리하여 제어하였다

\- 성능 최적화를 위해 사용되는 리액트 훅React 컴포넌트가 렌더링될 때마다 해당 컴포넌트 내부의 함수들도 새로 생성되는데 컴포넌트 구조가 복잡해지고 하위 컴포넌트들이 불필요하게 리렌더링될 때 성능 문제가 발생할 수 있음 특히 함수형 컴포넌트 내부에서 정의된 함수

(리뷰작성 시 총점을 표시를 5개의 별로 표시할 경우 )왼쪽인 i <= index는 i가 index보다 작거나 같은지를 평가하는 조건starStates 배열의 인덱스가 index보다 작거나 같은 경우에 대해 true를 할당하고, 그 외의 경우에는 false\*\*

로그인 여부 확인 isAuthenticatedemotion code에 따라 좋아요 여부 등록emotion code : 400101 (좋아요), 400102 (싫어요)myEmotionCd.code가 400101일 경우 좋아요 삭제myEmotionCd.code가 4001

react-signature-canvas 라이브러리를 통해 유저의 서명을 받아야하는 화면을 개발하였다참고) 보안상 이유도 있다보니 코드는 축약하거나 단순화해서 기록하였다!https://www.npmjs.com/package/react-signature-canv