\-정규식이란 ? 회원가입 폼에서 사용되는 정규식은 입력한 정보가 특정한 형식에 맞는지를 검사하는 패턴이다. 이를 통해 회원가입 시 입력되는 정보의 유효성을 검사하고, 잘못된 입력을 방지할 수 있다.현재 유저가 타이핑 할 때 실시간을 정규식에 맞는지 안맞는지 코드를 작

오늘은 reduce 에 대해서 알아보려고 한다 ! 사이드 미니 프로젝트를 하다가 장바구니에 있는 고객의 상품의 총 수량의 값을 구해야 하는 상황이 왔다! 원래 같았다면 for문을 이용하여 하나하나 더했을 텐데 구글 검색을 하다가 발견한 방법중 하나가 reduce 함수였

Memo= memoization 을 뜻함 동일한 값을 리턴 하는 함수를 반복적으로 호출해야 한다면 맨처음 값을 계산할 때 해당값을 메모리에 저장해서 필여할때 마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다! 간단하게자주 필요한 값을 맨처음 계산할때

오늘 다크모드를 구현하려다가 porps drilling에 어려움을 겪고 있어서 방법이 없을까 이것저것 찾아보고 있었다 그렇게 찾아본것이 useContext라는 리액트 훅이였다 ! 내게 필요한 props 를 글로벌하게 사용할 수 있게 도와주는 훅이다! 원래라면 리액트 작

\-참고한 로직 참고한 로직 getDocs로 파이어 스토어에 올린 Data를 가져와서 메인 홈페이지에 뿌려준다.작성한 로직파이어스토어에서 가져온 get 해온 데이터를 담아줄 state를 만들어 주었다!snckcollectionRef 변수안에 파이어스토어에 있는 prod

\-git switch -c 원하는브랜치명 : 브랜치를 만들면서 만든 브랜치로 이동 \-git add . : 전체 코드를 더함\-git commit -m '커밋메세지' : 커밋 하면서 어떤 내용 커밋 메세지 했는지 보내준다!\-git push origin 브랜치 : 브

오늘은 파이어베이스에 이미지 업로드를 시도 해봤다 .공식문서를 보면서 천천히 구현해 봤다.일단 관리자 페이지를 만들어서 상품을 등록하는 기능을 만들어 밨다 .UI는 이런식으로 만들어 두고 이름 가격 이미지를 업로드 해보려고 한다! 일단 파이어베이스의 기본 내장함수를 이

오늘은 최근에 알아본 useRef를 이용하여 회원가입 페이지를 구현해 보았다!대충 UI 는 이렇게 작업했다 .스타일 컴포넌트를 이용하여 만들었다! useRef 를 이용하여 변수를 지정하여 current.value 값으로 이메일 값을 받아와 createUserWithEm

useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook 이다 ! Ref는 참조를 뜻한다 Ref를 통해 DOM 요소에 접근이 가능하다 대표적으로 인풋요소를 클릭하지않아도 포커스를 주고싶을때 사용된다로그인화면이 보여졌을때 아이디를 넣는 인풋을

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다 ! \-비동기란 ? 함수가 병렬적으로 실행되는 것을 말한다! 비동기적 명령을 동시에 실행시켰다 하면 각자의 자기 시간표에 맞춰서 실행이 된다! 비동기적은 동시적으로 실행이 되면서 빠른속도로 실행이 가능하게 해준다

파이어베이스 홈페이지를 들어가서 시작하기를 누른다! 프로젝트 이름을 적고 설정한뒤 프로젝트 설정으로 들어간다 !vscode로 들어가 npm install firebase를 한 후src 에 firebase.js 파일을 만들고프로젝트 설정에 있던 코드를 붙여넣는다 !서버가

프로미스가 생성된 시점에 알려지지 않을수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결한다 .프로미스를 사용하면 비동기 메서드를 동기 메서드처럼 값을 반환 할수 있다! 최종결과를 반환하는 것은 아니고 , 미

Redux ToolKit은 리덕스를 더 쉽게 사용하기 위해서 이다. 이름 그대로 리덕스를 위한 도구이다! 리덕스에는 문제점이 있다 . 대표적으로 1.리덕스의 스토어는 환경 설정하는데 너무 복잡하다 2.리덕스를 사용하려면 패키지를 많이 추가 해야한다! 리덕스를 사

1.경로를 설정해줌 Routerpath란 뒤에 입력한 값을 이용해서 뒤에 element 값에 접근 할 수 있게해준다!Path 뒤 변수 파라미터라고함 :id 를 두면 어떤 값이 오더라도 저 아이디로 가지고 있을수 있다Element = 어디로 갈지 Redux 폴더 Mo

코드를 짜기 전 내가 해야 하는 것을 말로 표현해 봤다!1.분수를 덧셈한다!2.분자 분모중의 최대공약수로 나눠준다!3.분자분모중 작은 수를 찾는다!4.작은수를 분자분모로 나눠본다5.둘다 나누어 떨어지면 그 나눈 수가 최대공약수가 된다!6.안 나누어떨어지면 작은 수를 1

\-중복적으로 작성해야 하는 경우가 많기 떄문에 반복적인 코드 작성을 최소화 하려고 사용한다\-순수 css를 사용하고\-어디서나 사용가능하다 \-다양한 플러그인을 사용할 수 있어서 덜 제한적으로 사용이 가능하다고립성독립성 순수css -> 입문자에게 좋다! \-회사에서

\-리액트는 기존 객체의 동일한 참조값의 내부를 아무리 변경해도 변경되지 않는다.직접적으로 객체의 값에 접근해 변경하면 참조값이 그대로이기 때문에 React는 변화를 알아채지 못한다.\-리액트는 변화가 일어난걸 알아야 리렌더링이 되는데 내부를 변경하면 리액트는 인식을

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.\-useEffect 발동조건1.페이지가 렌더링 될 때2.state 값이 변경되면서 실행 될

리액트는 SPA방식이고 기존 웹 페이지처럼 새로윤 웹페이지를 사용하는게 아니고 페이지를 로드하지 않고 필요한 데이터를 가져온다! url에 따라 선택된 데이터를 페이지에 렌더링 해준다.\-사용하기전 라이브러리 설치 방법 터미널에 npm install react-route

React-query 는 서버의 값을 클라이언트에 가져오거나 , 캐싱 , 값 업데이트 ,에러 핸들링 등 비동기 과정을 편하게 하는데 사용한다 / 실시간 데이터를 보요주는 사이트는 리액트 쿼리를 사용하는게 좋다!1.성공 / 실패 / 로딩중 상태를 쉽게 파악이 가능하다 \