본문 바로가기

전체 글

[React & 환경세팅] [sass-rem] 렌더링 시 개발자도구에서 확인하면 rem(몇px) 동작 안하고 strike 쳐질때 (sass-rem not working)
vue에서 하던대로 package.json 들고와서 sass 열심히 연결하고 sass-rem 설치해서 하려는데 렌더링 된 모습이 font-size: rem(15px) 하면서 strike 쳐지고 계속 적용이 안됐다. 해결방법 알고보니 node-sass가 문제였다. 공식문서에서 지우고 sass로 깔아서 하라길래 했더니 바로 적용완료!!! npm uninstall node-sass //node-sass 지우기 npm install sass //sass 설치하기 https://create-react-app.dev/docs/adding-a-sass-stylesheet/ Adding a Sass Stylesheet | Create React App Note: this feature is available with ..
[React & 환경세팅] .env 환경변수 파일 값 변경하기
이슈 react로 firebase 로그인기능을 구현하는데 apikey값이 잘못되었다고 error message가 나왔다. 보니 환경변수 설정할때 실수로 끝에 ; 세미콜론을 넣었는데 아무리 .env파일에서 세미콜론을 지워도 변경되지 않았다. 해결 //package.json scripts에 추가 "scripts": { "serve:local": "react-scripts start --mode development" } //터미널에서 실행 npm run serve:local package.json에 scripts안에 위에 있는 명령어를 추가하고 터미널에서 해당 명령어를 실행하였더니 정상적으로 변경된 것을 확인할 수 있었다. vue에서는 아래 명령어 추가!! "serve:local": vue-cli-servi..
[Vue3 + Scss] 어드민에서 설정한 타입별로 전체 디자인 포인트컬러값 다르게 하기(--root)
이슈 어드민에서 타입을 정하면 타입에 따라 프론트의 전체적인 포인트 컬러를 변경해달라는 요청이 있었다. 원래는 scss는 app.scss 하나를 vite.config.ts에서 부르는걸로 되어있었는데 구조 변경이 필요했다. 해결 scss는 크게 2가지로 볼 수 있는데, app.scss는 divide폴더안의 파일들을 import한 파일이고 main.ts에서 부르고, global.scss는 common폴더안의 파일들을 import한 파일이고 vite.config.ts에서 부른다. app.scss와는 다르게 global.scss는 vite.config.ts에서 부르므로 서버사이드가 돌면서 실행되는데, 이때 컬러변수는 동일하게 설정하고 :root를 위에 선언하여 특정 클래스가 있을때만 바뀌도록 하였다. 그리고 -..
[Vue3] VUE 폰트 적용하기 (font.scss에서 font-face 설정하는데 폰트 설정이 제대로 안될때)
이슈 [현재프로젝트 구조] src └ [DIR] assets └ [DIR] fonts └ [DIR] styles └ [DIR] common └ font.scss └ app.scss 현재 vue3 프로젝트 폴더구조는 위와 같다. 그런데 /src/assets/styles/font.scss에서 font-face 설정을 하고 Monserrat 폰트를 사용하고 싶은데 실제 렌더링 된 모습을 보면 아래처럼 computed탭이나 network탭에서도 폰트를 제대로 불러오지 않는 것을 확인할 수 있었다. 해결 network탭의 headers를 확인해봤더니 ~@ 하면 src를 찾아야하는데 찾지 못하고 그대로 내려온 모습을 확인할 수 있었다. font.scss에서 /src/assets 로 변경해주었더니 정상적으로 나오는 ..
[Vue3] vite.config.ts 에서 scss 설정하는 방법
이슈 vue.config.ts 나 webpack.config.ts 에서 매번 설정하는 scss를 설정하려는데 이번에는 typescript가 같이 들어가 있는 프로젝트라 vite.config.ts에 설정해줘야했다. 해결 기존 vue.config.ts 에 하는 방법과 거의 같았다. app.scss를 연결시켜주었더니 모든 파일에서 app.scss에서 선언한 변수, rem설정 등을 동일하게 사용할 수 있었다. //vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: '@import "/src/styles/mobile/app.scss";' } } }, }); vite.config 공식문서: ..
[React] useEffect란 ? ? ?
useEffect란 ? 저번에 useEffect 기본에 대해 배울때 vue의 watch와 같은거구나 하고 넘어갔었는데 정리를 하고 넘어가는게 좋을 것 같다. React 공식문서에 나와있는 내용은 아래와 같다. `React의 class 생명주기 메서드에 친숙하다면, useEffect는 componentDidMount + componentDidUpdate + componentWillUnmount 이 3개가 합쳐진 것과 같다. 일단 useEffect는 처음 렌더링될때 한번 실행되고, 값이 바뀔때마다 실행이 되는데 자주 쓰는 방식은 3가지로 나뉘어지는 것 같다. 그리고 안에서 return을 해주면 clean-up 해주고 싶을때 사용하는 방식이라고 한다. 1. 콜백함수만 넘길때 useEffect(() => { r..
[javascript] 페이지 진입 시 새로고침인지 뒤로가기인지 확인하기! (window.performance.navigation.type == 1)
이슈 개발에서 데이터를 6개씩 끊어서 줘야하는데 최대 개수가 12개라서 api에서 페이징 처리없이 한번에 12개 상품을 주고, 더보기 페이징 처리를 display:none/block으로 처리해야했다. 그런데 기본 동작할때는 이슈가 없었는데, history back 할때 스크롤값과 기존에 더보기 했던 상품인데 더보기가 열려있지 않는 등 추가 이슈가 생겼다. 따라서 history관련 추가 작업이 필요했다. ==> history.state / history.replaceState() 그리고 현재 페이지 진입 동작이 새로고침이냐 뒤로가기냐에 따라서 다른 동작을 실행했어야했다. ==> window.performance.navigaion.type === 1 해결 if (window.performance.naviga..
[React] MVC 패턴으로 코드짜기
MVC패턴 모델Model : 모델은 앱이 포함해야할 데이터가 무엇인지를 정의. ( ==데이터베이스 ) 뷰View: 레이아웃과 화면을 처리합니다.(==화면 jsx, vue) 컨트롤러Controller: 명령을 모델과 뷰 부분으로 라우팅합니다. (==비동기통신하는 부분, composable) mvc패턴으로 짜주려면 누구 하나가 모든것을 다 처리하면 안된다. 각각의 역할 만큼만 할 수 있도록 만들어주어야한다. 따라서 view에서 비동기통신과 관련된 것들을 모~두 하지 않는것이 좋고, 따로 services 폴더를 만들어 관리한다. 수정 전 코드 app.jsx import './App.css'; import React, {useState, useEffect} from 'react'; import VideoList..
[React] 깃허브에 올리면 안되는 apikey 설정하는법 (.env 파일)
이슈 api key는 소스작업시에 올라가면 안되는 아이므로 꽁꽁 숨겨두어야하는데 어떻게 숨겨두는지 강의를 통해 알았다. 해결 1. 루트폴더에 .env파일을 만든다. 2. .env 파일안에 대문자로 이루어진 이름을 지정해주고 값을 담아준다. (지정할이름=실제api키) REACT_APP_YOTUBE_API_KEY=123456789 3.index.js 등에서 process.env.지정한이름 으로 가져와서 쓴다. const youtube = new Youtube(process.env.REACT_APP_YOTUBE_API_KEY); 4. gitignore에 .env 파일을 추가한다.
[Vue3] Provide와 inject 한 곳에서 정리하여 불러오기
이슈 공통으로 정의된 alert문구를 한곳에서 정리하여 불러와서 사용하고 싶음. 해결 Provide와 inject *Provide와 inject란 ? 컴포넌트간에 통신하려면 부모 - 자식 이런식으로 거쳐야하는데 단방에 통신할 수 있는 것이라고 보면 된다. 따라서 1. main.ts에서 Provide로 메세지를 가지고 있는 파일를 불러온 후 (language에 따라서 한국어, 영어), 2. main.ts는 완전 공통 ts니까 모든 ts에서 접근할 수 있으므로 3. 각각의 페이지에서 inject로 가져와 사용하려고 ! 하고 보니까 그것도 번거로워서 ==> message/index.ts 에서 inject로 가져와서 그것을 export해주고, ==> 각각의 페이지에서는 message/index.ts 만을 imp..

티스토리툴바