nextjs + typescript + eslint + prettier + emotion

프로젝트 진행중 모달을 사용하는게 많아서 개발 겸 기록Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.보통 모달을 호출하는 컴포넌트안에서 모달을 작성하는데 이때 자식 엘리먼트로 렌더링 하지 않고 외부

넘블에서 진행한 신년 메시지 주고받기 챌린지 회고 vanilla js만으로 간단한 게시판 형태의 SPA를 구현하는 챌린지 소스코드 GIT 핵심 로직 Component.ts 기본적인 라이프싸이클 setup -> render -> setevent -> update -

복잡한 상태를 관리할때 사용하는 훅.Redux 라이브러리를 쓸 때 썼던 기억이 난다.인자로 reducer와 initialState를 받고,state와 dispatch를 리턴한다.reducer는 previousState와 action(type과 payload를 가지는 객

요즘 그냥 useState useEffect만 사용해서 효율적이지 않은 개발을 하고 있지 않은것 같아 유용한 hook들을 한 번 정리해서 사용하려고 한다.정리하는 김에 알던것도 좀 더 깊게 다시 한번 정리해보자조건문 , 루프문 등에 들어갈 수 없다. 함수 최상위에서만

리덕스에서 스토어에 변경이 생기면(dispatch가 일어나면) 기본적으로 useSelector훅을 사용한 모든 컴포넌트의 useSelector의 인자와 store의 state와 비교하여 다르면 리렌더링된다.하지만 state가 primitive value가 아닌 객체,배

자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 라이브러리상태 변화를 일으킬 때 참조하는 객체type으로 액션을 구분하고 payload의 값으로 State를 업데이트 한다.액션객체를 만드는 헬퍼함수이전 상태와 액션을 입력받아 변화를 일으키는 함수

기존 Context를 이용해서 State를 관리할 때는 CartItem이 바뀌면 useEffect훅을 이용해 CartTotal,CartCount도 바꿔줬다

기존에 scss를 사용해서 스타일링을 했는데,컴포넌트 파일 1, scss파일 1해서 컴포넌트마다 파일이 2개가 되면서 관리하기가 불편하다.또, 클래스네임이 중복으로 되면 스타일이 의도대로 나오지 않는다.이래서 사용하면 좋은게 Styled Component ! 라이브러리

비트 연산을 사용해서 정수로 부분 집합 표현공간을 절약하기 위해A << B A를 왼쪽으로 B비트만큼 민다1 << 0 =1 1 << 1 = 2 10(2)1 << 2 = 4 100(2)A << B 는 A x 2^B와

Untitled정적웹페이지 : 서버의 html 페이지를 요청함 동적웹페이지 : url로 서블릿을 찾아 실행시켜서 결과를 출력해줌servlet 인터페이스 init(),servicee(),destroy()generic servlet 추상메소드 service()httpser

마지막 함수가 호출된 이후 지정한 시간이 지나기 전에 호출되지 않도록 하는 것.이번에 포트폴리오 싸이트를 개발할 때 스크롤을 하면 페이지가 스위핑 되도록 하였는데이렇게만 스크롤이벤트를 주니 마우스스크롤 한틱마다 handlewheel함수가 호출되어서 화면이 쉭쉭 넘어갔다

나올 수 있는 도형 : 2 + 1 + 4 + 8 + 4 = 19개놓을 수 있는 경우의 수 = 약 19 n m 이하500 500 19 = 4750000 브루트포스로 해도 충분함테트리스 도형을 배열로 만듦 여기서 실수를 많이해서 오래걸림노트에 그림그리면서 해야

리액트에서 많이 쓰는 UI 라이브러리설치속성들은 https://mui.com/components에서 참고하자타이포그래피 (Typography)variant 적용될 태그component DOM에 올라갈 태그color 폰트컬러gutterbottom 텍스트 밑에 마

다른 페이지를 렌더링 해주기 위해 사용하는 라이브러리지금 쓰는 버전은 6인데 기존에 많이 쓰던 v5와 많이 달라졌다고 한다.index.jsRoutes 컴포넌트 위에 BrowserRouter 컴포넌트로 덮어줘야 사용 가능하다.App.jsRoutes컴포넌트로 덮고그 아래에

기존의 바닐라 자바스크립트에서 화면을 업데이트할 때는 바꿔야하는 엘리먼트가 전부 다시 렌더링 된다리액트를 사용하면 바뀌는 부분만 검사해서 바꾼다.인터랙티브한 개발을 할 때 유리하게 작용함리렌더링을 해야 할 때 마다 ReactDOM.render()함수를 직접 호출하는건

React는 interactive한 element를 만들수 있도록 해주는 라이브러리이고,.React-Dom 은 React Element를 html에 놓을수 있도록 해주는 라이브러리이다.JSX는 React.createElement()를 좀더 편하고 직관적이게 사용가능하게

이 속성으로 grid의 형태와 가로 세로 폭을 정할 수 있다. grid 칸 사이의 간격을 지정한다. column-gap, row-gap으로 따로 지정할 수 있다. grid의 칸들을 지정해서 할당한다. 3번과 같이 grid-template-area와 grid-a

block property는 높이와 넓이를 가지고 있고(inline과 반대) element옆에 아무 것도 오지 못하게 한다.inline block property는 높이와 넓이를 가지고 있지만 inline처럼 옆에 element를 배치 할 수 있다.만약 inline b