분류 전체보기
-
모던 리액트 Deep Dive - 리액트 개발을 위해 꼭 알아야 할 JSReact 2024. 2. 12. 18:32
1. 자바스크립트의 데이터 타입 1) 원시 타입 - boolean 0, -0, 0n, 0x0n은 부호나 소수점 유무에 상관없이 falsy한 값 NaN은 Number타입 - null type of null === 'object' // true? typeof로 null을 확인했을 때 해당 타입이 아닌 object가 반환. 명시적으로 비어 있음을 나타내는 값 - undefined 선언됐지만 할당되지 않은 값. - number - string 백틱을 사용해서 표현한 문자열을 템플릿 리터럴이라고 함. 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있음. - symbol 심볼은 심볼함수를 이용해서만 만들 수 있음. - bigint number가 다룰 수 있는 숫자 크기의 제한을 극복하기..
-
Funnel에서의 상태관리 고민React 2024. 1. 30. 17:03
현재 구조는 최상위 컴포넌트인 OnboardingPage에서 모든 상태를 useState를 통해 관리하고 있다. const OnBoardingPage = () => { const { Funnel, setStep } = useFunnel(ONBOARDING_FORM_STEP, ONBOARDING_FORM_STEP[0]); const [gifteeName, setGifteeName] = useState(''); const [imageUrl, setImageUrl] = useState(''); const [deliveryDate, setDeliveryDate] = useState(''); const [tournamentStartDate, setTournamentStartDate] = useState(''); ..
-
왕초보가 작성한 토스 퍼널의 아주 기초적인 사용법React 2024. 1. 19. 21:07
퍼널(Funnel) 이번 웹잼에서 온보딩 파트를 맡게 되었고, 어떤식으로 구현해야 할지 고민하였는데, 처음에 생각했던 방식은, ‘다음’버튼을 클릭했을 때 navigate로 이동시키는 방법이었다. 하지만 총 6단계로 이루어진 온보딩 파트였고, 공통으로 쓰이는 상태가 있을 것 같다고 판단했다. 이를 위해서 SOPT 웹파트 3주차 리액트 과제를 떠올렸다. 당시 나는 step에 따른 조건부 렌더링 방식을 선택했었고, 많은 props drilling이 발생하긴 했지만 조금 고도화 한다면 충분히 좋은 방법이라 생각했다. 그 즈음 예전에 우리 파트 OB분에게 지나가듯이 들었던 퍼널이 생각나서 검색 후 모든 자료를 뒤져보면서 공부하였다. 왜 이름이 퍼널일까? 퍼널의 뜻은 ‘깔때기’이다. 유저들의 잔존률이 깔때기 처럼,..
-
타입스크립트와의 싸움에서 지다. 'x' is missing in props validationError 2023. 11. 9. 22:56
프로젝트를 진행하던 중 타입스크립트를 처음 써보게 되었는데, 정말 모든 것의 타입을 하나하나 적용시키느라 진도가 너무 늦어지는 것 같아, 잠시 타입스크립트와의 싸움에서 한 발 물러나려고 한다. 이 오류는 props에 대한 타입을 정해주지 않아서 나타나는 것이다. 세상에, props 타입까지 지정해줘야 하다니... 나는 아직 타입스크립트를 사용할 때가 아닌 것 같다. 보통 JS에서 불편함을 느껴야 TS로 넘어가야 한다는데, 나는 왜 JS의 유연함이 너무 좋을까 ㅋㅋㅋ 상남자 답게 정면돌파 하고 싶지만, 잠시 물러났다가 나중에 다시 도전해야겠다. 나처럼 하남자같은 해결 방법은 다음과 같다. esLint에 다음 옵션을 추가해주는 것이다. "rules": { "react/prop-types": "off" }
-
[JS] this에 대해 알아보자!Javascript 2023. 11. 8. 22:12
평소에 저는 혼자 공부할 때 우테코 문제를 풀어보면서 공부를 진행했었는데요, class를 자주 사용하는 형식이다 보니 아무래도 this를 자주 쓰게 되더라구용. 문득 이런 생각이 들었습니다. ‘내가 과연 정확히 이해하고 this를 쓰고 있는 것이 맞나?’ 이번 기회에 ‘this’에 대해서 같이 알아보면 좋지 않을까라는 생각에 공부를 좀 해봤습니다! 코어자바스크립트를 참고하며 정리해봤어요!! 안그래도 javascript언어 자체와 this에 관심이 많았고, ‘자스를 잘하는게 아무래도 간지가 좀 나지 않습니까?’ 제가 잘 설명할 수 있을지는 모르겠지만 한 번 출발해보져! 먼저, this란 무엇일까요? this란 말그대로 ‘이것’이라는 뜻입니다. 그니까 ‘이것’이 뭔데…? “누가 나를 불렀느냐”를 뜻한다고 합..
-
리액트/스토리북 설치 관련 에러 react-refresh/runtime.js which falls outside of the project src/ directory.Error 2023. 11. 8. 00:20
에러 사진 react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 라는 오류가 여러번 나온다. 아무리 구글링을 해도 정보가 마땅치 않고, 스택오버플로우에서 하라는대로 해봐도 무용지물이었다. 그러던 중, react-refresh가 여러번 설치된 것 같다고 알려주셔서, 터미널에 npm ls react-refresh 명령어를 입력하고 확인해보니, 지금은 해결을 완료해서 'dedupe..
-
리액트에서 .env 사용하기 (카카오 로그인)React 2023. 11. 6. 19:30
팀 프로젝트 중 카카오 로그인 기능을 구현하려고 하던 중, env파일에 대해서 처음 알게되어서 어떻게 쓰는 것인지 등 공유하려고 한다. 먼저 env란 뭘까? 쉽게 얘기하면 깃허브에 올리면 안되는 것들을 환경변수를 정의하여 변수로 받아오는 것으로 생각하면 되겠다. 이 env파일은 항상 최상위 루트에 있어야 한다. 또한 리액트(CRA환경) 에서는 REACT_APP을 변수명 맨 처음에 꼭 넣어주어야 한다. 그리고 process.env로 전역에서 접근가능하다. const CLIENT_ID = process.env.REACT_APP_REST_API_KEY; const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URL; 주의할 점은 절대 쌍따옴표나 따옴표를 붙이지 말 것!! ..
-
프로그래머스 lv2 기능 개발 -js알고리즘(코딩테스트) 2023. 9. 1. 15:30
문제 : 기능개발 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는..