최근 이직한 회사에서 php로 제작된 레거시 프로젝트를 담당하게 되었습니다. 프론트엔드 개발자 입장에서 백엔드 코드,DOM 조작 코드,HTML 코드 등이 뒤섞여있는 PHP 환경은 여간 불편한일이 아닙니다. 이를 개선하기 위해서 기존 프로젝트의 DOM 코드들을 web component로 적용하고 있습니다. 거의 매번 react로된 환경에서만 작업을 해오면서 생각할필요가 없어던 부분들을 고려해야 되다 보니 react의 장점이 느껴져서 둘을 비교하면서 정리해보겠습니다. 웹컴포넌트 web component const html = String.raw; class Modal extends HTMLElement { constructor() { super(); this.list = []; this.attachShado..
CSS-in-JS는 모던 프론트엔드 개발, 특히 React 커뮤니티에서 점점 더 일반적으로 사용되고 있습니다. styled-components는 Tagged templates의해 구동되어 스타일만 정의하면 일반적인 react 컴포넌트를 생성할 수 있기 때문에 다른 CSS-in-JS 목록에서 눈에 띕니다. 이는 CSS 모듈성과 같은 중요한 문제를 해결하고, 중첩과 같은 non-CSS 기능을 제공하며, 이 모든 기능은 별도의 설정 없이 사용할 수 있습니다. 개발자는 CSS 클래스의 고유 이름에 대해 생각할 필요도 없으며, 클래스에 대해 전혀 생각할 필요도 없습니다. 그럼 styled-components는 어떻게 이를 해결할까요? styled-components에 익숙하지 않다면 우선 공식문서를 읽어보세요. ..
자바스크립트의 반복문 종류 및 사용법 👉 for, for...in, for...of, forEach 안녕하세요! 오늘은 자바스크립트에서 사용할 수 있는 반복문의 종류와 각각의 사용법에 대해 알아보겠습니다. 자바스크립트에서는 주로 4가지 종류의 반복문을 사용합니다: `for`문, `for...in`문, `for...of`문, 그리고 `forEach`문입니다. 이 포스팅을 통해 각각의 반복문이 어떻게 사용되는지 이해할 수 있을 것입니다. 👉 for문 `for`문은 가장 기본적인 반복문입니다. 반복 횟수가 정해진 경우에 사용하며, 초기값, 조건식, 증감식을 통해 반복문을 제어합니다. 다음은 `for`문의 기본 구조입니다. for (초기값; 조건식; 증감식) { // 실행할 코드 } //예시: for (let ..
Hoc vs Render 속성 값 컴포넌트에 공통적으로 사용되는 로직을 재사용 가능하도록 구현하는 방법에는 Hoc 와 Prop render 를 사용하는 2가지 방법이 있다. 1. 컴포넌트 내부 일부에서 적용하는 경우 HOC 현재 컴포넌트의 전체에 적용 //HOC //로그인시에만 렌더링하는 HOC const WithIsLogin = WrappedComponent => class WithIsLogin extends Component { state = { isLogin : false } checkIsLogin = ()=> { /***/ } componentDidMount(){ this.setState({ isLogin : this.checkIsLogin() }) } render(){ if(this.state...
업무상 자바스크립트로 특정 색을 선택하면 비슷한 채도나 명도의 색을 자동으로 지정해주는 기능이 필요했다 예를 들면 블로그 테마 메인 컬러를 선택하면 더 밝은 컬러 더 어두운 컬러를 자동으로 지정해준다. tinycolor2 tinycolor2 Fast Color Parsing and Manipulation www.npmjs.com GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript Fast, small color manipulation and co..
