우선 React를 사용한다면 useState, useEffect, redux 등등... 기초적으로 알게 되는 것들이 있다. 오늘은 그 중 useState와 useEffect의 동작 방식을 이해해볼까한다. 아래 코드에서는 무슨일이 일어나며 어떻게 동작할지 알아보자. 과연 콘솔에는 어떻게 찍힐까? init [ 1 ] state => 0 [ 2 ] state => 0 init [ 1 ] state => 1 이렇게 찍힐 것이다. 선형 실행 되면서 setState가 비동기로 처리되기 때문에 다시 한 번 선형 실행되게 된다. useEffect의 종속성 배열 부분에는 아무것도 선언하지 않았기에 그대로 끝이다. 다음 코드를 보자. 과연 이번에는 어떻게 찍힐까? 종속성 배열 부분에 stsate를 추가했으니 state ..

개인 토이 프로젝트를 진행하고 있어서 개발 과정을 공유하며 정리하고자 글을 작성하기로 하였다. 우선 기술은 아래처럼 정리하였다. 필자는 React, typescript 등등 프론트앤드 쪽 기술도 쌓아보고 싶어 해당 프로젝트를 계획하였고 커플 사용자분들에게 실질적으로 연애를 기록하고 추억을 저장하여 예쁜 연애에 조금이라도 도움을 주고자 개발을 하기로 마음 먹었다. 주요 기능은 A, B가 회원가입시 커플 계정을 신청하도록 하며, 양쪽의 동의가 이어진 후 커플 계정이 생성되어 함께 관리하도록 설계하였다. 커플 데이트 달력 데이트 계획 타임라인 TO-DO ( 해보고 싶은 데이트, 해본 데이트, 좋았던 데이트 ) ( 지도 ) 지역에 즐겨찾기를 등록하여 어디를 가봤고, 무엇을 했는지, 클릭시 노트기록 팝업 기능 ..

우선 typeScript, npm, node 버젼은 아래 링크에서 확인바란다. https://growait.tistory.com/32 [ Font-awesome ] [ React ] [ TypeScript ] 폰트어썸 설치부터 적용까지 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com font-awesome의 아이콘을 사용해보도록 하자. 우선 growait.tistory.com 필자는 Formik로 input값들의 ..

https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com font-awesome의 아이콘을 사용해보도록 하자. 우선 프로젝트에 다운받아줘야한다. 필자는 아래 버젼을 이용하고 있으니 참고 해주길 바란다. node: 16.1.0 npm: 7.11.2 typescript: 4.9.4 터미널에서 사용할 프로젝트로 이동한 후 FONTAWESOME_NPM_AUTH_TOKEN={ TOKEN } npm install --save @for..

회원가입 창에서 아이디 부분에 값을 입력 할 때 해당 오류가 갑자기 발생하였다. 하지만 컴퓨터는 거짓말을 하지 않고 이럴 때는 휴먼 에러일 경우가 매우매우 높다. 우선 필자는 해당 값을 useState로 관리하지 않고 ForMik로 관리하고 있었다. initialValues={{ email: '', password: '', firstName: '', lastName: '', sexType: '', birthDate: '', userId: '', submit: null }} 생각해보니 userId가 아닌 그저 id로 했을 때는 오류가 나지 않았다. 분명 선언도 null이 아닌 ''로 해서 오류가 날 일은 없을 텐데 곰곰이 생각해보니 userId로 명명을 바꾸고 나서 오류가 발생했다. 다시 확인해보니 nam..

우선 필자는 M1을 사용 중이고 메모리는 16GB이다. 저장공간도 부족하지는 않은 상황이다. 하지만 IntelliJ를 사용하다보면 갑자기 IntelliJ가 스크롤도 느리고 모든 기능이 다 심각할 정도로 느려지는 현상이 있었다. 그래서인지 해당 현상만 있으면 Mac이 종종 멈추면서 자동으로 재시작 되었었다. Project를 하나만 띄워도 7GB를 쓰고 그랬다. 한참을 이러니 너무 답답해서 구글링을 해보니 듀얼 모니터?에서 사용할 시에 해당 문제가 있다고도 한다. 그런데 나는 Mac만 사용할 때도 이런 현상이 있어서 더 찾아보니 M1용으로 사용해야 된다는 것이다. 음 당연히 M1이겠지 하고 확인해보니 Inteli로 다운 받았었다... 확인하는 방법은 '활성 상태 보기' 열기 1행에서 우클릭 후 '종류' 체크..