본문 바로가기

Front-End94

React lifecycle 함수형 컴포넌트 렌더링 트리거 1. Props또는 state 변경시 2. 부모 컴포넌트 리렌더링 렌더링 순서 초기 렌더링 컴포넌트 업데이트 state, props 변경시 리렌더링 시작 함수형 컴포넌트 전체 함수가 다시 실행( JSX 코드 반환 ) (반환된 JSX 코드는 createElement함수를 통해) 새로운 VDOM 트리로 변환(생성) VDOM 비교 VDOM 업데이트 실제 DOM 업데이트: DOM에 반영하여 브라우저에 업데이트 custom Hooks의 경우, JSX를 반환하지 않고 VDOM을 생성하지도 않는데 useEffect가 Mount, Update, unMount일 때도 실행된다는 건 부모의 컴포넌트에서 리렌더링 되었기 때문 2023. 12. 15.
CSS Specificity (CSS 특이성. 선택자 우선순위 점수) https://www.w3schools.com/css/css_specificity.asp CSS Specificity W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 우선순위 점수는 0점과 1, 10, 100, 1000점으로 유일하다. 1000점과 100점 0점은 독보적이기 때문에, 딱 하나씩만 배정된다. 기억해야 할 것은 10점과 1점임. 인라인 선언: 1000점 id:.. 2023. 12. 15.
fetch axios header proxy Proxy URL CORS까지 사건의 발단 ( subtitle : 알찬 주말 계획 ~! → → → ? ) fetch와 axios 차이점? (axios를 쓰는 목적? 이유?) fetch https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch fetch 스펙 문서 (Nooooo... ) https://fetch.spec.whatwg.org/ axios 면접 질문 검색 Promise axios 특징 https://axios-http.com/docs/api_intro Instance Interceptor proxy (JSON 자동 변환) headers에 대한 의문 그나저나, API 요청에 헤더는 왜 필요하지??? axios config 읽기 (잘 모름. 어떤 속성이 있는지 본.. 2023. 12. 11.
husky, commitlint error 처음에 커밋 메시지에 오류를 내고, commitlint가 잘 동작하는지 확인해봤다. error 발생(잘 됨) 그래서 다시 정확하게 feat라고 작성했는데, 오류??? 심지어 에러 문구가 input의 featt: 1이 문제라고 보여지고, 몇번을 제대로 입력해도 같은 상황 에러의 마지막 줄을 보면, 강제 종료의 원인을 알 수 있다. husky - pre-commit hook exited with code 1 (error) .husky > pre-commit 파일에 적었던 npx --no-install commitlint --edit "$1" 내용을 삭제하니 해결되었다. .husky > commit-msg 에만 작성해야 했었던 것 npx husky add .husky/commit-msg 'npx --no-in.. 2023. 12. 2.
prettier [파헤치기 편] 왜why 내 Prettier는 이상하게 동작하는 걸까? 빠르게 문제 해결 부분만 보기 문제 추측 가능한 원인 해결 npm 으로prettier 설치하지 않았는데, 강제 포맷팅이 된다 1. prettier extension 설치 2. default formatter로 prettier 지정 1. root 경로에 .vscode 폴더를 생성 2. 그 하위에 settings.json 파일 생성 3. 아래 내용을 입력 후 저장 { "prettier.requireConfig": true } npm으로 prettier을 설치했는데, 옵션을 아무것도 설정하지 않은 경우. {} 이 상태. 왜 프리티어가 적용되는 걸까? prettier의 기본 속성이 적용 .prettierrc파일에 포맷팅하고 싶은 속성과 옵션을 설정한다. h.. 2023. 11. 27.
position relative: 1. 문서의 흐름상 배치 2. 자기자신의 원래 위치를기준으로, 오프셋 적용! (다른요소와 겹칠수 있음=== 오프셋은 다른 요소에 영향이 없다=== 공간은 static일때와 같다) absolute: 1. 페이지 레이아웃에 공간 배정되지 않음===다른 요소와 겹칠 수 있음 2. 부모 요소중 relative absolute fixed 2023. 11. 19.
fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful Using the Fetch API - Web APIs | MDN The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across th.. 2023. 10. 31.
vscode discard changes 만약 실수로 discard changes를 클릭한 경우, 당황하지 않아도 된다. discard changes가 staging과 매우... 가깝게 붙어있다는 사실을 처음 알았다... 휴지통을 찾아보기도 했지만 없었다. 변경내용 삭제라 그런가? 파일을 vscode에서 열어 놓은 경우에는 ctrl+s로 복구할수가 있다. (마치... --hard했을때 … 심플하게 복구할 수 있는 방법과 같달까...) 팀원분에게 도움을 드리기 위해 아래의 검색어로 검색해보았다.vscode to recover when click discard changeshttps://stackoverflow.com/questions/43541167/how-do-you-undo-discard-all-changes-in-vs-code-git How.. 2023. 10. 17.
commit이 중복되어 push된 경우(hash value만 다르고 commit 메시지는 동일) 똑같은 커밋이 중복으로 생긴 원인..이 뭘까? 일단.. 커밋 해시가 달랐다. 똑같은 메시지인데, 커밋 해시만 차이가 있다. 내 커밋 돌려줘~! 가설 1. push를 한 결과 원격에 이미 커밋 기록이 있는데, 내가 rebase를 해서 그런가? 2. stash 해서..? 3. rebase를 하게되면 커밋 해시가 새로운 걸로 바뀐다고 알고있다. 일단 중복 커밋을 삭제하기 위해 reset --hard를 할 시간이다.. 너무 무섭다.. 마음의 준비를 하자.... 문제1 rebase를 하며 로컬에서 커밋이 합쳐져서, 커밋이 중복으로 생성됐다.(해시값만 다르고 커밋 메시지는 동일) 해결 방법: 그냥 이후에 생긴 커밋은 없애기 위해 원하는 commit으로 head를 돌린다. git reset --hard [해시값] 그.. 2023. 9. 23.

티스토리툴바