소파에서 개발하기

1. props로 재사용 가능한 함수 만들기 버튼 여러 개를 만들 때, 복붙해서 여러 개를 만드는 것보다 하나의 컴포넌트를 설정해두고 내부 속성(props) 몇 가지만 바꿔가면서(configurable) 재사용할 수 있으면 훨씬 깔끔하지 않을까? -> 그러면 바꾸고 싶은 속성값을 어떻게 전달할 수 있을까? 사용하고싶은 컴포넌트(함수)를 만든다. 여기서는 Btn() App()에 컴포넌트(함수)를 삽입하고, 해당 컴포넌트에 전달하고 싶은 속성(key : value)을 적는다. 라고 적는 것은 Btn({banana:"Save Changes"})와 같은 뜻. 이 때 속성 이름은 아무거나 적어도 상관 없음. 변수처럼 사용할 것임. 속성값으로는 함수도 들어갈 수 있음 컴포넌트 Btn()의 괄호 안에 인자로 속성(p..

01 LNB 역대급으로 알아먹기 힘든 회차였다.. 약올리는 것도 아니고 포인트 좀 정리해서 전달해줬으면 ㅠㅠㅠ 마크업 : .lnb > .container > .row > .col-sm-4 > .lnb-list > lnb-item > a 스타일링 a에 텍스트 스타일 넣고 inline-flexbox로 정렬+사이즈 주기 레이아웃 02 페이지 레이아웃 페이지 구조 리팩토링 global footer 제작 global header 제작

01 sidebar 마크업 기초는 : 문서의 맥락에서 벗어나 존재하는 요소를 담음. heading 태그 필요. 내부에서도 각 역할에 맞게 , , 로 섹션 구분하기 styling을 위해 필요한 만큼 로 감싸기 02 sidebar 내부 스타일 전체적인 padding 파악, padding 또는 height 고정으로 간격 조정하기 avatar 이미지가 없는 경우에 대비해 기본 이미지를 background-image로 삽입 bg-position: center center; bg-repeat: no-repeat; bg-size: contain; 넘치는 유저이름을 '...' 처리(truncate) 하려면 (수제캔디 생각하기) 상위영역(block) 크기 지정 (flex 정렬 된 상태라면 유저이름에 flew-grow: ..

01. 레이아웃 분석 모바일(sm) / 태블릿(md) / 데스크탑(lg) 공통요소 찾기 디자인 뿐 아니라 기능이 완전히 동일한 요소를 찾아야. 3타입 공통요소 : 서비스명(h1, a), 장바구니 버튼(button, a) md-lg 공통요소 : 원샷원킬하는 반응형 레이아웃 잡기 시안에서 구역이 나뉘는 or 묶이는 부분 찾기 breakpoint별로 무엇을 숨기거나 추가해서 해당 구역 안에 집어넣을 수 있도록 설계 02 마크업 작성 모바일 -> 태블릿 -> 데탑 순서 sementic markup : 전체는 , 내부에는 , (타입 꼭 적기), (제목태그 꼭 넣기), 등 이용해서 작성. 필요에 따라 aria-label, aria-hidden, sm-only, visually-hideen, btn-primary 등..

1. STATE란 동적인 값. react에서 데이터를 담는 곳 2. useState 사용하기 useState == addEventListener / onClick + ReactDOM.render 새 상수 선언 : const data = React.useState(); -> data = [ undefined , f ] 즉 [초기값, 값을 변경시키는 setter 함수] 총 2개의 value가 들어있는 array가 반환됨. 보통 이름을 [ value , setValue ] 처럼 지음. 언제나 값과 그것을 변화시키는 함수의 관계이기 때문. setValue의 인자로 넣은 것이 새로운 value의 값이 됨. 동적인 값 덮어씌우기 (직접할당) string이든 num이든 계산식이든 괄호 안에 넣은 값이 value에 덮..

0. 기본 장점 : 간단한 문법. 페이지 내부에 변화가 있을 시, 전체를 새로 생성하지 않고 바뀐 부분만 rerender해 줌 import // react (인터랙션 담당) // react-dom // html형식 -> react dom 형태로 변환 1. JSX 원래 react 문법 : React.createElement 메소드를 이용해 {element, property, value} 를 입력 JSX : 사용자가 html 문법으로 적으면 babel이 원래 react 문법으로 바꿔 줌 함수를 선언해서 return 값으로 html element를 적음. 이때 함수 이름은 반드시 첫 글자가 uppercase여야 함. ReactDOM.render( , 위치 ) 로 html에 삽입. ** react에서의 백틱문자..

1. Placeholder 무엇 : mixin과 비슷한 용도이지만, 전역에서 아무때나 불러내는 mixin과 다르게 (1)요소들의 공통 스타일을 선언해두고 각 요소에 삽입해 상속받는 식으로 사용 (2)css로 들어갈 때 공통 스타일만 따로 묶여서 들어감 (mixin처럼 각 요소 밑에 매번 적히지 x) (3) 인자를 받을 수 없음 문법 선언 : %이름 { //공통스타일// } 호출 : .요소 { @extend %이름; } 2. 자주 사용하는 components를 module로 만들기 기본 분류별로 공통점을 먼저 파악해서 placeholder를 만들고, 특수하게 적용되어야 하는 style을 밑에 각각 선언 inline요소들은 스타일이 깨지기 쉬우므로 적용하기 전 일단 display: block;으로 설정하기...

01 Mixin 기본 문법 1. 선언하기 @mixin 믹스인이름( ) { } 파라미터가 없다면 괄호는 안 붙여도 된다 2. 사용하기 @include 믹스인이름( ) ; 02 Minxin 활용하기 1. 파라미터의 적절한 활용 어느 기능까지를 이 mixin에서 사용하고 어디서부터는 외부로 뺄 지를 잘 계산하고 리팩토링해줘야 한다. 파라미터 설정했는데 인수가 없을 땐 에러를 낸다. 믹스인이름(파라미터 : false)로 설정하면 파라미터가 없을 때 false가 그 자리에 들어간다. 이후 @if '파라미터가 false가 아닐' 때 혹은 'type-of(파라미터) == 원하는 타입'일 때만(유효성 검사) 작동하는 분기를 만들어주면 false 영향 없이 마무리할 수 있음. @mixin에서 @media 사용 시 { @..

공부라고 생각하지 말고, 더 편하고 재밌어지기 위한 과정이라고 보자! 작은 조각부터 하나하나! 01 변수 만들기 선언하기 이름 앞에 $ 붙이고 : 로 선언 대소문자 구분, - _ 123 사용가능, BUT 숫자로 시작할 수 없음. 값으로는 CSS에서 사용되는 모든 것 넣을 수 있음. (key, value, declaration, string, bolean, map) 호출하기 $+이름으로 사용 JS와 마찬가지로 스코프 고려해서 호출하기 (웬만하면 같은 이름으로 선언하지 말자) 02 컬러팔레트, 타이포그래피 컬러 네이밍 스케일 없고 특징적인 색 : 심플한 이름 붙이기 메인 컬러와 그 variations : 메인 컬러 + 변화(dark, light, clicked) 등으로 붙이기 grayscale : 보통 텍스..

01 figma에서 이미지 export rester 이미지 (bitmap, pixel 기반) jpg == jpeg 용량이 낮고 이미지 손실이 큼 png 용량이 크고 이미지 퀄리티 높음 투명도를 지원 webp (from 구글) 둘의 장단점 보완 아직 지원되지 않는 브라우저 있음 vecter 이미지 svg (scalable vector graphics) 크기와 상관없이 같은 용량 => 사이즈 클 때는 점 찍는 bitmap에 비해 용량 효율 좋음 형식 선택 어떻게? 간단한 아이콘 / 깨지면 안 되는 로고 등은 svg (ie 6 7 8에 대응해야 한다면 png) 그 외에는 효율 좋은 쪽으로 export 실행 이미지 일괄 rename : ctrl+R 파일 이름에 / 가 들어있으면 디렉토리로 인식하고 해당 폴더를 ..