React 렌더링 React의 컴포넌트는 state라고 불리는 상태값과 props라고 불리는 전달값이 있습니다. 상태값과 전달값은 컴포넌트의 렌더링와 아주 직접적인 관계가 있습니다. 상태가 변이함에 따라 컴포넌트가 보여지는 형태도 달라져야 하기 때문입니다. 그러기에 React의 컴포넌트는 state와 props의 변이를 계속 관찰하고 있고, 변이가 발...
ESlint와 Prettier 설치하기
ESLint ESLint는 코드를 보다 예쁘고 일관성있게 관리하기 위한 최소한의 제한사항입니다. VSCode 에디터를 사용하고 있다면 ‘저장 시 자동으로 포맷’ 기능을 활용하여 ESLint에 비준하지 않는 코드 스타일로 작성하더라도 저장만하면 자동으로 에디터가 포맷을 맞춰주는 편리한 기능을 사용할 수 있습니다. 설치 ESLint를 간편하게 세팅하기 위...
SEO 친화적인 인피니티 스크롤
출처: https://im-developer.tistory.com/196 무한 스크롤 웹 혹은 앱을 사용하다보면 위와 같은 방식의 페이징 기법을 많이 볼 수 있습니다. 핀터레스트, 페이스북 등 많은 서비스들이 이를 채택하고 있어요. 방대한 양의 컨텐츠들을 복잡한 공수 없이 사용자 친화적인 UX를 이용해 보여줄 수 있다는 것이 가장 큰 장점이죠. ...
React의 Life Cycle
개요 라이프사이클, 즉 생명주기라는 단어는 Vue나 React와 같은 프론트엔드 개발 도구를 사용해본 경험이 있다면 누구나 한 번 쯤 들어봤을 단어입니다. 그만큼 해당 개발 도구를 사용하는데 중요한 역할을 하며, 이 부분을 잘 알고 있어야 좋은 서비스를 개발할 수 있습니다. Lifecycle Vue나 React는 컴포넌트 단위로 아주 작게 기능들을 쪼...
[React Native] APK와 AAB
개요 지난번에는 RN으로 제작한 앱을 APK로 빌드하는 방법에 대하여 알아보았습니다. 하지만 이를 Playstore에 직접 올려 배포하기 위해서는 APK 빌드가 아닌, AAB 빌드에 대하여 알아봐야 합니다. AAB APK는 윈도우에서의 EXE처럼 운영체제에서 구동되는 소프트웨어의 확장자입니다. 개발자는 물론이고 사용자들 사이에서도 널리 알려져있죠. 그...
좋은 개발자가 되는 법
개요 얼마 전 Github를 둘러보던 중 좋은 게시글 하나를 발견하였습니다. 능력있는 개발자는 어떻게 알아볼 수 있나? 라는 제목으로 투고 된 게시물인데, 회사가 개발자를 선별하기 위해 하면 좋은 방법에 대해 알려주는 글이였습니다. 지금 당장 제가 개발자를 채용해야 한다거나, 개발자를 채용할만한 위치에 있는 상황은 아니지만 좋은 개발자가 되기 위한 목...
[Nuxt] Failed to execute put on cache 이슈
개요 Nuxt로 개발을 하던 도중, 어느 순간부터 개발자 도구를 열면 다음과 같이 service-worker.js라는 곳에서 에러를 쭉쭉 뱉고 있었습니다. 찾아본 결과, 다음과 같은 방법으로 해결할 수 있었습니다. 해결 방법 navigator.serviceWorker.getRegistrations().then(function(registrations...
[React Native] Webview SSL Error: The Certificate authority is not trusted
개요 회사에서 하이브리드 어플리케이션을 개발하기 위해 웹뷰를 통해 포팅을 하고 있는데 기껏 개발해서 구축해놓은 웹사이트를 웹뷰에서 보니까 이런 에러가 나옵니다. 인증서 날짜가 유효하지 않다는데 도무지 원인을 모르겠어서 해당 이슈를 어떻게 해결할까 하다가 Webview에서 SSL 관련 처리를 변경하는 방식으로 해결했습니다. 해결 방법 node_modu...