GomJu's Coding Blog

https://velog.io/@_junukim _junukim (junukim.dev) - velog Jest와 Enzyme로 React Test하기 🤗 처음으로 테스트 코드를 작성해보고 겪은 과정과 느낀점 그리고 소소한 팁들을 적어보려한다. 테스트? 한번 해보지 뭐 테스트 코드라.. 오래전 부터 들어왔고 많은 시도를 해왔었다. 이론적으로 테스트를 공부하고 수 많은 프로젝트에 도입을 해보려 했으나 번번이 실패하였던 기억이 있다. 그리고 사실 오늘 작성한 테스트 코드가 좋은 코드인지도 잘 모르겠다. 모... 2020년 1월 29일 · 0개의 댓글 velog.io tistory 블로그에서 velog 블로그로 이전합니다. :)

오랬만에 글을 올린다!필자는 블로그를 만들때 client와 server로 나눠서 진행했다. server는 app.js에 여럿 미들웨어를 등록시켰다. 다음은 server의 package.json파일이다.{ "name": "blog-server", "version": "0.0.1", "description": "make blog with node", "main": "app.js", "scripts": { "start": "nodemon app", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "bcrypt": "^2.0.1", "connect-flash": "^0...

현재 T-Story를 사용하여 블로그를 운영하고 있는 필자이다.필자는 자신이 직접 독학하며 공부하면서 알게된 사실이나, 지식을 타인과 공유하기 위해 블로그를 작성했다. 하지만 블로그를 운영하는 것은 쉽지 않았다. 현재 점점 블로그를 유지하기 힘들어 지고있는 상태이다. 따라서 필자는 대안을 세웠다. 그리곤 실행했다. 필자는 T-Story에서 제공하는 블로그가 마음에 들지 않았다. 매번 MD를 통해 github에 업로드 후 복사해서 포스팅하는 작업이 귀찮기만 했고, 양심에 찔렸다. 따라서 필자는 블로그를 만들기로 결심했다. 여기서 잠깐, 블로그를 무엇으로 만드느냐... 블로그는 내가 직접 서버와 클라이언트를 제작한다. 서버는 공부한지 얼마 안되서 미숙하고 실력은 형편없지만 API를 제공해주는 형식으로 만들어..

React SyntheticEventGetInputData = event => { this.setState({ [event.target.name]: event.target.value }); }; GetInputData(event)} />;ReactJS를 공부하고 여러 프로젝트를 진행해보며 나의 코딩 능력이 향상되고 성장하면서 여러 코드를 보았다. 그 중 Input 태그의 Text들을 State에 저장하기 위해선 위의 자바스크립트 코드 처럼 사용해야 한다. state를 변경 해주기위해 this.setState()를 사용하고, 변경할 state에 input 값을 넣어준다. 이 함수에서 Parameter로 event를 받아왔다. 그리곤 이를 이용해 [event.target.name]과 event.target...

This자바스크립트의 This는 다른 언어와 매우매우 다릅니다. 지금까지 다른 언어를 공부해보신 분들도 있을 것 이고, OOP언어를 접해보신 분들도 계실겁니다. 하지만 모두들 자바스크립트의 this에 대하여 감을 잡기 쉽지 않을 것 이라고 예상됩니다.자바스크립트에서 this를 이해하기 위해서는 call Stack과 call Site를 이해해야합니다.Call StackCall Stack은 함수가 Stack에 쌓이고, 호출 되는 스택을 말합니다. 이때 스택은 흔히 자료구조에서 말하는 스택을 말하는 것 입니다. 만약 Javascript_ALL의 자바스크립트의 작동원리를 읽어 보셨다면 충분히 이해 가리라고 생각합니다. 이 그림은 자바스크립트의 Call Stact 동작을 나타내고 있는 사진입니다. Main 함수를..

HTML이 5버전이 나오면서 신규로 추가된 여러 엘리멘트가 있습니다. HTML5를 공부하면서 저번에 봤던 것들인데 다시한번 보니까 또 새로워서 오늘은 이중에서 태그의 재미있는 타입들을 포스팅 해드리려고합니다. 목차는 이렇게 이루어집니다. date timeweekmonthdatetimeDate Timeinput의 type으로 datetime-local 이라고 Mark-UP 해주면 다음과 같은 이미지가 나타나게 됩니다. 처음에는 JS를 이용해서 코딩을 했었는데 HTML로 간편하게 표기할 수 있는게 정말 대단한 것 같다고 생각했어요. datetime-local 은 연도, 월, 일, 시간 모두 나타나 줍니다. Week Week 타입은 datetime과는 달리 주별로 띄워줍니다. 이름값 잘 하네요 ㅎㅎ. mont..

프로미스(Promise)자바스크립트에서는 대부분의 상황에서 작업들이 비동기적으로 이루어집니다. 어떤 작업을 요청하면서 콜백 함수를 등록하면, 작업이 수행되고 난 후 결과를 나중에 콜백을 통해 알려주는 식 입니다. 실제 비동기 작업이 아니더라도 자바스크립트의 세계에서는 콜백을 통해 결과를 알려주는 패턴이 매우 흔하게 발생합니다.초기의 자바스크립트는 이벤트가 발생했을때 콜백 함수를 호출하는 정도의 수준 이었기 때문에 복잡도가 높지 않았지만 최근에는 프론트엔드의 비중이 높아졌기 때문에 자바스크립트로 작성하는 코드를 바라만 볼 수 없어졌습니다.이렇게 복잡도가 높아지는 경우에서 특히 어려워지는 케이스는 콜백의 중첩입니다. 하나의 작업을 콜백을 통해 결과를 받은 뒤 순차적으로 다음 작업을 진행하고자 할 때 이러한 ..

브라우저 탐지브라우저 탐지 방법은 웹 개발에서 항상 뜨거움 쟁점입니다. 이 논쟁은 특히 과거에 가장 인기 있었떤 넷스케이프 내비게이터의 등장으로 더 일찌감치 시작되었습니다. 당시 넷스케이프2.0은 다른 웹 브라우저보다 훨씬 발달하여 웹사이트가 사용자에게 정보를 보내기 전에 사용자 에이전트 문자열을 확인하는 것도 가능했습니다. 이 때문에 많은 브라우저 공급사, 특히 마이크로소프트에서는 어쩔 수 없이 당시 쓰였던 브라우저 탐지 방법에 맞춰 사용자 에이전트 문자열을 넣게 되었습니다.6.1 사용자 에이전트 탐지요즘에는 클라이언트에서 브라우저를 주로 탐지하지만, 초기에는 서버에서 사용자 에이전트 문자열을 기준으로 서버에서 특정 브라우저의 접속을 막아 사이트의 내용을 아예 보여주지 않았습니다. 이때 가장 큰 혜택을..

사용자 에러 던지기자바스크립트에서 에러를 발생시키는 것도 능력이 필요합니다. 에러를 어디에 발생시켜야 좋을지 감을 잡으려면 경험이 있어야 하지만 일단 감을 잡으면 디버깅하는 시간이 줄어들고 자신이 짠 코드를 보며 느끼는 만족도 높아집니다.5.1 에러의 본질프로그래밍 에러는 예상치 못하게 발생합니다. 함수에 잘못된 값을 전달하거나 산술 연산에 잘못된 연산자를 입력해 발생하기도 합니다. 프로그래밍 언어는 코드가 정해진 기본 규칙에서 벗어나면 개발자에게 코드를 수정하라는 의미로 에러를 발생시킵니다. 만약 에러가 발생하지 않는다면 디버깅은 거의 불가능해 집니다. 에러 수정은 고사하고 문제 발생을 알아차리기까지 한참이 걸릴 수 있습니다. 이러한 의미에서 본다면 에러는 개발자의 적이 아니라 오히려 도움이 되는 친구..

NULL 비교 금지변수에 필요한 값이 할당되었는지 확인할 때 null과 비교하는 방법은 흔히 잘못 사용하는 패턴입니다.const Controller = { process : (items) => { if (items !== null) { // bad items.sort(); items.forEach((item) => { // do something }); } } };위 코드는 process() 메서드의 items 변수에 sort()와 forEach()를 사용하는 것을 보아 items 변수가 배열이라는 전제하에 작성한 코드인 것을 알 수 있습니다. 코드의 의도는 명확하지만, items변수가 배열이 아니라면 로직을 수행할 수 없습니다. 이 코드는 변수값이 null인지 확인은 하고 있지만, 에러를 막기에는 부족..