전체 글
-
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의 경우에도 이 수업에서 배운 코드들과 구글링을..
-
[버그 레포트 후기] 메가박스 CORS 정책 위반 보고 후기소소한 IT 이야기 2019. 6. 3. 16:09
얼마전에 메가박스의 CORS 정책 위반으로 여러가지 기능들이 작동하지 않았다는 게시글을 올린적이 있는데요. 5월 초에 이에 대한 답변이 왔었습니다. 답변을 받아볼 당시에는 너무 형식적인 답변이라 사실 문제가 해결될지 긴가민가 했는데 오늘 영화 기생충을 예매하기 위해 홈페이지에 접속했더니 코드가 수정되어 웹사이트가 정상적으로 작동됨을 확인했습니다. 아래 이미지는 기존의 오류가 있었을 때 발생한 에러입니다. 지금 다시 접속하여 개발자 콘솔을 열어보니 CORS 정책 에러는 사라졌음을 확인할수 있습니다. 또한 로그인 후 홈페이지로 자동으로 Redirect 되는 기능, 카드번호 조회기능도 정상적으로 작동함을 알수 있습니다. 웹 개발을 공부하다보니 어떠한 웹사이트들이던 간에 관심이 있거나 신기한 사이트들을 보면 개..
-
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를 가져오고나서 데이터를 관리할때 정말 유용..
-
JavaScript ES6 제너레이터와 이터레이터프로그래밍/JavaScript 2019. 5. 31. 13:48
제너레이터 / 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, 함수 이름 앞에 *를 붙여 사용합니다. Odds 홀수 for of, 전개 연산자, 구조 분해, 나머지 연산자의 사용 과정 후기 홀수를 만드는 함수를 제너레이터 함수를 이용해서 만들어본 과정이였다. 처음에 함수에 * 을 사용해서 무슨 뜻인가 잘 몰라서 구글링을 좀 했다. 아직도 완벽히 이해가 된 단계는 아닌것같지만 대략적으로는 알것같다. while 반복문을 사용할시에 보통 true 값을 주게되면 무한으로 계속 작동되기에 브라우저가 뻗어버리는 경우가 존재하는데 제너레이터 함수를 이용해서 반복문을 돌릴시에는 limit 값을 주지 않을 경우에 한정없이 작동하지만 실행할때만 작동하므로 원하는 값을 지연시킬수있다는 생각이 들었다. 사실..