개발/프론트엔드 (5) 썸네일형 리스트형 react - 소스 코드로 페이지 전환 헤더의 우측 상단에 로그인 탭이 있는 경우가 있습니다. 해당 탭을 누르면 로그인 창으로 이동합니다. 해당 기능을 구현해 봅시다.Nav 디자인우선 nav탭을 디자인해 봅시다. Navbar.Text : nav창의 우측 상단에 보여줍니다. text라고 되어 있지만 안에 넣은게 버튼이여도 됩니다.Button : 예쁜 버튼입니다. 그냥 버튼이 아니라 예쁜 버튼입니다.onClick={move} : 클릭 시 move함수를 호출합니다.variant="primary" : 예쁜 파란 버튼을 보여줍니다. 이렇게 하면 화면이 큰 상태에서는 이렇게 보이고 줄어들면 이렇게 보입니다. 오른쪽 위 버튼을 누르면 창이 열리면서 버튼도 함께 보입니다.탭 이동탭은 useNavigate를 이용해서 이동할 수 있습니다. onClick을 .. react - 페이지 전환 페이지가 하나만 있는 홈페이지는 거의 없습니다. router를 이용해 여러 페이지를 컨트롤 해 봅시다.npm i react-router-dom 를 이용해 router를 하게 해주는 패키지를 설치합니다. index.js로 가서 App를 BrowserRouter로 감싸줍니다. 이제 페이지를 2개 만듭니다. 저는 login과 streak 페이지 2개를 만들었습니다. app.js에서 Routes와 Route를 추가해 줍니다. path에 경로를 넣어주고 element에는 컴포넌트를 넣어주면 됩니다. 이제 url에 /login을 하면 login에서 만든 페이지나 나옵니다. react - 헤더, 페이지 만들기 헤더웹 페이지에 있는 헤더를 만들어 주겠습니다. components - header 페이지를 만들고 header.jsx를 만들어 줍니다. ~~.jsx와 ~~.module.scss는 세트라고 생각하면 됩니다. react bootstrap을 설치하고(https://codestudycafe.tistory.com/87) 위와 같이 작성합니다. react bootstrap 공식 페이지(https://react-bootstrap.netlify.app/docs/components/navbar)에 잘 설명되어 있지만 옵션이 많으니 몇 개만 이야기해 보겠습니다. expand="lg" : 크기가 줄어들면 navbar의 모양이 바뀝니다. 언제 모양이 바뀔지 설정해 줍니다. lg는 992px입니다. Container : 화면.. java script - 2. 기초 문법 - 초급 기본적은 프로그래밍은 할 줄 안다고 가정하고 javascript의 문법과 특징들에 대해 간략히 설명할 예정입니다. 출력console.log("~~~")로 출력합니다.console.log("hello world!")//hello world!변수let, const가 있습니다(var도 있긴 한데 안 쓰는 것을 추천합니다). let은 재할당 가능한 변수, const는 재할당이 불가능한 변수입니다.//letlet a = 1;console.log(a); // 1a = 100;console.log(a); // 100//constconst b = 1;console.log(b); // 1//error// b = 100;// console.log(b); 반복문다른 언어들과 비슷하게 for와 while을 사용합니다. con.. java script - 1. 환경설정 java script를 실행하기 위한 기본적인 환경 설정입니다.크롬을 이용하거나 웹을 만드는 방법도 있지만 이 글에서는 node.js를 이용한 방법으로 진행할 것입니다.우선 vscode(https://codestudycafe.tistory.com/16)와 node.js(https://codestudycafe.tistory.com/17)를 설치합니다. 그리고 개발을 진행할 폴더를 만들고 해당 폴더에서 vscode를 실행합니다.저는 project라는 이름의 폴더를 만들었습니다. 왼쪽 탭에서 새 파일을 만들고 test.js로 이름을 바꿉니다. 모든 프로그램의 시작은 hello world죠.console.log("hello world!") 를 입력하고 윈도우 기준 ctrl + shift + ` 를 눌러 터미널을.. 이전 1 다음
