본문 바로가기

전체 글125

navbar 디자인 && logout 오늘 한 내용 navbar 디자인 카테고리 별 페이지 이동 logout 오늘 배운 내용 span은 inline 요소이기때문에 margin-top이 먹히지 않음. 따라서 inline-block으로 설정해주면 사용할 수 있음 캡쳐 소감 nav바에 처음으로 다양한 카테고리로 이동하는 기능을 추가했다. 그런데 nav에 logout 기능을 추가하면서 나름의 고민이 생겼다. firebase auth 관련 service를 authService에서 관리하는데 app에서부터 전달한다. 근데 nav가 hard mode / soft mode / collection / home 이 네군데에 다 등장하니까 app.jsx에서 전달 전달... 뭔가 이게 맞는건가 싶다. 원래 이렇게 더럽게 짜는건가...? 오류 일지 이미지 파일을 .. 2021. 12. 5.
REACT favicon 변경 먼저 png 파일을 ico 파일로 변경해준다. https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 해당 페이지에서 이미지를 변경 후 저장하고 public 폴더에 넣어준다. 나는 원래 있던 favicon 파일을 삭제하고 바꾼 favicon을 favicon.ico로 저장했다. 만약 favicon 이름이 다르다면 link href 부분을 해당 이름으로 수정해주면 된다. 2021. 12. 5.
REACT 이미지 올리기 <img src...> react로 이미지를 추가할 때 두가지 방법이 있다. 1. import 2. require 먼저, src 폴더 안에 img 파일을 생성한 후 추가할 이미지를 넣는다. logo.png를 nav에 logo로 사용해볼 것이다. 1. import 먼저 이미지 파일을 Import 해준다. ' import 사용할 이름 from 이미지 경로' 그리고 이미지 태그에 사용할 이름을 이용해 작성해준다. ' ' ( img를 image로 적는 실수는 범하지 않도록 하자.. ) 곰 발바닥 logo가 잘 추가된 것이 보인다. 2. require img 태그에 경로를 적어주는 방법이다. ' ' 1번과 달리 미리 선언할 필요가 .. 2021. 12. 5.
firebase를 이용한 로그인 오늘 한 내용 firebase google oauth를 이용한 로그인 service 폴더를 따로 만들어주고 firebase.js 파일을 만든다. .env 파일을 만들고 firebase 페이지에서 받아온 api key를 입력한다 (이때, .env 파일은 상단에 위치해야하고, key이름은 'REACT_APP_FIREBASE_KEY이름' 형식으로 작성한다.) firebase.js 파일에 process.env.해당 key를 적어준다. auth_service.js 파일을 만들고 firebase oauth를 위한 코드를 적는다. (firebase login page 참조) 로그인 페이지 스타일링 오늘 배운 내용 p는 block 요소, span은 inline 요소 캡쳐 저번 프로젝트 스타일링을 재사용했다. x 버튼을.. 2021. 12. 4.
Router Router 갓 개발을 시작한 초보라면 대체로 single page 개발을 해왔을거에요. 그러나 React를 시작하게 되고 프로젝트가 점점 복잡해질수록 하나의 페이지에서 감당하기 어려워지죠. 이때 router를 이용해 페이지를 나눠야 할 때가 온답니다. route 길, 노선이라는 뜻이 있어요. router는 뜻 그대로 우리에게 가는 길을 제공해주죠. 사용자가 url을 전달하면 router는 어떤 페이지로 연결할 지 결정해줘요. 보통 single page에서 작업을 하면 북마크나 뒤로가기, 앞으로 가기가 불가능해서 여러 불편함을 초래해요. 그러나 router를 이용하면 이 모든 것을 간단하게 이용할 수 있답니다. Router 사용법 먼저 router를 설치해줍니다. 터미널에 'yarn add react-r.. 2021. 12. 1.
3tamp 첫 화면 개발 오늘 한 내용 router 사용 첫 화면 스타일링 svg 파일 사용한 눈 내리는 효과 오늘 배운 내용 router 6.0 버전부터 사용 방식 변경. switch 사용 x version 6.0 이상 작성법 useHistory ⇒ useNavigate로 변경 const navigate = useNavigate(); const onClick = () => { navigate("/home"); }; position: absolute 일 때는 margin: 0px auto 혹은 text-align으로 가운데 정렬이 먹히지 않는다.이 설정이면 가운데 정렬 완료! margin: auto; left: 0; right: 0; 캡쳐 잘보면 눈이 내린다!!! 소감 알고리즘 한다고 오랜만에 리액트를 했더니 그새 다 까먹었다... 2021. 12. 1.