반응형 Front45 React + Vite .env 환경변수로 개발 환경(profile)나누기 우선 Vite는 아래의 설명처럼 빌드도구입니다.Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)는빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구!참고 : https://ko.vite.dev/guide/env-and-modeReact에서 Vite를 사용하고 있다면 환경변수에 접근하기 위해서는import.meta.env객체를 이용해서 접근합니다.예를 들어 소스에서의 사용은 아래와 같이 사용합니다.이제 dev, prod환경별 변수를 사용하기 위해서. env파일을 생성하고 환경별로 가져다가 사용해 보겠습니다..env는 공통적으로 사용할 내용.env.development는 dev환경에서 사용할 내용.env.production은 pr.. 2024. 12. 18. 11) ENS Project - Naver 로그인을 구현해보자! 사이트에서 로그인이 필요하다!네이버 관련 프로젝트이니 네이버 로그인을 구현해보자:)https://developers.naver.com/docs/login/devguide/devguide.md이전에 Oauth2.0을 스프링시큐리티로 인증서버와 리소스서버를 만들었던적이 있었는데네이버 로그인 역시 Oauth2.0을 따르고 있다.대충 아래처럼 만들면 될것 같다! ㅋㅋ1. 네이버로그인 버튼을 클릭!// authProvider.tsconst authProvider = { generateRandomString :() => { const randomBigInt = bigInt.randBetween("1e130", "1e131"); // 130자리 난수를 생성 return randomBigInt.toStri.. 2024. 11. 8. 10) ENS Project - CSS Framework 사용해보기 OverviewReact로 개발 시 디자인을 무에서 유를 창조하기에는 힘들다.이런 힘듬을 보완하기 위해 CSS Framework인 MUI를 사용하여 Ui 구성요소를 살펴보고 사용해보기로 한다.Example아래의 예제를 셋팅해서 띄워보고 컴포넌트들을 살펴보자.https://github.com/marmelab/material-ui-react-admin?tab=readme-ov-filehttps://marmelab.com/react-admin/Features.htmlhttps://marmelab.com/react-admin/CreateReactAdmin.htmlCreateReactAdminCSS Framework를 통해 우선적으로 개발 진행여러가지 Framework가 있지만 우선 아래의 Framework를 사.. 2024. 11. 4. 9) ENS Project - 프론트엔드 후딱 학습하기(React Deep Dive!!) 2024.10.15 - [Front/React.js] - 8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태)저번시간에 이어서 오늘은 더욱 더 깊은 심화과정 입니다! 저장을 잘하면서 포스팅 해보도록 하겠습니다:)Point!!- JSX를 꼭 사용하지 않아도 되는 이유- 컴포넌트 트리를 설계하는 방법 + 프로젝트를 더 효율적으로 구성하는 방법- State 사용의 상급 개념과 특정 상급 개념을 살펴봅니다. ㄴ 저번시간엔 useState()를 사용했습니다.- 자주 사용되는 중요 패턴과 Best Practices를 살펴봅니다.JSX를 꼭 사용하지 않아도 되는 이유?React Code는 Build Process를 통해서 변경 됩니다. 결과적으로 배포가능한 파일로 말.. 2024. 10. 31. 8) ENS Project - 프론트엔드 후딱 학습하기(리액트 컴포넌트, JSX, 속성, 상태) 해당 포스팅은2024.10.11 - [OpenSource/Spring Boot] - 7) ENS Project - DB로 전환02에서 이어지는 포스팅 입니다.frontend는 vue.js도 분명히..학습을 했는데 시간이 지나면 지날수록 새로운것이 나오고머릿속에 있던 지식들이 다 날아가버린다..말 그대로 내머릿속에 지우개ㅋㅋ이번에는 개인 프로젝트를 수행하면서 명확한 그림을 그려가면서 프론트엔드를 학습하려고 한다.학습은 옛날에는 항상 책을 사다가 학습을 했는데 요즘은 강의가 많아서 좋은거 같다ㅎㅎ그러므로 강의를 통해 학습하고자 한다.학습 후에는 아래와 같은 플랜을 가진다!1. 프로젝트 설정2. 프로젝트 구조 이해3. 컴포넌트 설계 ex) header(페이지 최상단 - 네비게이션 메뉴 부분) con.. 2024. 10. 15. vue.js 실습) 프로젝트 생성 및 분석 주저리 앞서 지난 시간에 vue.js 많은 이론들에 대해서 살펴보다가 말았다ㅋㅋ 이제는 Back-End 개발자들을 위해 하나의 프로젝트를 생성해보면서 vuejs 아키텍처 가이드를 만들어보자! :) 바로 실습 들어가자! 위의 스크린캡쳐는 여러가지 정보를 담고 있다. 모르는 부분이 있다면 한번씩 검색해서 찾아보도록 하자. 1. npm node package manager의 약자로 node.js의 모듈 관리를 하기 위해 사용 - install : package를 설치할 때 사용 예) npm install 패키지명 package.json에 포함된 의존성 패키지들이 일괄적으로 설치 됩니다. - init : 프로젝트를 초기화 해주는 명령어로 package.json file을 만들어줍니다. npm init --hel.. 2022. 11. 16. Vue.js : SyntaxError: Cannot use import statement outside a module 간만에 앞단을 해보는데 오류가 발생! 오류내용 /usr/local/bin/npm run serve > kong-ui@0.0.0 serve /Users/terrypark/Project/kong-ui > vite preview /Users/terrypark/Project/kong-ui/node_modules/vite/bin/vite.js:2 import { performance } from 'node:perf_hooks' ^^^^^^ SyntaxError: Cannot use import statement outside a module at Module._compile (internal/modules/cjs/loader.js:892:18) at Object.Module._extensions..js (inte.. 2022. 10. 18. 제 3장 Vue.js 둘러보며 친해지기! 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 2021.08.14 - [Front/Vue.js] - 제 2장 Vue.js 프로젝트를 github과 연동 1장과 2장에서는 환경설정 -> 프로젝트 생성 -> github연동 3장에서는 더욱 더 친해지기 단계 입니다. 구조를 익히고 필요한것을 찾아보는 단계 아키텍처, 프로젝트 구조, vue.js에 필요한 것들에 대해서 더욱 더 나아가 소스 코딩도 해보고 github 명령어 사용도 해보고! add, commit, push, pull 등등 vue.js는 javascript framework이다. 즉, 개발자가 개발을 잘하도록 구조도 잡아주고 도와주는 친구다. 저번 시간에 우리는 vue/cli로 프로젝트를 만들.. 2021. 8. 17. 제 2장 Vue.js 프로젝트를 github과 연동 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js.. acet.pe.kr 저번 스터디에서는 로컬 개발환경 셋팅 및 프로젝트를 생성해보았습니다. 오늘은 만들었던 프로젝트를 github에 연동하는 것을 해보도록 하겠습니다. 다들 아시겠지만..! github은 소스를 관리해주는 녀석 입니다. 아~주 오래전 호랑이 담배피던 시절 githu.. 2021. 8. 14. 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 2019.06.04 - [Front/Vue.js] - [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) 2019.06.12 - [Front/Vue.js] - const definitions are not supported by current javascript version 2019.06.18 - [OpenSource/Spring Boot] - VueJS를 연동.. 2021. 8. 14. const definitions are not supported by current javascript version VueJs 셋팅 시 IntelliJ에서 나오는 오류! 해결 방법은 아래와 같이 자바스크립트 버전을 변경하여 주면 된다! 끝~ 2019. 6. 12. [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) # 바로 코딩을 해보고 싶으신 분은 jsfiddle로 쉽게 해볼수 있습니다. https://jsfiddle.net/chrisvfritz/50wL7mdz/ # Vue.js의 특징으로 단일 파일 컴포넌트를 들수 있다. Componet System : Vue의 또 다른 중요한 개념. # 호환성 Vue는 ECMAScript5 기능을 사용 -> IE8 이하 버전을 지원하지 않습니다. 하지만 모든 ECMAScript5 호환 브라우저를 지원합니다. # Vue Devtools * https://github.com/vuejs/vue-devtools#vue-devtools vuejs/vue-devtools ⚙️ Browser devtools extension for debugging Vue.js applications. .. 2019. 6. 4. [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 공식 홈피 https://vuejs.org/ 한국어버전 : https://kr.vuejs.org/v2/guide/index.html Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 구글트렌드 Vue.js를 왜 써야하나? 엄청 복잡하게 코딩을 했던 옛날! 이제는 Vue.js같은 프레임워크를 통해 빠르고 쉽게 코딩이 가능하다. 프레임워크에는 angularJS, react등도 있지만 Vue.js는 아래와 같은 특징이 있다고 한다. 약팔기(?) 접근하기 용이! 러닝커브도 낮다?! 레알? 다목적, 다용도의 고성능! 유지할 수 있는 테스트 가능한 angularJS랑 비슷한 느낌같은데.. 컴포넌트가 매우 중요한 개념인듯 싶다. 아래처럼 html, js,.. 2019. 5. 31. Vue.js 맛보기 vue-cli 설치terrypark@localhost ~ sudo npm install vue-cli -gPassword:npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)⸨░░░░░░░░░░░░░░░░░░⸩ ⠴ fetchMetadata: WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue/usr/local/bin/vue-list -.. 2018. 9. 10. ECMAScript 데이터 유형(Types) 6가지 원시 데이터(Primitive Data) 유형 - null - undefined - number - string - boolean - symbol(ES6+) 객체(Object) 데이터 유형 - function object - array object (배열객체) - object 객체 생성 ? new 생성자 함수() 2018. 8. 14. 자바스크립트 이벤트 TEST Document 두 수의 합을 출력해봅니다. + = 12 2018. 8. 14. image map 편하게 사용하기 아래의 링크를 통해 쉽게 map을 컨트롤할 수 있다.https://www.image-map.net/ 2018. 7. 17. about HTML 텍스트 레벨 요소 요소 : 윗첨자 요소 : 아래첨자 요소 : 관련 참조 목적의 하이라이트된 글자 요소 요소 : 축약요소 요소 : 기계가 이해할 수 있는 날짜나 시간을 나타내는 요소 요소 : 더 이상 관련이 없거나 정확하지 않은 요소 참고 자료 윗첨자 요소 아래첨자 요소 축약 요소 시간 요소 더 이상 관련이 없거나 더 이상 정확하지 않은 요소 관련 참조 목적의 하이라이트된 글자 요소 저작권, 법적 텍스트, 주석 및 작은 글씨 요소HTML 5.2 기술 표준 사양 Text Level Semantics 2018. 7. 10. about html 요소 루트 섹션 요소 -> 섹션요소 - 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소가 적합하다. : 독립적으로 분류 가능. / 제목 포함 시켜야 함. : 그룹화된 컨텐츠 : 보조 컨텐츠, 광고 등 : 내비게이션을 나타냄 메인요소 / 화면에는 하나만 보여져야 한다.컨테이너 요소html 요소를 묶어주는 컨테이너(의미를 가지지는 않음.) 요소.-> , 은 블록요소들 (h1~6, p, blockquote, section 등)을 감쌀 수 없다. 디비전(Division) 요소 스팬(Span) 요소HTML5 기술 표준 사양 the div elementHTML5 기술 표준 사양 the span element 2018. 7. 10. e-mail 한글 깨짐 현상 Problem : e-mail 한글 깨짐 현상 - setting my html encoding : meta http-equiv="Content-Type" content="text/html; charset=utf-8" 현재 이메일을 전송시에 클라이언트에서 한글이 깨져보이거나 정상적으로 보이거나 하는 현상이 있다. What is Content-Type?A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1. Where does.. 2016. 12. 2. angular.isUndefined 사용하기~ 앵귤러를 사용하면서 아래처럼 ng-model을 통해 input text에 들어오는 키워드들에 대해서 변경된 값을 바로바로 셋팅할 수 가 있다. 그리고 한가지 유의할 점은 input value에 {{keyword}} 즉, 다른쪽에서 넘어온 데이터를 셋팅을 해주게 되면input 의 변화가 없다면 undefined가 search()의 파라미터로 넘어가게 된다.ex) {{keyword}}가 카카오! 이 상태에서 검색버튼을 누르면 app.query에는 아직 undefined이다!! 그래서 제대로 된 검색결과가 나오지 않는다. 그러므로 체킹을 한번 해주고 기존에 있는 데이터({{keyword}})를 활용하면 되겠다.if(angular.isUndefined(keyword)){ keyword=$scope.keyword.. 2015. 9. 23. 이전 1 2 3 다음 반응형
