반응형 컴퓨터/CSR (React, Vue)22 [Vue] Visual Studio Code 에서 첫 환경설정 & 기본세팅 (window) vue 설치 (전역 cmd) /*둘 중 하나로 설치 (yarn 이 좀 더 안정적)*/ npm install -g @vue/cli yarn global add @vue/cli vue 프로젝트 설치 vue create 프로젝트명 VSC 부가기능 설치 Extension 이동 후 Vetur, Vue 3 snippets, HTML CSS Support 세개 설치 2023. 3. 18. [React] 클릭이벤트 시 onClick 으로 구현 + 전역 function 으로 구현 시점 차이(프론트앤드 과제전형) 과제전형 문제였는데 클릭 이벤트 구현을 해야 했어요 1. 페이지 전체 클릭 시 count 처리 2. div 박스 클릭 시 count 처리 딱 봐도 쉬운 문제여서 호다닥 풀었거든요 근데 면접볼때 면접관님이 저한테 해당 풀이에 대해 질문을 하시는거에요 클릭이벤트 처리를 엄청 신기하게 하셨던데... 1. 페이지 전체 클릭할 때는 클릭하자마자 count 처리 2. div 박스 클릭할 때는 클릭하고 나서 count 처리를 했던데 의도하신건가요??? 아무생각없이 풀었는데 저렇게 질문이 날아와서 너므 당황했습니다. 그게 구현이 어떻게 되었냐면은 (소리키고 봐야됨) 클릭이 딸깍 이잖아여 근데 페이지 전체 클릭 시는 딸! 에서 count 가 올라가고 div 박스 클릭 시는 딸깍! 에서 count 가 올라가는거에여 문제풀.. 2023. 2. 18. [React] 이미지 업로드 + 미리보기 구현하기 개인 프로젝트 하면서 이미지 업로드 할 일이 생겼는데 이미지 미리보기까지 구현해보고 싶어서요... 이미지 미리보기 구현 시 쌩 html 이랑 리액트랑은 조금 다른 방식으로 가야 합니당 리액트가 훨씬 쉬움 일단 이미지 하나 준비해주세여 짠 풀 코드는 깃헙에 있구여... https://github.com/minji0123/mm/blob/main/src/regPages/RegTest.js 사진업로드 하는 부분의 코드만... import { useState } from 'react'; export default () => { let [mainImg,setMainImg] = useState(""); const setPreviewImg = (event) => { var reader = new FileReader().. 2023. 2. 4. [React] React-Router-Dom 버전v6 _BrowserRouter 와 HashRouter 차이 (2) BrowserRouter vs HashRouter 둘 다 리엑트가 URL주소에 따라 구성 요소를 매칭하여 렌더링 하기 위한 방법입니다. BrowserRouter React 는 Single Page Application 입니다. 하지만 BrowserRouter는 페이지를 라우팅할 때 URL을 통해 서버의 폴더를 이동하는것 처럼 보여줍니다. 그래서 Server Side Rendering 처럼 보여지게 됩니다. (당연히... 실제로 해당 URL에 html 파일이 존재하지 않습니다. SPA 이기 때문에...) BrowserRouter 를 사용해서 화면을 렌더링하면 검색엔진에서 봇으로 웹사이트 탐색 시 크롤링이 가능합니다. (SSR 처럼 보이기 때문입니다.) 또한 BrowserRouter 는 JS의 History.. 2022. 12. 28. [React] React-Router-Dom 버전v6 과 라우터, 라우터 컴포넌트 종류 (1) react-router-dom 일반 html css js 사이트는 html 파일을 여러개 만들면 하나의 페이지가 되죠 다른 페이지를 보여줘야 할 때 만들어놨던 html 파일 중 하나를 보여주면 됩니다. 보통 만들어져있는 html 들을 2022. 12. 21. [React] Google fonts icons 사용하기 프로젝트를 진행하다보면 icons 들을 사용할 일이 많은데 font awesome 은 유료버전이 너므 많아서 다시 구글 아이콘으로 회기했습니다🙄 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com google font 나 google icons 들은 html 기준이여서 React 에서 사용하려면 다른 방법을 사용해야 됩니당 1. 페이지마다 import 시켜서 사용하기 .. 2022. 10. 23. 이전 1 2 3 다음 반응형
