전체 글

webpack, babel 프론트엔드 개발환경 세팅

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 이번주 webpack과 babel로 환경설정을 할텐데...webpack PTSD가 도져서 잠이 안온다.. 그래서 알아봤다 https://www.youtube.com/watch?v=zal9HVgrMaQ https://www.youtube.com/watch?v=LKkg0h7f6-U (세상에는 도움을 주시는 분들이 참 많음...) 빠르게 webpack + babel 로 프론트엔트 개발환경 세팅을 알아본다. 1. npm init -y package.json 파일 생성됨 2. npm install webpack webpack-cli —save-dev webpack과 webpack-cli 패키지 설치 (npm i webpack webpa..

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 */ 자바스크립트 ..

우아한테크코스 4기 합격

작년에 우테코 3기에서 불합격을 했지만 이번 4기에 합격을 했다. 좋은 기회를 얻은 만큼 열심히 해야겠다.

[CSS] font-size px, em, rem 폰트단위

px, em, rem 단위에 대해 간략히 알아봅니다. px pixels(픽셀) 화면 해상도에 대한 상대적 크기입니다. em 해당 폰트의 대문자 M의 너비를 기준으로 한다. 지정된 요소의 font-size의 배수라고 생각하면 된다. 자신의 font-size 값이 없을 경우 부모 요소의 font-size의 영향을 받는다. em 예시 자신의 font-size 값이 없을 경우 font size 자신의 요소에 font-size의 없고 상위 요소에 font-size값이 있으므로 1em의 값은 30 * 1 = 30px 이다. 자신이 요소에 font-size값이 있을 경우 font size child요소의 font-size 값이 존재 함으로 margin-left 값은 10px이다. rem root em 이라는 뜻 루트..

[ReactJS]리액트 react-router-dom / HashRouter, BrowserRouter, Route, Switch, Link

리액트 react-router-dom의 사용법에 대해 간단히 알아본다. react-router-dom 패키지는 SPA을 구현할 때 사용 되어 지며 다음과 같은 패키지들은 용도를 구분하여 사용한다. - react-router 웹 & 앱 - react-router-dom 웹 - react-router-native 앱 react-router-dom 우선 react-router-dom을 설치한다. npm install react-router-dom 완료 후 App.js에 BrowserRouter, Route, Switch, Link를 import 한다. import {BrowserRouter, Route, Switch, Link} from "react-router-dom" BrowserRouter, HashR..