개발쬬 개발쬬

이번에 hook을 하나 생성해서 비밀번호 테스트를 쉽게 해볼까 한다 내가 정한 비밀번호는 유효성은 이렇게 정했다. 영문포함 숫자포함 특수문자포함 길이 8자 이상 30자 이하 각각의 디자인이 정해져있고, 하나씩 통과할때마다 해당 디자인에 색상이 변경된다. (체크모양이 바뀐다던지?) 이전에는 좀 더 복잡한 방식으로 작성했었는데, 하다보니 편한로직을 짜게되서 적어놓으려고 한다. (더 편한 코드가 잇다면 공유해주세요!) src/utils/passwordCheck export function passwordCheck(value: string) { let obj = { eng: false, number: false, special: false, length: false, }; const engCk = value.m..

Mantine 요즘 자주쓰는 프레임워크 Mantine 을 사용하는 중이다. 해당 프레임워크를 사용하다가 테이블 요소에 기능적인 부분들을 추가해 줄 패키지를 찾았는데 그게 바로 mantine datatable 이였다. 해당 소스는 mantine 기반으로 sort 및 toggle 형식의 여러가지 테이블 기능들을 제공해줘서 아주 유익하게 사용하고 있는 라이브러리 중 하나인데, 작업을 하던 중 이런 에러에 부딧히게 되었다. Mantine DataTable A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI icflorescu.github.io Mantine You've sub..

1. Ant Design 깔끔하고 단정한 느낌의 UI Design 프레임워크 워낙 유명해서 대부분의 개발자분들은 알 거라 생각합니다. 최근 1년동안 굉장이 애정했던 디자인 오픈소스로 업데이트도 빠르고, 호환성에서도 우수해서 사용하기 좋습니다. 다만 빌드 시, 너무 무거운게 단점(대부분의 프레임워크가 그렇듯..) vue2는 버전2를 끝으로 지원이 끝났다는것이 단점...(혹시 되나요?) Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best R..

npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 개발자의 길로 접어들면서 사수에게 가장 많이 들었던 말이, 트렌드를 알아야된다는 말이였다. 개발의 세계는 무궁무진하고 업데이트속도가 빨라서 고작 1년만 지났음에도 불구하고 신기한 라이브러리,,AI 등등 신기술들이 등장하게 된다. 그 몇년의 세월을 견디고도 살아남은 라이브러리나 프레임워크도 많지만, 결국 JQuery 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들..

useEffect 를 먼저 살펴보자면 리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다. 실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다. > useEffect 사용예시 useEffect(()=>{ // 실행 함수 넣어주는 곳 }, [ // 의존변수 넣어주는 곳 ]) useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를..

사실 이전에 리액트로 작업할 땐 렌더링상태를 체크할 수 있다는 사실을 몰랐기 때문에 어느 부분에서 렌더링이 되는지 몰랐었다. 하지만 막상 렌더링감지되는 기능을 깔아놓고 나니 나도 모르게 렌더링에 대해 신경을 많이 쓰게 되더라 이왕 하는거 최적화된 환경을 위해 설치 하는게 좋을 것 같았다. 크롬 웹스토어 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023...

ref (reference) 에 대해 알아보자 ref 는 React에서 사용할 때, useRef 로 변수에 담아 사용이 가능하다. ref 기본기능을 간단하게 설명하자면 다른 DOM에 접근해서 작업이 가능하도록 해준다. ( 이외에도 활용되는 기능이 매우 많지만 input에 관해서만 적어내리도록 하겠다) useState 는 우리 모두가 알고 있듯이 React에서 상태를 관리할 수 있도록 도와주는 기능이다. // ref const ref = useRef(); // useState const [state, setState] = useState(null); useState는 이런식으로 상태가 관리된다 입력 > 상태함수 실행 > 함수로 인한 state값 업데이트 > input 필드 값 변경 ( ref에서 삭제가능 ..

모달은 어디에 넣어야 할까? 사실 퍼블리셔로 시작한 나로써는 최적화적인 면도 중요하지만 DOM 의 구조를 잘 파악하고 체계적이고 직관적인 구조로 짜는것이 가장 베스트의 코드라 생각한다. 특히나 모달의 경우는 머리로는 구현이 쉽지만 상태 모달부터 시작해 기능과 submit 모달 등등 다양한 기능을 가지고 있다. 실시간으로 뿜어져나오는 여러 모달을 처리하기엔 최적화적인 코드를 사용하고싶지만 그것도 쉽지않다. 구조적으로 하위 내용과 div 로 감싸진 곳에선 모달을 사용하지 않는 편이 좋다. css 코드를 만지다보면 가끔 z-index 를 무작위로 사용하는 경우가 많은데 이 점을 고려하지 않고 모달작업을 하면 상위 position에 맞춰 모달이 본인에 위치를 잃어버린다. 하위에서 아무리 z-index 를 우겨넣..