NOW OR NEVER

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

SASS/SCSS 문법 함수(functions) @mixin과 굉장히 유사하지만 차이점 존재 @mixin은 믹스인 이름을 정의하고 믹스인 안에서 처리될 매개변수를 정의하고 그 매개 변수는 스타일 안에서 사용할 수 있다. 믹스인 안에 특정 스타일을 정의해서 사용하는 개념 @function은 믹스인처럼 함수이름을 먼저 정의하고 매개변수가 특정한 값을 받아서 @function 내부에서 처리하게 됨 @mixin과 다른 점 : 믹스인은 내부에서 처리되는 것이 어떠한 스타일(속성:값;)이다. 속성:값; 세트로 이루어진 전체적인 스타일을 재활용하기 위해 사용하는 개념이 믹스인이다. @function이 처리하는 것은 결과적으로 특정한 값이다. @function은 스타일이 아닌 특정한 값을 재활용하기 위한 개념이다. 항..

SASS/SCSS 문법 변수 1. !global(전역 설정) 값 뒤에 사용하는 개념 이 플래그를 사용해서 선언해놓은 변수를 유효범위에 종속되지 않고 전체 영역에서 쓸 수 있는 형태로 정의 가능 기존에 선언된 전역변수가 덮어 써질 수 있다.(변수를 재정의하지 않는 이상) 변수가 적용되는 곳을 기준으로 해서 가장 가까운 곳에서 마지막에 선언된 값이 마지막으로 들어간다. 2. !default(초기값 설정) 할당되지 않은 초기값을 설정 할당된 변수에는 새롭게 정의되는 값을 적용하지 않고 기존 할당 값(전역변수 등) 사용 변수와 값을 설정할 때 기존 변수가 있을 수도 있으니 현재 설정하는 변수의 값은 기존에 변수가 있는 경우에는 사용하지 않는다는 의미로 사용 Bootstrap, 기타 CSS, SCSS 상뇽하는 라..

Grid item 함수 grid에서 사용하는 주요 함수 인수: 함수의 괄호 안에 들어가는 것, 함수에 들어가는 일종의 데이터 1. repeat( ) 함수 행과 열의 크기 정의를 반복할 때 사용 반복하는 횟수를 첫번째 인수로 활용하고 행과 열의 크기 정의를 두번째 인수로 사용 두번째 인수에 반복패턴 입력 가능 선의 이름도 정의 가능 fr 단위 사용 가능 grid-template-rows와 grid-template-columns에서 사용 grid-template : grid-template-rows 정의 / grid-template-columns 정의; ex) grid-template : repeat(2, [row-start] 200px [row-end] / repeat(3, [col-start] 100px..

CSS 변환 효과(Transform) Transform 2D 변환 함수 애니메이션에 특화되어 있는 이런 함수들을 애니메이션 만들 때 쓰는 것이 좋다 transform: 함수(값) 함수(값); 함수는 띄어쓰기 통해 다중 입력 가능 1. 전체를 아우르는 함수 matrix matrix(n,n,n,n,n,n): 2차원 변환 효과 translate, scale, rotate, skew 등의 함수가 matrix를 대신한다. 이동, 크기, 회전, 기울임을 한번에 제어해주는 함수 이 함수 사용시 일반적인 상식에서 벗어난 방식으로 해서 사용이 어렵다. 직접적으로 사용할 필요는 없다. 브라우저가 알아서 해주기 때문 [실질적 쓰는 함수] 1. 이동 함수 translate 이동 관련 제어해주는 함수[ position과 다른 ..