목록WEB (53)

ImFe's study

[WEB] 배포시 CSS opacity가 1%로 고정되는 버그 해결

발생 버전) node: 14.19.0 php: 7.2.34 laravel: 6.18.37 webpack: 4.36 배포시 nn%로 적용하였던 opacity가 정상적으로 적용되지 않고 1%로 고정된다. nn% !important로 변경해도 다시 1% !important로 변해서 배포된다. 해결) opacity: nn%를 0.nn으로 변경해서 배포 ex) opacity: 70% => opacity: 0.7 참고) https://stackoverflow.com/questions/58853844/the-opacity-value-was-changed-to-1-after-building-the-reacjs-project/61124900#61124900
WEB 2022. 12. 14. 19:30
[REACT] React에서 type="range"인 input의 요소가 드래그되지 않음

리액트에서 위 JSX가 동작하지 않는다. (움직여야 할 불릿이 드래그되지 않음) value값이 맞게 인식되어도 드래그는 되지 않는다. 해결) JSX와 html의 어트리뷰트가 달라서 작동하지 않던 것. +) 무슨 차이일까 싶어서 찾아봤더니 영문은 Controlled Component와 Uncontrolled Component이다. 제어 컴포넌트의 경우(value attribute를 사용한 input) 컴포넌트가 마운트 된 후에도 value값을 변경할 수 있고(DOM의 값이 업데이트 가능함.) 비제어 컴포넌트의 경우(defaultValue attribute를 사용한 input) 컴포트가 마운트 된 후라면 value값을 변경할 수 없다.(DOM의 값이 업데이트 되지 않음.)
WEB/React 2022. 10. 20. 19:37
[React] Warning: Each child in a list should have a unique "key" prop. 해결

리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다. 리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다. 배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문. 키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다. 글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다 { // map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함 title.map(function(title, i) { ret..
WEB/React 2022. 6. 8. 19:05
[WEB] Browser sync 사용법

https://browsersync.io/ (공식 문서) browser sync는 여러 브라우저에서 테스트하는것을 도와주는 동기화 프로그램이다. 노드 모듈이므로 node.js설치가 선행되어야 한다. node.js가 설치되어있다면 https://www.npmjs.com/package/browser-sync browser-sync Live CSS Reload & Browser Syncing. Latest version: 2.27.7, last published: 4 months ago. Start using browser-sync in your project by running `npm i browser-sync`. There are 2300 other projects in the npm registry u..
WEB 2022. 3. 2. 16:16
[WEB] <iframe> 태그를 화면에 보이지 않게 하는법

보통은 1. width, height값을 0으로 준다 2. display:none; 의 방법을 사용한다. 1번의 경우 지난번 프로젝트에서 사용한 방법인데(서버에 유저가 입력한 값 저장하기 위해 통신), 통신이 정상적으로 이루어져 값이 저장됐다면 특정 이미지를 화면에 꽉 채우려 했다. 그런데 top:0; left:0값을 줘도 꽉 차지 않고, 공백이 발생했었는데.. 우악스럽게 CSS를 짜서 어찌저찌 넘겼다. 2번의 경우는(크롬 브라우저 기준) iframe에 속성이 적용되지 않는다. 엄밀히 말하면 적용이 안되는 것이 아니라, iframe 표시를 위해 html코드가 생성되는데, 여기에 display:none;을 추가하는것 보단 가리고 싶은 태그에 visibility:hidden 속성을 추가하는것이 훨씬 간단하다.
WEB 2022. 2. 22. 07:00
PC, 모바일 Modal창 화면 스크롤 방지

보호되어 있는 글입니다.
WEB 2022. 1. 19. 17:15
[webpack] Plugin, Wrap up, Code Splitting

보호되어 있는 글입니다.
WEB 2021. 12. 13. 15:38
[webpack] 웹팩 개념, Entry, Output, Loader,

보호되어 있는 글입니다.
WEB 2021. 12. 10. 18:58
Prev 1 2 3 4 5 ··· 7 Next