오늘의 CODE

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~ https://css-tricks.com/strategies-for-cache-busting-css/ Strategies for Cache-Busting CSS | CSS-Tricks Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS css-tricks.com CSS 브라우저 캐싱에서 주요 성능을 향상 시킬 수 있다. 주어진 시간동안 CSS 파일을 파악하..

알고리즘? 컴퓨터에게 내리는 지시사항을 나열한 것 시간 복잡도? 시간 복잡도는 n개의 입력 데이터에 대해 알고리즘이 문제를 해결하는데에 얼만큼의 시간(걸리는 절차 수)이 걸리는지를 나타내는 것을 말한다. 일반적으로 시간 복잡도를 나타내기 위해 점근적 표기법(asymptotic notation)을 사용한다. 점근적 표기법 - 중요하지 않은 상수와 계수들을 제거해 알고리즘의 실행 시간에서 중요한 성장률에 집중하는 방법을 의미함 점근적이라는 의미는 가장 큰 영향을 주는 요소만 계산한다는 의미 점근적 표기법에는 다음과 같은 세가지가 존재한다. 오메가 표기법(Big-Ω notation) 세타 포기법(Big-θ notation) 빅오 표기법(Big-O notation) 효율적인 방법을 고민한다는 것은 시간 복잡도를..

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~ 3. React + CSS Modules = 😍 CSS Modules and React | CSS-Tricks In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will css-tricks.com CSS Modules의 시리즈의 마지막 글에서는, webpack을 토대로 정적 React 사이트를 만드는 방법을 살펴보겠다. 이 정적인 사이트에는 홈페이지와 실제 작동 ..

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~ Part 2. Getting Started with CSS Module Getting Started with CSS Modules | CSS-Tricks There isn't one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which css-tricks.com CSS 모듈에는 Javascript 템플릿, CSS 파일 또는 이를 작동시키는 빌드 단계를 만드는 단일 접근 방식이 없다...

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~ [원문] What are CSS Modules and why do we need them? What are CSS Modules and why do we need them? | CSS-Tricks I’ve been intrigued by CSS Modules lately. If you haven't heard of them, this post is for you. We'll be looking at the project and it's goals and aims. If css-tricks.com 최근들어 나는 CSS 모듈에 흥미를 느꼈다. CSS 모듈에 대해 들어본 적 없다면, ..

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천한다. [원본글] Different Ways to Write CSS in React Different Ways to Write CSS in React | CSS-Tricks We’re all familiar with the standard way of linking up a stylesheet to the of an HTML doc, right? That’s just one of several ways we’re able to css-tricks.com 우리는 HTML파일의 태그 내부에서 stylesheet를 연결하는 방법에 친숙하다. 그것은 CSS를 작성할 수 있는 여러가지 방법 중 하..

제목부터 흥미롭지 않은가? '자바스크립트 프레임워크의 전쟁이 끝났다.' 심지어 부제는 '승자는 단 하나이다.' 궁금하지 않을 수 없지~ 안그래도 변화가 빠른 프론트엔드의 세계에서 어깨춤을 추고 있는데 뭔가 제목부터가 너무 자신만만한 것으로 보아 왠지 시험이 끝난 것만 같은 속이 후련해지는 듯한 착각이 느껴지는 듯 했다. ㅎㅎ 그래서 오늘의 article로 선정했다. 참고로 이 article에서는 라이브러리와 프레임워크의 경계를 나누지 않은 듯한 느낌이 든다. (개인적으로 굳이 나눠서 생각할 필요가 없다고도 생각한다) 그러므로 이에 대한 혼란이 없길 바란다. 이것도 누군가 한사람의 의견일테니 너무 심각하지 않게 가볍게 읽으시길 바라며 이제 시작~!! ** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가..

package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다. 일반적으로 Root 디렉토리에 위치한다. npm init 으로 package.json을 생성했다면 터미널에서 입력 프로세스와 함께 프로젝트 정보는 이미 name(프로젝트명)과 version(1.0.0)이 자동 입력되어 생성되었을 것이다. 패키지 변경은 버전 변경과 함께 제공되어야 한다는 것만 우선 기억하도록 하자. 이번 글은 패키지 정보에 포커스를 맞출 것이므로 프로젝트 정보에 대한 추가 설명을 진행하지 않겠다. 패키지와 모듈 1. 패키지 패키지는 package.json으로 설명되는 파일 또는 디렉토리이다. 패키지는 npm 레지스트리에 공개되기 위해 반드시 package.json 파일을 가지고 있어야 한..

클라이언트에서 요청(request)를 보내면 서버는 요청을 처리해서 응답(response)을 한다. 이 때 브라우저와 서버간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용한다. HTTP 프로토콜이란 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 상호간에 정의한 (데이터 교환 교환을 위한)규칙을 말한다. HTTP 프로토콜은 서버에 연결하고 요청해서 응답을 받으면 연결을 끊어버리는 Connectionless(비연결지향)와 연결을 끊는 순간 통신이 끝나며 상태 정보를 유지 않는 Stateless(상태정보비유지)라는 특징을 가진다. 이러한 특징 때문에 세션과 같은 별도의 추가 정보를 관리하지 않기 때문에 이러한 추가 정보를 가지고 있어야 하는 상황에는 쿠키, 세션 등을 이용해 클라이언트..

회사에서 지난 프로젝트의 소스코드를 유지, 수정하고 새로운 기능을 추가해야 하는 추가 프로젝트에 참여하게 됐다. 기존 소스 코드는 React로 만들어진 프로그램으로 아직 수정될 내용이나 추가될 기능에 대한 기획서를 받아보지 못한 상태에 코드 분석을 먼저 진행하기 위해 소스코드를 클론했다. 근데... npm install을 해도 아무리 해도 node_modules 폴더도 생성되지 않았으며 당연히 실행되지 않았다. 검색 및 지인 찬스를 이용해 결국 버전이 너무 낮은 모듈 때문에 그랬던 것으로 확인했다. 그도 그럴 것이 소스코드 마지막 수정이 3년전... 해당 모듈을 stable한 버전으로 변경하니 실행되는 것을 확인했다. 어찌저찌 상황은 해결했지만 보다 근본적인 의문이 생겼다. 그동안은 그냥 튜토리얼을 보고..