전체 글 (28) 썸네일형 리스트형 React로 로그인, 로그아웃 기능 구현하기(짱 쉽게) React Framework인 Next를 사용하여 로그인, 로그아웃 기능 구현 하는 방법 실제로 로그인/로그아웃을 처리해줄 서버가 없기때문에 더미데이터가 들어오면 state로 화면을 구현하는 방식입니다. 추가로 next와 ant Design이 사용되었습니다. 1. 프로젝트 구성 부가적인 작업파일들이 있는데 여기서 실제로 사용하는 파일은 components에 있는 AppLayout.js //메인 화면 LoginForm.js // 로그인할 화면 UserProfile.js // 로그아웃할 화면 세 파일을 사용합니다. 1-1. package.json package.json은 아래와 같이 설정 되어있습니다. 콘솔에서 npm i 로 설치합니다. 중요한 dependency는 next, react, react-dom,.. and , or 연산자로 코드 짧게 쓰기( &&, || ) [1] or 연산자 //테스트용 객체 const person = { name: "한국인", age: 20, job: "student" } or연산자는 첫번째 값이 존재하면 첫째값을 return , 그렇지 않으면 두번째 값을 리턴 기본값 설정할때 많이 사용 console.log(person.name || '이름이 없습니다.') //한국인 console.log(person.address || '주소가 없습니다.') //주소가 없습니다. [2] and 연산자 && 연산자는 두개의 값이 모두 참이면 마지막값을 return, 둘중에 하나라도 false면 false를 리턴 특수한 상황의 조건문에 많이 사용 console.log(person.age < 20 && '운전불가능'); //false console.log(.. 리액트에서 자주 쓰이는 자바스크립트 문법 3가지 1. object shorhand 문법 객체 리터럴 선언시에 key로 선언된 값이 존재한다면, value 를 생략해도 자동으로 매칭시켜준다. 일반적으로 쓰는 JS문법 let name = "홍길동"; let age = 20; const person = { name:name, age:age } object shorhand 사용 예시 let name = "홍길동"; let age = 20; //key:value 형식이 아닌 key값만 선언한 형태 const person = { name, age } console.log(person) //result : {name: '홍길동', age: 20} 2.Destructuring (구조분해, 비구조화 할당) Destructuring은 구조화된 배열 또는 객체를 Dest.. 이전 1 2 3 4 5 6 ··· 10 다음
