profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.
post-thumbnail

Passive Event Listener

최근 업무에서 특정 React 컴포넌트의 기본 wheel event의 동작을 막아달라는 니즈가 있었다.위 내용을 처리하면서 대충 알고있던 Passive Event Listener 대해서 조금 더 자세히 들여다보게 되었다.브라우저의 기본동작에 영향을 주지 않는 Event

2022년 4월 13일
·
0개의 댓글
·

2022.03.29

https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%

2022년 3월 29일
·
0개의 댓글
·

S3, cloudfront 캐시 테스트

문제 새로 업데이트시킨 파일이 cloudfront 상에서 정상적으로 반영이 되지않는 이슈가 있다. 캐싱과 관련된 문제임은 확실해보이는데, 해결이 제대로 되지 않는다. 환경 일반적인 aws cdn 환경으로, cloudfront --- s3 bucket 구조이다. 추측

2022년 2월 15일
·
0개의 댓글
·

2021.01.26

IME가 필요한 문자의 경우 onChange 이벤트를 사용하게되면 마지막글자를 제대로 읽어오지못한다. onInput 이벤트를 사용하자.https://webruden.tistory.com/485

2022년 1월 26일
·
0개의 댓글
·

npm 스크립트에 환경변수넘기기

프로젝트를 AWS 코드파이프라인에서 빌드할 때, AWS가 생성하는 환경변수인 빌드 hash 값을 프로젝트 내에서 사용하고싶었다.빌드스크립트 (Shell) -> npm 스크립트 (node)package.jsonapp.jsapp2.jsbuild.shoutput(termin

2022년 1월 24일
·
0개의 댓글
·

자주쓰는 명령어 정리

remote repository로 올리기전에 커밋메세지를 정리하는 습관을 들이자.\\다른 개발자와 한 브랜치에서 공동작업을 하고있을 경우, 이미 올라간 커밋메세지는 건들지말자 소스가 꼬여버린다.https://gist.github.com/ZeroDragon/67

2022년 1월 22일
·
0개의 댓글
·

2022.01.06

<input type="text" readonly />이더라도 IOS12에서는 키패드가 없는 하단바가 생성이된다.이를 막기위해선 onfocus="this.blur();" 를 추가하여 focusing 되는 즉시 blur가 되도록 하자. (꼼수)master에 feat

2022년 1월 6일
·
0개의 댓글
·

2021.12.13

Http 요청에 Cookie가 제대로 실려나가지 않는 이슈가 있다.아직 미해결중이다... 내일와서 다시 봐야겠다. 테스트과정 withCredentials: true 를 해주었는데도 cookie가 안실려나감local에 http를 사용하는 express 서버를 띄우고, A

2021년 12월 13일
·
0개의 댓글
·

globalProperties

vue3에서, App instance에는 Application Config라는 객체타입의 데이터가 있다.말 그대로 Vue 앱의 환경과 관련된 정보가 담겨있는 객체다.그 중 globalProeprties 라는 프로퍼티는 데이터는 모든 컴포넌트에서 this로 쉽게 접근이

2021년 12월 8일
·
0개의 댓글
·

Vue 공부 (Essential Part)

Vue3 사용을 위해 공식문서를 다시한번 읽어보면서 놓쳤던 부분에 대해 정리한다.created 되는 시점에 호출된다.data properties가 return한 Object를 Vue가 Vue의 Reactivity system으로 감싼다.return한 Object 는 v

2021년 12월 2일
·
0개의 댓글
·

상호작용 콘텐츠의 올바른 용법

사용자와 상호작용하기위한 태그들을 알아본다.타겟 URL 설정이 가능하면 <a>를 없으면 <button>을 사용하자.페이지 새로고침이 일어나지않는 해시값에 의한 URL이 변경이라도 <a> 태그여야 된다.같은 동작이라도 URL이 변경된다면 <a> 변경

2021년 11월 25일
·
0개의 댓글
·

HTML 개요 알고리즘 이해

Outline, Heading 에 대해 알아본다.서점에서 목차를 보고 관심있는 주제가 있는지를 확인하듯이, 검색엔진도 Heading을 주요하게 본다.Heading과 Section Element로 구현한다.HeadingMaps Extension을 사용하면 문서의 개요를

2021년 11월 24일
·
0개의 댓글
·
post-thumbnail

검색 엔진 밥상 차려주기

HTML을 의미에 맞춰서 잘 작성하면 검색 엔진에 더 잘 노출될 수 있도록 만들 수 있다.검색 결과 페이지 노출 대비 클릭률페이지 타이틀메타 디스크립션로딩 속도콘텐츠의 양, 질, 개연성백링크: 다른 웹 페이지로부터 인용(링크)되는 횟수사용자 경험 \- CLS \-

2021년 11월 24일
·
0개의 댓글
·
post-thumbnail

HTML을 어떻게 공부해야 하는가

문서의 골격을 제공문서의 의미를 전달분위기 느낌까지 전달 (문서를 어떻게 읽어야하는지에 대한 느낌)예를들어 웹에서 의사소통을 할 때, 텍스트만 상요한다면 강조되는 부분이나 분위기를 전달할 수 없다.https://w3schools.comhttps://d

2021년 11월 24일
·
0개의 댓글
·

Iterable Object

Iterable Object 에 대해 정리해본다. Iterable이란 "반복가능"이라는 사전적인 뜻을 갖고있다. 즉 Iterable Object는 "반복 가능한 객체"는 의미다. 순회가 가능한 데이터 컬렉션이라고 이해해도 좋을 것 같다. JS에서는 줄여서 Itera

2021년 10월 30일
·
0개의 댓글
·

2021.10.26

slot에는 v-show 사용이 불가능하다.v-show는 해당 DOM을 그려놓고 display를 none으로 처리해준다.내용이 동적으로 변하는 slot에 대해서는 어떤 element를 display: none 처리해야할지 알 수 없기때문에 사용이 불가능하다. v-if로

2021년 10월 26일
·
0개의 댓글
·

2021.10.20

과제중이다.마크업은 거의 안해보았는데, 이번기회에 마크업도 열심히 공부할 수 있도록 해야겠다.assets를 다 받는다. \- icon은 깨지지않도록 svg나머지는 특성에 맞는 이미지파일로눈으로 확인하여 큰 영역별로 나눈다. \- 아토믹디자인을 적용한다면 베이스가되는

2021년 10월 19일
·
0개의 댓글
·

ReactHookForm Submit 테스트 이슈

Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다.form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로 감지못하는 이슈가있었다. 거의 3시간을 소요한 것 같다... ㅠㅠ원인은 간단했다.

2021년 10월 17일
·
0개의 댓글
·

테스트 방법에 대한 고민

최근 프론트엔드 테스트에대해 관심이 생겼다.https://www.youtube.com/watch?v=q9d631Nl0_4이 영상이 매우 유익한 것 같다.React test를 위한 도구로 jest 프레임워크 위에서 testing-library/react, Enz

2021년 10월 17일
·
0개의 댓글
·

Typescript React 환경 구성해보기

아래의 환경을 포함하는 React 개발환경을 구성해본다.만들어져있는 보일러플레이트를 사용해도 되지만, 한번쯤은 직접 처음부터 해보는게 의미가 있다고본다.typescriptreact-routerreduxjestcypressCRA를 이용하여 typescript를 지원하는

2021년 10월 15일
·
0개의 댓글
·