개발/프론트엔드10 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에서 만든 페이지나 나옵니다. 2024. 9. 13. 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 : 화면.. 2024. 9. 12. 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.. 2024. 5. 11. 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 + ` 를 눌러 터미널을.. 2024. 5. 11. 이전 1 2 다음
