차근차근 배움터

한국어 어학원을 겨냥한 웹사이트를 한 번 가볍게 만들어 봤다. 리액트 그리고 SCSS 를 이용해 봤고 컴포넌트 단위로 잘 나누려고 했다! 궁금한 것 중 하나는 import classes from '../Home.module.scss' 이런 식으로 classes 로 적용을 하면 해당 컴포넌트에만 style이 적용되는 줄 알았는데 아닌 것 같다...? 그리고 Netflify에서 자꾸 build랑 deploy 오류가 나서 배포를 못했는데 이 부분은 ChatGPT한테 물어봐서 해결했다. 문제는 ESLint 문법에 에러가 있어서 그랬다. 예를 들면 img 태그 같은 것에 alt 속성이 무조건 있어야 한다던지 사용하지 않는 컴포넌트가 import 되어 있다던지 그런 문제들로 인해서 deploy에 에러가 생겼다. 이..

리액트 프로젝트를 생성하고 scss 설치하고 Navbar.js 파일을 만들어서 App.js에 추가 import Navbar from "./components/common/Navbar"; import Home from "./components/routes/Home"; // import { Link } from "react"; function App() { return ( ); } export default App; css 연습을 좀 했다 저 아이콘 부분 중앙 정렬하는 게 헷갈려서 시간 좀 쏟음 Navbar.js import "./Navbar.scss"; import instagram from "../../images/instagram.png"; import facebook from "../../images..

리액트 처음 공부 이후에 복습 겸 다시 만들어 봤다 확실히 두 번째 만드니까 훨씬 나아진 모습인데 코드를 보면 조금 난장판이라 역시 조만간 다시 한 번 만들어보거나 정리해 보려고 한다 영화 API로는 Tmdb API를 사용했고 각 카테고리 별로 나누어서 페이지를 구성했다. 현재 상영 영 화 On screen 인기 많은 영화 Popular 영화 순위 별 Top 개봉 예정인 영화 Upcoming 상세 페이지 화면 수정사항으로는 Home 화면에 전체 카테고리가 나오도록 수정할 것이고 반응형으로 [핸드폰] 만들기 글자 크기가 약간 애매한 부분이 있다 네이게이션 바 글자 크기도 살짝 수정해야 할 것 같다 React App yujinkimkr.github.io

늘 MBTI 만들어 보고 싶었는데 아이디어가 없어서 못하다가 디즈니 공주들이 다른 MBTI를 가지고 있다는 글을 보고 바로 작업에 들어갔다! 아래와 같은 디자인으로 만들었고... 최대한 간단하지만 깔끔하게! 먼저 엑셀 파일에 정리부터 시작했다 공주 리스트는 배열 안에 아래와 같이 정리했다 카카오 공유하기 기능이, 간단하게 가져다 쓸 수 있지 않을까 싶었는데 은근 어려웠다... 어설프지만 그래도 공유하기 성공 물론 결과 페이지는 공유되지 않는다 왜냐하면 새로고침 하면 처음으로 돌아가기 때문에..... 솔직히 결과 페이지는 조금 구리지만 무슨 공주인지만 확인하는 용으로 보면 재밌지 않을까 싶다~~! 아래가 내가 만든 MBTI 페이지이다 JS로만 만들었고 netlify를 이용해서 배포해봤다 디즈니 공주 테스트..

[ Javascript로 스탑워치 만들기 ] 동생이 타이머 만드는 거 도와달라고 해서 보는데 사실 나도 타이머는 만들어본 적이 없어서, 재밌게 만들어봤다. 늘 그렇듯 코딩에는 답이 없듯이 나도 나만의 방식으로 접근했다고 생각하면 될 것 같다. css까지 조금 곁들인 원문을 먼저 공유하고, 가장 핵심이 되는 부분에 집중해보자면 메소드 setInterval(), clearInterval()을 이용한 점을 생각할 수 있겠다. 그리고 중간 중간 버그가 생겼던 부분을 생각하면, start 를 두 번 눌렀을 시에, stop을 눌러도 작동이 안돼는 것 즉 start를 누를 때마다 타이머가 작동 되기 때문에 타이머가 여러 개가 생긴다고 생각하면 된다. 그래서 stop 버튼이 무엇을 더 이상 멈춰야 할 지 모른달까? 이..