React (19) 썸네일형 리스트형 CSS #3 - SASS (2) with CSS Module CSS potential danger 저번 시간에 SASS의 장점에 대해서 소개했습니다. SASS를 통해서 CSS를 더 쉽게, 그리고 가독성 있게 작성할 수 있습니다. 또한 번들러 / 전처리기의 결과물이 결국은 CSS파일과 같기 때문에 컴파일(build / deploy)을 하는 시간을 제외하면 같은 성능을 제공할 수 있습니다. 그러나 다음과 같은 CSS파일을 작성할 때 개발자가 신경을 써야 하는 부분은 해소되지 못했습니다. CSS override ansrlm.tistory.com/19 글의 1 - 6)을 보시면, CSS파일에서 마지막 선언이 가장 높은 우선순위를 가집니다. 자바스크립트 파일들과 CSS 파일들은 성능을 위해서 하나의 자바스크립트 파일과 하나의 CSS파일, 혹은 특정 비즈니스 요건에 따라서 .. CSS #2 - SASS (1) 시작하며 CSS를 조금 더 편리하게 사용할 수 있는 방법에 대해서 소개하고자 합니다. 어떻게 글을 작성하면 방문해 주시는 분들이 이해를 더 잘하실 수 있을까 고민해 보았습니다. CRA(create-react-app)을 통해서 만든 프로젝트의 기본 파일을 각각의 방식으로 바꿔서 함께 설명을 드리면 쉽게 프로젝트를 따라 만드시고 고치는 시간을 가질 수 있을 것이라 생각합니다. App.jsx를 SASS / CSS Module / CSS in JS로 작성하지만 같은 화면을 보여주도록 해보겠습니다. 각 프로젝트는 CSS를 달리 표현하는 것은 import를 하는 방식부터 차이를 보입니다. 1. import './App.scss'; - (SASS) 2. import styles from './App.module.sc.. CSS #1 - CSS priority CSS CSS(Cascade Style Sheet)는 종속형 시트라 고도 불리며, 마크업 언어가 실제 표시되는 방법을 기술하는 언어입니다. 마크업 언어라는 것은 태그를 사용하여 문서의 내용과 구조를 나타내는 언어를 말하는데, HTML도 그 이름(HyperText Mark-up Language)에서 알 수 있듯이 마크업 언어의 일종입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높습니다. (www.w3schools.com/css) CSS 우선순위 CSS정보는 다양한 원천으로부터 제공받을 수 있고 이러한 원천으로는 제작자, 사용자, 웹 브라우저가 될 수 있습니다. 다음과 같은 우선순위를 가집니다. 1. Author Style (제작자) 개발자가 source code를 작성하는 것에 대한 .. Javascript Testing #2 - Mocha, Chai, Sinon Unit test를 진행하기 위해서 Jest라는 테스트 프레임워크가 도입되기 전까지는, 서드 파티 라이브러리들을 합쳐서 하나의 테스팅 환경을 구성했습니다. Jasmine(Angular에 최적화되어 있습니다) or Mocha + Chai + Sinon + Istanbul로 테스트를 진행할 수 있습니다. Mocha Jest가 모든 도구들을 가지고 있다면, Mocha는 이에 비해서 Test Runner의 기능만을 가지고 있기 때문에 가볍습니다. 마치 모니터 / 키보드 / 스피커 /... 이 없는 서버 본체처럼 필요한 기능들은 서드 파티 라이브러리를 추가로 가져다가 사용하는 것으로 테스트 환경을 구성하는 것을 의도합니다. 특히 Jest는 jest-environment-jsdom / jest-snapshot 등도.. Javascript Testing #1 - Jest 시작하며 사진의 스위스 군용 칼처럼 하나의 시스템을 구성하기 위해서 우리는 많은 기능을 구현하게 됩니다. 처음에 만들어진 칼은 칼, 리머, 깡통 따게, 그리고 일자 드라이버가 전부였다고 합니다. 코르크 오프너, 가위 등 추가 도구들을 붙여 나갈 때 전에 있었던 도구들이 잘 기능하는지, 그리고 추가 도구들은 의도에 맞게 기능하는지 검사하는 것이 필요했을 것입니다. 우리의 시스템의 각각의 기능이 잘 작동하는지, 그리고 각각의 기능들의 합이 잘 맞는지 등을 확인하는 것을 통해서 시스템의 안정성을 어느 정도 보장할 수 있습니다. 단위 테스트, 통합 테스트, 시스템 테스트, 인수 테스트로 구성되는 소프트웨어 전체에 대한 테스트에서 먼저 단위 테스트(unit test)를 지원하는 자바스크립트 라이브러리와 프레임워크.. GraphQL #1 - GraphQL GraphQL GraphQL은 data query language로, SQL(Structured Query Language)과 같이 데이터베이스와 정보 시스템에 질의를 할 수 있게 하는 고급 컴퓨터 언어입니다. 다만 그 목적에 있어서, graphql.org/의 메인 페이지에 적힌 것처럼, "Apps using GraphQL are fast and stable because they control the data they get, not the server.", 데이터베이스에 웹 클라이언트가 데이터를 효율적으로 가져오기 위함입니다. 그래서 데이터베이스에 데이터를 요청하기 위한 쿼리를 조합하는 부분이 백엔드에서 어느 정도 프런트엔드로 넘어왔습니다. 그렇다고 해서 GQL과 SQL이 이율배반적 관계에 있는 것은.. REST API #5 - Axios vs Fetch ? Axios의 장점 1. Intercept / Reject / Abort functions - 해당 기능이 존재하는 것으로 인해서, 에러에 대한 처리와 호출에 대한 관리를 더 섬세하게 다룰 수 있습니다. 2. Shorthand methods - options에 HTTP 메서드 타입을 지정하지 않음과 동시에 dot operator를 사용해서 더욱 명확하게 코드를 작성할 수 있습니다. 3. Auto-transform JSON - fetch()에서 response.json()을 한번 해줘야 하는 것을 자동으로 변환을 해 줘서 step을 하나 줄일 수 있습니다. 4. Timeout - fetch()는 제공하지 못하는 timeout option에 따른 abort function을 사용하는 것으로 일정 시간 이후에도.. REST API #4 - Axios Axios? 사진처럼, fetch api와 axios api를 비교하는 것은 백포도, 적포도를 비교하는 것일지도 모르겠습니다. 각자의 풍미가 있고 특성이 있는 것처럼, fetch와 axios도 각각의 매력이 있으니 상황에 맞게 좋은 방식을 선택하는 것이 좋겠습니다. MIT 라이선스를 가지는 axios api는 fetch()에서 느낄 수 있던 아쉬운 점들을 어느 정도 해소해 주는 방식들을 가지고 있습니다. 형태와 기본 틀은 거의 같은 맥락을 유지하지만, 데이터 형태 변환과 에러 처리에 있어서 더욱 효과적인 방식을 선택할 수 있습니다. axios() function axios() function은 npm / yarn를 통해서 package.json에 추가하는 것으로 사용 할 수 있습니다. $ npm inst.. 이전 1 2 3 다음
