우아한테크코스

innerHTML 사용하지마!

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 코드리뷰 중 다음과 같은 피드백을 받았다. ...???innerHTML이 별로구나..처음 알았네요. 피드백을 받기 전까지는 innerHTML이 제 코딩 인생에 전부였지만, 이번을 계기로 innerHTML을 사용하면 안되는 이유와 innerHTML 속성의 대안에 대해 알아 보겠습니다. 목차 Node.textContent vs Node.innerText vs Element.innerHTML 2.XSS(Cross Site Scripting) 크로스 사이트 스크립팅 Element.insertAdjacentHTML() innerHTML의 대안 참고 1. Node.textContent vs Node.innerText vs Element...

우테코 2월 3주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 없음 이번주 회고 Facts (사실, 객관) 보이는 라디오 발표 git 강의 시청 Level1 자동차 경주 미션 마무리 미션 코드 리뷰 반영 E2E 테스트 코드 학습 Cypress 학습 자바스크립트 비동기 처리 학습 하루에 정한 일정을 소화하지 못함 주말에 친구랑 술먹음 Feelings (느낌, 주관) 많은 일정 속에서 보이는 라디오를 발표 한다는 것은 시간적으로 여유가 없었지만 막상 하다보니 즐겁고 딱딱하게 느껴졌던 우테코 생활이 한껏 부드러워졌다. git 명령어는 너무나 다양하구나! 코드 리뷰를 하면서 네이밍은 너무나 어렵고 정말...내 코드가 부끄럽다. 리뷰를 해주신 리뷰어 분께 감사할뿐! Cypress를 학습하고 E2..

E2E테스트, Cypress, TDD

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고있습니다. 내가 만든 애플리케이션은 잘 작동 하는 걸까? 그동안 프로그램을 개발하면서 테스트 코드를 작성하고 테스트 프레임워크를 사용한 적은 없었습니다. 이번에 우테코에서 E2E테스트에 대해 학습 하면서 테스트의 중요성과 테스트 프레임워크의 한 종류인 Cypress에 대해 간략히 기록해 보겠습니다. E2E 테스트 E2E(End to End)테스트는 사용자의 입장에서 테스트를 하는 것을 말한다. 사용자가 버튼을 클릭 할 경우, 올바른 동작이 작동 되는지 등을 테스트한다. 왜 E2E를 해야 하나요? E2E테스트를 하면 사용자의 입장에서 동작을 생각하게 되므로 자연스러운 사용자 경험을 제공할 수 있다 테스트를 자동화 함으로써 테스트하는 시간을 ..

자바스크립트 비동기 처리

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고있습니다. 자바스크립트에서 비동기 처리에 사용되는 callback함수, Promise, async/await에 대해 간단히 알아본다. 동기식(Synchronous)? 비동기식(Asynchronous)? 동기식은 작업 실행의 순서가 정해져 있어 순서대로 실행되는것을 말한다 console.log('1') console.log('2') console.log('3') /* 출력 1 2 3 */ 비동기식은 작업 실행의 순서에 상관없이 다음 순서의 작업이 실행되는것을 말한다. console.log('1') setTimeout(()=>{ console.log('2') },1000) console.log('3') /* 출력 1 3 2 */ 자바스크립트 ..

우아한테크코스 3기 프리코스 최종 미션(9) - 회고

2020년 12월 19일 오후 1시부터 6시까지 최종 테스트를 본 후기를 간략하게 가볍게 남겨본다. 우아한테코스 3기 프리코스 회고 코로나 19의 여파로 이번 시험은 온라인으로 치러졌습니다. 시험 시작 전 핸드폰으로 ZOOM 화상회의에 접속해서 신분증 검사를 했고 시험 시간 내내 줌을 통한 시험 감독이 이루어졌습니다. 줌을... 처음 접했던... 다른 지원자분들의 키보트 치는 소리가 아직까지 생생하게 들리듯 하네요 하하하... 집중이 전혀 안돼서 폰을 만지작만지작 소리를 어떻게 줄이지? 10분 동안 고민을 했던 것 같습니다. 결국 문의를 보냈는데 코로나 X%$!%@$&!%^@ 원래였으면 오프라인 시험인데... 핸드폰 소리를 줄여도 보고 설정도 들어가보고 이것저것 하다 제 귀가 감당할 정도의 소음의 크기가..

우아한테크코스 3기 프리코스 최종 미션(8) - View-ResultView.js

InputView에서 입력 받은 데이터를 MainController에서 원하는 형태로 데이터를 바꾸어 ResultView에 전달한다. //MainController.js onSubmit(input_info) { /* ... */ this.ResultView.render({ result: result.join(" ▶︎ "), option: option === "distance" ? "최단거리" : "최소시간", ...this.getTotalDistanceAndTime([...result]), }); } 테이블 표 구현 import View from "./View.js"; export default class ResultView extends View { constructor() { super(); this..

우아한테크코스 3기 프리코스 최종 미션(7) - View-InputView.js

전에 MVC패턴에서 View를 다시 한번 생각해보면 Model, Controller에 대해 알지 못하고 화면에 데이터를 저장을 하지 못하며 변경된 화면요소에 대한 처리를 위해 Controller에게 통보를 해야한다. 우선 InputView와 MainController을 연결하고 화면을 렌더링 해야한다. class View는 해당 요소를 파라미터로 받아 화면을 구현한다. import View from "./View.js"; export default class InputView extends View { constructor() { super(); this.tag = "[InputView]"; } setup(el) { this.init(el); this.el.innerHTML = this.render();..

우아한테크코스 3기 프리코스 최종 미션(6) - View

화면을 구현하기 앞서 각 화면 컴포넌트들의 최상위 부모 객체를 만들어야 한다. 화면에서 각 컴포넌트들을 분리하고 MainController에서 이벤트를 처리하는데 메소드를 재사용하고 유지보수를 위해 View.js 부모객체를 만든다. - View 클래스를 살펴보면 이벤트 발생시 init(el)메소드가 해당 element를 파라미터 값으로 받아서 초기화 한다. - on메소드는 해당 요소에 대한 이벤트 리스너를 설정한다. - emit메소드는 해당 이벤트가 발생할 때 원하는 이벤트를 실행시켜서 데이터를 보내를 수 있다. 나름 설명을 한다고 글을 섰지만 설명하는게 어렵다...다음 글들을 포스팅하면서 어떻게 사용되는지 설명하도록 하겠습니다. View.js export default class View { const..