너와 나의 프로그래밍

Next.js 환경에서 개발을 하다보면 정말 여러가지 이슈의 대해 부딪히곤 한다. 특히 Build를 할 때나 개발서버에서 개발을 하다보면 가끔 "window is not defined" 에러를 종종 보곤 한다. SSR을 하는 Next.js에서 Client에서 사용하는 노드 모듈(서드파티 라이브러리)을 사용하면 많이 발생하는 문제인데, 이런건 좀 업데이트를 통해 고쳐졌으면 하는 바램이 있다... 마침 react-draft-wysiwyg 이라는 React.js에서 많이 사용하는 텍스트 에디터의 대한 모듈을 개발하던 도중 오랜만에 만난 에러가 나와 해결방법을 소개하려고 한다. react-draft-wysiwyg | Yarn - Package Manager (yarnpkg.com) https://yarnpkg...

Next.js로 몇 가지의 페이지를 구현하면서 갑자기 '뒤로가기 History Stack'의 이슈가 생겨서 Next.js의 Router의 대해 여러가지 찾아보던 도중에 window.history를 같이 검색하게 되었다. 상황은 이러했다. 문제의 조건 : 'Google -> 웹 접속 -> 로그인 페이지(로그인 완료) -> 리다이렉트 페이지(Router.push) -> 뒤로가기 -> 로그인 페이지(..?) -> Google' 실제 원하는 결과 : Google -> 웹 접속 -> '로그인 페이지(로그인 완료) -> 리다이렉트 페이지(Router.push) -> 뒤로가기 -> 처음 웹을 접속했던 메인 페이지(예: Google) 로그인이 완료 된 상태에서 리다이렉트 페이지로 넘어가면서 다시 뒤로 가기(back)을..

웹 개발에 있어 빠질 수 없는 Tab은 진짜 구현이 간단한것 같으면서도 까다로운 것 같다. 특히 기존 SPA 방식인 Component로 Tab을 구현하는 방식이 아닌 Next.js에서는 Page단위로 Tab Page를 만드는 경우도 있었다. 아직 국내에는 많은 Next.js의 개발 이슈라든지 정보들이 많이 없다는게 정말 안타깝다. 이번 Tab Page 개발을 통해서 Next.js 개발자들에게 작은 도움이 되었으면 좋겠다. 기본적인 Tab Page 구조 아주 Simple하게 Page1, Page2, Page3 페이지를 만들었고 공통으로 쓸 Header, 그리고 이 Tab 기능의 핵심 Component인 Layout Component를 만들어 주었다. Header Page 먼저 Next.js에서 기본적으로 ..

개발에 빠질 수 없는 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..

최근 추가된 Javascript 문법중 optional chaining은 객체를 검증할 때 사용한다. 평소 개발을 하다 보면 항상 object에 접근했을 때 해당 값이 없을 때 항상 오류를 발생하는 경우가 굉장히 많다. 이럴때 앱이 멈추지 않고 단순 undefined를 리턴하는 값을 출력해주는 optional chaining 문법을 사용하면 좋다. optional chaining는 문법은 "object?.key"로 물음표와 콤마를 합성해 주면 된다. 보통 object에 key 값을 접근할 때는 단순히 콤마(.)를 사용해서 접근했지만 물음표와 같이 사용하여 객체에 접근하는 것은 굉장히 생소할 것이다. 이 문법이 생기기전에는 이러한 오류를 사전에 검증하기 위해 조건문에 AND(&&)을 사용하여 객체가 있는지..

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