분류 전체보기
-
dev 로 merge 했어야 했는데 main 으로 머지했을때의 대처법git & Github 2023. 5. 23. 21:16
문제상황 : dev로 merge 했어야 했는데 main 으로 merge 해버렸다. 어떻게 대처해야할까? 1. 먼저 merge 한 pr 에 들어가 revert 를 통해 머지했던 커밋들을 분리시켜 새 pr 을 생성한다. 2. vscode 로 넘어가 main 을 pull 땡긴 후 reset 을 진행한다. (내가 원하는 커밋 위치로 돌아가는 행위) - git reset --hard [이동하고 싶은 시점의 커밋 해시 값] - git push -f origin main 강제로 밀어버린다. - 정말 위험하니 꼭 확인하도록 이전 커밋들 죄다 날려버림 revert 했는지 확인꼭 하세요!
-
async await , then catch (feat. tryCatch)axios 2023. 5. 11. 17:00
openWeather api 를 이용해 데이터를 전송받는 일을 비동기로 처리한다. 처음엔 try catch , then catch 가 뭔지 혼동스럽고 그냥 돌아가는데로 사용했는데 어떤 분덕에 확실히 이해하게 되었다. callback 지옥을 해결하기 위한 Promise 가 등장하고 Promise then ...then ...then ...then 을 조금더 편리하게 쓰기 위한 async await 가 등장했다. 이 async await 와 함께 try Catch 구문을 사용하면 에러핸들링도 가능하다! 일단 내가 작성했던 첫번째 코드를 보자 import { useEffect, useState } from "react"; import axios from "axios"; const WeatherHook = (p..
-
전역상태관리 Recoil (feat.ContextAPI) 아티클React/Recoil 2023. 5. 2. 21:05
0. 본격적인 Recoil 소개에 앞서 Recoil, ContextAPI 같은 전역상태관리 툴을 왜 사용하는 걸까? 프론트엔드에서 상태(State)란 컴포넌트 내부에서 관리되며 웹앱의 렌더링에 영향을 미치는 객체이다. 처음 리액트 앱을 npm에서 실행하면 couter가 시작되는데 여기서 + 를 누르면 증가하고 -를 누르면 감소하는 그 "숫자" 가 바로 상태의 형태로 관리된다는 말이다. 상태의 종류에는 총 3가지로 나눌 수 있는데 지역상태 : 하나의 컴포넌트 내부에서만 관리되는 상태로 , 해당 상태를 다른 컴포넌트들과 공유하지 않는다. 컴포넌트 간 상태 : 하나의 상태를 여러가지 컴포넌트에서 사용되고 변경되며 관리되는 모습을 보여준다. 이러한 상호작용을 위해 바로 "Prop Drilling" 의 방식을 사..
-
div 안에 text 요소가 넘치면 줄바꿈이 되는데 안되게 할 수는 없어?Html & CSS 2023. 3. 25. 04:00
📌 chatGpt의 답변 CSS의 white-space 속성을 사용하여 텍스트의 줄바꿈을 제어할 수 있습니다. white-space 속성을 nowrap으로 설정하면 텍스트가 넘치더라도 줄바꿈이 되지 않습니다. 다음은 예시 코드입니다: div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 위의 코드에서 div는 넘치는 텍스트를 포함하는 요소의 선택자입니다. white-space: nowrap 속성은 텍스트가 한 줄에만 표시되도록 하고, overflow: hidden 속성은 넘치는 부분이 잘리도록 합니다. 마지막으로 text-overflow: ellipsis 속성은 넘친 부분에 대해서는 생략 부호를 표시하도록 합니다. 이렇게 작성하면..
-
flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책!Html & CSS 2023. 3. 25. 03:56
📌flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책! 처음엔 border-collapse : collapse 로 해결하려고 했는데 이건 표속성이란다..... 그래서 ChatGpt에게 물어보았다. border-collapse 속성은 표(table) 요소에서만 사용되며, collapse 값은 경계선이 붙어서 보이지 않도록 하는 속성 값입니다. flex 속성과는 관련이 없습니다. flex 레이아웃에서 경계선이 겹치는 문제를 해결하려면, border-collapse 대신 box-shadow 속성을 사용할 수 있습니다. box-shadow 속성은 요소의 경계선 대신에 그림자를 표시하는 속성입니다. 예를 들어, 아래와 같은 코드로 box-shadow 속성을 적용할 수 있습니다..
-
이벤트 버블링과 캡쳐링 , 이유와 방지법은 ?Javascript/JS 문법 2023. 3. 21. 15:53
📌 이벤트 버블링 - 아래요소에서 위로 전파되는 현상 거품처럼 위로 전파된다고 생각하면 외우기 편함 예시 ) querySelectorAll('div')를 통해 박스를 가져온 후 forEach로 addEventListener 를 달아줌 const logEvent = (event) => { console.log(event.currentTarget.className); } var divs = document.querySelectorAll('div'); divs.forEach((div) => { div.addEventListener('click', logEvent); }); 문제 : 나는 three 를 눌렀을 뿐인데 two , one 까지 출력되어버림 이유 : 이벤트가 부모 요소까지 전달된다.... 라고는 하는..