분류 전체보기 225

useRef vs 변수 사용 state 관리 차이

프로젝트 진행하면서 useRef를 사용해야하는지에 대해서 검토하기위해서 여러 정보를 얻을때 꼭 useState와 useRef의 비교를 하고 그에 대한 글만 있다. 많이 써봤기때문에 당연히 차이는 리랜더링 되고 안되고 차이, input 값을 참조할수있다는 점 등에 대해서는 알고 있었지만 나는 궁금했던게 useRef를 쓰면 ref의 current 값이 변하더래도 리렌더링 되지않는다는면에서 useState와 차이를 가지고 쓸데없는 렌더링이 없는 경우를 생각해서 쓴다 라고했는데 그러면 useRef와 일반적인 변수선언할당으로 관리하는 state차이는 무엇이지? 라고 생각했다. 어차피 리랜더링이 필요없다면 useRef를 쓰던 일반 변수에 값을 사용하면 되지않을까? 굳이 useRef를 쓸필요가 있냐가 나의 관점이였다..

[TIL] 2022/7/29 피벗모니터 DELL P2722H

현재 재택근무할때 나의 작업장비 셋팅 상황이다. 왼쪽에 요번에 새로산 DELL P2722H 모니터로 피벗 새로 모니터를 사용하고싶어서 사게되었다. 좀더 싼걸로 사거나 24인치로 살까 하다가 모니터는 거거익선 이라는 말도 있고 어차피 새로사는거 후회하지않게 사자 해서 모니터하면 DELL이라해서 27인치로 고르게 되었다. 나중에는 모니터암도 사서 모니터위치들도 좀 바꾸고 하고싶다. 셋팅하고 코드를 잠까 보면서 어떤가 봤는데 처음에는 세로다보니깐 쳐다봐야하는 위치가 위로 가면서 뭔가 목이나 눈에 피로감이 더생길거 같다고 생각했는데, 위치도 바꾸고 의자 각도도 변경하면서 나름 괜찮은거 같다. 이제 코드볼때나 진행된 화면을 테스트할때 보다 쾌적한! 환경에서 할수있어서 좋다고생각한다.

TIL 2022.07.09

[React] useEffect 2번 실행되는 이유

다음과 같이 useEffect를 사용하여 jQuery메서드 on 으로 해당 요소를 이벤트 등록을 해주었다. 그런데 해당 태그를 눌러 이벤트가 발생하면 2번이 실행돼서 왜이러지? 찾아보니깐 useEffect부분에서 두번 실행돼서 등록이 2번 되니 한번 클릭해도 두번의 이벤트가 발생하는 것이였다. 처음엔 랜더링이후 state값이 변하는게 있기때문에 한번더 했다라고 생각했는데, 해당 컴포넌트에서는 상태값을 쓰지도 않기때문에 이에 해당해서는 안되었다. 그래서 useEffect이 한번만 실행해야하는데 2번이 되는 이유를 찾아보니 index.js에서 strictMode가 존재하면 두번 랜더링된다고하는데 이 strictMode는 검사 도구라고 생각하면되고 개발 모드에서는 오류를 잘잡기위해 두번씩 렌더링을 한다고 한..

[Javascript] $(Dollar Sign), _ (Underscore) 식별자

코어자바스크립트를 보다가 변수이름앞에 $을 붙이거나 _ 가 있는것을 보고 이게 무슨의미인가 찾아보았는데 단순히 식별자 로써 사용할수있다고한다. 다른 특수문자나 숫자 등은 맨앞에 붙일수없지만 $(Dollar Sign)와 _(Underscore)는 사용할수있다고 한다. 그런데 관례(?)적으로 변수앞에 $을 쓸때 보통 document.getElemetById 를 쓸때 사용한다고도 하고 jQuery 객체를 담을때 사용한다고 하는데 이렇게 들으면 애매하지만 예시를 보면 언제 쓰이면 좋은지 알수있다. 보통 변수안에 값을 할당해줄때 string, number, function, object 형식으로 이루워진다. 일반적인 변수명과 할당 const a = 1; let b = 'a'; const c = function (..

[TIL] 2022/7/5 Macbook Pro와 아이들..

요번주는 회사에서 노트북을 받았다. 원래 M2 나오면 그걸로 장만해준다고 했지만, 개인 노트북으로 쓰는건 무리도 있고 개인과 업무는 별개로 쓰고 싶었는데 이사님이 쓴지 얼마 안된 16인치 맥북프로 m1 max 주시곤 좋은거 줬으니 잘하겠지 하며 농담을 하신게 참 재밌었다 하하하하하; 다행히 일 있지않는 이상은 출근은 일주 한번만 하게 됐는데 회사에서 쓸 마우스랑 키보드가 없어서 요번에 장만해서 가져갔는데 집에올때 맥북프로까지 가져가면 너무 무거울꺼같아서 맥북프로는 다음 출근때 가져가기로했다. 나름 가볍고 블루투스로 선없이도 쓸수있는 애들을 알아보니 로지텍 mx master 3s 맥북용으로 많이들 쓰고 좋다고해서 사고 키보드는 한성 무접점키보드 gk888b, 82키로 샀는데 휴대성도 좋고, 보글보글 사운드..

TIL 2022.07.05

[Javascript] 클로저

해당 함수 실행컨텍스트가 종료된 이후에도 소멸하지않고 호출하여 내부함수가 외부 함수의 변수를 참조 접근하여 사용할수 있게 하는 특성을 갖는 현상/함수 해당함수에서 함수자체를 참조함으로써 outer인 외부함수의 실행 컨텍스트가 종료되는 시점에서 가비지 컬렉터의 수집대상에서 제외되어 해당 LexicalEnvironment의 정보를 사용할수 있게 한다. 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 예시 코드를 보면서 비교하면 더욱 이해하기 쉽다. 1) 기존 일반함수, 내부함수 사용 위와같이 inner함수를 outer함수에서 return 해주고 outer2에 담아 console.log에 각각 찍어보면 inner..

