Web.d 썸네일형 리스트형 [NextJS][Typescript] @emotion 세팅하기 (설치부터 Theme까지) introduction install styled-components 문법 Global styled SSR Theming Tooling / Packages 1. introduction yarn add @emotion/styled @emotion/react css prop 지원 SSR에서 따로 설정을 필요로 하지 않는다 Theme 사용 가능 ESLint plugin 설정이 되어 있다 @emotion/styled 는 styled.div 스타일을 사용할 수 있게 한다 2. install yarn add --dev @emotion/babel-plugin optimizes styles by compressing and hoisting 하여 더 좋은 개발자 경험을 선사한다 // .babelrc { "env": { .. 더보기 [React][Context] Prop drilling 과 useContext (2/2) https://snupi.tistory.com/185 [React][Context] Prop drilling 과 useContext (1/2) Prop Drilling (프로퍼티 내리꽂기) Typescript를 공부하며, Prop interface의 중복을 모듈화 하여 해소할 수 있을까 했는데, 애초에 많이 중복된다는 것은, prop drilling 문제의 가능성이 있을 수 있다고 하여. snupi.tistory.com useContext useState, useEffect와 함께 기본 Hook인 useContext에 대해 알아봅시다. Context 개념 Context 란? 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어, 데이터 캐시 등이 있습니다. // context를 사용하면 모든 컴포.. 더보기 [Javascript] React 와 불변성의 관계 요약정리 개념 설명 못해서 혼나고 쓰는 글 . . 불변성 : 메모리 영역에서 값을 변경할 수 없다 원시타입이 아닌 참조타입의 예시 코드를 살펴보자 let x = { name: 'joam' }; let y = x; x.name = 'sso'; console.log(y.name); // sso console.log(x === y) // true 위 코드에서 x 객체와 y 객체의 데이터의 주소를 똑같이 참조하고 있기에 (얕은 복사) x 객체에 접근했음에도 y 객체의 값이 달라지는 걸 알 수 있다 위처럼 쉬운 예시가 아닌 다른 어딘가에서 객체의 값을 변경한다면 디버깅이 힘들어질 수 있다 (사이드 이펙트 및 프로그래밍의 복잡도 상승) 그래서 let y = { ...x } 라는 spread 연산자를 쓰며 불변성을 유지시키곤.. 더보기 [React][Webpack] webpack, babel 로 시작하기 (without CRA) https://github.com/joohaem/boilerplate-webpack-without-cra GitHub - joohaem/boilerplate-webpack-without-cra: setting Webpack, Babel without CRA setting Webpack, Babel without CRA. Contribute to joohaem/boilerplate-webpack-without-cra development by creating an account on GitHub. github.com Webpack이란? JS 모듈을 파일 단위로 관리하다 보니, 자연스레 파일이 많아지게 된다 한 편, 브라우저에는 한 번에 보낼 수 있는 HTTP 요청 수의 제한이 있기 때문에, 이를 묶어 처리.. 더보기 [React][css] 마우스 hover 시에 svg 보이기 구현하고자 한 뷰 나는 그저 위와 같은 뷰를 만들고 싶었다. . onmouseover / onmouseout 이벤트 처음에 들었던 생각은 onmouseover 이벤트로 hover 시의 state와 onmouseout 이벤트로 hover 가 해제될 때의 state를 관리하고자 하였다 console.log("wrapper")} onMouseOver={() => handleIsMouseOver(true)} onMouseOut={() => handleIsMouseOver(false)} > {isMouseOver ? ( console.log("hover")}> ) : null} 그래서 위와 같이 isMouseOver boolean state를 관리해주었고, 2가지 문제점이 발생하였다 onmouseover / on.. 더보기 이전 1 2 3 4 5 6 ··· 10 다음
