권장사항에서 빠진 create-react-app와 최근의 프론트엔드 개발 트렌트 제 블로그에 관심이 많으신 분들은 이미 알고 계시겠지만, 사실 전 React보단 React-Native 개발자에 가깝습니다.(아, 웹 하고 싶다!) 그래서 한동안 React 웹서비스를 처음부터 만들 일이 많지 않았죠. 조그마한 토이프로젝트로 React에 대한 열정을 되살리고자 npx create-react-app 을 사용했습니다. 그러던 중 꽤나 충격적인 사실을 알게 되었습니다. 바로 React 공식문서에서 더 이상 create-react-app을 권하고 있지 않다는 사실을 말이죠. React에 관심있으신 분들은 아시겠지만 최근 React 공식 웹사이트가 새로 오픈했습니다. React The library for web an..

서비스 개발을 하다보면 비동기적으로 개발해야 할 일이 많습니다. JavaScript에서는 과거 callback 함수를 통해 비동기를 구현하곤 했으나 요즘에는 Promise 객체를 반환하게 하여 async와 await로 작업이 완료되면 다음 로직이 진행되게끔 지연시키는 방식을 통해 비동기를 구현하곤 합니다. 최근 회사에서 앱을 개발하면서 한번 사용하는 방법을 간단하게 정리해봤습니다. (Promise 객체 자체에 대해서는 developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises 이 링크를 참고하세요.) Promise 객체를 반환하게끔 작성한 함수를 호출할 땐 함수명 앞에 await 키워드를 붙이고 호출하면 해당 작업이 완료되고 나서야 이후 코드가 ..

개발이슈 stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute%EF%BB%BF Touchablehighlight not clickable if position absolute I have a Touchablehighlight that I need to position absolute, but it becomes unclickable after I do it. What could cause this? It functions like it should if I dont have the position set to absolute. stackoverflow.com React Native Touchabl..

React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 1300으로 높은 글이 있어 원작자의 허락을 구해 번역해봤습니다. 원본 글에서 댓글을 여러 의견이 있었는데 이 번역글에서도 포함하여 일부 번역해봤습니다. 원본 글은 https://betterprogramming.pub/8-ways-to-write-clean-react-code-610c502ccf39 입니다. React Clean Code 더 클린하고 더 나은 코드를 작성하는 8가지의 간단한 방법 "클린코드"는 그저 동작만 하는 코드 그 이상을 의미합니다. 클린코드는 읽기 쉽고 이해하기 쉬우며, 깔끔하게 구성되어 있습니다. 이번 글을 통해 리액트 코드를 보다 "클린"하게 만드는 8가지 방법에 대해 알아보겠습니다. 그전에 이야기..

React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 높은 글을 발견해 번역해봤습니다. 원본 글에서 댓글을 통해 반박 내용이 있는데, 번역본에도 포함했습니다. 원본 글은 https://levelup.gitconnected.com/react-antipatterns-to-avoid-7134940f4f04 입니다. 리엑트(React)는 인터렉티브한 모던 웹앱을 만들기 위해 가장 많이 사용하는 프론트엔드 라이브러리입니다. 모바일 앱을 만들 때에도 쓸 수 있죠. 이번 글에서 우리는 리액트에서 피해야 할 안티패턴에 대해 알아볼 것입니다. 컴포넌트에서의 bind()와 함수들 우리가 리액트 class 컴포넌트에서 bind를 호출할 때, 우리의 props 안에서 반복적으로 부르지 않아야 합니다..

최근 프로젝트를 하면서 페이스북, 인스타그램 등 여러 트렌디한 서비스들이 쉼머라는 새로운 로딩 애니메이션을 도입하고 있다는 걸 알게 되었습니다. 관련해 UX 및 개발 자료를 찾으면서 쉼머에 관련된 한국어로 된 콘텐츠가 많이 없는 것 같아서 괜찮게 본 글을 번역해봤습니다. 의역이 포함되어 있고 원작자의 허가를 받고 번역했습니다. 원본 링크는 https://dev.to/dhilipkmr/the-loading-shimmer-29dc 입니다. Loading Shimmer를 접했을 때, 전 그게 웹 개발에 새롭게 도입된 끝내주는 기술이라고 생각했습니다. 하지만 Loading Shimmer는 이미 인터넷에서 많이 알려져 있었습니다. 느린 네트워크 접속 환경 때문에 DOM 로드에 시간이 걸릴 때면, 우리는 로딩 아이..