console.log

오늘은 삼구님(39kg)과 회사 근처에서 점심식사를 했다.이쪽에 면접을 보러 오셨던 삼구님은 만나자마자 면접이 망했다며 씩씩대셨다. 머리부터 발끝까지 정장으로 풀 착장을 맞추신 삼구님은 앙상한 주먹을 꽉 쥐시면서 눈으로 살기를 뿜으셨다.몇년동안 이렇게 입고 면접 온 사람 처음이라고 면접관이 꼽을 줬다며 불쾌해 하셨다. 대략적인 면접 후기를 들었는데, 개인적으로는 꽤나 잘 답변했다는 생각이 들었다. A : 웹이 동작하는 방식을 설명해봐라39 : (웹을 모르지만 대강 이런거 아닐까요 라고 대답합)A : 대충 맞다 A : 캐싱 전략을 어떻게 하면 좋을지 설명해봐라39 : (웹에선 안해봤지만 앱에선 대충 이러니까 웹에서 이렇지않을까요 라고 대답함)A : 대충 맞다 A : 갑자기 닷넷 시키면 어떡할거냐39 : (..

일반 ref와 forwardRef의 차이를 알아보자ref는 보통 포커스나 스크롤이벤트 등 가상 돔을 패스하고 직접 내가 돔노드에 접근하고 싶을 때 쓴다. 그럼 forwardRef는 어떤 상황에서 써야 하나? 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달할때 쓴다. ( 이때 ref 는 자식 컴포넌트를 가리키고 있는 상태가 됨 )그냥 ref 를 전달하면 되는거 아닌가? 라고 생각했지만,ref는 리액트 내부적으로 만든 특수한 프로퍼티이기 때문에 그냥 컴포넌트간 전달이 막혀있다.( console.log()에 찍으면 undefined가 뜸 ) forwardRef는 컴포넌트간 전달을 할수 있도록 만들어져있다. 그래서 부모 컴포넌트에서 자식 컴포넌트의 돔에 직접 접근할때 사용할 수 있는것이다. 사용 방법은 다음과..

나는 노드 버전을 관리할때 nvm을 사용한다.일단 윈도우버전 설치https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com 중간쯤 있는 Assets 에서 다운 받으면 된다. 이번에도 새 노트북에 세팅을 해줬는데, 무난하게 설치후 특정 버전을 다운 받으려했더니 계속 오류가 나는거다.이유는 모르겠음. 그래서 그냥웹에서 수동 설치를 하고 nvm에서 인식하도록 설정해주도록 하는 방법을 선택했다. 어쨌든 설치만 하면 되..

npm i react-intl 다국어 지원기능을 만들어주는 라이브러리다. * i18n : internationalization - 다국어 지원 시스템을 의미하는 약어다.( i로 시작해서 n으로 끝나고 그 사이에 18개 알파벳이 있는 단어를 축약한거라고 한다. g11n - globalization, l10n - localization 등등 다른 축약 표현도 있다. ) * 대표적인 다국어 지원 라이브러리로는- react-intl , next-intl, i18next 이 있다. 여기서는 react-intl 을 사용한다. 이게 formatjs와 동일한거라고 한다. intlProvider로 내부 jsx를 감싸주면 파일 전체에서 사용 가능하다. 이부분은 형태가 다양할테니 예시는 생략 * 사용법 (기본 형태)1..

길고 길었던 과정이 드디어 끝났다.오늘은 kdt 교직과정이 끝나고 맞이하는 온전히 쉴 수 있는 첫번째 주말인데,왜인지 새벽 5시부터 계속 깨서 8시쯤에는 완전히 잠이 깨버렸다. 오늘 정말 늦잠을 자고싶어서 알람도 다 꺼놨는데 뭐가 그렇게 불안했는지 ㅠ 암튼. 경🎉🎊🎈🧨🎇✨ 축 !!!!!!!!!!!!! 길고 길었던 kdt 교직과정이 끝났다!!!!과정이 끝난 직후에 회고를 쓰고 싶었는데 계속 미루다가 이제야 쓴다. ^ㅡ^ 사실 처음에 이 수업을 신청할 때는 별 생각이 없었다.그냥 이런 과정이 있다고 하고, 이수하면 나중에 교강사 급수를 딸 수 있다고 해서언젠가 쓸 일이 있겠거니~ 하고 가벼운 마음으로 신청 했던 것 같다.그렇게 만만하게 봤다가 된통 후회하게 되었지만.. 하지만 이수 하고 나니 지..

필터가 여러개 있는 검색 기능을 수정하던 중 문제를 발견했다. 검색하기 버튼을 누르니 api 요청을 두번 따닥!. 문제가 뭘까 소스 코드를 계속 봤다. 이거저거 고쳐봐도 모르겠다. 이럴때 드는 생각이 이런 문제는 원인을 어떻게 명확하게 추측할 수 있지? 였다. 차라리 에러메세지가 뜨면 뭐 때문에 에러가 난건지 추적이 가능한데. 이런 경우는 에러가 나는것도 아니고... 내가 하나하나 콘솔을 찍어보면서 추척하거나 코드를 뜯어 보고 유추 해보는 수 밖에는 없는게 너무 답답했다. 왜냐?? 아무리 봐도 모르겠기 때무네!!!!! 그래서 커서를 붙들고 하루종일 잡도리를 했더니 죙일 헛소리만 하다가 오후 느즈막히 뭔가 그럴싸한 답변을 내놨다. react-query의 enable 옵션이 !!param 으로 되어있기..

* 상태를 업데이트 했는데 이전 상태값으로 요청이 가는 경우 https://muna76.tistory.com/351 setState를 했는데 바로 직전 상태값이 나와요setState() 는 상태를 업데이트하는 함수인데, 이걸 이용해서 값을 업데이트 하고자 할때내가 원하는 시점에 상태값이 변하지 않고 이전 상태값을 유지하는 상황을 종종 겪었다. 예를 들면..어떤muna76.tistory.com의 버전 2라고 할 수 있다! 리액트에서는 setState를 한다고 해서 상태값이 바로 변경되는것은 아니다.크게 3가지 단계로 업데이트가 되는데, 1. 트리거 2. 렌더링 3. 커밋 렌더링 결과가 이전과 같으면 React는 DOM을 건드리지 않는다 이전 포스팅에서는 useEffect를 사용해서 비동기적으로 업데이..

1. 기술 스택 관련 질문Q. React 기반의 프로젝트 중 가장 기억에 남는 것은? 어떤 기술적 도전이 있었고 어떻게 해결했나요?A.가장 기억에 남는 건 OOO프로젝트입니다. 체크박스와 input을 많이 사용하는 화면이 있었는데, 처음엔 사용자가 인풋을 조작할 때 마다 상태를 각각 관리하다 보니 코드가 길어지고 유지보수가 어려워졌습니다. 그래서 특정 시점에 부모 DOM 기준으로 필요한 input 값을 한 번에 가져오는 방식으로 리팩토링했습니다. 단순히 작동만 시키는 게 아니라 DX(개발자 경험)를 고려해 구조 개선한 경험이라 의미가 컸습니다. Q. Spring Boot로 개발한 경험이 있으신데, 어떤 구조로 설계했나요?A.기본적으로 Controller-Service-Repository 구조를 따랐고,..

setState() 는 상태를 업데이트하는 함수인데, 이걸 이용해서 값을 업데이트 하고자 할때내가 원하는 시점에 상태값이 변하지 않고 이전 상태값을 유지하는 상황을 종종 겪었다. 예를 들면..어떤 셀렉박스에 onChange 이벤트를 걸어서 gu() 함수를 실행시킨다고 쳐보자.gu() 안에서 setState(e.target.value) 를 해주고 ,그 다음 줄에서 그 바뀐 상태값을 가지고 뭔가 동작하게끔 하는 코드를 작성했다 치자. 내 의도대로 동작하지 않고, state는 이전 value를 가지고 있을것이다. 이건 react 내부적으로 setState를 처리하는 방식과 관련있다. 우선 setState함수는 비동기함수가 아니다. 근데 비동기처럼 작동을 한다(?)"State updates in React ar..

prisma의 데이터 스키마 파일에서 외래키 설정하기 (꽤나 번거롭) 자식 >==(참조)==> 부모외래키 >==(참조)==> 참조키 자식 테이블의 외래키가 부모 테이블의 참조키를 참조한다는 전제하게 생각해보자. (우선 부모의 참조키는 유니크 또는 프라이머리키여야 한다.) 1. 부모 모델에 관계 생성- 부모와 자식이 어떤 관계인지 표시해준다.부모의 아이디 하나를 가지고 자식의 여러 레코드에서 중복해서 사용할 수 있기에 1: N 관계이다.model site { id Int @id @default(autoincrement()) name String group_codes group_code[] // 1:N 관계}이걸 쉽게 보면 아래 모양이다 model 부모 { ..