Semantic UI 장점 사용이 매우 간편하다. 공식 홈페이지에 컴포넌트 별로 props도 정리가 잘 되어있고 사용법도 상세하게 잘 나와있음. 디자인. 사용하기 직관적이고 일관적이었음. 미리 구현된 것이 많아서 빠르고 편하게 사용할 수 있다는 장점이 있음. 단점 계속 사용하게 되면 Bootstrap처럼 개성없는 디자인으로 변질될 가능성이 있어 보인다. (다행히 아직 React의 시장 점유율이 낮아서 망정이지) 살짝 밋밋한 느낌? Bootstrap 보다는 낫지만 그래도 어딘가 부족해보인다. Chakra UI 장점 디자인이 정말 깔끔하고 모던하게 예쁘다. 어떤 단점이 있어도 디자인이 깔끔하고 모던하다는게 단점을 압도할 수 있을 것 같음. 단점 구현된게 별로 없어서 내가 컴포넌트를 만들어가면서 해야한다는게...
const attachment = await AttachmentAPI.get_file_by_id(attachment_id); /* ... */ const filename = attachment.filename; const extension = filename.split('.').pop().toLowerCase(); /* ... */ res.contentType(`image/${extension}`); /* ... */ try { const content = await fs.readFileSync(attachment.path); res.end(content); } catch (error) { // Error Handling } Use res.end(), not res.send() OK?
자바스크립트를 사용하다 보면 undefined 때문에 뜨는 오류가 상당하다. 이를 해결하기 위해서 논리연산자를 사용하기도 한다. 이 경우 논리연산자는 다음과 같이 활용한다. let foo = undefined || "bar"; console.log(foo); // bar 만약 undefined 나 null 인 경우에는 논리연산자가 의도대로 작동하는 것을 볼 수 있으나, 만약 Falsy한 값이 온다면 프로그래머의 의도와는 반대로 작용할 가능성이 있다. 아래의 코드는 Falsy한 값이 왔을 때의 실행결과이다. let foo = 0 || 128; console.log(foo); // 128 let bar = false || "hi"; console.log(bar); // hi 이러한 상황을 해결하기 위해서 만..
아직 20학번 새내기라서 수강신청을 해본 적은 없다. 그러나 주변에서 [Tab]와 [Spacebar]만으로 수강신청을 마스터할 수 있었지만 대학교 수강신청 사이트에서 이를 막는 추세라서 이제는 빠르게 수강신청하기가 어려워졌다는 소문을 들은 적이 있다. 오늘 학번을 발급받은 김에 이 현상을 확인해보려고 경희대학교 수강신청 사이트에 접속해보았는데 역시나 F5, 스페이스바 등의 키가 금지되어있었다. 해당 키를 금지하는 기능은 당연히 Javascript 단에서 onkeydown 등의 event를 일일이 검사하는 방식으로 수행될 것이라고 생각했다. 역시는 역시. 아래는 경희대학교 수강신청 사이트에서 키 입력 금지 메커니즘을 구현한 코드이다. function noKeyCheck(){ if (event.keyCode..
만약에 어떠한 사이트에 사용자가 가입하는 경우 사이트는 사용자에게 사용자의 정보를 받고 DB에 저장하고 e-mail을 보내고 Event Tracker를 통해 로그를 저장하는 등 다양한 procedure를 거칠 때가 많다. 이 때 코드를 한 번에 다 때려박곤 했었는데 이게 크게 잘못된 생각임을 알게 되었다. 다음과 같은 코드가 내가 평소에 쓰던 방식이다. import UserModel from '../models/user'; import CompanyModel from '../models/company'; import SalaryModel from '../models/salary'; export default class UserService() { async Signup(user) { const userR..
javascript에서는 일반적으로 함수를 선언하는데 크게 두 가지의 방법을 갖고 있다. 첫 번째 방법이 바로 일반적으로 사용하는 function () {} 같은 방법이고 두 번째가 화살표 함수이다. 화살표 함수라는 용어 자체는 Mozilla 의 Web Docs에서 가져왔다. 화살표 함수는 선언할 때 다음과 같은 방법을 사용한다. () => {} 처음에 Javascript를 배우기 시작했을 때는, 일반적인 방법과 화살표 함수의 선언 방식은 그저 인자를 선언하는 방법만 다르다고 생각했으나 Vue.js 를 배우면서 큰 차이점을 알게 되어 블로그에 글을 남긴다.
섬네일로 에이프릴 이나은을 보고 싶어서 에이프릴 이나은ㅎㅎ 2018.06.13 에 H3X0R CTF 를 진행했었는데 이 때 개발했던 CTF Framework 이다. 처음으로 nodejs 를 이용하여 개발했던 프레임워크이다. 진짜 nodejs를 맨땅에 해딩하는 식으로 배우면서 해서 어플리케이션 구조나 프로그래밍적인 구조는 굉장히 별로라고 생각하지만, 일단 동작은 잘된다ㅋㅋ github에 1일 1git 하려고 했었는데 지금 시험기간이라서 불가피하게 당분간은 못할 것 같다. 기본적으로 Express Engine 을 사용하여 개발했고, Jade Engine 으로 Rendering 작업을 했다. DB 는 MySQL을 사용했다. 함수형 프로그래밍을 구현하여 개발을 하였다. [*] url : https://githu..
해당 소스가 있다. 해당 소스를 실행해보면 당연히 console.log(); 에 출력되는 값이 undefined 이다. 이유는 nodejs 가 속도 향상을 위해서 비동기 실행을 사용하기 때문이다. 비동기 실행은 함수들을 순서대로 실행하지 않고 한 함수가 실행되고 있는 중에도 뒤의 다른 함수를 실행할 수 있다는 개념이다. 따라서 globalVar에는 정상적으로 arg 라는 값이 들어가긴 하지만, console.log() 함수가 더 먼저 실행되기 때문에 globalVar를 출력하면 undefined 가 뜨는 것이다. 따라서, 우리는 이러한 현상을 해결하기 위해서 Promise 혹은 async await 라는 개념을 도입할 필요가 있다.
요즘 H3X0R CTF 사이트를 구축하면서 우리 학교에 js를 잘하는 친구들에게 이것저것 물어보다가 a1paka 라는 친구가 Promise, async await 라는 것들을 소개시켜주었다. 이것들은 콜백 함수의 문제점들을 해결하기 위해서 등장하였다. 콜백함수라고 하면 자바스크립트에서 가장 중요한 개념 중 하나인 비동기식 프로그래밍을 설명하기 가장 좋은 예제가 아닐 수가 없다. 하지만, 콜백함수로 계속 프로그래밍하다간 이유를 모르는 오류들이 하나둘씩 생겨날 것이다. 콜백함수의 drawback은 바로 이것이다. 역설적이게도, 그것은 비동기식 프로그래밍을 구현한 것이라는 점이다. 비동기식 프로그래밍을 생각해보면, 순서에 구애 받지 않고 코드를 실행시키지 않는다는 것을 알 수 있다. 이 과정에서 순서가 맞지 ..
오늘 xhr을 연습하다가 nodejs에서 XMLHttpRequest를 사용할 수 없나 의문점을 가지게 되었습니다. 역시 제가 예상한대로 누군가 이미 만들어 놓았더군요^^ https://www.npmjs.com/package/request 여기서 npm을 이용해서 다운받고 실행시켜 보시면 됩니다.