본문 바로가기

전체보기102

[React] 부모 컴포넌트에서 자식 컴포넌트의 함수 사용하기 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하는 것은 쉽습니다. 부모 컴포넌트의 함수를 자식 컴포넌트의 props로 전달해주면 되기 때문입니다. 하지만, 반대로 부모 컴포넌트에서 자식 컴포넌트의 함수를 사용하는 방법은 어떤 것이 있을까요? 대표적으로, useImperativeHandle과 forwardRef를 이용하는 방법이 있습니다. 부모 컴포넌트에 있는 button 태그를 클릭했을 때, 자식 컴포넌트에 있는 addNumber 함수를 호출해보려고 합니다. 이 addNumber 함수는 자식 컴포넌트 내부에 있는 number 이라는 상태 변수를 1씩 증가시킵니다. 먼저, 자식 컴포넌트입니다. // type export type addNumberHandle = { addNumber: () => void; .. 2022. 10. 9.
[Error 해결] No overload matches this call. 회사에서 첫 업무를 받았고, 업무를 하는 도중 No overload matches this call. 이라는 오류를 만나게 되었습니다. 구글링을 해보니 상황에 따라 다양한 해결방법이 있는 것 같았습니다. 일반적으로, type에 오류가 있을 때 많이 발생하는 오류인 것 같았고, 추론되는 type과 같지 않은 type을 가지고 있는 데이터가 매개변수로 전달되거나 리턴값으로 리턴되고 있을 때 많이 발생하는 상황인 것 같습니다. 저는 직접 제작한 함수에서 이 오류를 맞닥뜨렸는데요, 함수의 리턴값의 Type에 문제가 있는 경우였습니다. 혹시나 같은 상황에 처한 분이 계신다면 도움이 되길 바라는 마음에 간단히 정리해보겠습니다. 저의 상황은, 위와 같았습니다. 매개변수는 props와 ref라는 이름의 변수이고, 이 .. 2022. 10. 7.
3-layer Architecture란? FE - BE (controller - service & entity.service - model) 의 구조 3 Layer Architecture 구조는 아래와 같이 나눠지며, 각 layer마다 주요 역할이 존재한다. Presentation & Controller layer 역할 : Request parameter의 유효성 처리 / Service layer 호출 Business layer 역할 : 핵심적인 비즈니스 로직 / 대부분의 주요 코드들이 위치 / DB에 접근하는 Model layer 호출 Persistence layer 역할 : DB에 접근하여 데이터를 조작 / 데이터에 영속성(Persistence)을 부여하는 계층 예시) 회원가입을 하는 상황이라면? Front-End 유저가 회원가입에 필요한 .. 2022. 10. 3.
DTO와 Entity, 이 둘은 무엇이고 어떤 차이점이 있을까? 회사에 입사하여 정신없이 9월을 보냈다. 회사에 기여한 것은 별로 없지만, 아무튼 바빴다 ㅋㅋㅋ 개인적으로는 첫 자취생활이라 준비할 것이 많았고, 회사생활도 너무나도 새로웠다. 여러모로 시간이 너무나도 빠르게 지나간 탓에 블로깅 활동이 너무 뜸했다. 그래서 3일의 휴일을 이용하여 재빠르게 생존신고를 하려고 한다. 입사 직후, 온보딩의 목적으로 몇 가지의 구현 과제들을 수행하며 몇 번의 어려움을 겪었다. 첫째로, 맥북을 처음 써봤다 ㅋㅋㅋ 평생 윈도우만 쓰던 나에게 MacOS 운영체제와 맥북은 다루기 어려운 존재였다. 맨날 쓰던 한영키 위치부터, 커맨드 키 사용의 낯섬 등등.. 단축키를 포함하여 기존의 윈도우 운영체제와 지금의 MacOS는 다른 부분이 너무 많아 앞으로도 계속 적응해야 할 것 같다. 물론 .. 2022. 10. 2.
this는 함수 호출 방식에 의해 결정된다. (일반/화살표 함수) 이 글은 Zerocho님의 [인간 JS 엔진 되기 1-6] 영상을 수강한 이후에 이를 토대로 정리한 글입니다. 영상의 출처를 이 글 하단에 남깁니다. 좋은 강의 해주신 Zerocho님 감사합니다. this : Browser 환경 (JavaScript)에서는 window, Server 환경 (Node)에서는 global 객체를 의미하는데, 최근에는 globalThis이라는 객체로 통합되었다고 함 Strict mode에서의 this는 undefined가 된다. ES2015 모듈은 strict mode 자동 적용 this는 함수가 '호출' 될때 결정된다! 기본적으로 this는 window를 가리키는데, 그것이 바뀌는 경우가 크게 3가지가 있다. this가 어떤 것을 가리키는지 확인하는 법 : 함수가 '호출' .. 2022. 8. 20.
[엘리스 SW 엔지니어 트랙 2기] 최종 발표팀 선정 & 발표/수상 후기 약 4개월간의 엘리스 교육과정이 끝나고, 마지막 3주동안 진행되었던 프로젝트를 기반으로 7/23(토)에 프로젝트 발표를 한 이후, 엘리스 코치분들 & 외부 회사의 대표, CTO, 팀장 분들에게 최종 평가를 받는 시간이 있었습니다. 이 평가에서 1~3등 팀과, 인기상 1팀 (총 4팀) 은 8/5 (토) 성수낙낙 스튜디오에서 데모데이 최종발표를 하는 기회를 가질 수 있다는 말씀을 들었고, 저희 팀은 결과물에 나름 자신감이 있었기 때문에 수상에 대한 기대도 하였습니다. 하지만... 엘리스 코치분의 평가기준표에 따른 저희의 평가점수는 평균에도 미치지 못하는 점수였습니다. 점수를 보고 난 뒤 저희 팀원들과 저는 상당히 충격이었고, 그 이유를 파헤치기 위해 단톡방에서 열띤(?) 토론을 하였습니다.. 기획적인 부분에.. 2022. 8. 6.

티스토리툴바