리액트를 개발하다 보면, 모바일이나 태블릿 등에서 확인을 해야 할 때도 있다. 바로 반응형이 잘 되는지에 대한 체크인데, 확인하는 방법은 매우 간단하였다. 우선 필자의 운영체제가 윈도우 기준으로 설명을 해보려고 한다. 먼저, widow + R 을 눌러 실행창에 cmd라고 검색한다. 혹은 시작 버튼에서 명령 프롬프트 OR cmd로 검색한다. 그리고 거기에 명령어 ipconfig를 검색을 한다. 그럼 아래처럼 뭔가 촤르륵 나오는데 여기서 봐야 할 것은 단 한 가지다. IPv4 주소에서 000.000.00.00이라는 숫자가 있다. 그럼 아래처럼 입력을 하면 된다. IPv4 주소 : 123.456.78.90 123.456.78.90:3000 만약 IPv4 주소가 123.456.78.90이라 하였을 때, 내 핸드..
자바스크립트 알고리즘 공부하다보니 array에 대한 새로운 내용을 배우게 되어 정리하게 되었다. Array.from() 유사한 배열 객체나 반복 가능한 객체를 복사하여 새로운 Array 객체를 만든다. String에서 배열 만들기 단어를 문자배열로 만들어준다. Array.from("study"); // ['s', 't', 'u', 'd', 'y'] 이처럼 특정 단어를 문자열로 배열로 만들어 줄 수 있다. Array.from과 화살표 함수 사용하기 Array.from에서는 화살표 함수도 사용할 수 있다. Array.from({length: 5}, () => 1); // [1, 1, 1, 1, 1] arr에 새로운 배열을 만든다. 조건은 길이는 5개며, 그 값은 1로 모두 통일하여 넣는다.
node-sass버전은 계속 올라가는데 오류가 발생하는 듯하다. 알아보니 버전을 다운 그레이를 해야 한다고 한다. 먼저 기존의 node-sass를 삭제한다. $ npm uninstall node-sass $ yarn remove node-sass 그런 다음 낮은 버전으로 node-sass를 설치를 한다. $ npm install node-sass@4.14.1 $ yarn add node-sass@4.14.1 npm과 yarn을 쓰시는 것에 따라 두 가지 명령어를 작성하였다. 생각보다 버전을 낮추라고 나오는 경우가 꽤 있는 듯하다. TMI node-sass는 노드에 의존성이 강하기 때문에 노드 버전에 따라 node-sass의 버전이 달라진다. 그래서 npm에서 node-sass공식문서에 보면 다음과 같은 ..
오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 CSS를 정리하려고 한다. 원래는 낱말이 자동으로 줄 바꿈이 되면 기존의 낱말이 떨어지는 경우가 일반적이다. 그런데 이 부분도 보기에는 좋지 않고 줄 바꿈에 의해 영어의 경우 하이폰(-)을 넣곤 하는데 그런 비슷한 기능이라 할 수 있다. word-break 형식 정의 줄바꿈을 할 때 단어 기준으로 할지, 글자 기준으로 할지 정하는 속성입니다. 기본값: normal 상속 : 가능 애니메이션: 불가 버전: CSS Level 3 word-break: 값; word-break의 값은 다음과 같다. 1) normal 기본 줄 바꿈 규칙을 사용합니다. 한국어는 한 글자씩, 영어는 한 단어씩 줄 바꿈이 실행이 된다. 2) break-all ..
보통 그러데이션은 벡 그라운드에 주로 사용한다. 그래서 그 사용법은 CSS Gradient 사이트에서 쉽게 바꾸어 코드로 변환할 수 있다. 근데 우연히 Font Gradient를 바꾸어야 할 경우가 생겨서 알아보다가 찾게 되어 글을 쓰게 되었다. Font Gradient Access 폰트에 그라디언트 적용하는 방법은 다음과 같다. See the Pen CSS: Font Gradient by miok-jung (@miok-jung) on CodePen. 위 코드는 폰트에 gradient를 적용한 예시이다. .border-box{ background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { backgro..
이번 주는 프로그래스 바를 업그레이드한 방법으로 예제는 많이 나아 있는 것 같지만, 기록과 정리를 위해 글을 쓰게 되었다. 1. Scroll Indicator( 스크롤 표시기 ) CSS와 자바스크립트를 통해 이 페이지를 어디까지 보았는지 확인할 수 있는 일종의 게이지 바 같은 것이다. 사실 이 명칭을 어떻게 표현이 되는지 잘 모르겠다. 그래서 찾는데 생각보다 오래 걸려 하루 종일 회사 프로젝트에 이 한 가지 구현만 찾게 되었다. 하지만 실상은 너무 간단한 코드였다. document.addEventListener('scroll', () => { progress = document.querySelector('.progress-bar'); let winScroll = document.body.scrollTop..
어느 블로그를 가다 보면 간간하게 볼 수 있는 생략의 닷 3개(...) 현재 필자의 블로그 메인 홈페이지를 보시면 볼 수 있는 저 점 세 개가 CSS의 단 2줄로 코드를 작성할 수 있다고 한다. 이전에는 이걸 어떻게 만드는지 몰랐다가, 최근 프로젝트에서 쓰이게 되어서 적용도 해보고 다시 개인 프로젝트에 작업을 해보고 있다. 먼저 간략하게 ellipsis의 뜻이 무엇인지 찾아보았다. ellipsis는 생략이라는 뜻을 가지고 있다. 이렇게 검색해보니 검색 방법을 알게 되는 것 같다. 그럼 바로 프로젝트에 한번 적용해보려고 한다. 네모로 감싼 것의 태그로 감싼 것이며, 일정 공간을 넘어서면 자동으로 줄 바꿈이 되는 것을 볼 수 있다. 먼저, 저 줄 바꿈을 없애준다. p{ white-space: nowrap; ..
회사 프로젝트를 하면서 CSS에 대한 코드가 제각각인 것을 보았다. 그래서 이러한 원인보단 규칙이 정리가 되어 있는 것 같아 다시 기억을 상기시키기 위해 정리하게 되었다. Coding Convention 해당 언어로 작성된 프로그램의 각 측면에 대한 프로그래밍 스타일, 관행 및 방법을 권장하는 특정 프로그래밍 언어에 대한 일련의 지침이다. 규칙에 대한 예시로는 들여 쓰기, 주석, 선언, 공백 등 다양하게 사용될 수 있다. 즉, 코드상으로는 prettierrc를 정의하는 그것과 같다고 볼 수 있다. (prettierrc는 다른 운영체제라 하더라도 동일한 코드 규칙을 정리한 것이라 할 수 있다.) 회사마다 코딩 컨벤션은 다양하다. 1) 구글 코딩 컨벤션 알파벳 순으로 지정한다. 2) 네이버 코딩 컨벤션 순서..
- Total
- Today
- Yesterday
- CSS
- programmers
- 리액트 유튜브
- Git
- 뷰
- github
- java
- 파이썬
- javascript
- 코딩테스트
- node-sass
- Coding Test
- Visual Studio Code
- 리액트 썸네일
- 노드
- 프로그래머스
- array
- node
- 자바스크립트
- 재공부
- Switch
- 리덕스
- 함수
- node.js
- redux
- 배열
- mongodb
- 리액트
- react
- 자바
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |