민트코딩90 github에 일부 올리고 싶지 않을 때엔 .gitignore gulp나 react 작업 같은 경우, dist / node_modules와 같이 공유가 불필요한 파일들이 발생한다.이들까지 깃허브에 올려 작업하지 말고 업로드 파일리스트에서 제외시키자. vs code에서 최상단 디렉토리를 기준으로 새 파일 추가 버튼을 클릭하여 확장자명 없이 .gitignore라는 파일을 생성한다.# 파일 제외 (확장자명까지 작성)파일명.txt # 특정 경로의 파일 제외폴더명/파일명.txt # 특정 폴더의 파일 제외폴더명/ # 특정 확장자 파일 제외*.txt # 그 외!제외할 파일명.txt 2024. 11. 1. [window] github의 Private 레파지토리를 sourcetree로 가져오는 방법 2-3년에 한 번씩 세팅하니, 매번 이상하게 헛발질을 많이 하는지라 정리한다.(난 왜 코딩보다 세팅이 어렵지... 누가 세팅 좀 대신 해줘, 제발) 1. 소스트리를 설치한다.2. github 로그인 후 settings > (최하단의) Developer Settings > Personal access tokens > Tokens(classic)을 선택한다.3. 아래와 같이 이름, 사용기한, repo를 선택 후 Generate token 버튼을 클릭한다.4. 생성된 토큰을 복사한다(이 페이지를 벗어나면 다시 확인이 불가하다).5. 소스트리로 돌아와 상단 메뉴바에서 도구 > 옵션을 선택한다.6. 인증 > 추가를 선택한다.7. 아래와 같이 github, personal access token으로 변경 후 새로고.. 2024. 10. 31. #5 리스트 아웃풋 시키기 같은 컴포넌트를 반복해야 할 경우, map()을 통해 간단히 구현할 수 있다.리액트까지 왔는데, 자바스크립트를 설명할 필요는 없을 것 같고, 주의해야 할 점은 ()=>{}이 아닌 ()=>() !return 내에서 중괄호({ })는 스크립트가 들어간다는 의미이기 때문에 일반 가로를 사용한다. 그리고 key라는 props를 아이템에 전달해줘야 한다. 없을 경우 에러까지는 아니지만 경고문이 콘솔을 더럽힌다.html의 id와 비슷한 개념인데 전체 아이템에서 고유한 값일 필요는 없고, 형제 사이에서 고유 값을 지녀야 한다. id 데이터가 있으면 동일하게 넣어주면 되고, 없을 시 index를 활용해 생성해 주면 된다.import classNames from "classnames";const List = () => .. 2024. 10. 29. #3 컴포넌트에 변수, 함수와 스타일 삽입하기 별거 없어요. { } 안에 변수 넣어주면 그만입니다.함수의 경우 () 없이 function 이름만 넣어주셔야 해요.import classNames from "classnames";const Button = () => { const name = "Hello" const sayHello = () => { console.log("Hello") } return ( "{name}"라고 말해 )}export default Button; 만약 onClick={sayHello()} 으로 삽입하시면 페이지 렌더될 때 자동 실행되어, 미클릭 상태인데도 불구하고 실행되었음을 콘솔에서 확인할 수 있습니다. 그렇담 파라미터를 넣고 싶을 때.. 2024. 10. 25. #2 컴포넌트 생성하기 우선 Simple React Snippets를 설치합니다. 굳이? 네, React 컴포넌트 생성하기 참으로 귀찮기 때문이죠.설치 후, 원하는 위치에 ${파일명}.jsx을 생성하고 해당 파일에서 "sfc"를 입력 후 enter키를 누르시면 기본코드가 자동입력되고 한 번에 컴포넌트 이름을 지정할 수 있습니다. 그렇게 생성된 컴포넌트의 기본형입니다.const 컴포넌트명 = () => { return ()}export default 컴포넌트명;const Button = () => { return ( Hello )}export default Button;여기서 주의사항!return안에는 하나의 요소만 들어갈 수 있습니다. 아래와 같이 작성하면 바로 오류나요~const Button = () .. 2024. 10. 25. #4 보다 편한 스타일 작업을 위해 sass 및 classnames 설치 아직도 css으로 작성하시는 분 없으시겠죠?(간혹 만난다는 건, 안 비밀) 일단 설치!버전 딱히 상관없다. 최신버전으로 받자!그래도 제 버전이 궁금하신 분을 위해, 저는 ^1.80.4입니다.npm i sass 혹시 gulp-sass로 작성한 scss를 옮겨왔더니 오류가 나신다고요?예, 정상입니다.dart sass로 코드 변경해주셔야 해요.거지 같고, 참 좋죠? dart sass는 사실 별거 없고, @mixin, $variable가 선언되어 있는 파일을 상단에 @use로 가져와 사용해야 합니다.@use "../base/variables.scss" as var;@use "../base/mixins.scss" as *;.test { color: var.$primary; @include fontSize(20);.. 2024. 10. 25. #1 react 설치 npx create-react-app projectName 자세한 방법은 아래 글에서 확인 가능하십니다.2021.08.11 - [React (old ver)/basic] - react 설치 및 개발환경 설정 react 설치 및 개발환경 설정(node 14.17.0으로 설치 진행하였습니다) 1. node 및 vscode 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefifresh-mint.tistory.com 앞으로 해당 카테고리에서 .. 2024. 10. 25. [웹접근성] header/footer는 오직 한번 사용? 아니! 일반적으로 header는 로고를, footer는 coryright를 담기 위해 한 번씩만 사용하는데, 사실 header는 가까운 부모의 타이틀 영역을, footer는 출처 영역을 담는 태그로, 반드시 한 번만 사용할 수 있는 건 아니다. { ...content } 다만 위에서 "영역"이라 표현했듯이 header안에 h2 하나만 들어가는 경우라면 header는 불필요한 태그라는 의견도 있다. mian / article과 같이 큰 영역에 타이틀 영역이라 구분할 수 있는 영역이 있을 때에 사용하는 것을 추천한다. article title 2023.08.27 article contents 1 article contents 2 article contents 3 article title article content.. 2023. 8. 27. [웹접근성] CSS: outline는 절대 지우지 말 것! 간혹 'link / button을 누르고 난 후 생기는 border 좀 삭제해 주시겠어요?' 같은 QA 요청을 받는데.... outline: none은 웹접근성에 반하는 코드이다. 오히려 어디선가 은거하고 있는 outline: none가 없는지 찾아 제거해야 한다. 2023. 8. 27. [웹접근성] Skip 메뉴 header의 존재로 main content까지 불필요한 리딩이 있기 때문에, 사용자가 바로 main으로 넘어갈 수 있도록 body 내 최상단에 skip 메뉴 리스트를 추가한다. Skip to main content Skip to footer 화면에 숨길 때는, 지난 blind 편에서 언급했듯이 text-indent:-9999px와 같은 방법이 아닌, 살짝~ 가리는 정도를 추천한다. [css-real] 웹접근성을 고려한 .blind(hidden) 처리 스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다 fresh-mint.tistory.com .skip { positio.. 2023. 8. 27. [css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인 1. 개발자도구(F12)를 열어, 더보기 > More tools > Render 선택 2. 하단에 추가된 Render에서 Emulate CSS media feature prefers-color-scheme의 옵션을 dark로 변경 [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' fresh-mint.tistory.com [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통.. 2023. 8. 25. [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다 부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다. 덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다. body.dark img { filter: brightness(.8) contrast(1.2); } @media (prefers-color-scheme: dark) { img { filter: brightness(.8.. 2023. 8. 25. [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' 를 외치며 dev에 올려보면, '내가 이제 복붙도 못하는 지경인가' 싶을 것이다. 아니다. 지원율이 너무나 낮을 뿐이다. 현재로서 스크립트 없이 우리가 선택할 수 있는 방법은 prefers-color-scheme 이다. 'prefers-color-scheme' 은 { } 안에 모든 컬러를 재정의하면 된다. .link { color: blue; } @media (prefers-color-scheme: dark) { .link { color: yellow; } } 다만 위와 같이 작성하면, 불필요하.. 2023. 8. 25. [scss] @at-root가 아닌 @mixin으로 최상위 부모에 클래스 추가하기 .parent.bold .child span { font-weight: bold }를 지정하고자 할 때 @at-root를 잘못 활용하는 경우가 있다. .parent { .child { span { @at-root .bold & { font-weight: bold; } } } } 위의 컴파일 결과물은 .bold .parent .child span { font-weight: bold } 이다. @at-root를 이용하여 .parent에 .bold 클래스를 추가하고자 한다면 귀찮더라도 클래스명을 다 적어줘야 한다. .parent { .child { span { @at-root .parent.bold .child span { font-weight: bold; } } } } 그런데, 이를 간단히 해결해 주신 분이.. 2022. 5. 4. [css] 텍스트 길이에 맞춰 너비 조절하기 grid-template-columns: minmax(최소너비, max-content) 1fr; HTML 삽입 미리보기할 수 없는 소스 위와 같은 경우, 간혹 "텍스트 길이에 맞춰 너비가 늘어나게 해주세요~" 라는 요청 때문에 로 변경하는 경우가 있다. 더이상 그러지 말자, 우리에겐 grid가 있다. HTML 삽입 미리보기할 수 없는 소스 grid-template-columns: minmax(최소너비, max-content) 1fr; 예로, grid-template-columns: minmax(100px, max-content) 1fr; 일 때, grid 첫번째 요소의 기본 너비는 100px이다. 하지만 콘텐츠가 길어 너비가 120px이 된다면, 화면에 그려지는 너비는 grid-template-columns: 120px 1fr과 같다. 결론은 과 이별하자. 가나다 가나다라마바사아자차카파타하 .gri.. 2022. 1. 25. 이전 1 2 3 4 ··· 6 다음
