분류 전체보기69 [React 기초] 리액트 사이트 buid & Github Pages로 배포하기 만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라 build용 파일을 생성한 수 그 파일을 올려야 한다. 웹 브라우저는 HTML, CSS, JS 이 3개의 언어만 해석할 수 있기 때문에 리액트의 state, jsx등은 해석하지 못 한다.그래서 리액트 프로젝트를 build 하면 브라우저 친화적인 HTML, CSS, JS 파일로 바꿔 준다.이 바꿔 준 파일을 올려야 사용자들이 웹을 볼 수 있다. 이전 포스팅들을 통해 만든 프로젝트를 Github Page를 이용해 배포해 보도록 하자. 💡 배포하기 전 체크할 사항1. 미리보기를 띄워 볼 때 콘솔창, 터미널에 에러가 발생해서는 안 된다.(warning 메시지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨).. 2024. 8. 5. [React 기초] input 다루기 보호되어 있는 글 입니다. 2024. 8. 5. [React 기초] props : 자식이 부모의 state 가져다 쓰고 싶을 때 지난 포스팅에서 글 제목을 누르면 모달창이 나타나는 기능을 만들었다.그런데 모달창 내부에도 글 제목을 넣고 싶으면 어떻게 해야 할까? 이렇게 작성하면 될 것 같지만 post라는 변수가 정의되지 않았다는 에러가 뜬다. 왜?왜냐하면 post라는 state는 function App()에 있는 것이지 function Modal()에 있는 게 아니기 때문이다.자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없다. 하지만 컴포넌트 2개가 부모/자식 관계인 경우에는 가능하다.(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부른다.)부모 컴포넌트의 state를 자식 컴포넌트로 전송해 줄 수 있고, 그러면 자식 컴포넌트도 state 사용이 가능하다.state를 전송할 때에는 props라는 문법.. 2024. 8. 2. [React 기초] map : 많은 div들을 반복문으로 줄이고 싶다면 자바스크립트 map 함수 사용하는 법모든 array 자료 우측에는 map() 함수를 붙일 수 있다. 기능 1. array에 들어있는 자료 개수만큼 그 안에 있는 코드를 반복 실행한다.위의 그림에서 console.log(1)이 3번 실행된 것을 확인할 수 있다. 기능 2. 콜백함수에 파라미터를 작성하면 그 파라미터 array 안에 있던 모든 자료를 하나씩 출력해 준다.콘솔창에 2, 3, 4가 출력된 것을 확인할 수 있다.(소괄호 안에 있는 함수를 콜백함수라고 한다) 기능 3. return 내용을 적으면 array로 담아 준다.콘솔창에서 실행해 보면 array 안에 'abcde'가 들어간 것을 확인할 수 있다. 변수에 담아서 확인해 봐도 된다. JSX 안에서 html을 반복 생성할 때는 map() .. 2024. 8. 2. [React 기초] Component : 복잡한 html을 한 단어로 축약하고 싶다면 / 동적인 UI 만들기(모달창) 들어가기 전에html 코드를 짤 때 유의해야할 점이 있다.return() 안에는 병렬로 태그 2 개 이상 기입 금지. 하나의 태그로 시작해서 하나의 태그로 끝내야 한다.그래서 두 개를 나란히 적고 싶으면 아래 같이 하나의 div로 또 감싸거나 해야 한다.이렇게 의미 없는(필요 없는) 를 사용하기 싫으면 로 감싸도 된다.이걸 fragment문법이라고 한다. 복잡한 html을 한 단어로 한 단어로 치환할 수 있는 Component 문법리액트에는 복작한 html, 많은 div들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데, 이것을 Component라고 한다. Component 문법을 이용하면 함수나 변수를 만드는 것처럼 html을 한 단어로 치환해서 원하는 곳에 넣을 수 있다. 이러면 .. 2024. 8. 2. [React 기초] state, {useState}, useState() 함수 들어가기 전에return() 안에는 병렬로 태그 2 개 이상 기입 금지.하나의 태그로 시작해서 하나의 태그로 끝내야 한다. 리액트에서 자료를 잠깐 저장할 때에는 변수를 사용하고 html에 {데이터바인딩}도 할 수 있다. 하지만 중요한 데이터를 저장할 때에는 변수 대신 state를 사용한다. State란?- 변수 대신 쓰는 데이터 저장 공간.- useState()를 이용해 만들어야 한다.- 문자, 숫자, array, object, boolean 전부 저장 가능하다.- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.(state가 변경될 경우 component가 재렌더링 되기 때문에 렌더링,데이터 흐름에 사용되는 값을 포함하면 불필요한 렌더링이 발생해 성능을 저하시킬 수 있음) .. 2024. 8. 1. [React 기초] JSX 문법 - className, 데이터 바인딩 {중괄호}, inline style JSX란?- 문자열도HTML도 아닌 JavaScript에서 XML을 추가, 확장된 문법이다.- React로 프로젝트를 만들 때 사용한다.- JavaScript의 모든 기능이 포함되어 있다. JSX를 사용하는 이유React에서 를 만들려면 React.createElement('div', null, 'Hello World')로 길게 작성해야 한다.하지만 JSX를 사용하면 로 작성하면 된다. JSX 문법 1. HTML에 class 넣을 때는 className html에서 태그에 class를 추가할 때에는 위와 같이 사용하지만, React JSX 분법에서는 아래와 같이 사용해야 한다. import logo from './logo.svg';import './App.css';function App(){ retur.. 2024. 7. 30. [React 기초] React 시작하기(설치/개발 환경 세팅/프로젝트 생성) 1. 리액트(React)란?페이스북(Facebook)에서 개발한 오픈 자바스크립트 라이브러리.2. 리액트(React)를 사용하는 이유1. Single Page Application을 만들 때 사용한다. - 하나의 페이지에서 모바일 앱처럼 부드럽게 동작하는 HTML 페이지를 만들고 싶을 때 React 라이브러리를 사용한다.2. HTML 재사용이 편리하다. - 큰 프로젝트에서 html 관리, 재사용이 편리해진다.3. 비슷한 문법으로 앱 개발이 가능하다. (React Native) 사실 React는 HTML, CSS, JavaScript를 이용한 웹 개발을 편리하게 해 주는 도구이다. HTML, CSS, JavaScript를 알고 있어야 한다. 3. 리액트(React) 설치/개발 환경 세팅1. N.. 2024. 7. 30. 블렌딩 모드 ㅂNormalDissolve - 모래알 흩뿌린 것처럼 나타냄(노이즈와 비슷), 투명도와 병행해서 사용해야 함 [어둡게] - 어둡게 합성, 밝은 부분은 투명하게 처리DarkenMultiply - [어둡게] 그룹의 대표, 하위 레이어와 섞이지 않음, 이미지 따야할 때 많이 사용Color Burn - 어둡게 합성해야 하는 경우에 색상까지 들어가야 할 경우에 사용Linear BurnDarker Color [밝게] - 밝게 합성, 어두운 부분은 투명하게 처리LightenScreen - [밝게] 그룹의 대표, 하위 레이어와 섞이지 않음, 이미지 따야할 때 많이 사용Color Dodge - 밝게 합성해야 하는 경우에 색상까지 들어가야 할 경우에 사용Linear Dodge (Add)Lighter Color [대비] -.. 2024. 7. 29. 이전 1 ··· 3 4 5 6 다음
