이 기술 블로그를 만들기 위해 5년을 미뤘다.

HTML 요소의 어트리뷰트 값을 받아와서 CSS에서 사용할 수 있다. HTML CSS에서 사용할 어트리뷰트 값을 태그에 지정한다. 어트리뷰트 이름은 아무렇게나 지어도 되지만, 보통은 data-* 형태로 명명하는 것이 국룰이다. 왜냐하면 DOM을 생성할 때 data-* 이름 형태의 어트리뷰트를 모아 dataset이라는 이름의 맵으로 만들어 주고, 이를 자바스크립트에서 사용할 수 있기 때문이다. (대충 효율적이라는 뜻) ... ... CSS 어트리뷰트 값을 CSS 내부 속성에서 사용하고자 할 때는 attr()로 감싸서 사용할 수 있다. ... .donut-chart > .donut::after { color: #fff; width: 70%; padding: calc(35% - .76vw) 0; backgro..

회사 업무로 elasticsearch를 이용한 영화 대사 검색 API를 만들었다. 검색 API 호출 시, 입력한 검색어와 일치하는 부분은 태그로 강조되도록 기능을 만들었다. 브라우저로 호출 테스트를 해 보니 정상적으로 기울여지게 출력되는 것을 확인할 수 있었다! 하지만 문제는 웹에서 발생했으니... 리액트 기반으로 검색 웹 프론트를 만들었는데, 태그가 그대로 문자열로 표출이 된다... 검색해 보니, 리액트는 XSS 공격을 막기 위해 무조건 렌더링할 때 저런 식으로 HTML 태그를 문자열로 변환한다고 한다. 해결법은 입력하고자 하는 상위 HTML 태그에 다음과 같이 써주면 된다. (보안 위험이 있으니 되도록 사용을 지양하자!) 나는 span 태그를 따로 만들어서 영화 대사가 들어가는 부분에 넣어줬다. 결과..

리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다. 이유가 무엇일까? 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것이다. 각각의 특징을 표로 정리해 보았다. 클래스형 컴포넌트 함수형 컴포넌트 특징 render() 메소드와 Component 상속 필수 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용 단점 state, props 사용 불편 많은 메모리 사용 state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용 보통 서점에서 리액트 서적을 구입하면 클래스형 컴포넌트 기준으로 주로 기술되어 있어서 처음 리액트를 공부하는 사람들은 복잡한 코드에 진..

React는 함수형과 클래스형 컴포넌트의 생명주기 형태가 다르다. 나같은 경우는 처음 리액트를 독학할 때는 클래스형 기준으로 공부하고 이후 프로젝트 개발할 때는 함수형으로 주로 쓰다 보니 개념이 뒤죽박죽이 되었다. 블로그에 정리하면서 복습해 보자. (2021-11-01에 부족한 부분을 업데이트했습니다.) 마운트 1. construnctor() : 컴포넌트가 처음 렌더링될 때 호출(생성자 메소드) => 단 한 번만 실행 constructor(props) { super(props); } 2. getDerivedStateFromProps() : props로 받아온 값을 통해 state를 갱신하기 위한 메소드 render() 직전에 실행되며, 여러 번 실행될 수 있음 return된 값이 초기 state의 초기값..

심심해서 이번 주말에 LH 전환보증금 계산기를 만들었다. 리액트 문법 까먹을까봐 리액트로 만들었는데 컴포넌트도 안나누고 넘나 개떡같이 만든 것 같다. 다음 리액트 프로젝트는 이쁘게 만들어 보자. 이건 내가 까먹을까봐 정리하는 리액트 프로젝트 github pages에 배포하는 방법이다. 절차 1. gh-pages 패키지 설치 npm install --save gh-pages // 또는 yarn add gh-pages 2. 프로젝트 폴더 내 package.json를 열고 "homepage" 요소 추가 { // ... "homepage" : "http://sap03110.github.io/lh-deposit-calculator", // 본인 깃허브 주소 + 리퍼지토리명 // ... } 3. package.js..

CSS를 이용하여 스크롤바를 건들 수 있다! 사실 기본 스크롤바는 아주 못생겼다. 못생긴 사진 먼저 보고 가자. 이제 스크롤바를 바꿔보자! 1. 스크롤바 숨기기 가장 기초인 스크롤바 숨기기부터 해보자. .layer-pop__round.grade::-webkit-scrollbar { display: none } 2. 스크롤바 디자인 변경 - 스크롤바 너비 변경 .layer-pop__round.grade::-webkit-scrollbar { width: 5px; } - 스크롤바 헤더 부분 디자인 변경 .layer-pop__round.grade::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 10px; } - 스크롤바 바디 부분 디자인 변경..