Enjoy Programming

아 어려웠다 웹팩 설치.. 프로그래밍을 배우며 항상 어렵게 느껴지는게 바로 설정이다... 무언가 새로운 툴을 설치하고 설정하고 하는게 참 어렵다... ㅋㅋ 자 장장 두시간에 걸쳐 설정한 webpack을 알아보자 유튜브 클론코딩을 하던 중 서버쪽은 어느정도 진행이 되었는데 이제 클라이언트 쪽의 css나 javascript를 아직 하나도 안했다. 자 그럼 웹팩이란 무엇인가. 개발을 하다보면 자바스크립트 코드가 많아지고 여러개의 자바스크립트 파일을 만들게 된다. 이 파일들이 많아 질 수록 브라우저에서 로딩하는 것이 많이지기에 브라우저가 느려질 수 있고 또한 그만큼 네트워크 비용을 치뤄야 하는 단점이 있다. 그리고 파일들 간에 작성이 잘못된 경우 충돌의 위험성도 있다. 이러한 단점을 보완한 하나의 파일로 bun..

이제 정식적으로 검색으로 비디오를 찾도록 해보자 지금 작성해놓은 search는 검색이 되지 않는다. 정규표현식을 사용해서 검색기능을 구현해보자 먼저 검색이 될 videos를 수정가능한 배열로 선언 해주고 Video 모델에서 찾아서 videos에 담아준다. title을 기준으로 찾고 조건은 쿼리스트링 값 serchingBy를 대조해서 검색한다 이때 options을 주는데 i로 플래그를 설정한다. i는 대소문자에 관계없이 매칭해주는 것이다. 바로 앞선 포스팅에서 정규표현식을 다루었다. developer-lte.tistory.com/entry/Regular-Expression-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D Regular Expression - 정규표현식 정규..

정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)이다. 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행할 수 있다. 단 정규식 패턴이 수행 내용과 매치가 잘 안되어 가독성이 많이 떨어지기에 공부하는데 어렵다. 기초 개념을 잘 다져보자. 정규표현식은 크게 세가지 역할을 수행한다 문자 검색, 문자 대체, 문자 추출 자바스크립트 정규식 생성 정규표현식은 객체로 취급되기 때문에 생성자 함수 또는 리터럴로 정의한다. 1.생성자 함수 방식 RegExp - 생성자 함수를 호출하여 사용할 수 있다. const reg = new RegExp("^abc", "gi"); new RegExp(표현식, 플래그) 2.리터럴 방식 " / "..

자바스크립트, JSX의 정적 분석 도구로 오픈소스 프로젝트인 ESlint를 설치해보자 먼저 ESlint는 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 해준다. JSlint, JSHint같이 다른 자바스크립트 정적 분석 도구도 있지만 , ESlint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰는 추세이다. ESLint는 스타일 가이드를 좀더 편리하게 적용하기 위해 사용한다. 이제 설치 과정을 쓸텐데 음.. 설치과정을 잘 정리해서 공유해주신 것으로 대체하겠다. 1. 아래 순서대로 eslint와 prettier플러그인 및 설정, prettier를 설치해주세요. npm install eslint -D npm install eslint-plugin-prettier -D n..

이번엔 비디오 삭제를 기능을 구현해보자. 역시 라우트에서 라우트를 id인자를 받는 함수로 바꿔준다. 그리고 id를 받으면 delete로 넘어가도록 라우트 설정을 해줌 그리고 컨트롤러 수정도 해주자 파라미터로 id를 받아준다. async await으로 역시 waiting을 해주고 mongoose methoddls findOneAndDelete로 해당 비디오를 삭제해주자 그리고 결과가 어떻든 홈페이지로 다시 redirect를 해주기 때문에 해당 코드는 try catch 스코프 바깥에 작성했다 그리고 edit.pug에서 delete링크에 라우트설정을 함수로 바꾸고 video.id 매개변수를 넣어주자. 마지막으로 비디오 라우터도 수정~ 이제 삭제가 된다. but@!!! 파일 uploads/videos 에는 업로..

공부하던중 오늘이 토요일이라 로또 사러가야지 ~~ 하는 순간 로또번호 생성기가 만들고 싶어졌다. 자 그냥 시작해보자 우선 html이 js파일 하나 만들어주고 button클릭하면 로또번호 만들어지도록~!~!~! 자 만들어보자 일단~~ 바디랑 인풋을 가져오고 번호가 찍힐 h3태그를 생성후 바디에 종속시켰다. 그리고 이벤트 리스너 하나 만들고 함수명 아무거나 하나 지었다. 이제 로또넘버만들기 함수를 만들어보자 뭔가 조잡하다.. ㅎㅎ 근데 처음 만들어보는 자바스크립트 로또번호 생성기이다.. 코드 리뷰를 해보자면 먼저 함수안에 로또 배열을 생성하고 임의의 i를 만들어줬다. 그리고 메인 포문으로 Math.floor와 Math.random()함수를 이용해 숫자를 생성하고 배열에 넣어줬다. 근데 발생한 문제가 중복값이..