분류 전체보기 (29) 썸네일형 리스트형 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를 작성하는 것에 대한 .. 근황 자기반성 글을 올리는 것이 생각보다 많이 늦어지고 있습니다. 정확히 알지 못하는 부분들을 채워나가는 시간이 필요하기도 했지만 더 큰 문제는 모래 위에 집을 짓는 듯한 불안감이 함께한다는 것이었습니다. HTML / CSS / JS의 기반이 튼튼하지 않다는 것을 계속 느끼고 있었습니다. "GraphQL의 은 웹 소켓을 사용하는 것과 비슷합니다."에서 "웹 소켓은 뭐지?" -> "Socket.IO는 뭐지?" -> "Ajax long polling은 뭐지?" -> "어떻게 만드는 것이 옳은 방법이지?"와 같은 무지에서 오는 무력감을 느꼈습니다. 자기 자신이 기본 원리와 기술에 대한 확신이 없는데, 억지로 돌아가게 만드는 소스를 만드는 것이 아닌가 하는 생각이 맴돌았습니다. 그래서 글을 쓰려고 하는, 그리고 했던.. 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)를 지원하는 자바스크립트 라이브러리와 프레임워크.. 블로그에 대한 마음가짐 왜 시작하는가 블로그를 시작할 생각은 2~3년 전부터 가지고 있었습니다. 군대에서 소거가 진행되는 뇌를 보면서, 그리고 계속 잊어버리는 나를 보면서 아카이빙을 진행해야겠다는 생각이 있었습니다. 작년 / 재작년 신입사원으로 회사에서 일을 진행하는 것이 너무 바쁘기도 하고 혼자 기술을 익혀야 하는 시간이 부족해서 한 곳으로 밀어두었으나 "올해는 다르다"와 같은 야구단 다짐처럼 올해는 과거에 자/타에 의해서 하지 못했던 일을 시작하고자 합니다. 어떻게 진행하는가 섬네일의 사진처럼, 저는 '대담한 통솔자'입니다. 참 신기한 게, www.16personalities.com/에서 테스트해서 나오는 결과는 정말 잘 맞는 듯합니다. 프로젝트 일을 할 때도 100%는 아니더라도 근접한 이해를 하고자 퇴근 이후, 주말에도.. 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이 이율배반적 관계에 있는 것은.. Husky - before Git push, adjust ESLint Git Hooks Git을 통해서 여러 인원과 함께 프로젝트 소스를 관리하는 것이 일반적입니다. 그런데 만약 ESLint와 Prettier 등 정적 분석 도구들을 아무리 잘 맞추었다고 해도, 개개인이 적용을 하지 않고 push를 하면 어떻게 될까요? linting을 칼같이 지키는 인원은 자신이 변경하지 않은 소스들 까지도 같이 변경점을 보이면서 push를 하게 되고 어떤 소스를 누가 왜 고쳤는지에 대한 tracking이 어려워질 것입니다. 또한 정해진 커밋 메시지 포맷(prefix로 commit 수 기입 / prefix로 이슈 넘버 기입 /...)을 실수로 인해 누락하는 경우도 있습니다. 이처럼 프로젝트 진행에 있어서 생길 수 있는 문제점들을 해결하기 위해서 git은 git hooks라는 것을 제공하고 .. 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을 사용하는 것으로 일정 시간 이후에도.. 이전 1 2 3 4 다음
