Client Language31

• 

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

• 

  서버 사이드 렌더링(SSR) 이해하기 서론 웹 개발 분야에서 서버 사이드 렌더링(SSR)은 요즘 화두가 되고 있는 중요한 주제다. 흔히들 SSR은 웹 페이지의 초기 로딩 성능을 개선하고, 검색 엔진 최적화(SEO)를 향상하는 데에 큰 도움을 준다고만 알고 있지만 세세히 알아보지 않는다. 때문에 본 포스팅에서는 SSR이 무엇인지, 어떻게 작동하는지, 그리고 어떤 장점이 있는지 알아보자. SSR의 기본 개념 SSR(서버 사이드 렌더링, 이하 SSR)은 서버에서 웹 페이지의 전체 HTML을 생성하여 브라우저로 보내는 방식이다. 이 과정에서 서버는 데이터를 가져오고, HTML을 완성하며, 필요한 모든 자바스크립트와 CSS를 포함한 완전한 페이지를 클라이언트에게 전달한다. 더 간략하게 말하면, SSR은 클라이언트(브라우저)에 전달되기 전에 서버에서 .. Client Language/JavaScript 2023. 11. 23.

• 

  웹 애플리케이션의 꽃 - 비동기(asynchronous) 쉽게 이해하기 서론 여태껏 당연하게 사용해 왔던 '비동기' 혹은 '비동기 통신'. 문득 스스로 '비동기가 뭐야?'라고 질문했다. 명쾌히 대답이 나오지 않았다. 부끄러움은 뒤로 한 채, 그 의미를 다시 한번 알아보고 여태껏 사용해 왔던 비동기 방식에 대해 학습해 보기로 한다. 비동기(Asynchronous) vs 동기(Synchronous) 비동기(asynchronous)는 컴퓨터 프로그래밍에서 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다. 즉, 작업의 완료와 상관없이 프로그램의 흐름이 계속 진행되는 것을 뜻한다. 이는 동기(synchronous) 방식과 대비되는 개념이다. 동기(Synchronous) : 동기 방식에서는 한 작업이 완료될 때까지 기다렸다가 그 다음 작업을 실행한다. 즉.. Client Language/JavaScript 2023. 11. 20.

• 

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

• 

  [JavaScript] Form태그 하위 Input을 Post전송하는 JsFormController 만들어보기 최근 진행한 프로젝트에서 Javascript로 Form태그 하위의 Input 요소들이 유동적으로 추가 및 삭제되는 기획이 많아서, Javascript로 어떻게 하면 유동적으로 첨삭되는 Input태그들과 Form을 손쉽게 POST 전송하여 데이터를 첨삭할 수 있을까 고민하다 JsFormController라는 Class를 만들어보며 나름 뜻깊었고, 본인과 같은 고민을 하시는 분들께 약소하게나마 도움이 되고자 포스팅합니다. javascript를 사용하여 form 태그 하위 요소들을 핸들링하여 fetch 함수로 비동기 post 전송을 실행해보자. 본 예제는 Insert 부분까지만 다루며 update, destory 등은 스스로 해보면서 학습하길 권장합니다. 1. JsFormController.js 이름의 Cla.. Client Language/JavaScript 2022. 10. 6.

• 

  [프로그래머스 코딩테스트] Summer/Winter Coding(~2018) - 소수 만들기 Java Script [프로그래머스 코딩테스트] Summer/Winter Coding(~2018) - 소수 만들기 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > Summer/Winter Coding(~2018) > 소수 만들기 문제 설명 및 제한사항 👉 문제 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요.제한사항 👉 제한사항 nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다. nums의 각 원소는 1 이상 .. Client Language/JavaScript 2022. 4. 7.

• 

  [프로그래머스 코딩테스트] 완전탐색 - 모의고사 Java Script [프로그래머스 코딩테스트] 완전탐색 - 모의고사 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 완전탐색 > 모의고사 문제 설명 및 제한사항 👉 문제 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4,.. Client Language/JavaScript 2022. 3. 31.

• 

  [프로그래머스 코딩테스트] 찾아라 프로그래밍 마에스터 - 폰켓몬 [프로그래머스 코딩테스트] 찾아라 프로그래밍 마에스터 - 폰켓몬 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 찾아라 프로그래밍 마에스터 > 폰켓몬 문제 설명 및 제한사항 👉 문제 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리,.. Client Language/JavaScript 2022. 3. 28.

• 

  [무작정 따라하는 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에 삽입/삭제/업데이트 될 때 자동으.. Client Language/Vue.js 2022. 3. 27.

• 

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

• 

  [프로그래머스 코딩테스트] 월간 코드 챌린지 시즌1 - 내적 Java Script [프로그래머스 코딩테스트] 월간 코드 챌린지 시즌1 - 내적 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 월간 코드 챌린지 시즌1 > 내적 문제 설명 및 제한사항 👉 문제 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 👉 제한사항 a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 정답 및 풀이 👉 정답 function solution(a,.. Client Language/JavaScript 2022. 3. 27.

• 

  [프로그래머스 코딩테스트] 월간 코드 챌린지 시즌2 - 음양 더하기 Java Script [프로그래머스 코딩테스트] 월간 코드 챌린지 시즌2 - 음양 더하기 👉 하루에 한번씩 코딩 실력을 기르기 위해 시작하는 프로그래머스 코딩테스트 👉 코딩테스트 연습 > 월간 코드 챌린지 시즌2 > 음양 더하기 문제 설명 및 제한사항 👉 문제 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 👉 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다.. Client Language/JavaScript 2022. 3. 22.