Engineering/etc.
프론트엔드 테스트 Mock 목 활용하기
Mocking (모킹)(mock: 모조품)테스트할 때 의존하는 내부 또는 외부 요소를 가짜로 만들어 사용하는 방식입니다. 모킹은 실제 객체를 사용하지 않고, 해당 객체의 동작만을 흉내냄으로써 테스트를 독립적으로 수행할 수 있도록 합니다.모킹의 활용성: 테스트뿐만 아니라 로컬 개발 환경에서도 생산성을 높입니다. 예를 들어, JSONPlaceholder와 같은 가짜 API를 사용해 빠르게 테스트할 수 있습니다.독립적인 테스트: 상용 API, 데이터베이스, 라이브러리 등의 의존성 없이 코드의 동작을 독립적으로 테스트할 수 있습니다. 이는 테스트의 신뢰성을 높여줍니다.모킹의 필요성: 모킹을 사용하지 않으면 테스트 시간이 길어지고, 모든 인터페이스가 구현된 환경에서 테스트를 수행해야 하는 번거로움이 생깁니다. 필..
px, em, rem 차이를 알아보자
1. px px은 고정적인 단위이지만, 전세계의 1cm가 동일하듯이 모든 1px이 같은 것은 아니다. 픽셀은 모니터 해상도에 따라 고정적인 크기로 설정된다. 모니터가 바뀌지 않는 한, 브라우저에서는 절대적인 고정값으로 한번 설정된 크기는 변하지 않으므로 반응형 웹 구현이 아닌 경우 사용하는 것이 좋다. 2. em 가변적인 단위. 폰트 사이즈를 기준으로 계산된다. em 은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다. 상위 요소의 폰트 사이즈를 상속 받을 수 있다. px 보다는 반응형에 적합하지만, 상위 요소의 사이즈가 바뀌거나 뎁스가 깊어질수록 사이즈를 관리하기 어렵다. em 단위는 아래 예시처럼 계산된다. html { font-size: 10px; } body { font-size: 15px; }..
0316_Web page를 꾸미는 역할, CSS
CSS (Cascading Style Sheets) 기존 HTML이 정보에 집중하는 언어라면, CSS는 디자인적 요소를 책임지는 별도의 언어이다. HTML로 웹 페이지에 들어갈 정보를 일단 입력하고 나면, CSS를 통해 사용자로 하여금 간편하고 보기 좋도록 페이지를 꾸며준다. 도입 배경을 간단히 설명하면 다음과 같다. 원래는 HTML 의 기존 틀 안에서 스타일적 요소를 넣어 페이지를 꾸미다 보니 정보 요소와 디자인적 요소가 혼재되어 코드가 지저분해지고 용량이 커지며 사용자들이 많아질수록 불편을 겪을 수 밖에 없는 구조가 되었는데, 이런 문제를 해결하기 위해 새로운 언어를 개발하였고 그게 바로 CSS이다. 장점 CSS 덕분에, 코드의 중복성을 제거하고 / 웹페이지의 유지 및 보수가 용이해지고 / 코드 가독..
0315_First step to Web, Summary about HTML
HTML - HyperText Markup Language HTML은 무엇인가. => Language의 개념. 결론부터 말하자면 웹페이지를 구성하기 위해서 작성하는 컴퓨터 언어이다. 쉽게 말해 개발자가 의도하는 대로 웹브라우저가 읽어들여 웹페이지를 구성할 수 있도록 하는 일종의 명령어인셈이다. 따라서 웹페이지를 만들기 위해서는 필수적으로 알아야 한다. HTML는 1980년대쯤? 처음 만들어졌다고 하는데 일반인들에게는 1990년대에 공개된 것으로 알고 있다. 자세한 history는 모르니까 ->위키피디아 참고. (https://ko.wikipedia.org/wiki/HTML) 그래서 HTML은 무엇이 중요할까. 바로 'Information(정보)'이다. 웹 페이지에서 HTML이 가지고 있는 것은 바로 정보..