• SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 입니다.

 

사용하는 이유 : css가 그렇게 복잡한 언어는 아니지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. 예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있고 SASS와 SCSS는 이러한 이슈를 해소시켜줄 수 있습니다.

 

 

- SASS / SCSS 의 작동원리 

SASS, SCSS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 된다고 합니다.

사용예) 

1. SCSS 

 

 

2. SASS 

 

 

 

 

처음에는 SASS / SCSS 가 무엇인지 몰르고 막상 어려운것인줄 알았는데 

SASS / SCSS 를 조사해보며 CSS와 차이점도 같이 알아보고 결과적으로 SASS / SCSS가 어떻게 쓰는지 알게되고 어려운것이 아니라고 이해할수 있었습니다.

 

 

참고) 

https://cocobi.tistory.com/118

 

[CSS] CSS 전처리기 SCSS, SASS의 차이점

🤔 SCSS, SASS ?? "CSS의 복잡함과 불편한 재사용성을 높혀주고, 가독성과 유지보수의 편의성을 제공해주는 것" 📌 CSS의 단점과 SCSS(SASS)의 장점 CSS의 단점 선택자 생성 시 불필요한 부모요소 선택자

cocobi.tistory.com

 

(카드 이미지는 마지막에 수정할 예정입니다. 왜냐하면 날짜마다 api가 불러오는 영화제목이 다르기 때문입니다.)

 

api를 통해서 받아온것으로 활용하는데 css를 설정해도 전체적으로 먹혀서 따로 js파일(더미데이터)로 작성해서 map 으로 받아오게해서 하는게 쉬울듯합니다.

 

카운터 값 조작하기

CSS counter를 사용하려면 먼저 counter-reset (en-US) 속성(초깃값 0)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 counter-increment (en-US)에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

 

기본 예제

여기서는 제목 앞에 숫자를 붙여봅니다.

CSS

body {
  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
                                                   초깃값은 0입니다. */
}

h3::before {
  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
}
Copy to ClipboardCopy to Clipboard

HTML

<h3>Introduction</h3>
  <h3>Body</h3>
  <h3>Conclusion</h3>
Copy to ClipboardCopy to Clipboard

결과

 

 

참고> 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters#%EC%B9%B4%EC%9A%B4%ED%84%B0_%EA%B0%92_%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0

 

CSS 카운터 사용하기 - CSS: Cascading Style Sheets | MDN

CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이

developer.mozilla.org

 

ex) 

export default function App() {
const employees = [
{id: 1, name: 'Alice', tasks: ['dev', 'test', 'ship']},
{id: 2, name: 'Bob', tasks: ['design', 'test']},
{id: 3, name: 'Carl', tasks: ['test']},
];

return (
<div>
{employees.map((employee, index) => {
return (
<div key={index}>
<h2>Name: {employee.name}</h2>

{employee.tasks.map((task, index) => {
return (
<div key={index}>
<h2>Task: {task}</h2>
</div>
);
})}

<hr />
</div>
);
})}
</div>
);
}

위 코드와 같이 작성하면 밑과같이 나오게 할수있다.

 

배열이 고정적이라면 상관없겟지만, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못합니다.

동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용합니다. 

map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줍니다. 리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다.

 

리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 id 가 고유 값입니다.

 

 

 

 

 

만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index  key 로 사용하면 됩니다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

 

참고> 

https://react.vlpt.us/basic/11-render-array.html

 

11. 배열 렌더링하기 · GitBook

11. 배열 렌더링하기 이번에는 리액트에서 배열을 렌더링하는 방법을 알아보겠습니다. 이러 배열이 있다고 가정해봅시다. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2,

react.vlpt.us

 

맨처음 슬라이드 시작시 왼쪽 슬라이드 화살표(<) 는 없고 오른쪽 슬라이더 화살표(>)만 있는모습입니다.

 

 

내용물 자체는 미완성이지만 우선 슬라이더 기능구현한 내용을 남겨놓을려고 해서 올린글입니다.

맨마지막 슬라이드에 도착했을때 왼쪽 슬라이더 화살표(<)는 있고 오른쪽 슬라이더 화살표(>)는 사라진 모습입니다

 

https://velog.io/@navyjeongs/%EB%A6%AC%EC%95%A1%ED%8A%B8-export-default%EC%99%80-export%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

[리액트] export default와 export의 차이

리액트로 개발할 때 하나의 파일에 하나의 컴포넌트만 있다면 다음과 같이 해당 컴포넌트 명으로 export한다.Test.js그러나 가끔씩 타인의 코드를 보거나 여러개를 내보내야할 때 export default가 아

velog.io

위블로그에 잘 나와있는것 같아서 우선 참고했다 . 

 

+ Recent posts