목록프론트엔드 공부 (82)
On a couch
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 파일 이름에 / 가 들어있으면 디렉토리로 인식하고 해당 폴더를 ..
1. 피그마 & git (git bash) & node 1) 피그마 : 프론트엔드 디자인 툴 2) git bash : 컴퓨터를 현재 os와 상관없이 리눅스 언어로 제어할 수 있게 해 주는 것. (오호!) 2-1) github과 vscode 연결하기 gitbash에서 repository를 복사해 올 폴더로 이동 'git clone' + repository url 입력 2-2) vscode에서 terminal 열기 : ctrl + ` (토글) 3) node sass 설정 *LTS버전(Long Term Support, 장기 지원 버전) : 큰 버그 없이 오래 사용할 수 있는 버전 *document : https://www.npmjs.com/package/node-sass 3-1) package.json 만들..
보호되어 있는 글입니다.
보호되어 있는 글입니다.