Frontend176 [ 리액트(React) ] Higher Order Component 사용하기 📍 Higher Order Component 사용하기 나는 고차 컴포넌트를 즐겨 사용하지 않지만, React로 작업을 하다 보면 특정 상황에서 고차 컴포넌트를 사용하면 적합한 경우가 종종 있다. (물론 고차 컴포넌트 이외에도 효율적인 접근방법이 있지만, 여기서는 고차 컴포넌트를 사용한다고 가정하자.) id, name, title가 담긴 리스트 타입의 values는 고차함수인 map method를 통해 컴포넌트()를 하나씩 렌더링하고 있는 상황이었다. 여기서 컴포넌트 내부에는 공통적으로 useState가 주입 되어야하는 상황이다. 여기서 나는 HOC를 사용하여 해결했다. 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술인데, 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 나만의 .. 2023. 4. 13. [ Next.js ] TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 📍 TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 Next.js에서 특정 컴포넌트를 호출하면 다음 에러가 뜨면서 정상적으로 렌더링이 되지 않는 이슈를 발견했다. 해당 컴포넌트는 adobe/react-spectrum의 react-aria/focus 패키지를 참조하고 있었다. 여러 가지 검색해 보다 development 단계에서 잠재적인 warning이나 bug를 찾도록 도와주는 react StrictMode가 원인인 것을 발견하고 next.config.js에서 reactStrictMode을 false로 변경했더니 작동이 잘 되었다. 혹은 React18을 17로 다운그레이드해도 정상 작동된다는 comment도 .. 2023. 4. 5. ted는 서비스 프론트엔드 온보딩 프로세스에서 무엇을 느꼈을까? ( 이 글은 사내에서 발표한 자료를 바탕으로 작성했습니다. ) 서론 안녕하세요! 5월 2일에 트리플 서비스 프론트엔드 팀에 합류한 ted입니다. 👋🏾 👋🏾 이번 아티클은 우리 TRIPLE의 기능 혹은 기술적인 문제를 깊게 파고들기보다 이제 막 회사에 적응하는 신규 입사자의 관점으로 온보딩 프로세스에서 느낀 점을 솔직하게 말씀드리려고 합니다. 본론 개발팀에서 단순히 개발을 잘하는 것도 중요하지만, 팀/동료와의 협업은 빼놓을 수가 없습니다. 트리플은 이를 위해 다양한 문화들이 마련되어있습니다. 1. 데일리 스크럼과 KPT 회고 소프트웨어 개발 방법론 중 하나인 애자일을 채택한 팀이면 빠질 수 없는 스크럼입니다. 우리 팀은 반복적인 개발(Sprint)기간을 2주로 잡고 있습니다. 월요일 격주로 스프린트 플래닝.. 2023. 4. 3. [ 자바스크립트(JavaScript) ] e.preventDefault()와 e.stopPropagation()을 알아보자. 📍 e.preventDefault()와 e.stopPropagation()을 알아보자. e.preventDefault()와 e.stopPropagation()은 자바스크립트의 이벤트 핸들러라는 공통점이 있지만, 차이점도 있다. e.preventDefault()는 이벤트의 기본 동작이 발생하지 않도록 하기 위해 이벤트 객체에서 호출하는 method이다. DOM요소는 저마다 기본 동작이 있다. 예를 들어 anchor 태그를 클릭하면 href에 지정된 링크로 이동하고, 를 클릭하면 체크모양이 생기거나 없어진다. 그리고 form 태그에서 submit을 하게되면 refresh가 일어난다. 이럴 때 e.preventDefault()를 사용하면 지정된 링크로 이동하거나 체크모양을 생기거나 없애는 동작 그리고 refr.. 2023. 3. 28. [ 자바스크립트(JavaScript) ] default parameter에 falsy value를 넘겨주면 어떻게 될까? 📍 default parameter에 falsy value를 넘겨주면 어떻게 될까? ES6 feature 중 하나인 default parameter는 function parameter에 값이 전달되지 않거나 undefined인 경우 default parameter를 기본값으로 사용하는 방법이다. 어느날 .env와 함께 default parameter를 사용하다 undefined를 제외한 falsy한 값(false, 0, '', null, etc..)을 넘겨주면 default parameter가 적용이 안 된다는 점을 찾았고, 블로그에 남기자는 생각을 했었다. 그럼, 예시를 살펴보자. function greet(name = "ted") { console.log(`Hello, ${name}!`); } gre.. 2023. 2. 23. 이전 1 2 3 4 5 6 ··· 36 다음
