너와 나의 프로그래밍

프론트엔드 개발자 기술면접을 보는 중 "부모에서 자식 함수를 호출하는 방법"은 무엇일까요? 라는 질문을 받은 적이 있다. React.js는 Vue.js와 다르게 정말 대표적인 "단방향 통신"의 프론트엔드 라이브러리인데 굳이 왜 자식에서 함수를 호출해야 할까? 라는 의문점이 들었다. 하지만 개발을 하다보면 참 여러가지 케이스가 많이 발생하는데 어쩔 수 없이 자식에서 함수를 호출해야되는 상황도 있기 마련이다. 대표적인 단방향 통신의 React.js에서 과연 자식 함수를 어떻게 호출할 수 있는거지?라는 의문에 구글링을 해본 결과 정말 방법이 있어서 "아니 이런것이 있었어!?🙄", "이 점은 내가 아직 부족한게 많구나...😭" 라는 점도 느끼게 되었다. 그 방법은 React의 useRef, forardRef와 ..

실무에서 사용하는 Next.js의 Version이 9.x.x 대의 Old Version이라 이번에 큰맘(?)을 먹고 Next.js 12 Verison으로 Upgrade를 시켜주기로 결심했다. 사실 기존 프로젝트의 Package들의 Version을 올리면 발생하는 각종 다양한 문제들이 많아 굉장히 고심을했는데 역시나 많은 문제가 발생했고 그러면서 프로젝트에서 사용하고 있는 Typescript의 Type들의 문제, 각종 오픈소스 라이브러리들의 문제등 여러가지 문제들은 해결했다만 JSX관련 'Component' cannot be used as a JSX component 문제가 발생했고, 이 문제를 도저히 해결하기가 너무 힘들었다. 'Component' cannot be used as a JSX compone..

AWS에서 제공하는 Amplify를 Next.js에 도입하면서 빌드를 하던 과정에 도대체 원인을 알 수 없는 에러가 발생했다. 빌드를 하는 과정에서 물론 내 실수(스크립트 오류 및 파일 경로 오류 등등...) 같은 경우에는 Amplify Console에 친절하게 어떤 파일에서 몇 번째 줄에 문제가 있다는지 명확하게 설명해 주는 경우가 있어 실제 Local에서 개발용 Build 명령어를 사용하는 것과 동일한 결과를 내주기도 한다. 하지만 이번에는 구글링을 하면서도 도대체 방법도 없고 애초에 Amplify Build 이슈는 있지만 이런 이슈는 처음 겪는지라 더욱 힘들었다. 그 와중에 "error next@12.0.1: The engine "node" is incompatible with this module..

개발에 빠질 수 없는 Toggle 기능은 기본적으로 state을 true/false로 변경하면서 show, hide를 하는 것이 일반적이지만 보고 싶은 글만 보거나 대댓글 쓰기 기능을 구현할 때는 부분 Toggle을 사용할 때가 많다. 일반적인 show, hide는 구현방법이 쉽지만 부분적인 Toggle 같은 경우에는 어떻게 하면 좋을 지 공유하려고 한다. stackoverflow에 아주 좋은 예시가 있어 이 예시로 설명! const { useState, Fragment } = React; const SearchResults = props => { const [shownComments, setShownComments] = useState({}); const toggleComment = id => { se..

대부분의 프로젝트는 아마 거의 React Hooks를 사용한 함수형 컴포넌트를 많이 사용한다. 클래스 형식의 컴포넌트로 계속 개발할 때는 진짜 이것도 너무 편하다고 생각했었는데 함수형 컴포넌트를 배우면서 계속 함수형 컴포넌트만 사용하게 되었다.🤣 클래스 컴포넌트가 나쁘다는것은 절대 아니다.😃 이미 리액트에서도 절대 함수형 컴포넌트의 지원을 끊지 않겠다고 공식적으로 발표했을 뿐더러 클래스 컴포넌트만의 정형화된 구조화 방식이 어느때는 진짜 깔끔하게 느껴질 때도 많다. 함수형 컴포넌트를 사용하면서 새로 생긴 React.js의 Hooks들의 대해 아직 익숙하지 않아 짧게 정리를 해보려고 한다. 🎉 State Hook 기존 클래스 컴포넌트의 경우에는 항상 constructor 함수 안에 this.state 객체를..

Next.js에 없어서 안될 공통 페이지 _app, _document, _error 페이지들이다. 처음에 CLI로 Next.js를 설치를 하면 기본적으로 _app는 자동적으로 생성이 된다. 그러나 _document, _error는 자동적으로 생성되지 않기 때문에 따로 만들어줘야한다. 그럼 그 세개의 공통페이지들의 역할이 뭘까? ./pages./_app.js 페이지를 맨 처음 초기화해주는 아주 중요한 녀석이다. 이녀석이 없으면 앱이 실행되지 않는다. React.js나 Vue.js에 꼭 필요한 app.js라고 보면 된다. 이 페이지는 처음 초기화를 해줄 뿐더러 페이지를 탐색할 때 상태 유지를 해주고 페이지들의 공통된 레이아웃을 담당해준다. 또 초기 데이터를 페이지에 주입(pageProps)해주고 Global..