공부하는 개발자

https://react.dev/reference/react/useRef useRef – React The library for web and native user interfaces react.dev useRef는 렌더링을 위해 필요하지 않은 값을 참조할 수 있게 해주는 React Hook이다. const ref = useRef(initialValue) 컴포넌트의 top level에서 useRef 를 호출하면, ref 를 선언한다. ref 란, 컴포넌트가 어떤 정보를 “기억”하고 싶은데 해당 정보가 리렌더링을 일으키지 않고 싶을 때 사용하는 객체를 말한다. initialValue : ref 객체가 초기화 될 때, current 프로퍼티에 들고 있는 값. 어떤 타입이든 될 수 있다. 이 매개변수는 최초 ..

overflow 자식이 부모의 범위를 벗어날 경우 어떻게 할 것인지 제어하는 css overlfow: visible | hidden | scroll | auto visible : 그냥 그대로 둔다. 넘치면 넘치는 대로 존재한다. hidden : 넘친 부분은 보이지 않는다. scroll : 스크롤이 생긴다. (가로 / 세로 모두 생긴다.) auto : 넘친 경우, 자동으로 스크롤이 생긴다. text-overflow 넘치는 텍스트 표기를 제어하는 css text-overflow: clip | ellipsis; text-overflow 속성은 overflow 속성이 hidden / scroll / auto 이면서 white-space: nowrap일 경우만 적용된다. clip : 넘치는 텍스트를 자른다. el..

useParam() 훅을 사용할 때 반환되는 값은 이다. 라이브러리 입장에서는 URI 경로에 있는 값을 가져올 때 존재하지 않을 수도 있으니, 당연히 undefined로 반환해야 하지만, 라이브러리를 사용하는 입장에서는 확실히 존재함을 보장할 수 있음에도 계속해서 undefined 아님 단언 (!)을 사용하는 것이 번거롭다. 이럴 때 다음과 같은 방법을 사용할 수 있다. const {key} = useParams() as { key: string }; 이렇게 하면, key가 가 아닌 string 임을 확실히 보장할 수 있다. 물런 매번 ! 를 사용할 것인지 아니면 as 라는 위험할 수 있는(?) 형 변환을 사용할 것인지의 trade-off가 있을 것 같다.

숫자 타입 input에 자동으로 생기는 화살표를 제거하고 싶다면. 아래 css를 추가하면 된다. input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] 부분은 적절히 다른 select로 변경할 수 있다. number type을 클릭하고 커서를 올린 채 wheel 이벤트를 발생시키면 숫자가 오르락 내리락 하는데, 이를 막고 싶다면 TypeScript + React에서는 다음과 같이 하면 된다. (event.target as HTMLElement).blur()} /> 핵심은 onWheel 이벤..

리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리, 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있고, 글로벌 상태 관리도 손쉽게 할 수 있다. Context API와 useReducer 훅을 사용해 개발하는 흐름과 리덕스를 사용하는 방식이 매우 유사하다. Context API와 리덕스 차이 미들웨어 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 특정 조건에 따라 액션 무시 액션을 콘솔에 출력 혹은 서버쪽에 로깅 액션이 디스패치 되었을 때 이를 수정해서 리듀서에게 전달 특정 액션이 발생했을 때 이에 기반하여 다른 액션 발생 특정 액션이 발생했을 때 특정 JS 함수 실행 유용한 함수와 Hooks reac..

출처 : velopert wiki // exact에 따라서 /** or /가 걸졍된다 소개 @Param 가져오기 const Profile = ({ match }) => { const { username } = match.params; } /* Profile을 사용하는 곳 */ Query 가져오기 : 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있다. 이 값은 문자열로 되어 있어서 qs 라는 라이브러를 사용하면 쉽게 파싱할 수 있다. const About = ({ location }) => { const query = qs.parse(location.search, { ignoreQueryPrefix: true }); } 서브 라우트는 그냥 Route 컴..

올해 10월 초부터 생각했던 사이드 프로젝트를 본격적으로 만들어 보려고 한다 (이번엔 제발 런칭까지....) 리액트를 거의 3년만에 보게 되었는데 뭐 아주 그냥 새롭다. 이야 훅은 또 뭐야? 라떼는 클래스만 있었는데 이번 포스트에서는 리액트에서 스타일 지정하는 방법을 공부해 보았다. (react modern stack에 빠삭한 지인과의 카톡) REF : https://react.vlpt.us/styling/03-styled-components.html CSS in Js : JS 안에 CSS를 작성하는 것 리액트 진영에서 가장 인기 있는 CSS in JS 라이브러리가 바로 styled-components 이다. 설치 yarn add styled-components 사용 styled.태그이름 을 사용해서 바..

와 내가 react 배울때만 해도 hook이라는게 하나도 없었는데 (생각해보면 거의 2.5~3년 전이긴 하네...) 이제는 자료를 찾아봐도 hook 사용이 default가 된 것 같다... 사이드 프로젝트를 해볼까 하여 훅을 간단히 정리해 보았다. 훅 정리 리액트 버전 16.8에 추가되었으며, 함수형 컴포넌트에도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 새로 시작하는 프로젝트라면 클래스형 컴포넌트는 지양하고 훅을 사용하는 것이 좋다. useState : state 관리 function App() { // useState(초기값)으로 [state이름, setter]를 가져온다 // state에 객체가 들어갈 수도 있음 const [number, setNumber] = useState(0)..

요즘엔 순수 CSS 보다는 SASS를 많이 사용하고 있다. 여러 속성을 변수로 선언하여 관리할 수 있는 것도 장점이고, 중첩된 element에 쉽게 접근할 수 있는 것도 큰 장점이다. vue.js에 SASS를 적용하는 방법은 간단하다! Step 1 npm install --save node-sass Step 2 npm install --save sass-loader Step 3 vue 컴포넌트 `` 태그에서 lang을 scss로 지정한다.

컴포넌트 앞선 포스팅에서 components/안에는 *.vue파일들이 있으며, 이 파일들이 각각 하나의 컴포넌트로 간주된다고 언급한 적이 있다. 이번 포스팅에선 각 컴포넌트가 어떻게 구성되는지 살펴보고, 그 중 에 대해서 조금 더 알아보자 *.vue 파일은 크게 3가지 부분으로 이루어져 있다. 실제 HTML 태그가 들어가는 일종의 템플릿이다. 디렉티브를 활용하여 조건부 렌더링, 값 바인딩 등을 할 수 있다. 잘 생각해보면 script에서는 객체 하나를 export하고 있다. 이 객체 안에 property로 들어갈(...에 들어갈) 목록과 그 역할을 알아보자 data vue component에서는 무언가를 return하는 함수를 넣어줘야 한다. 이런 식이다. 만약 Vue 객체의 인스턴스를 선언한다면, 함수..