FrontEnd86 커스텀 엘리먼트 스타일링하기 (feat. Shadow DOM) 바닐라 자바스크립트(& 타입스크립트)로 개인 사이드 프로젝트를 진행 중인데,컴포넌트화를 위해 아래 코드와 같이 커스텀 엘리먼트를 생성했다. ⬇️ 커스텀 엘리먼트 import BaseComponent from "../../commons/BaseComponent";import deviceCheck from "../../utils/deviceCheck";import './styles.scss'class ProfileCard extends HTMLElement { #shadow constructor() { super() this.#shadow = this.attachShadow({mode: 'open'}); .. 2024. 12. 30. 프로젝트 절대 경로 설정하기 (feat. tsconfig.json) 프로젝트 작업을 할 때,디렉토리 구조를 변경하면 상대경로를 다시 계산해서 작성하는 것이 귀찮아서,그리고 가독성도 별로라고 생각해서세팅 단계 때, 절대 경로를 설정하는 편이다.(Next.js 같은 경우는 처음부터 npx create-next-app@latest을 실행하면 선택할 수 있게 해뒀다.)(난 아무래도 초기 세팅은 Next.js가 제일 편한 것 같다) 바로 설정하는 방법으로 넘어가자.JavaScript를 사용한다면 jsconfig.json로, TypeScript를 사용한다면 tsconfig.json로 들어가서 옵션 몇 개를 수정하려고 한다. 1. rootDir 관련 공식문서 링크모든 비선언 입력 파일(non-declaration input files)의 가장 긴 공통 경로.declaration in.. 2024. 12. 16. [ React ] useEffect (feat. 무한 렌더링) useEffect는 꽤 다루기 까다롭습니다. 용도 자체가 부수작용을 일으키는 동작을 하여 예상 못한 부분에서 엉뚱한 동작을 일으키기도 하는데, 콜백 함수가 실행되는 건 의존하는 다른 대상의 상태를 따르기 때문이죠. 그래서 리액트로 개발하다보면 심심치 않게 무한 리렌더링 상황에 부딪히곤 합니다.useEffect 동작 순서컴포넌트 렌더링화면에 반영 ( Paint )useEffect 함수 실행(리렌더링 시) 이전 부수작용 클린업새로운 부수작용 실행useEffect가 주로 사용되는 상황네트워크로 데이터 가져오기 (fetching)DOM 조작구독과 해제타이머 관리 useEffect 사용 코드 예시https://codepen.io/www-r/pen/ByBjoeK 2024-12-05컴포넌트가 렌더링된 후 5초 동안 .. 2024. 12. 5. Codepen 에서 React 코드 작성하기 간단한 기능들을 구현하면서 연습(？)을 하려고 하는데,빠른 환경 설정과 즉각적으로 코드의 변화에 따른 UI 상의 변화를 확인할 수 있다는 장점을 떠올리며,Codepen에 오랜만에 들어왔다. 1. 새로운 프로젝트 생성프로필 이미지를 클릭해 새로운 프로젝트( New Pen )를 만들도록 하자. 2. 리액트 환경 설정하기 그 다음 Settings 에 들어가서, JS 세팅 페이지로 이동한다.여기서 두 작업을 진행한 뒤에, Save & Close 버튼을 누르면 끝난다!첫째로, JavaScript Preprocessor 셀렉트에서 Babel을 선택한다.둘째로, Add Packages 에서 react를 검색해서 react와 react-dom을 추가한다. (JS 코드 칸에 import가 새로 추가된다.) 3. 리액트 .. 2024. 12. 5. [ Vue ] computed vs watch (feat. method ) Nuxt(Vue)로 만들어진 프로젝트를 React로 마이그레이션을 하게 됐습니다. 러닝커브가 React 보다 낮다고 들었던 Vue, 전 헷갈리는 개념들이 너무 많더라구요. 그 중 하나가 바로 이 둘입니다. computed 와 watch, 둘 다 값이 바뀌면 실행되는 함수들인데, 무슨 차이가 있어서 이렇게 구분되어 있는 것일까요. (공식문서에도 둘을 비교하는 페이지가 있습니다. https://v2.vuejs.org/v2/guide/computed#Computed-vs-Watched-Property ) computed 일단, computed 가 무엇일까요? 빠른 이해를 위해 공식문서의 예제를 가져왔습니다. (저는 (vue v2의 공식문서)[https://v2.vuejs.org/]를 보고 있습니다.) {{ m.. 2024. 3. 14. [ Storybook ] 왜 스토리북을 써야 할까？ 새로운 프로젝트를 시작하는데, 스토리북 도입에 대해 고민해봤습니다. 당연히 사용하는 게 안 하는 것보다 좋지만, 시간이라는 자원은 한정적이기에 스토리북을 통해 얻을 이점이 시간을 투자할만큼의 가치가 있는지를 따지게 됐습니다. 고뇌를 하던 중, 피그마를 통해 대략적인 디자인을 확인했을 때, 두둥, 탁! 스토리북을 사용해야 한다. 라고 생각했습니다. 혼자하는 작업에 도입을 하는 거면 이렇게 이야기는 끝났겠지만, 당연히 아니겠죠？ 개발을 할 때 이미 컴포넌트로 나눠서 관리를 하는데, 굳이 스토리북 까지 사용해야할까？ 라고 생각할 수도 있습니다. 왜 스토리북을 쓰는 게 이로울까? . . . 1. 디자이너와 개발자의 소통이 수월해지고, 시간도 절약할 수 있다. 스토리북은 UI 컴포넌트를 독립적인 환경에서 그려볼 .. 2024. 3. 8. 이전 1 2 3 4 ··· 15 다음
