반응형 PROGRAM/Script Language26 [javascript] emoji 입력값 필터링 치환 삭제 정규식 regexp 모바일이 더 주류가 된 세상이다. 아니 이미 모바일이 주류가 된 지는 오래긴 하지,,, 점차적으로 사용자가 입력하는 값에 이모지 emoji 를 입력하는 경우가 왕왕 발생하고 있다. 상품명 등에 고객에게 어필하기 위한 문구를 만드는 과정에서 좀 더 돋보기게 하기 위해 사용할 수도 있다. 최근에 본 것 중에 가장 인상깊었던건 상품명에 쿨링감🧊 이라고 적어둔 업체가 있었는데 확실히 이모지가 있으면 색감도 있고 일반 글씨만 나열했을 때보다는 더 눈길이 가긴 한다. 하지만 제약이 필요한 경우도 있다. 외부와 인터페이스하는 값이나 이름, 이메일 주소 등에는 입력이 불가하도록 처리하는게 좋다. 물론 그런 값들에는 별도로 한글이나 영어만 입력가능하도록 하거나 입력값에 맞는 별도의 정규식을 적용하는 것이 가장 좋은 방법.. 2023. 8. 4. [Vue.js 시작하기] 3. Spring Boot 연계 기본 프로젝트 세팅 언어공부를 아무리 완벽하게 해도 실전에서 쓰는 것만큼의 빠른 체득이 없다. Vue.js를 이용해서 front-end를 구성하고 Back-end는 익숙한 Spring Framework를 이용해서 구성하는 형태의 프로젝트를 만들어보고자 한다. Spring Boot를 이용해서 빠르게 프로젝트 생성부터 진행해보자. start.spring.io/ 사이트에서 제공되는 형태와 동일하게 VS Code에서도 Spring initializr를 제공한다. Command Pallette (Ctrl + Shift + P) 에서 Spring 입력하면 Spring Initializr가 제공되는데 위 사이트와 동일한 형태인데 좀 더 간략화되어서 제공되는거다. 원하는 구성으로 만들면 되지만, 본인은 아래의 구성으로 만들었다. Proj.. 2021. 4. 13. [Vue.js 시작하기] 2. Vue.js 사용을 위한 기본 문법 1 Vue.js를 시작하기 위해 다양한 사이트를 서치해보니, 문법을 설명해주는 다양한 사이트가 있다. 물론 책을 사서 공부해도 좋겠지만, 가볍게 시작하는 마음으로 보기에 괜찮은 사이트들을 추천해주고 해당 사이트에서 제공하고 있는 기본 문법들에 대해 소개한다. ~ 출처 및 참고 사이트 ~ kr.vuejs.org/v2/guide/index.html www.vuemastery.com/courses/intro-to-vue-js/vue-instance Vue Instance 만들기 / 데이터 바인딩 (선언적 렌더링) 문법 공부를 위한 간단한 페이지 개발용이므로, script를 직접 추가하는 방식으로 시작하자. study.html 파일을 만들고, vue instance를 선언할 별도의 main.js 파일을 만들어서 i.. 2021. 3. 21. [Vue.js 시작하기] 1. 개발환경 세팅 개발자의 덕목은 끊임없는 공부와 영역 확장이라 (물론 나만의 생각이 아니라 전체적인 흐름이 그러하니 받아들여야지) 그 공부와 영역 확장이 나의 업무 안에서 그렇게 할 수 있다면 더 없이 좋은 직장이겠지만, 직장은 내 공부를 위한 곳은 아니고 내가 원하는 방향으로 확장되지 않을 수도 있으니 내가 배우고 싶고 시작하고 싶은건 이렇게 새로 시작해야 한다. 사실 React 배워보기 시리즈를 쓰면서 React로 만들어볼까 했는데, Vue.js로 눈을 돌려서 개발해보려고 한다. 물론 이거 하나 해두면 또 다른거 배우는건 금방이겠거니 하는 마음도 있고. 오늘의 목표는 Vue.js에 대해 알아보고, 이를 이용한 기본 개발환경을 세팅하고자 한다. Vue.js Javascript Framework 언어인 React, An.. 2021. 3. 21. [React 배워보기] 5. React의 State 개념 더 알아보기 / state의 특징과 활용 / stateful component와 stateless component 뒤늦은 React 배워보기 시리즈 옛날옛적에 배워놓고 필기는 잘하면서 복습을 2년 뒤에 하는 게으르면서도 부지런한 느낌의 블로그 포스팅 간단 예제 페이지를 만들고, Component에 데이터를 전달하는 props의 특징과 사용방법을 알아봤다면 이제 또 다른 데이터 형태인 state 개념을 더 자세히 알아보고 이를 이용한 추가 실습을 해보려고 한다. 이 개념을 제대로 알아두면 페이지의 데이터를 변경할 수 있으므로 데이터 통신이 가능한, 그러니까 우리가 원하는 웹사이트 구현에 좀 더 가까워질 수 있다. 이전 포스팅을 안보셨다면 짠 ojava.tistory.com/182 [React 배워보기] 4. React를 이용한 간단 예제 페이지 만들기 / Component에 값 전달하기 / props 특징 및 뒤늦은 .. 2021. 2. 16. [React 배워보기] 4. React를 이용한 간단 예제 페이지 만들기 / Component에 값 전달하기 / props 특징 및 사용방법 뒤늦은 React 배워보기 시리즈 사실은 내가 배워놓고 복습하는 블로그 포스팅 React 개발을 위한 기초적인 개념 작성 이후, 간단 예제 페이지 만드는 과정을 공개한다. 아주 대환장 파티이므로 의식의 흐름 잘 따라오시길 참고로 지난번에 올렸던 글 첨부 ojava.tistory.com/181 [React 배워보기] 3. React 개발을 위한 기초 개념 블로그에 정리하겠다고 시리즈로 호기롭게 시작했다가 끝 맺지도 못한 글이 많은데, 그 중 하나인 React 배워보기 시리즈에 대해서 마저 정리해보려고 한다. 2019년에 배운 걸 2021년에 쓰니 케케묵 ojava.tistory.com [React 배워보기] 4. React를 이용한 간단 예제 페이지 만들기 Component에 값 전달하기 / props 특.. 2021. 2. 15. [React 배워보기] 3. React 개발을 위한 기초 개념 블로그에 정리하겠다고 시리즈로 호기롭게 시작했다가 끝 맺지도 못한 글이 많은데, 그 중 하나인 React 배워보기 시리즈에 대해서 마저 정리해보려고 한다. 2019년에 배운 걸 2021년에 쓰니 케케묵어서 먼지 털다보면 볼 내용이 없을 수도 있다. 이미 정리된 글이 있어서 정제해서 옮겨 담기만 하면 되는데 안하고 있다가 지금 굳이 하는 이유는 (귀찮아서 안했겠지만) SPA Framework 관련해서 프로젝트를 하게 될 거 같은데, 그 전에 이전에 배워뒀던거 복습하는 차원에서 다시 보면 도움되지 않을까 싶어 정리한다. 지난 번에 React 관련 기본 설정과 빌드 환경까지 세팅했고, 이어서 react를 이용한 간단한 웹 페이지를 만드는 예시를 만들기 위한 기초적인 개념에 대해 먼저 작성하고 이어서 간단한 예.. 2021. 2. 14. [React 배워보기] 2. React 개발을 위한 기본 설정 React가 등장하게 된 개발환경의 변화와 React에 적용된 ECMA 2015에 대해서도 간략하게 알아보았으니, 이제 뭐라도 시작해보자. 개발툴을 설치하고 코딩한 내용을 브라우저에서 구동시킬 수 있도록 서버도 설치해보자. [React 배워보기] 2. React 개발을 위한 기본 설정 자, 첫번째로는 웹 어플리케이션을 만들기 위한 개발툴이다. 1. vs code https://code.visualstudio.com/ - 이름을 보면 알겠지만, visualstudio를 제공하는 Microsoft에서 제공한 툴이다. - 속도가 빠르고 Extension을 통해 기능 확장이 가능함 (Plug-in이 활발하게 추가되는 중) - Source Viewer로서 매우 편리함 2. Webstorm https://www.j.. 2019. 6. 24. [React 배워보기] 1. SPA Framework와 ECMA 2015 간만에 교육받으러 다녀와서 신났던 나의 마음을 가다듬고 교육 내용을 복습하고 정리하고자 포스팅을 작성하게 되었다. SPA 프레임워크와 React 사용기에 대해 적어보고자 한다. (글쓰기 시작한 날과 수정해서 완료한 날까지 한달이 걸렸다는게 너무 놀랍다.. ^_ㅜ) [React 배워보기] 1. SPA Framework와 ECMA 2015 React를 알아보기에 앞서 해당 기술이 나오게 된 배경과 SPA Framework의 구성과 특징을 살펴보자. 먼저 이러한 기술이 나오게 된 배경을 알아보기 위해 기존의 개발방식에 대해 생각해야 할 필요가 있다. 일반적으로 알고있는 개발방식은 전체적인 개발 구성을 하나로 합쳐서 배포하는 방식인 '모놀리스' 또는 '모놀리식 애플리케이션 (monolithic applicati.. 2019. 6. 23. [javascript] 함수 선언식, 함수 표현식 갑자기 열정 넘쳐서 미뤄왔던 javascript 관련 포스팅 목록을 작성하고 있다. 시간이 있을 때 작성해놔야한다는 것은 만고불변의 진리다. 오늘 작성하고자 하는 내용은 javascript에서 함수를 작성하는 방식에 관한 내용으로 기존의 방식으로 function을 선언하는 함수 선언식과 변수처럼 함수 내용을 써내려가는 함수 표현식 두 가지에 대해 알아보도록 하자. [javascript] 함수 선언식, 함수 표현식 함수를 정의하는 방식과 각 방식별 간단한 사례를 살펴보자. 1) 함수 선언식 일반적으로 다들 많이 쓰는 함수 정의 방식이다. doSomething(); // 함수 선언식 방식 function doSomething() { alert("test function!"); console.log("blah.. 2019. 5. 21. 이전 1 2 3 다음 반응형
