본문 바로가기

전체 글139

[CSS] CSS 수정 시 캐쉬 충돌 방지 하는 방법 (쿼리 스트링) [펌] 결론 위와 같은 방식으로 css 주소 뒤에 Query String을 붙여준다. ?ver=1.1 일 필요는 없고 아무거나 붙여도 된다. 관용적으로, 이전 버젼과 다음 버젼을 구분하기 어렵기 때문에 ver=1.1 .. 1.2 ..1.3 이렇게 붙이는 것을 권장할 뿐.. after 라고 쓰든.. spring이라고 쓰든...기존 호출문과는 다르게 해서 css를 다시 호출해야 한다고 인식만 하게끔 하면 된다. 퍼온 글 웹사이트를 운영하다보면 웹사이트의 디자인이나 프론트엔드 동작을 바꾸기 위해서 CSS 또는 javascript 파일을 수정하는 일이 종종 생기게 된다. 이때 수정된 파일을 서버로 배포하더라도, 기존 웹사이트를 이용하던 유저의 브라우저 캐쉬때문에 수정된(fresh) 파일을 다운로드 하지 않고 캐쉬를 이.. 2021. 5. 25.
[Basic] 특정 기간 내 배너 띄우기, 현재 시각 확인 하기 배경 홈페이지가 업데이트되면서 리뉴얼을 시작하게 되었다. 이에 따라 배너를 특정 기간에 띄워야 할 필요가 있었다. 이를 해결하기 위해서 코드를 찾아보았었다. 코드 const startDate = new Date ("2021-05-24T00:00:00z"); // 뒤에 z를 안붙이면 IE10 > 일 경우, 에러. 꼭 붙이자 const endDate = new Date ("2021-05-31T23:59:59z"); const now = new Date(); // 현재 날짜 확인 const readyStartDate = new Date ("2021-06-01T00:00:00z"); const readyEndDate = new Date ("2021-06-01T10:00:00z"); if(endDate > now.. 2021. 5. 21.
[Basic] 깊은 복사, 얕은 복사 shallow copy, deep copy, slice, JSON.parse, JSON.stringify 개요 자바스크립트는 근본적으로 깊은 복사가 불가능하다. 이를 해결하기 위해 아래와 같은 짓을 한다. 기초적 방법 let tempJson = JSON.parse(JSON.stringify(json)); 위 방법이 깊은 복사를 하기 위한 가장 기초적인 방법이다. 배열은 slice로도 깊은 복사가 가능하다. (1 depth 배열인 경우) 그러나, 객체인 경우는 위 방식을 택하거나, 현재 기준으로 2가지 라이브러리를 사용하는 방법이 있다. Lodash 와 Ramda 깊은 복사를 할 수 없어서 만들어진 라이브러리인데, 기본적으로 처리하는 방식은 같은 것으로 보인다. (자바스크립트의 언어적 특성 때문에 이런 돌려차리를 해야 한다는 게 우습긴하다.) 자세한 내용은 아래 출처를 이용합시다. 출처: https://bba.. 2021. 5. 20.
[HTML] Form TAG에서 name의 의미 어제 antd를 react 에서 사용하다가 Form 태그에서 자꾸 에러가 났었다. form에 있는 내용을 지우는 것이였는데, 지워지지 않았었다. 원인은 form.item 마다 설정되어 있던 name을 삭제해서였다. form 컴포넌트나 태그를 사용할 때, name을 사용하지 않으면, form의 정보를 핸들링 하는 것이 불가능하다. 바꿔 얘기하면, form을 핸들링할 필요가 없으면, name을 설정하지 않아도 무방하다는 뜻이기도 하다. 어찌보면, 단순하고, 기초적인...그러나 알아차리기 힘든. 습관처럼 작성하는 코드였을 수도 있기 때문에 헤매이다 어제 간신히 발견하게 되었다. console에도 버그가 따로 찍히지 않아서 완전 헤매었지...ㅠㅠ form.resetFields(); 도 먹히지 않았었다..ㅠㅠㅠㅠ.. 2021. 4. 30.
[React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. 2021. 4. 28.
[open source] react quill (text editor) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com quill텍스트에디터 를 기반으로 오픈소스 활동을 조금했다. Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web... 2021. 4. 16.

티스토리툴바