프로그래밍/JavaScript
-
Nodejs AWS S3 버킷의 폴더 리스트 가져오는 방법프로그래밍/JavaScript 2020. 10. 13. 15:15
AWS와 Nodejs로 작업하던 도중에 AWS S3 스토리지에 포함된 폴더명들의 리스트들이 필요하다는 것을 깨달았습니다. 바로 AWS의 공식문서를 확인해보았으나 객체로 만들어주는 listObjects 메소트만 있고 저는 배열로 만들고 싶어서 코드를 조금 수정해보았습니다. 이런 식으로 프로그래밍 언어의 목록이 쭉 나열되어있고, 이 많은 폴더명들을 (AWS 기준에선 폴더라고 말하지 않는다고 합니다) 배열로 만들고 싶었습니다. let params = { Bucket: '버킷이름', Delimiter: '/', Prefix: 'devicon/' } s3.listObjects(params, function (err, data) { if(err)throw err; let languageArray =[]; for(l..
-
JavaScript 배열 숫자 오름차순 내림차순 정렬프로그래밍/JavaScript 2020. 2. 3. 00:55
전에 React.js로 개발한 가상화폐 시세 테이블을 개발하면서 테이블 정렬이 왜 제대로 작동하지 않았는지 오늘 자바스크립트 배열을 건들여볼 일이 생겨서 알게되었습니다. 그때 발생하였던 문제는 아래와 같았습니다. let array = [30, 2, 20, 1, 1111]; let result = array.sort(); console.log(result) // [1, 1111, 2, 20, 30] 제대로 사용하였다면 1, 2, 20, 30, 1111 이 출력되어야하는데 결과는 그렇지 못합니다. 이는 비교함수를 전달하지 않았을때는 숫자 데이터는 문자열로 변환된 후 Unicode 기준으로 정렬되기 때문입니다. 이를 제대로 정렬하기 위해서는 비교함수를 전달하여 숫자의 크기에 따라 정렬이 가능합니다. 오름차순 ..
-
Cloudflare 서비스 장애 발생 시 오류 UI 개발기프로그래밍/JavaScript 2019. 7. 3. 14:13
가상화폐 시세 테이블 React 앱 개발 도중에 계속 생각했던 것이 새로 데이터를 계속 가져와서 데이터를 변경해줄 때마다 중간에 오류가 발생하였을 때 UI 적으로 방문자들에게 오류가 발생했음을 실시간으로 보여주고 싶었습니다. 이 앱을 개발하면서도 가상화폐 시세가 고정되어있는 경우도 있으니 실제로 데이터가 새로 갱신되고 있는데 계속 보고 있는 경우도 있어서 개발자 입장에서도 실제로 데이터를 제대로 가져오고 있는지 확인이 가능했으면 좋겠다 싶었습니다. 물론 구글 크롬의 ReactJS 확장프로그램을 설치하면 해당 정보들을 확인이 가능하지만 일반적으로는 이러한 정보의 확인이 불가능하기 때문에 개발 필요성을 계속 생각하고 있었습니다. 게다가 마침 어제 Cloudflare의 서비스 장애가 발생하면서 Cloudfla..
-
React 프로젝트에서 이미지 import하는 방법프로그래밍/JavaScript 2019. 7. 2. 16:32
ReactJS 프로젝트에서 이미지를 사용하려 했더니 또 경로 문제인지 제대로 이미지를 로드 못하는 경우가 있습니다. Create-React-App을 사용해서 React 앱을 개발하면 public이라는 디렉토리가 존재하는데 간단히 여기에 이미지 폴더를 생성하고 이미지 주소를 로드하는 방법을 검색했더니 import을 사용하라는 사람도 있고 여러 가지 방법이 존재했는데 가장 간단한 방법은 허무하게도 아래 방법을 사용하면 되었습니다. 물론 Import을 사용하는 방법도 존재했지만, 여러개의 이미지 또는 파일을 로드할 코드가 지저분해 보일 수 있는 문제점이 존재하므로 이러한 경우에는 직접 경로를 지정해주는 것이 가장 좋은 방법인 것 같습니다. // public/images/ Folder Directory 참조 h..
-
JavaScript 객체 Key 값을 받아 value값 반환하기프로그래밍/JavaScript 2019. 7. 2. 14:40
최근에 ReactJS로 개발하고 있는 가상화폐 시세 테이블을 개발하던 도중에 API에서 코인 이름들을 받아와서 한글로 표현하고 싶었는데 마땅한 방법이 생각나지 않았습니다.. 처음에는 어짜피 key값은 API를 통해서 받아오니 빗썸의 웹사이트에서 코인 한글 이름을 따로 파싱해서 받아올까도 생각했지만 코인이 일단 87개이고..(API에서 제공하는) 그렇게되면 총 87번의 요청이 발생하게되니 굉장히 마음에 안드는 모양새가 만들어질것같아 차라리 객체를 만들어 개발자가 추가적으로 지정해줌이 더 나은 선택으로 보였습니다. 다만 객체를 만드는 과정에서 일일히 타이핑을 할까 생각하다가 일단 key값은 빗썸 API에서 제공해주므로 적절하게 수정하면 한글만 타이핑하면 되겠다는 생각이 들었습니다. 우선 빗썸 API를 요청한..
-
Reactjs 가상화폐 시세 테이블 웹 앱 개발기프로그래밍/JavaScript 2019. 6. 27. 22:24
최근 프론트앤드 분야에선 ReactJS의 관심도가 정말 높은것같습니다. 물론 Vue.js같은 다른 라이브러리도 있지만 아무래도 페이스북에서 개발했다는(?) 장점과 풍부한 자료 덕분에 Reactjs에 관심이 많이 가지않나 생각합니다. 물론 채용시장에서도 ReactJS는 정말 필수일 정도로 관심이 뜨겁더라구요. 저도 Scrimba, Inflearn 등의 온라인 수업들을 통해서 ReactJS로 개발한 채팅사이트, 연락처 프로그램을 개발해보았지만 사실 개념의 이해했다기보다 코드들을 보고 따라 개발한것들이 많아 뭔가 새로운것을 개발해보라하면 ReactJS를 적용이 가능할까 의문이 많이 들었습니다. 이에 ReactJS를 활용해서 가상화폐 시세를 테이블로 가져오는 웹 앱을 개발해보기로 하였습니다. 게다가 ReactJ..
-
JavaScript 코드를 값으로 다루어 표현력 높이기프로그래밍/JavaScript 2019. 6. 3. 17:27
Go Pipe 함수를 반환하는 함수 GO를 사용하여 가독성 좋은 코드 개발 Go 와 Curry를 활용하여 가독성 좋은 코드 개발 함수 조합으로 함수 만들기 수강 후기 앞 강좌의 go 함수까지는 괜찮았지만 curry라는 개념이 너무나 어려웠다. 여러번 돌려봤는데도 불구하고 명확하게 이해가 되질 않아 따로 JavaScript Curry에 대해서 검색을 해보았더니 초심자에게 아주 잘 설명해둔 블로그 가 있었다. 아직까지도 잘 사용하면 코드 활용성을 매우 높일수 있을것같다 라는 느낌적인 부분만 받고 있는데 이를 다음 강좌인 장바구니 예제에서 어느정도 해결할수 있을것이라 기대하고있다. 사실 go와 pipe들도 어려웠는데 구글링을 통해서 어느정도 해결하였다. curry의 경우에도 이 수업에서 배운 코드들과 구글링을..
-
JavaScript Map, Filter, Reduce 심화프로그래밍/JavaScript 2019. 6. 3. 14:48
Map 이터러블 프로토콜을 사용한 mpa의 다형성 Filter 특정 요소를 거를 때 사용 Reduce Map, Filter, Reduce 함수 중첩하여 사용하기 수강 후기 확실히 한번 봐서는 안되겠다는 생각이 들었던 강좌이다. Map, Filter, Reduce 을 사용하여 코드를 굉장히 간결하게 작성할수 있다는 점에 대해서 배웠다. 이런 엄청난 장점들에도 불구하고 여기서 배운것을 실제 내 포트폴리오 서비스에 적용시킬수 있을가 라는 생각을 계속 하였는데.. 지난번 MongoDB로 작성된것을 MySQL 코드로 전환하면서 기존 코드를 뒤엎는 작업은 새로 작성하는것보다 더 어렵다는 느낌을 받았기 때문이다. Filter의 경우에는 단어에서도 알수 있듯이 MySQL DB를 가져오고나서 데이터를 관리할때 정말 유용..