애매한 카테고리 styled-components<💅>를 써보았다. 🤔 써보고 싶었던 이유 옛날에 만든 프로젝트들을 리팩토링 할 겸 꺼내봤다가 이걸 무슨 생각으로 썼지 싶은 코드들에도 충격 받은건 둘째치고 컴포넌트 별로 따로있는 SCSS파일이 너무 보기가 싫었다. 막 개발공부 시작했을 때 만든 프로젝트라 SCSS 배워본다고 튜토리얼에서 본대로 따라 만들었었는데, 다시보니까 매우 간단한 프로젝트라서 CSS코드도 별로 없는데 굳이 별도의 파일을 만들어서 디렉토리가 지저분하게 길어지는게 보기에 좋지 않았다. 게다가 각각의 컴포넌트를 개별 폴더에 저장했었는데, import 할때 경로 길어지지말라고 index.js파일에서 컴포넌트를 다시 export해줘서 이렇게 되면 컴포넌트 하나당 총 파일이 3개(예를들면 Button.jsx, Button.scss, index.js)가됨...;.. 더보기 local storage, session storage, cookie local storage, session storage, cookie 모두 클라이언트 스토리지이며 SOP(same-origin-policy)를 따른다. SOP(Same-Origin-Policy, 동일출처정책)란 어떠한 문서나 스크립트가 다른 포로토콜 / 포트 / 호스트에 있는 리소스에 접근하는 것을 제한하는 정책이다. local storage와 sesseion storage는 상대적으로 새로운 API이며(즉 모든 브라우저들이 이를 지원하지는 않는다.) 서로 유사하다. 두 스토리지의 데이터는 읽기/수정이 쉬우므로 애플리케이션 안에 보안 관련 데이터나 민감한 정보를 저장하지 않는 것이 좋다. 🗳 local storage 5MB/10MB 클라이언트 사이드에서만 읽기가 가능하고, 자바스크립트나 브라우저를 통해 .. 더보기 미디어 쿼리 사용하기 미디어 쿼리는 단말기의 유형과 화면 해상도, 뷰포트 너비 등에 따라 웹사이트나 앱 스타일을 수정할 때 유용하다. 미디어 쿼리는 대소문자를 구분하지 않으며 화면, 티비, 프린터와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어 쿼리는 유형을 지정했다면 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산된다. 미디어 쿼리가 거짓을 반환하더라도, 스타일 시트는 다운로드 된다. 그렇지만 그 안의 내용은 쿼리의 값이 참이 되어야 적용된다. 기본적으로 @media구문은 css 내부의 구문으로, @media구문으.. 더보기 알고리즘 사이트 추천 - leet code https://leetcode.com/ LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 국내 알고리즘 사이트는 간혹 문제가 javascript로 풀게끔 지원이 잘 안되거나, 문제 수가 적다는 단점이 있다. 코딜리티는 자바스크립트 지원은 잘되지만 문제수가 적고 해답 찾기가 힘들다. 찾다보니 해외에서는 leet code를 많이 사용하는 것 같아 알게되었다. 특히 .. 더보기 VS Code에서 react code snippet 만들어 쓰기 매번 컴포넌트 만들때마다 동일하게 작성하는 코드가 있다. 예를 들어 LoginTemplate이라는 컴포넌트를 만든다면 아래와 같은 식으로 작성해주는데, 이 동일한 코드를 매번 컴포넌트 만들때마다 반복하다보니 snippet을 만들어 개발 효율성을 좀 더 높이고자 하였다. import React from 'react'; import styles from './LoginTemplate.scss'; import classNames from 'classnames/bind'; const cx = classNames.bind(styles); const LoginTemplate = () => { return( ) } export default LoginTemplate; VSCode에서 snippet을 설정하는 방법은 .. 더보기 SEO(Search Engine Optimization) 그리고 시맨틱 마크업 검색 엔진 최적화(Search Engine Optimization, SEO) 검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 웹 페이지와 관련된 검색으로 검색한 검색 결과 상위에 웹 페이지가 노출된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있다. 검색 엔진 최적화와 시멘틱 마크업 웹 페이지를 이루는 HTML요소들을 가지고 검색엔진에 노출 될 수 있도록 하기 위해 시멘틱한 마크업이 필요하다. 웹 페이지를 봤을 때 눈으로 보이는 모습은 같을 지언정, 어떤 HTML 태그가 쓰였느냐에 따라 다르게 해석된다. 또 웹 문서의 내용-구조를 파악하기 위해 중요하.. 더보기 UX/UI design 유용한 참고 사이트 - dribbble, UI Movement Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. dribbble.com 프로젝트만들면서 프론트 디자인을 위한 아이디어를 얻기 위해 여기저기 사이트를 많이 찾아봐는데, 여태 찾아본 사이트들 중에서는 dribbble이 제일 감각적이고 유용한 것 같다. 사실 웹사이트를 디자인 템플릿을 제공하거나 하는 사이트는 아니기 때문에 단순히 아이디어.. 더보기 메소드와 함수 (Method and Function)의 차이점 You don't know JS(this와 객체 프로토 타입, 비동기와 성능)편을 읽던 중, 여타 언어에서 객체(클래스)에 부속된 함수를 주로 '메소드'라 부르고 자바스크립트 함수 역시 객체의 부속물이라 생각하기에 ... 엄밀히 말해 함수는 결코 객체에 속하는 것이 아니며, 객체 레퍼런스로 접근한 함수를 그냥 메소드라 칭하는건 그 의미를 지나치게 확대해 해석하는 것이다. 라는 구절을 읽으며 메소드와 함수의 차이점이 정확히 뭘까?라는 궁금증이 들었다. 여태까지는 단순히 어떠한 기능을 하는 코드 조각을 'Java에서는 메소드, JavaScript에서는 함수라고 부른다' 라고 생각해왔다. 구글링을 해보니 스택오버플로우에 동일한 질문이 올라와있어서 이를 참고해서 요약해보았다. 링크로 가기 👉 What's the.. 더보기 foo, bar, baz란 대체 무엇인가?! JS 관련 책을 읽다보니 예제코드에서 빠지지 않고 등장하는 변수명 foo, bar, baz! 대체 무엇인가 궁금해서 찾아 보았다. 일단 위키피디아에서는 어원이 모호하다고 하며, 몇가지 설을 제시한다. 1. foo가 bar 와 함께 사용하게 된 것은 세계 이차대전 당시 군대 은어인 FUBAR인 (Fucked/Fouled Up Beyond All Recognition/Any Repair/All Reason)에서 온것이라고도 본다. 2. foo 라는 단어 자체는 대력 1930 년에서 1952 년 사이에 Smokey Stover라는 만화에서 사용된적이 있다. 만화의 작가 Bill Holman이 차이나 타운에서 복(福)을 상징하는 옥으로 만들어진 조각상을 보고 중국어 단어 fu(중국어로 복(福)을 의미)를 음역하.. 더보기 이전 1 다음