-
validation (리액트), useHistory
학원 수업 Day20 validation 리액트 버전의 validation 을 제작했다. 초기값 세팅 에러 체크를 위해 각 input 의 value 값을 저장해야한다. 폼 초기값 객체를 기본값으로 하는 state 로 생성한다. const initVal = { userId: '', email: '', pwd1: '', pwd2: '', gender: null, interests: null, edu: '', comments: '', }; const [ val, setVal ] = useState(initVal); 그리고 에러 메세지와 validation 통과 후 true ... Read More
-
카카오 맵 API (리액트)
학원 수업 Day19 카카오맵 API HTML에서 실습했던 카카오맵 API 예제를 리액트에서도 실습했다. kakao 불러오기 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키"></script> 하나밖에 없는 소중한 public/index.html 파일의 <head></head> 내부에 kakao Api파일을 불러온다. const { kakao } = window; 카카오맵을 사용할 js 컴포넌트 function 내부 최상단에 kakao 객체를 할당해준다. wind... Read More
-
청약닷컴 UI제작로그 Day1
청약닷컴 페이지 만들면서 있었던 좌충우돌 제작로그 width: auto; 애니메이션 index의 텍스트 로고 부분에 애니메이션 효과를 주고 싶었다. @keyframe index-logo { 0% { width: 0; } 100% { width: auto; } } 처음에는 위와 같이 하면 당연히 될 줄 알았는데, 애니메이션을 입히면 애니메이션이 작동되지 않고 0에서 바로 auto로 적용이 되었다. 해결방법 /* Logo 부분 */ span{ width: auto; animation: index-logo 1s linear 1; } /* keyframe 부분 */... Read More
-
axios, Popup 컴포넌트 활용, css 종횡비 지정
학원 수업 Day18 useState() 복습 학습했던 hook 사용법을 복습했다. 조건문으로 State 변경 let [ time, setTime ] = useState(1); function btnSetTime() { time = time >= 12 ? 1 : time + 1; setTime(time); } <div> <span>타이머 : {time}시</span> <button onClick={btnSetTime}>Update</button> </div> input값 받아서 리스트 추가 실시간으로 input의 ... Read More
-
모던 자바스크립트 Deep Dive 스터디 인프런 12
인프런 - 모던 자바스크립트 딥다이브 스터디 보면서 몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 12. 함수 함수 선언문은 표현식이 아닌 문이다. 표현식이 아닌 문은 변수에 할당할 수 없다. const func = function () {}; 위와 같이 변수에 할당되는 것은 함수를 리터럴 표현식으로 해석할 수 있기 때문이다. 함수 선언문과 함수 리터럴은 그 모양이 서로 같은데, 함수 선언문은 이름을 생략할 수 없다는 점만 다르다. 따라서 문맥에 따라 함수 리터럴을 단독으로 사용하면 선언문으로 해석하고, 변수에 사용하거나 피연산자로 사용하는 경우에는 리터럴 표현식으로 해석한다. ... Read More
-
리액트 라우터 (Router) 버전 이슈, useEffect
학원 수업 Day17 Router 리액트로 만들어진 페이지는 하나의 페이지에 각각의 컴포넌트 조각을 상황에 맞게 끼워서 보여준다. 그러나 마치 서브 페이지가 있는 것처럼, 링크 태그의 동작을 위해, 링크를 타고 들어가면 해당 경로에 맞는 컴포넌트를 띄워주는 것을 라우터가 해준다. 리액트 라우터 돔 설치 npm install react-router-dom // 설치 npm uninstall router-react-dom // 삭제 버전 이슈 현재 22년 10월 기준 Router v6의 기능이 v5에 비해 상당히 많이 바뀌었는데, 현재는 v5 기준으로 학습하므로 v5로 재설치했다. v6이 나온... Read More
-
React App 깃허브 배포하기
내가 쓰려고 남기는 방법 1. 작업물 업로드 신규 repository 생성 후, gitHub, sass 터미널 명령어 정리에 따라 작업물을 깃허브로 업로드 한다. 2. package.json 수정 2-1. 사이트 주소 추가 json파일을 열면 중괄호로 묶인 객체?가 하나 있는데 그 안쪽의 최하단에 아래 내용을 추가한다. "homepage": "https://사이트주소/레포이름/" 사이트 주소는 아이디.github.io 일 수도 있지만, 나의 경우 도메인을 연결 해 놓았으므로 https://leeyujoo.com/레포이름/ 이 된다. 레포지토리 이름 뒤에는 /가 꼭 붙어야 한다. ... Read More
-
모던 자바스크립트 Deep Dive 스터디 인프런 10, 11
인프런 - 모던 자바스크립트 딥다이브 스터디 보면서 몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 10. 객체 리터럴 함수는 일급객체이다. 객체 리터럴은 객체를 생성하기 위한 표기법으로, 중괄호 내에 0개 이상의 프로퍼티를 정의한다. const a = { b: 'b', c: function() { console.log(`this is ${this.b}`); } } 여기서 a는 객체, b는 프로퍼티, c는 메서드이다. a.c() 호출 시 콘솔창에는 this is b 가 출력된다. 호출 시 a의 메서드로서 호출했기 때문이다. 이 때, 함수로 호출하고 싶다면 a.c... Read More
-
리액트 렌더링, useState, useRef
학원 수업 Day16 리액트 렌더링 SSR (Server Side Rendering) 브라우저가 서버에 각각의 html 파일을 요청해서 화면을 렌더링한다. – 초기 로딩 속도 빠르다. – 페이지 이동시 화면이 깜빡임, 변경될 필요 없는 공통영역까지 모조리 변경한다. CSR (Client Side Rendering) 모든 컴포넌트를 jsx 자바스크립트 파일 형태로 초기 로딩시 모두 불러와서 렌더링한다. – 메뉴 이동 시 부드럽게 실시간으로 서브 컨텐츠를 보여준다. (서버에 요청할 필요가 없음) – 변경될 부분만 실시간으로 바꿔준다. (이미 불러온 컴포넌트로 교체) – 초기 ... Read More
-
모던 자바스크립트 Deep Dive 스터디 인프런 8,9
몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 8. 제어문 블록문 0개 이상의 문을 중괄호로 묶은 것. { let a = 1; } 문의 끝에는 세미클론을 붙이는 것이 일반적이나, 블록문은 그 자체로 종결성을 가져서 쓰지 않는다. 조건문 폴스루 fall through switch문은 switch문이 끝날때까지 이후의 모든 case문과 default문을 실행한다. 다음으로 넘어가지 않으려면 case 내에 break를 사용해서 코드 블록에서 탈출해야 한다. 반복문 for (let i = 0; i < 2; 증감식) { i++; } for문 내 어딘가... Read More