여러 아이템이 들어있는 Array에서 아이템을 랜덤으로, 그리고 중복없이 n개 뽑아내는 로직입니다. array를 ['a', 'b', 'c', 'd', 'e'], cnt를 3으로 하면 ['c', 'b', 'a'] 등의 식으로 랜덤으로 뽑습니다. 단, ['c', 'b', 'c'] 와 같이 중복되는 값은 나오지 않습니다. 요새 TypeScript를 사용해서 TS로 짜봤습니다. 자세한 코드는 아래를 참고하세요. 혹시 JavaScript 버전을 원하시면 댓글로 알려주세요. /** * @param array 아이템 리스트 * @param cnt 뽑을 아이템 개수 * @returns 랜덤으로 추출된 아이템 리스트 */ const getItemRandomly = (array: any[], cnt: number): an..

권장사항에서 빠진 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 안에서 반복적으로 부르지 않아야 합니다..