분류 전체보기
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 3 (폼, 합성 vs 상속, React로 생각하기)프론트엔드 개발자가 될거야./react 2023. 8. 19. 22:13
폼 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 React에서 폼(form) 관련 컴포넌트를 다룰 때 사용되는 개념이다. - 제어 컴포넌트(Controlled Component) 상태를 사용하여 폼 입력 요소들을 관리하는 방식 사용자가 입력할 때마다 상태가 업데이트되며, 화면에 보이는 값과 상태가 항상 일치함 React가 폼 데이터를 쉽게 다룰 수 있게 해줌 useState를 사용하여 상태를 정의하고, onChange이벤트를 사용하여 입력값이 변경될 때마다 상태를 업데이트하는 방식 복잡한 폼에서 여러 입력 요소들을 쉽게 관리하고 싶을 때 폼의 입력값을 바로 React 상태로 가져와서 다루고 싶을 때 유..
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 2 (이벤트 처리하기, React에서 콜백 함수 사용 시 주의할 점)프론트엔드 개발자가 될거야./react 2023. 8. 9. 21:51
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 비슷해도 크게 세가지의 차이점은 있다. 세가지 차이점 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase) 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러 전달 // HTML Activate Lasers // React -> 캐멀 케이스, 함수로 이벤트 핸들러 전달 Activate Lasers 3. React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출하여 폼을 제출할 때 가지고 있는 기본 동작을 방지해야한다. => 공식문서에서 이 부분은 틀린 것 같다. React에서는 합성 이벤트를 사용하여 ..
-
Fontsource로 폰트 적용하기프론트엔드 개발자가 될거야./react 2023. 8. 8. 16:44
Fontsource는 구글 폰트와 같은 오픈소스 폰트를 NPM 패키지로 제공해주는 라이브러리이다. Fontsource를 사용하면 오픈 소스 폰트를 프로젝트에 쉽게 불러올 수 있고 신속하게 사용할 수 있게 해준다. 성능과 개발 편의성적인 면에서 많은 장점이 있어서 사용할 만한 가치가 있는 것 같다 : ) https://github.com/fontsource/fontsource GitHub - fontsource/fontsource: Self-host Open Source fonts in neatly bundled NPM packages. Self-host Open Source fonts in neatly bundled NPM packages. - GitHub - fontsource/fontsource: S..
-
[리액트 공식문서 정독하기] 리액트 주요개념 - 1 (JSX, DOM에 React 엘리먼트를 렌더링하는 방법, Components와 Props)프론트엔드 개발자가 될거야./react 2023. 8. 8. 12:57
리액트 공식문서의 주요개념 파트를 읽으면서 꼭 기억하고 싶은 개념들을 정리해보았다. 잘 이해가 되지 않는 개념들은 GPT에게 물어봐서 이해하려고 노력했고 그렇게 습득된 개념들을 기록해보려고 한다! JSX React에서는 JSX라는 문법을 사용하여 UI(사용자 인터페이스)를 작성한다. JSX는 HTML과 비슷한 모양새를 가지고 있어서 javaScript로 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. 또한 JSX 코드는 React 컴포넌트에서 사용되는 가상 DOM (Virtual DOM) 요소를 정의하는데 React DOM은 JSX에 삽입된..
-
페이지의 특정 부분으로 스크롤하는 방법프론트엔드 개발자가 될거야./react 2023. 8. 7. 17:07
구현 중에 버튼을 누르면 해당부분으로 자동으로 스크롤하게 하는 기능을 구현하게 되었다. 스크롤하게 하는 기능은 같은 페이지 내에서도 가능하고 다른 페이지로 이동한 후 해당 부분으로 스크롤하게 할 수 있다. 페이지 내에서 특정 부분으로 스크롤해주는 것은 사소한 부분일지라도 유저에게는 매우 편리한 기능이기에 알아두면 좋을 거 같다. case 1. 같은 페이지일 때 해당 부분으로 스크롤하기 같은 페이지 내에서 해당 부분으로 스크롤하는 방법은 간단하다. a부분으로 스크롤 a부분 이 예시에서는 'a부분으로 스크롤' 버튼을 누르면 해당 부분으로 스크롤된다. 이는 간단한 해시 값을 활용한 스크롤 이동이다. case 2. 다른 페이지로 이동해서 해당 부분으로 스크롤하기 다른 페이지로 이동한 후 해당 부분으로 스크롤하는..
-
어느덧 10개월 차 프론트엔드 개발자가 되었다! (feat. 기본기 다지기 프로젝트 시작!)회고록 2023. 8. 3. 09:06
오랜만에 쓰는 회고록이다..... 작년 11월 초에 입사하여 어느덧 8월이 되었다! 회사가 7월 초에 여의도로 이전하며 왕복 통근시간이 4시간이되고 다행히 버스와 지하철에서 앉을 수 있기에 출퇴근시간에 여유가 많아져서 오랜만에 회고록을 작성한다. 더불어 출퇴근 시간을 의미 있게 보내고 싶어서 무엇을 하면 좋을까? 생각하다가 그동안 바빠서 하지못했던 회사에서의 트러블 슈팅을 정리하고 react 공식문서 정독과 CS공부를 하려고 한다. 이를 시작하기에 앞서.. 위에 사진처럼 많은 툴을 다뤄보고 다양한 기능을 개발한 10개월 차 개발자가 되었는데 나는 10개월 전보다 많이 성장했는지, 어떻게 성장했는지에 대해 생각해 보았다. 1. 기술구현 및 버그에 대담해졌다. 10개월 전에는 너무나도 아기 개발자였기에 새로..
-
Vercel로 배포할 때 만난 에러 정리 (with. next.js, typescript, tailwindCSS, prisma)프론트엔드 개발자가 될거야./next.js 2023. 6. 18. 17:05
next.js, typescript, tailwindCSS, prisma로 개발한 프로젝트를 Vercel로 배포할 때 여러가지 에러가 났었다. 이 에러들을 어떻게 해결했는지 정리해보려고 한다. 1. error - ESLint: Failed to load config "plugin:prettier/recommand" to extend from. Referenced from: /vercel/path0/.eslintrc.json Failed to compile. 이 오류는 ESLint 구성 파일인 .eslintrc.json에서 "plugin:prettier/recommand"을 확장하려고 할 때 발생한다. 나는 원래 eslint를 사용하여 프로젝트 코드를 작성하는데 왜인지 이 프로젝트에서는 eslint를 적용..
-
[typescript] 너는 무슨 타입이니? (keyof 연산자, Record<string, boolean>)프론트엔드 개발자가 될거야./ts 2023. 5. 17. 12:40
- previewImage 상태 변수에서 kyc 값에 따라 이미지를 렌더링하는 기능을 구현할 때 interface IPreviewImage { advanced: string; basic: string; } const [previewImage, setPreviewImage] = useRecoilState(previewImageState); {previewImage[kyc as keyof IPreviewImage] && ( )} IPreviewImage 인터페이스와 previewImage 상태 변수를 사용하여 이미지 미리보기를 구현하는 부분이다. IPreviewImage 인터페이스는 advanced와 basic 두 개의 속성을 갖고 있고 previewImage 상태 변수는 useRecoilState 훅을 사..