전체 글
-
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 값을 주지 않을 경우에 한정없이 작동하지만 실행할때만 작동하므로 원하는 값을 지연시킬수있다는 생각이 들었다. 사실..
-
JavaScript ES6에서의 순회와 이터러블 프로토콜프로그래밍/JavaScript 2019. 5. 30. 16:58
기존의 JavaScript ES5과는 달라진 ES6에서의 리스트 순회 기존의 JavaScript ES5에서는 for 문의 i++을 사용하여 배열 내를 순회함 JavaScript ES6에서는 for of 문을 사용하여 순회 Array Set Map 이터러블/이터레이터 프로토콜 이터러블 : 이터레이터를 리턴하는 Symboliterator 를 가진 값 이터레이터 : {value, done} 객체를 리턴하는 next() 를 가진 값 이터러블/이터레이터 프로토콜 : 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약 사용자 정의 이터러블 전개 연산자 const a = [1,2]; // a[Symbol.iterator] = null; console.log([...a, ...[3,4]); 과정 후..
-
JavaScript ES6 함수형 자바스크립트 기본프로그래밍/JavaScript 2019. 5. 26. 15:48
JavaScript 평가 JavaScript 코드가 계산되어 값을 만드는 것 JavaScript 일급 값으로 사용 가능 변수에 값 저장 가능 함수의 인자 & 결과로 사용 가능 JavaScript 일급 함수 함수를 값으로 사용 가능 조합성과 추상화의 도구 JavaScript 고차 함수 함수를 값으로 사용하는 함수 함수를 받아서 인자로 사용하는 안에서 실행하면서 원하는 인자를 적용하는 함수 (어플리케이티브 프로그램) 함수를 만들어 리턴하는 함수 (클로저 리턴 함수) 과정 후기 분명 Udacity Front-End 강의 때 나왔던 내용인것같은데 아무래도 ES6 위주의 학습이 아닌 기본과정이다보니 처음보는 내용들도 있고 용어들도 알게되어 좋았습니다. 코드들을 보니 대략적으로 어떻게 작동하는지는 이해가 가는데 이..
-
안드로이드 브라우저 상단 주소창 색 지정하는 방법프로그래밍/HTML5 Web 2019. 5. 3. 18:49
안드로이드 브라우저를 사용하다보면 브라우저 상단 주소창의 색깔이 웹사이트와 비슷하게 보이는 경우가 있습니다. 이는 웹 개발자가 웹페이지의 meta 태그에서 Header와 색을 동일하게 설정한 것으로 조금더 자연스러운 웹사이트를 표현할수 있게 해줍니다. 현재 공식적으로 Google Chrome과 Firefox Os, Opera 브라우저만 지원하는 Meta 코드입니다. 아래와 같이 meta name을 theme-color로 지정한후 content 항목에 색상 HEX 코드를 입력해주시면 됩니다. 일반적으로 Hedaer 색상과 일치 시키면 더욱 자연스러운 브라우저 환경을 제공할수 있지 않을까 생각합니다. 상세 내용은 Google Developers 링크를 확인해주세요. https://developers.goog..