React.js를 사용해서 낱말 맞추기 게임 만들기

서론 웹 페이지의 중요 키워드를 활용하여 페이지 내에 소규모 게임을 통합함으로써 사용자 참여를 크게 높일 수 있지 않을까? 바쁜 일정에서 잠시 벗어나 스트레스를 해소하고자 하는 직장인들이 이 게임을 통해 웹 서비스에 끌려올 수 있지 않을까? 이러한 생각에서 시작된 낱말 맞추기 게임을 간단하면서도 사용자의 머무름을 늘리는 효과적인 웹페이지 추가 요소로 개발해보자. 사전준비 낱말의 정의를 구하기 위해 Naver Search API(이하 NSA)를 react에서 바로 호출해도 무방하지만 CORS 이슈를 신경써야 하고, 매 번 API를 호출하기에는 하루에 정해진 호출량이 존재하기 때문에 나는 Naver Search API를 다루는 Server API를 간단하게 만들어서 사용했다. 어떠한 언어를 사용해도 무방하지..

• format_list_bulleted Library/React.js
• · 2023. 11. 28.
• textsms

Backend 개발자를 위한 React 기초 정리

서론 대부분의 백엔드 개발자들은 javascript와 jquery만을 사용해서 충분히 웹 사이트를 만들 수 있다. 때문에 시간이 생기면 새로운 infrastructure(인프라) 관련 cloud service를 비롯해 database의 효율적인 관리 및 서비스에 알맞은 database를 찾기 위한 RDBS, NoSQL 학습, 보안 기술이나 성능 최적화에 대한 학습을 진행한다. Backend 개발자가 Front를 개발할 때는 자주 사용하는 Framework(Spring에는 Thymeleaf, Laravel에는 Blade)에서 제공하는 View Template Engine들이 존재하기 때문에 사실상 FrontEnd에서 React가 무슨 이유로 각광받고 있는 건지 학습하려 하지 않는다. 할 이유도 없다고 생각..

• format_list_bulleted Library/React.js
• · 2023. 11. 20.
• textsms

[무작정 따라하는 Vue] 2. Vue.js 조건문 반복문

[무작정 따라하는 Vue] 2. Vue.js 조건문 반복문 Vue.js에서 조건문과 반복문을 어떻게 사용하는지 탐구해봅니다. 1. 조건문 엘리먼트에 조건문을 사용하여 enable 혹은 disable을 제어하는 것을 예제로 설명합니다. 이제 나를 볼 수 있어요 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 이제 나를 볼 수 있어요 이제, Javascript 콘솔에 app3.seen = fasle를 입력해 주면, 메시지가 사라지는 것을 볼 수 있습니다. app3.seen = false 이 예제를 통해 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 확인했습니다. 또한 Vue 엘리먼트가 Vue에 삽입/삭제/업데이트 될 때 자동으..

• format_list_bulleted Library/Vue.js
• · 2022. 3. 27.
• textsms

[무작정 따라하는 Vue] 1. Vue.js 시작하기

[무작정 따라하는 Vue] 1.Vue.js 시작하기 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크의 한 종류입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계가 되어있습니다. 핵심은 View(뷰)레이어만 초점을 맞췄기 때문에 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다는게 장점입니다. 또한 Vue는 상황에 맞게 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. vue 선언하여 사용해보기 Vue.js의 핵심은 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있는 시스템이 있다는 것입니다. {{ message }} 템플릿에서 선언한 id값을 new Vue 를 통해서 elem..

• format_list_bulleted Library/Vue.js
• · 2022. 3. 27.
• textsms

[JQuery] JQuery trigger사용하여 강제로 click event 발생시키기

스크립트를 짜다 보면 클릭이벤트를 강제로 지정해야 하는 순간이 온다. 예를들어 닫기버튼을 클릭하지 않았지만 특정 조건 달생 시 닫기버튼을 강제로 클릭하는 경우. 그럴 때 trigger를 사용한다. 개인정보동의 개인정보 약관 개인정보 이용 목적 : ~~~ 개인정보 수집 항목 : !!! 개인정보 보유 및 이용기간 : @@@ 동의하기

• format_list_bulleted Library/JQuery
• · 2020. 3. 17.
• textsms

[JQuery] CROS 오류, Jsonp로 해결하다

웹 개발을 진행하며 Ajax형식으로 비동기 데이터처리를 하다 보면 CORS(Cross Origin Resource Sharing) 오류를 많이 접하게 된다. 이런 오류가 나는 이유는 크게 2가지 이유가 있는데 1. 요청하는 서버가 HTTPS 프로토콜을 사용하는데 응답하는 서버가 HTTP 프로토콜을 사용 할 때 2. 2차도메인 등 다른 도메인에서 요청할 때 등 예시로 현재 블로그 도메인(min-nine.tistory.com) 에서 서버 url (api.min-mine.sistory.com) 로 ajax json 요청할 때 cross-origin read blocking (corb) blocked cross-origin response 이 발생한다. 이런 오류는 아래 Jsonp 방식의 요청을 통해 간단히 해..

• format_list_bulleted Library/JQuery
• · 2020. 3. 17.
• textsms