본문 바로가기

전체 글69

기본 세팅, 단축키 꺼내야 할 패널 : Color, Appearance, Navigator, Layers / Swatches, Pathfinder 선택꺼내지 않아도 되는 패널 : Stroke, Transparency, Align, Character, Gradient (ㄴ 옵션, [Window], [View], 단축키 등으로 빠르게 꺼낼 수 있음)   ▶ Ctrl + K => Preference   [Units]에서 General : Millimeters 확인    ▶ Ctrl + N => 새 창 열기Units = Millimeters, Bleed(재단선) 모두 0, Color Mode = CMYK (=> 컬러 패널 CMYK 사용)    (Color Mode = RGB => 컬러 패널 HSB 사용) ▶ Ctrl + Shift.. 2024. 8. 22.
[React] Context API 리액트 같은 Single Page Application(html 페이지가 하나인 사이트)의 단점은 컴포너튼간의 state 공유가 어려운 것이다. 즉, 컴포넌트에 state를 자식의 자식 컴포넌트(자손 컴포넌트)에 사용하고 싶으면 props를 2번 전송해 주어야 한다.  App 컴포넌트에 있는 shoes라는 state를 TabContent 컴포넌트에서 사용하고 싶으면 어떻게 해야 할까? App → Detail → TabContent 이렇게 props를 2번 전송해야 한다. (App.js)function App() { let [shoes, setShoes] = useState(data); return ( (생략) } /> );}(Detail.js)function Detail(props){ .. 2024. 8. 22.
[React] 탭 UI 만들기, 컴포넌트 전환 애니메이션 주는 법(transition) 탭 UI버튼 3개와 박스 3개를 미리 만들어 놓고 버튼 누를 때마다 그에 맞는 박스를 보여주는UI 탭 UI 만들기1. HTML, CSS로 디자인 미리 완성하기2. UI의 현재 상태를 저장할 state 하나 만들기3. state에 따라서 UI가 어떻게 보일지 작성하기 참고사항: 자식 컴포넌트에서 props 쉽게 쓰고 싶다면function TabContent(porps){ return [ 내용0, 내용1, 내용2 ][props.tab]} ▼ ▼ ▼function TabContent({tab}){ return [ 내용0, 내용1, 내용2 ][tab]} 자식 컴포넌트에서 props라고 파라미터를 하나만 작명하는 게 아니라 {state1이름, state2이름...} 이렇게 작성하면 props.state1.이름.. 2024. 8. 22.
[React] 서버와 통신하려면, ajax 🌱 들어가기 전에서버란?유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램이다.서버 개발을 한다는 것은 A 데이터를 요청하면 A 데이터를 보내주세요 라고 코드를 짜는 것이다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야 한다.1. 어떤 데이터인지 (URL 형식으로)2. 어떤 방법으로 요청할지 (GET or POST)GET : 데이터를 가지고 올 때POST : 데이터를 보낼 때 GET/POST 요청하는 법GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다.URL을 적으면 그곳으로 GET 요청을 날려 준다. POST 요청을 날리고 싶으면 태그를 이용하면 된다.그러면 폼이 전송되었을 때 POST 요청을 날려 준다. 그런데 GET, POST 요청을 이렇게 날리면 브라우저가 새로고.. 2024. 8. 16.
[React] Lifecycle과 useEffect Lifecycle(생명주기)란?리액트의 컴포넌트는 1. 생성(mount) → 2.업데이트 (update)  →  3.제거 (unmount)의 생명주기를 갖는다.  컴포넌트에 Lifecycle 개념을 이용하여 컴포넌트 중간중간에 간섭을 할 수 있다. 간섭은 그냥 코드 실행이다.'Detail 컴포넌트 등장 전에 이것 좀 해 줘' 'Detail 컴포넌트 사라지기 전에 이것 좀 해 줘' 'Detail 컴포넌트 업데이트 후에 이것 좀 해 줘' 이렇게 코드를 실행해 달라고 갈고리를 달아 간섭할 수 있고, 갈고리를 달아 코드를 넣어 주면 된다.그러면 페이지 장착시, 업데이트시, 제거시 코드 실행이 가능하다.이 갈고리를 hook이라고 하고, 이러한 것들을 Lifecycle hook이라고 부른다.  Class Comp.. 2024. 8. 12.
[React] styled-components styled-components컴포넌트가 많은 경우 css 스타일링을 하다 보면 불편함이 생기는데class를 중복해서 만드는 경우갑자기 다른 컴포넌트에 원하지 앟는 스타일링이 적용되는 경우css 파일이 길어져 수정이 어려운 경우등이 있다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, styled-components라는 인기 라이브러리르 설치하여 사용하면 된다.  설치/세팅 터미널을 열고 설치 명령어를 입력해 준다. npm install styled-components 그리고 사용하고 싶은 컴포넌트 제일 상단에 import 하여 사용한다.import styled from 'styled-components'기본적인 사용법이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수.. 2024. 8. 12.

티스토리툴바