본문 바로가기

전체 글

 (351)
서버와 웹단을 직접 구현하여 게시판 사이트 만들기 - (2) # 이전에 우리가 무엇을 했을까? # 이전에 서버단에서 응답을 해줄 server단을 구현했습니다. 이제는 데이터를 요청해줄 웹단을 구현해봅시다. # 저희가 만들려는 건 게시판 사이트입니다. #Express.js 를 사용하여 CRUD 요청하기 💫 --- #파일 구조 # 게시판 사이트답게 게시판 게시글 담아줄 html 페이지를 만들어봅시다. * index.html # 일단 코드를 쉽게 짜기 위해 헤드 부분에 부트스트랩, 제이쿼리, 개인적으로 적용할 css 등을 import 합니다. # ~ 컬렉션 # ~ 스키마 # 부분에 데이터를 넣으겁니다. # 그럼 js를 이용해서 tbody의 태그를 찾고 # ajax를 이용해서 get요청을 해서 데이터를 가져온 후 넣는 작업을 하겠습니다. # 그걸 하기 위해 관련 js파일..
서버와 웹단을 직접 구현하여 게시판 사이트 만들기 - (1) 들어가기에 앞서... 이글은 내가 직접 서버단을 구현해보고, 만든 서버단을 기반으로 프론앤드 단을 직접 구현해서 만든 게시판 사이트 코드를 다시 복습하기 위한 용도의 글입니다. 때문에 중간에 중간에 코드가 미리 만들어진 부분이 있을 수 있습니다. 또한 복습용도라서 설명이 빈약하다는 느낌을 받을 수 있습니다. 이해가 안가는 부분 댓글로 적어주시면 아는한에서 친절하게 설명하겠습니다. 0. 백앤드 서버는 express.js를 이용해서 구현할 것이며 서버는 json형태의 데이터만 프론트단에서 보내주시는 식으로 구현할 것 입니다. 1. exprss.js를 이용하여 서버를 구현하고, mongoDB를 이용해서 데이터를 저장할 것입니다. 1 - 1. 익스프레스를 사용하기위해 require, 몽고디비를 쓰기위해 requ..
express.js 와 ajax를 이용한 라우팅과 비동기 통신 구현(2) ajax를 이용해서 서버단과 유저단의 의사소통 하는 과정을 그림으로 간략하게 설명하고 구현으로 넘어갑니다. 그림처럼 signUp.html에서 input으로 데이터를 바당서 ajax통해 전달합시다. 1. 버튼이 클릭되면 함수가 실행되서 ajax를 이용해 전송되게 만들 것. 2. 함수 선언 전에 각 input값을 찾는다. const id = document.getElementById("id"); const pwd = document.getElementById("pwd"); const rePwd = document.getElementById("rePwd"); const name = document.getElementById("name"); 3. 각각 가져온 데이터에 빈값이 있는지 체크 function send..
express.js 와 ajax를 이용한 라우팅과 비동기 통신 구현(1) 1. 우선 express.js를 이용하여 간단하게 백앤드 서버를 구현해보자! express를 가져오고 가져온 express함수를 app엠 담고, 포트번호는 7777로 설정. // express libaray fetch const express = require("express"); // 함수 담기 const app = express(); const PORT = 7777; 2. listen을 사용해서 해당 포트 번호로 서버를 엽니다. 그리고 get을 이용해서 '/' 위치의 index.html을 서버에서 가져오는 코드를 작성합니다. // __dirname 현재 경로를 의미한다. app.get('/', (req, res) => { res.render("index.html"); }) app.listen(PORT..
프로그래머스 - 연습 문제 - 가장 긴 팬린드롬 가장 긴 팰린드롬 https://school.programmers.co.kr/learn/courses/30/lessons/12904 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 앞뒤를 뒤집어도 똑같은 문자열을 팰린드롬(palindrome)이라고 합니다. 문자열 s가 주어질 때, s의 부분문자열(Substring)중 가장 긴 팰린드롬의 길이를 return 하는 solution 함수를 완성해 주세요. 예를들면, 문자열 s가 "abcdcba"이면 7을 return하고 "abacde"이면 3을 return합니다. 제한사항 문자열 s의 길이 : 2,5..
자바스크립트 - 정규표현식 정리 언젠가 꼭 정리해야 겠다 생각했던.. 정규표현식을 정리할려고 한다.. 딱대라 정규야.. 정규표현식이란? 문자열 패턴을 표현하기 위한 도구입니다. 근데 누누히 말하지만 정규표현식은 해독하기가 어려움.. 또 여러 구글링을 통해 내용을 찾아봐도 당채 이해가 안가는게 문제임. 해서 나는 쉽게 이해되는 원리? 규칙을 소개하고자한다. 정규표현식의 문법이나 활용 또는 공식은 간단하게 복붙에서 붙이겠다. 내용은 아래와 같다. 정규 표현식의 용어들정규 표현식에서 사용되는 기호를 Meta문자라고 표현한다. 표현식에서 내부적으로 특정 의미를 가지는 문자를 말하며 간단하게 정리하면 아래의 표와 같다. 표현식 의미 ^x 문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다. x$ 문자열의 종료를 표현하며 x 문자로 종료됨을 의..
자바스크립트 - 제네레이터 제너레이터 ECMAScript 6부터 추가된 개념. 일반 함수는 하나의 값(혹은 0개의 값)만을 반환합니다. 하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있습니다. 제너레이터와 이터러블 객체를 함께 사용하면 손쉽게 데이터 스트림을 만들 수 있습니다. 제너레이터 함수 제너레이터를 만들려면 '제너레이터 함수’라 불리는 특별한 문법 구조, function*이 필요합니다. 예시: function* generateSequence() { yield 1; yield 2; return 3; } 제너레이터 함수는 일반 함수와 동작 방식이 다릅니다. 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체, '제너레이터 객체’가 반환됩..
경로 관련 문제가 나올 때: Error: Cannot find module 'wish' 아니 분명 wish을 전역적으로 설치 했고, package-json을 보면 제대로 추가 된거 같고? 하는데 왜 못찾는거야!! 해당 test js 파일 var wish = require('wish'); function checkHand(hand) { if(hand[0]==='2-H' && hand[1]==='3-C' && hand[2]==='4-D' && hand[3]==='5-H' && hand[4]==='2-C'){ return 'pair'; }else{ return 'three of a kind'; } }; describe('checkHand()', function() { it('handles pairs', function() { var result = checkHand(['2-H', '3-C', '..
728x90

티스토리툴바