JNarin Development Story

저번에는 CSS에서 변수를 사용하는 방법을 알아보았다. 그렇다면 당연히 SCSS 또한 변수를 사용하는 것 같아 개인 프로젝트에 투입하면서 찾아보게 되었다. 그리고 그 방법이 있고, 몇 가지는 정리하고 싶어서 적게 되었다. 1. Variables 1-1. 변수를 사용하는 방법 SCSS 변수는 다음과 같다. $large-font: 3rem; $small-font: 0.5rem; $main-color: purple; 1-2. 변수를 실제 사용 변수를 실제 SCSS에 적용시 예시는 다음과 같다. body{ font-size: #{$large-font}; color: #{$main-color}; } 2. Mixins 2-1. 믹스인 사용 방법 믹스인은 CSS를 여러개 묶어 재사용을 할 수 있는 모듈을 만들어 주는..

프로젝트를 하다 보면 공통적으로 많이 들어가는 CSS내용이 반복되기도 한다. 그 부분을 변수로 통일하여 사용을 하는 방법을 알게 되어 적으려 한다. CSS 변수 선언하는 방법 --variable-name: value; 여기서 variable-name은 개인이 직접 변수명을 정의하는 것이다. 그리고 그 변수명 뒤로 value 또한 변수에 대한 값을 적는 것이다. CSS 변수 사용하는 방법 property: var(--variable-name); 예제 방법만으로는 이해할 수 없으니 예시를 보여주려 한다. 여기서 root는 CSS는 최상단 CSS에 작업을 하면, h1에서 변수를 사용하듯 어디에서나 사용할 수 있다. 이렇게 쓰이면 실무에서는 메인컬러를 변수로 사용하면 필요에 따라 전체 칼라를 손쉽게 바꿀 수 있..

리액트에서 게시판 모양을 하는데 table이라는 html을 사용하게 되었다. 그 과정에서 좀 정리가 필요할 것 같아 오늘도 이 글을 쓰게 되었다. 1. 태그란 table은 행과 열로 이루어진 표를 의미한다. 2. Table에 쓰이는 요소 혹은 태그 2-1. 필수 요소 - table - tr : 행을 구분 짓는 태그이다. - td : th에 대한 내용을 적는 태그이다. 2-2. 선택적 요소 - caption : 표 설명이나 제목을 입력하는 태그이다. - thead : table에서의 머리 부분으로 전체 테이블의 내용이 무엇인지 알 수 있다. - tbody : table의 내용에 해당하며, thead에 대한 내용을 정리하여 보여준다. - tfoot : table의 마지막 결과물에 대한 정리를 할 수 있다. ..

리액트를 하다 보면서 HTML과 다른 점이 몇 가지가 있다. '이상하다... HTML에서는 됬는데 왜 리액트에서는 에러가 발생하지?' 라는 의문점, 리액트를 하시면서 몇개를 느낀 것들이 있을 것 같다. 그래서 오늘은 그 몇가지 다른 점을 여기다 정리를 해보려고 한다. 1. class html에서 직접 style값을 작성할 때 쓰이는 옵션으로, 원래 html에서는 class="name"으로 태그 안에 넣는다. 하지만 리액트에서는 className을 넣어 클래스를 사용한다. 이렇게 쓰이는 이뉴는 리액트에서는 클래스 함수, 화살표 함수 이런 두 가지 방식으로 코드를 작성을 하게 된다. 그렇기 때문에 class가 아닌 className이라는 명칭을 사용하는 것 같다. 2. label for html에서는 lab..

오늘은 티스토리 스킨을 바꾸면서 종종 까먹는 설정을 다시 설정하기 위한 방법을 적으려 한다. 처음 설정을 한 후 종종 까먹어서 다음번에도 기억하기 위해서 작성하게 되었다. 1. 네이버 웹마스터도구 일단 네이버 웹마스터 도구에 대해 설명을 하려 한다. 네이버 웹마스터 도구는 본인이 운영하는 웹사이트의 검색 수집, 색인 반영 현황을 제공하고 검색에 친화적인 사이트로 관리하는데 필요한 진단 리포트를 제공하는 서비스다. 2. 네이버 웹마스터 도구를 왜 쓰는가? 필자가 이것에 대해 알게 된 이유는, 티스토리 블로그를 관리하면서 느낀 게 아무리 열심히 해도 네이버에 유입이 너무 적었던 이유였다. 그래서 주변에 물어보니 네이버는 티스토리 수집을 막는다는 이야기를 들었고, 유입을 높이기 위해서는 네이버 웹마스터 도구를..

자주 쓰이고 있지만, 아직까지도 헷갈리는 map함수, 그래서 오늘은 정리를 해보려고 한다. 물론 이 정리를 시작으로 개념정리가 되어도, 얼마든지 까먹을 수 있으니... 수시로 찾아와서 한번씩 점검을 하려 한다. 1. map function? map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. (여기서 callback function은 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.) arr.map(callback(currentValue, index, array), thisArg) map함수는 callback, thisArg함수를 가지고 있으며, callback은 currentValue, in..

리액트를 많이 사용하고 협업을 하게 된다면 가장 중요한 것 중 하나이다. 하지만 초반에 설정하고 나면, 쉽게 잊혀가는 기능 중 하나이다. 오늘은 이에 대한 내용을 정리하였다. Prettier이란? prettier은 VS Code Extension 중에 코드를 정렬해주는 Formatter이다. - 독보적인 코드 포멧터다. - 다양한 언어를 지원한다. - 대부분의 편집자와 통합을 할 수 있다. - 옵션이 거의 없다. 왜 Prettier을 왜 쓰는가? - 저장을 누르면 코드가 포맷이 된다. - 코드 리뷰에서 스타일을 논의할 필요가 없다. - 시간과 에너지를 절약할 수 있다. Prettier을 어떻게 쓰는 것인가? 1) Extension 설치 Visual Studio Code에서는 Extension에 prett..

오늘은 삭제기능을 추가하는 방법을 공부하려 한다. 먼저 우리는 저번에 추가한 추가하는 것을 function으로 분리를 할 수 있다. // src > index.js // 중략 const addToDo = (text) => { store.dispatch({ type: ADD_TODO, text }); }; const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; addToDo(); }; // 중략 store.dispatch를 원래는 onSubmit에 넣었는데 이 문구가 더 많은 일을 할 경우에는 분리를 하는 것이 좋다. 그렇기 때문에 그런 편리성을 위해서 function addToDo를 만들어서 onSu..