본문 바로가기

분류 전체보기361

Git(39) 로컬 브랜치 덮어쓰기 내가 작업하던 브랜치에서 다른 분이 작업한 브랜치를 덮어씌워서 업데이트 사항을 확인하다가 꼬여버렸다. 내가 작업하던 브랜치로 돌아가려고 git reset @HEAD{n} 으로 시간을 되돌리니 얘는 내가 한 커밋만 돌아가버려서 다른 브랜치에서 받아온 커밋들은 사라지지 않고 남아 있었다. 한마디로 업데이트는 업데이트대로 되고 내 작업물은 작업물대로 없어져버린 상황이다. 아예 브랜치를 받아오기 이전, 특정 커밋 시점으로 완벽하게 돌아가고 싶다면? Git(39) 로컬 브랜치 덮어쓰기 커밋 히스토리를 보고 돌아갈 시점을 찾는다. checkout 해서 그 시점으로 돌아간 후, 해당 브랜치에 체크아웃을 해줘서 그시점의 브랜치로 돌아가자 $ git llg // 커밋 히스토리를 나름 가시적으로 볼수있다. 여기서 필요한 .. 2023. 2. 9.
웹최적화 - Reflow 와 Repaint Reflow ? Repaint ? 브라우저 렌더링 과정을 공부할 때 나왔던 단어들이다. 그 전까지는 그렇게 깊이 생각해본 적은 없었지만, 최적화를 공부하면서 이들의 존재감에 대해서 깨닫게 되었다. 이들은 무엇이고 왜 존재감이 생겼을까? 브라우저 렌더링의 과정을 간단히 알아보면 dom + cssom 트리를 각각 만들어서 → 렌더 트리를 만들어내고 → 각 요소들의 사이즈를 계산해 자리를 배치하는 레이아웃을 거친 뒤 → 그 레이아웃 요소들에 페인트하는 페인트 단계를 거친다 → 그 모든 걸 조합하는 컴포짓해서 화면에 내보낸다 웹최적화 - Reflow 와 Repaint 여기서 css 요소가 변경이 되면 Reflow 와 Repaint 를 거친다. Reflow는 이모든 단계를 다시 거치는 것이고 DOM + CSSOM.. 2023. 2. 4.
React(92) useRef 알아보기 (공식문서 정리) 요즘은 공식문서 읽기에 재미가 붙었다. 리액트 beta 공식문서를 통해 기본적인 훅들과 기능들을 다시한번 훑어보며 정리 중이다. 오늘은 useRef 에 대해서 읽어보았다. 그러다 추억의 포스팅도 발견했다. 2년 전쯤 정리했던 포스팅인데 정말 무지했음을 다시 한번 느꼈다. (화이팅🥲) React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 us devbirdfeet.tistory.com React(92) useRef 알아보기 (공식문서 정리) useRef 는 렌더링이 필요하지 .. 2023. 2. 1.
React(91) 탭 클릭시 지정 영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 이 녀석은 반응형 탭에 대한 고민의 흔적이 담긴 꽤 오래 묵혀놓은 포스팅이다. 재작년에 짰던 코드라 부족할 수 있지만 최대한 고쳐 올려보겠다. 상품 판매 페이지의 중간에 메뉴 탭이 붙게 되는데, 이 메뉴를 클릭시 해당 내용이 있는 곳으로 스크롤이 이동한다. 또한 그냥 스크롤 다운 하다가 해당 영역이 있는 지점에 들어서면 이번엔 반대로 탭이 해당 메뉴로 이동한다. 그럼 구현하러 가보자 ! React(91) 탭 클릭시 지정영역으로 스크롤 이동 / 스크롤시 해당 탭 자동선택 아래 상품 상세 페이지에는 포트폴리오라는 탭이 보인다. 이 탭을 클릭해보자 요렇게 스크롤이 딱 포트폴리오를 설명하는 부분으로 이동한다. 반대의 경우도 마찬가지이다. 포트폴리오를 설명하는 부분으로 스크롤을 내리다보면 해당 영역으로 진입하면 .. 2023. 1. 25.
React(90) useEffect 알아보기 (공식문서 정리) React 를 만지면서 useEffect 는 사실 1년 이상을 동거동락해왔다. 하지만 처음 강의를 들을 때 공부하거나 실무에서 그때그때 얻은 조각난 지식말고는 제대로 아는 게 없다는 것을 깨닫고 부끄러웠다. 그래서 리액트 공식문서 구버전과 신버전(beta) 을 참고하여 useEffect 에 대해서 조각난 퍼즐을 맞춰 정리해보았다. React(90) useEffect 에 대해서 (공식문서 정리) useEffect 는 리액트 16.8 에서 도입된 Hook(리액트의 내장함수)이다. 코드를 짜다보면 화면이 새로고침되거나(렌더링) 데이터가 뭐가 바뀔 때(업데이트), 어떤 함수가 실행되야 할 때가 있다. 얘는 그런 needs 가 탄생시킨 함수이다. side effects 는 렌더 후에 일어나는 코드의 실행을 말하고.. 2023. 1. 19.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
JavaScript - 소수구하기 (에라토스테네스의 체) 소수는 자기 자신과 1 로만 나뉘어지는 수이다. 예를 들어 5 는 1 로만 나뉘어 질 수 있다. 자, 소수를 구하는 판별식을 정리해보았다. 이제 당신은 이걸 가지고 응용하기만 하면 된다 :) JavaScript 에서 소수인지 검사하기 위해서는, For 문으로 검사를 할 때, { number 이 0, 1 이면 탈락 → 1은 소수가 아님 number 가 2 이면 소수이다 → 2은 소수이다 number % index === 0 이라는 조건에 들거든 탈락 → 자기자신과 1로만 나뉘어져야 된다는 소수의 조건 성립이 X) } 방법 1) 반복문 함수 판별식 함수는 보기에 너무 간단하다. 하나하나씩 다 돌려서 소수에 부합하는 것을 찾아낸다. 시간복잡도는 O(N) 으로 무난하지만, 해당하지 않는 숫자까지 일일히 하나하나.. 2022. 12. 30.
React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) 게시글 작성 시간을 현재시간 기준으로 표시해주는 유틸성 함수를 만들어 보려고 한다 moment.js 라이브러리를 활용하면 아 - 주 간편하게 시간계산함수를 만들수있다 그럼 몇 분 전, 몇 시간 전, 몇 일 전 을 표시하는 함수를 만들어보자 결과화면 미리보기 React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) Date 객체로 작성시간을 매개변수로 받아오자 today 날짜를 구한뒤 diff 내장함수로 day, hour, minute 의 차이를 구하면 된다. export const getDayMinuteCounter = (date?: Date): number | string => { if (!date) { return ''; } const today = moment(); const pos.. 2022. 12. 28.
JavaScript - e.preventDefault() 와 e.stopPropagation() 의 차이점 특정 이벤트를 막고 다른 동작을 실행해야 하는 상황이 있다. 아래와 같이 안의 를 클릭하면, onClick 이벤트가 실행되야 하지만 현실은 다르다. href 를 통해 링크로 이동한다. console.log('클릭'}/> 그 이유는 이벤트 버블링 때문이다. 자식 → 부모 순으로 이벤트가 실행이 된다. 자식(온클릭) 이벤트 후, 부모(링크 이동) 이벤트까지 순서대로 실행되는 것이다 이럴 때 우리는 e.preventDefault()와 e.stopPropagation() 를 사용해서 부모까지의 흐름을 끊어주어 해결하였다. 그 시점에서 정확히 그 둘의 차이가 무엇인지 궁금해졌다. 실제 버블링 이슈를 어떻게 해결했는지 궁금하시다면 ... ? (아래 포스팅 클릭 ↓↓↓) React(55) 겹친 영역에서 자식 이벤트만.. 2022. 12. 26.
반응형

티스토리툴바