본문 바로가기

분류 전체보기

[Next.js] 개발환경 셋팅 요새는 React 보다는 Next.js를 쓰는 것이 인기라고 하네요. 저도 트렌드를 따라서 Next.js 공부를 해보려고 합니다. Next.js는 React문법을 기본으로 사용하기 때문에 공부하기 수월할 것 같습니다! 먼저 개발환경 셋팅을 해보겠습니다. Node.js 18버전 이상이 필요하다고 하네요. 왼쪽 버튼을 눌러 다운받아 줍니다. 에디터는 VScode를 그대로 사용하면 될 것 같습니다. 코드를 짤 폴더도 만들어 주겠습니다. 그리고 이것을 VScode에서 열어주면 되겠네요. 폴더를 연 다음 터미널을 열어서 npx create-next-app@latest --experimental-app 명령어를 입력해줍니다. 그러면 이렇게 에러가 발생합니다. 하하,, 구글링을 해 볼 차례입니다. 생각보다 쉽게 해결.. 더보기
[CSS] flex-direction 속성을 게임으로 배우는 방법 안녕하세요 저번 시간에 이어서 Flexbox Froggy를 진행해보겠습니다. 8단계부터는 flex-derection 속성을 이용한 문제입니다. 그럼 시작해 볼까요? flex-direction은 저도 처음 접하는 스타일 속성인데 이것은 요소들의 정렬 방향을 정해준다 합니다. 8단계를 먼저 살펴볼까요? 연꽃이 오른쪽에 있어서 오른쪽으로 방향을 정해주면 될 것 같네요! 지금 개구리들이 왼쪽으로 정렬되어 있기 때문에 오른쪽으로 정렬 방향을 바꾸어 주면 될 것 같습니다. 이때 사용하는 것이 flex-direction:row-reverse; 개구리들이 쏙 들어가네요 이제 9단계입니다. 9단계는 아래로 정렬해주면 되겠네요. 위에서 아래로 정렬해주는 flex-direction:column; 을 사용해주고 클리어했습니다.. 더보기
[CSS] align-items 속성을 게임으로 배워보자 전 포스팅에 이어서 Flexbox Froggy 게임을 진행해보도록 하겠습니다. jusify-content 속성은 가로선(좌우)을 기준으로 정렬했다면 align-items 속성은 세로선(상하)을 기준으로 정렬해주는 스타일인 것 같습니다. 5단계는 개구리들을 바닥쪽으로 정렬해 주어야겠네요. align-items:flex-end; 를 써줍니다. 연꽃이 가운데에 있네요. 가운데로 슝 align-items:center를 적용하였지만 세로상의 가운데로만 이동하였습니다. 가로상으로도 가운데로 이동하려면 justify-content의 힘이 필요할 것 같네요. justify-content:center를 적어주니 연꽃에 도착합니다. 이젠 들어가야될 코드가 바로 떠오르지 않나요? 게임을 하니까 금방 외워지네요! 아래로 정렬.. 더보기
[CSS] justify-content 속성을 게임으로 배우기 안녕하세요 유튜브를 CSS로 공부하다 재밌는 사이트를 알게되었습니다. CSS design 스타일중 Flexbox 속성을 게임으로 공부할 수 있는 사이트인데요. 이것은 바로 FLEXBOX FROGGY라는 사이트입니다. 오늘은 이 게임의 문제를 풀면서 FLEXBOX 속성과 친해져보겠습니다. 먼저 사이트에 접속해줍니다. Flexbox Froggy - CSS flexbox 속성 배우기 게임 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 하는 법은 간단합니다. 개구리를 일종의 스타일 박스라고 생각하고 개구리를 연꽃까지 옮기면 됩니다. 하지만 이때 개구리를 FLEXBOX 스타일을 사용해서 이동시켜야 합니다. 1단계입니다. 개구리를 오른쪽끝으로 이.. 더보기
[React] 배열에서 랜덤 추출 후 출력하기 방학이 어느덧 끝나가네요. 학기중에도 프로젝트 계속 진행해 보려고 합니다! 지난 시간에 이어서 버튼을 한 개 추가 해보겠습니다. function Snack(){ const navigate = useNavigate(); const [snack,setSnack] = useState("snack") return ( 과자 {navigate("/")}}>홈 {navigate("/getsnack")}}>과자 뽑기 ) } 과자 뽑기 버튼을 누르면 과자를 뽑아주는 getsnack페이지로 이동하도록 만들었습니다. input과 button 컴포넌트를 사용해서 과자 뽑기 페이지를 만들었습니다. 하지만 홈 버튼이 너무 안보이죠? unction GetSnack(){ const navigate = useNavigate(); co.. 더보기
[React] useNavigate를 사용해 상세페이지 만들기 안녕하세요! 오늘은 버튼을 누르면 상세페이지로 이동하게 만들어 보는 시간을 가져보겠습니다. 출발해 볼까요 : - ) 위에 보시면 있는 노란색 버튼을 누르면 각각 과자페이지, 라면페이지 등으로 이동하는 기능을 구현해 보겠습니다. 먼저 상세페이지를 만들려면 React-Router-Dom이라는 것을 사용하는 것이 일반적입니다. 이걸 먼저 설치해 줍시다. 새 터미널을 여시고 npm install react-router-dom@6를 입력해 주시면 됩니다. 설치가 완료되면 index.js로 이동합니다. import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root... 더보기
[React] 배경이미지 삽입과 폰트 디자인 저번 시간에 이어서 웹페이지를 꾸며보겠습니다. 웹페이지가 너무 휑해 보이지 않나요? 오늘은 배경이미지를 넣어보겠습니다. 먼저 app.css 파일로 넘어가 줍니다. 이미지를 넣기 위해선 다운받은 이미지를 드래그 혹은 직접 소스 폴더에 넣어 주셔야 합니다. 그다음 app.css에서 body 태그를 하나 만들어줍니다. body { background-image: url(./hearts-1215842_960_720.jpg); } 그리고 background-image: urp(이미지 경로); 이렇게 코드 넣어주시면 됩니다. 적용 되었는지 한 번 확인해 볼까요? 이제 좀 그럴듯 해 보이네요 하지만 여기서 문제점이 조금 있습니다. 웹페이지 사진이 사이즈가 맞지 않아서 2장이 반복되서 보입니다. 배경이미지 전용 css.. 더보기
[React]를 사용하는 토이프로젝트 시작! 방학동안 열심히 놀았네요. 늦었지만 지금이라도 작은 토이프로젝트를 시작해보려고 합니다. 저는 과자를 꾸준히 사먹는 편입니다. 하지만 먹고싶은 것을 가득 쌓아놓고 막상 먹으려 하면 결정장애가 오곤합니다. 그래서 이번 프로젝트로 만드려는 것은 카테고리 별로 과자를 나눠서 임의로 먹을 과자를 선택해주는 프로그램입니다. 그럼 시작해볼까요! 개발은 VSC(Visual Studio Code)를 사용하는 React 웹앱을 만드려고 합니다. 먼저 프로젝트 파일들을 집어넣을 폴더를 만들어 줍니다. 초기 설정하는 법은 폴더를 만들고 Shift + 우클릭 후 파워쉘을 연다음 npx create-react-app 폴더이름 이렇게 코드치시면 됩니다. 그리고 터미널에 npm start를 치고 잘 구동되는지 확인합니다. 저는 기존.. 더보기

티스토리툴바