본문 바로가기

분류 전체보기

(66)
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 1 | React - state state state란 컴포넌트가 가지고 있는 특정 변수이다. state, 즉 변수의 상태가 변경되면 해당 컴포넌트는 재런더링된다. → 유동성 관리가 쉽다. 함수형 컴포넌트 useState useState를 import 시키고 사용한다. state의 값은 useState만을 이용해서 변경할 수 있다. 버튼을 클릭하면 apple, 사과가 번갈아서 출력되는 코드 FunctionState.jsx import {useState} from 'react' export default function FunctionState(){ const [showEnglish, setShowEnglish] = useState(true); return( {showEnglish ? 'apple' : '사과'} setShowEnglis..
[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 3 | JS for React - 전개구문, 구조 분해 할당, 클래스, 모듈 / React - Component, JSX JS for React 전개구문 (spread) 전개구문이란? 반복 가능한 객체(배열, 유사 배열, 문자열 등)에 사용하는 문법이다. 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환한다. 연산자 ...을 사용한다. 배열에 접근 const arr1 = [1, 2, 3, 4, 5]; const arr2 = ['a', 'b', 'c']; # 전개구문을 사용해서 쉽게 두 배열을 합칠 수 있다. const arr3 = [...arr1, ...arr2]; console.log(arr3) # [1, 2, 3, 4, 5, 'a', 'b', 'c'] 문자열에 접근 const str = 'hello'; const strArr = [...str]; console.log(strArr) # ['h', ..
[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 2 | React - 시작하기, npm React Virtual Dom 부드럽고 빠르다. 변경되는 부분만 최소한으로 변경하기 때문에 메모리 누수가 적다. 컴포넌트로 이루어져 있어서 재사용이 높다. React 문법을 이용해서 버튼 만들기 React CDN 링크 https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org CDN 링크를 복사해서 HTML 파일 head에 붙여넣어 사용한다. function HelloWorldButton(){ const [isClick, setIsClick] = React.useState(false); const text = isCli..
[새싹x코딩온] 웹 퍼블리싱 과정 8주차 - 2 | 정적배포, Branch 정적 배포 정적 배포란 사용자와 상호작용을 하지 않는 사이트를 말한다. 로그인 등 서버의 데이터를 받아오는 동작이 불가능하고 html을 있는 그대로 보여줄 수 있다. Netlify 배포 방법 1. netlify 홈페이지에서 github로 회원가입한다. https://app.netlify.com/ Netlify App app.netlify.com 2. 깃허브에서 repository를 만들고 로컬에서 만든 폴더를 git bash로 git 저장소를 생성하고 연결한다. git init # git 저장소를 생성한다. git remote add origin [github repo 주소] # github와 연결한다. 3. 폴더에 index.html을 포함한 파일들을 만든다. 이때 index.html은 최상위에 있어야..
[새싹x코딩온] 웹 퍼블리싱 과정 8주차 - 1 | 피그마 프로토타입 실습 피그마 프로토타입 실습
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 3 | Component Component 메인 컴포넌트가 변경될 때 인스턴스 컴포넌트가 변경되지 않게 하려면 detach instance를 적용하면 된다. 메인 컴포넌트는 detach를 할 수 없으니 복사해서 인스턴스 컴포넌트를 만든 후 detach를 해야 한다. component set 컴포넌트를 여러개 잡으면 컴포넌트 세트로 만들 수 있다. component property component property를 만들려면 이름을 blue = button lg r5 이런 식으로 설정한다. 여기서 blue는 name이고 button lg r5은 value이다. component property를 만들면 어떤 버튼을 만들더라도 클릭 한 번으로 component property를 설정한 버튼스타일로 변경할 수 있다. component..
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 2 | 피그마 심화 피그마 심화 그리드 시스템 그리드란? 격자나 바둑판 모양의 눈금을 의미한다. 디자인 레이아웃에 규칙을 부여하는 수단으로 디자인이 동일한 그리드 규칙을 가지게 되면 일관된 UI를 갖는다. breakpoint breakpoint란 반응형 웹에서 사이즈가 변화하는 지점이다. (변곡점) xs (extra-small) : 0px sm (small) : 600px md (medium) : 900px lg (large) : 1200px xl (extra-large) : 1536px 그리드는 웹사이즈, 테블릿사이즈, 모바일사이즈로 나누면 되는데 태블릿 환경일 때는 column값을 6 또는 8로 두고 작업하고 모바일 환경일 때는 column값을 4로 두고 작업한다. container는 보통 1200px을 사용한다. 아래..
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 1 | 피그마 실습 피그마 실습1 : 피그마 로고 똑같이 만들어 보기 1. 직사각형을 만들고 radius를 알맞게 설정한다. 2. 스포이드 도구로 해당 색상을 추출하여 색을 채운다. 피그마 실습2 : 다양한 도형 만들어 보기 첫번째 도형 : 도형을 더블클릭해 나오는 점을 조절하여 만든다. 세번째 도형 : 두 개의 정사각형을 겹쳐 exclude selection을 적용한다. 네번째 도형 : 별 모양 도형을 만들어 꼭짓점 개수를 8개로 설정하고 ratio 점을 조절한다. 여섯번째 도형 : 원 네 개를 겹쳐 union selection을 적용한다. 일곱번째 도형 : 원을 만들어 sweep 점을 조절한다. 아홉번재 도형 : 삼각형 두 개를 만들고 subtract selection을 적용한다. 피그마 실습3 : 컬러 디자인 시스템 ..