개발자_승딱 개발자_승딱

scss 를 이용하면 if 문을 사용할 수있다. 사용법은 자바스크립트문법과 거의 같고 @ 만 붙여주면 된다. 위예시와 같이 mixin 을 중복해서 사용할수도 있다. virtualdom ,묻는말답하기,리액트,쿠키,어떤개발자,프로젝트구체적으로 나뭐했는지 ,내장단점,

변수설정 위와 같이 사스에서는 재사용되는 값들을 변수에 담아서 사용할수 있다. $기호 와 함께 사용하면 된다 직관적이다. mixin 이러한 값들 말고 속성들이 중복되어서 사용되는 경우들이 있다. 그러한 경우에는 mixin 이라는 기능을 사용할수 있다. 코드를보자 패딩과 마진이 둘다 사용되고 있다 하지만 각각 값은다른상황이다. mixin 기능을 사용해서 다시 작성해보자 @기호와 함께 mixin 기능을 사용 한다고 명시해준다. 그다음에 이름을 정해서 하나써주고 인자들을 넣어줌으로써 그안에서 함수처럼 사용할수 있게된다 사용할때는 @include 키워드와 함께 정해준 이름과 변수를 이용해 사용할수 있게된다. 추가적으로 mixin 설정시 변수에 $padding:10px 이런식으로 기본값을 설정해줄수도 있어 변수가..

사스에는 중첩이라는 개념이 있다. 프로젝트때 css 하면서 제대로 css 를 써본건 처음이였는데 이름을 잘지어놧다고 생각을 했는데도 찾다가 집중력 소진되는 때가 아주 많았다. 그리고 html 은 구조가 있고 그 구조를 에 맞게 select 할수 있어서 이용하는데는 어려움은 없지만 그거를 사용하는데에는 조금 귀찮은? 특히 팀원 코드를 나중에 내가 코딩할때는 찾기 빡세다 뒤로갈수록 추가되기도하고 많아지니까 근데 이번에 scss 공부하다가 보니까 scss 에서는 구조적으로 css 를 꾸릴수 있고 그거를 nesting 이라고 한다고 하더라 예시들을 살펴보자 일단요약부터 해보면 1.구조를 중첩해서 사용할수있다. 좌측은 scss 파일이고 오른쪽은 컴파일된 css 파일이다. 해당 scss 블락안에서 구조를 중첩해서 ..

1. extension 설치부터 한다. vscode 에서 sass , sass compiler , sass indent?? 2.vscode setting 을 해준다. command pallet 를 열고 setting.json 을 검색해보면 3가지 연관검색어가 뜬다. 3가지의 차이는 중간에 있다. workspace 가 있는게 있고 default 가 있는게 있고 아무것도 없는게 있다. 일단 default 에 들어가보면 기본 설정들이 들어있다. 그러니 까 만지지말자 ㅎㅎ 그다음 우리는 기본설정들을 변경해줄수 있는데 그 내용이 첫번째 setting 에 들어 있고 거기서 수정할수 있다.(내 vscode 의 현재설정) 그리고 중간에 workspace 가 들어간게 있는데 이거는 해당 폴더에 해당하는 vscode 설정..

문자열 내 에서 패턴으로 원하는 문자들을 찾아 원하는 작업을 수행하는일 패턴 지정해주기 let pattern = /abc/; let pattern = new RegExp("abc"); 위와 같은 형태로 패턴을 지정해줄수 있다. (리터럴방식, 생성자함수이용하는 방식) 정규표현식의 쓰임 원하는 패턴의 문자열을 찾아내 우리가 할수 있는것들은 3가지 정도다 1.추출 2.test 3.치환 추출 test 치환 다음글에서는 구체적인 예시와 함께 패턴을 설정하는 법을 알아보자!

react.memo usememo usecallback 에 대해서 알아보자 react.memo 리액트는 컴포넌트를 렌더링 한뒤 이전의 렌더링된 결과와 비교후 변경된 사항을 확인한뒤 dom 을 업데이트 해준다. 개발자는 이전의 컴포넌트와 비교가 필요하지 않은 경우를 알고 있기 때문에 그러한 경우에는 컴포넌트를 react.memo() 로 래핑 해줄수 있다. 그렇게 하면 리액트는 컴포넌트를 렌더링 한뒤 그 결과를 기억(memoizing) 하기 때문에 새롭게 렌더링 하고 이전과 비교하는 과정을 생략할 수있게된다. (재사용) 이러한 memoizing 은 props 가 같을 대에만 적용이 되기 때문에 props 가 바뀌면 기존의 작업을 수행한다. export function Movie({ title, release..

const onChangeInput = useCallback((e) => { const { name, value } = e.target; setUser({ ...user, [name]: value }); }, []); >> 각각 안만들어도 되고 이런방식 으로 묶어쓸수 있음 White space : no wrap >> 공백문자 처리 관련 css text-overflow: ellipsis >> 글자 넘어갈때 ... deleteNote(note._id)}>X >> 화살표 함수를 이용해서 매개변수 전달하기

deep copy(깊은 복사) shallow copy(얕은 복사) 객체값의 복사본을 저장한다. 메모리주소에 객체의 참조를 저장한다. 원본 바뀌어도 나랑 무관 원본이 바뀌면 나도 바뀐다 느리다. 빠르다 slice 느낌 , 원시형 자료형 참조형 자료형 == (동등연산자) === (일치연산자) 타입을 일치시킨뒤 비교 타입이 다르면 false