[TIL] 2022/06/30 Github Milestone 스프린트(sprint)

요번주에 재밌다고 생각한 부분이 github의 마일스톤을 이용해본 것이다. 기존에 Projects를 통해서 push, PR, merge 할때 옆에 project선택해서 해본적이 있는데 그땐 그냥 업무적으로 뭘 했다 체크할수있다, 관리하기 좋다라고 듣고 진행하기로해서 써봤지만 실질적으로 그런 장점을 느낄수없었고 그냥하니깐 기능할때마다 하나씩 쌓아서 기록한다라는 느낌 밖엔 없었다. 그런데 요번에 프로젝트를 진행하면서 스크럼방식으로 기능단위로 나누고 issue를 만들어서 진행하는건 물론 마일스톤을 이용하면 그 프로젝트 안에서도 단기 목표를(sprint) 설정하여 percentage로 얼만큼 진행하고 끝마칠수있는지 due도 정하는등 실질적으로 내가 작업하는 일정과 그 작업을 위해 얼마나 쪼개고 효과적으로 진행할..

TIL 2022.06.30

[TIL] 2022/06/25 출근 첫주 회고록 feat. 항해99

화요일부터 첫 출근하는날 회사 현재 시스템이 원래 풀재택이란 엄청난 혜택이 있었는데(이미 다른사람들은 다 풀재택이였다)입사 적응을 위해 일단은 당분간 3일 출근, 2일 재택 하기로 했었는데 첫날 회의에서 다른팀원들 또한 대면업무 vs 재택에 대한 회의가 좀 길어졌다. (제발 출근해도 2틀만 했으면.. 나도 그렇고 다들 거리가 멀어서..) 입사 자기소개를 하고 이사님이 현재 서비스 로직, 어떤 시스템으로 교체/관리 하는지에 대한 설명을 듣고 어떤식으로 업무를 분담할지 정하였다. 내 업무는 기존 레거시 시스템 서비스를 리액트로 변경 고도화작업(포팅, porting)을 진행하기를 원했고 이에 맞는 WBS 작성, 회사 목표에 따른 개인 OKR 작성 미션을 받았다. 적응 기간이긴한데 아직 OJT 확립은 만들어가는..

TIL 2022.06.25

[TIL] 2022/06/20 회고록

신입 개발자, 뭘 공부해야 하죠? | 원티드 우리는 꼭 엄청나게 훌륭한 개발자가 되어야만 하나요? 계속해서 성장하는 개발자여야만 하나요? 그렇지 않습니다. 물론 성장하는 것 자체는 좋은 일이겠지만, 그러기 위해 한순간도 쉬지 않고 www.wanted.co.kr "제가 첫 회사에 들어갈 때 33살이었어요. 나이가 많아서 오히려 좋다고 하면서 절 뽑아주셨어요. 기존 팀원들과 합이 잘 맞을 것 같았다고 하시더라고요. 그게 원래 10년 차 이상을 뽑는 자리였고 한 분이 이미 채용 확정된 상태였어요. 그런데 회사에서 그분과 저를 붙여놓으면 괜찮겠다고 판단했다는 거예요. 많이 지원하다 보면 그런 경우도 생길 수 있습니다. 쉬운 길은 아니겠지만, 어디선가 나를 알아봐 주기를 바라는 마음으로 계속 노력하시다 보면 맞는..

TIL 2022.06.20

[Javascript] 콜백함수

콜백함수란? 콜백함수는 다른 코드의 인자로 넘겨주는 함수 이다. 콜백함수의 기능을 일상생활 예시를 통해 설명해보자. A 와 B는 다음날 아침 8시에 만나기로 하고 잠을 잔다고 했을때, 약속장소에 가려면 적어도 6시에 일어나야한다. A는 불안한 마음에 수시로 잠에서 깨면서 시계를 확인하고 잠들기를 반복하다가 결국 5시에 이를 포기하고 일어난다. 반면 B는 시계알람을 세팅하고 해당 시간일때 알람이 울리는걸 알기에 쭉 잠을 자다가 해당 시간이 될때 상쾌하게 일어났다. A는 수시로 시간을 구하는 함수를 직접 호출한걸로 볼수있고 B는 시계 알람을 설정하는 함수를 호출하고 호출 당시에는 아무것도 하지않다가 정해준 시각이 됐을때 알람이 울리는 결과를 반환 한다. A의 경우 시계 함수의 제어권은 A에게 있고, 시계는 ..