YG - 96년생 , 강아지 있음, 개발자 희망

WSL UBUNTU 다이렉트 폴더 윈도우에서 열기 https://coding-groot.tistory.com/101 [WSL1/WSL2] 홈 디렉터리 위치 :: WSL 홈으로 Windows 파일 옮기기 WSL1에서 C드라이브에 접근해보자 Windows의 드라이브들은 /mnt 디렉터리에 마운트되어 있다. C드라이브에 접근해보자. cd /mnt/c OS Error 13은 파일 시스템의 권한 문제가 생겼을 때 발생합니다. 보시다 coding-groot.tistory.com WSL2 윈도우 환경 하위 리눅스 몽고디비 설치법 https://zereight.tistory.com/368 WSL 윈도우 리눅스 하위시스템에서 MongoDB사용하기 100% 성공 WSL에서 mongodb를 설치해서 사용하려하다보면 mong..

데이터를 back end 로 보내는 방법 form 안에 input을 넣고 method를 post로 바꾸었다. get과 post를 따로 쓰는 대신에 하나의 경로만 필요로 하는 route를 사용하였고 get requests, post requests 를 처리해주었다. req.params로 부터 id를 받는다 매개변수 = params // :id req.body 는 value 의 javascript representation (javascript식으로 표현한 것) 그러나 express가 req.body를 이해하려면 app.use(express.urlencored({ extended : true }) ; 의 미들웨어를 사용해야하고 미들웨어는 form을 우리가 사용할 수 있는 javascript object 형식..

variable (변수) 사용법 일반적인 text 로 같이 사용하는 경우는 변수는 : #{ 변수이름 } h1=변수이름 으로 같이 사용이 가능한데 attribute에는 사용이 불가능하다 a(href="/videos/" + video.id) 혹은 a(href=`/videos/${video.id}`) 로 사용 가능하다 ternary operator h3 #{ 변수이름 } #{ 변수이름 === 조건 ? (같다면) "같다" :(같지 않다면) "아니다" 로 사용 가능합니다 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 삼항 조건 연산자 - JavaScript | MDN 조건부 삼항 연산자는 Ja..

iteration 사용 빈도수 : 자주 사용 Iteration은 array의 모든 element에 대해 특정 행동을 취할 때 사용한다 each X in Y 인데 Y의 변수는 꼭 존재해야 한다 Y는 array의 형태이여야 하고 array 안에 아무것도 없을 때를 대비하여 else를 사용가능하다 리스트의 각 아이템을 보여줌 또한 Y의 어레이를 오브젝트 형태로 사용할 때가 있는데 자바스크립트는 이해를 못하니 더 자세하게 적어주면 된다 Iteration의 문서 https://pugjs.org/language/iteration.html Iteration – Pug Iteration Pug supports two primary methods of iteration: each and while. each Pug’s ..

PUG 변수 사용법 오직 하나의 값만 가질 때는 h1=pageTitle 처럼 변수를 직접 =을 사용하여 이용가능하다 변수와 다른 텍스트를 이용할때는 What is Page Title : #{pageTitle} 처럼 #{ 변수이름 } 을 사용하여야 한다 Conditionals if , else if 를 사용한다면 예를들어 사용자가 로그인 상태인지 로그아웃 상태인지 알 수 있다. 사용자의 로그인 상태를 if 문을 활용하여 물어서 true이면 로그아웃이 화면에 나타나도록 하였고 , 사용자의 이름이 상단에 나오게 하였다 그리고 로그아웃 상태이면 로그인만 보이게 하였다 Conditinals 를 활용하는 여러방법들 https://pugjs.org/language/conditionals.html Conditional..

https://pugjs.org/api/getting-started.html Getting Started – Pug Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an pugjs.org pug 는 지저분한 HTML 을 쓰지 않고 깔끔하게 사용 가능하며 pug 는 모두 탭과 띄어쓰기로 이용합니다 npm i pug..

검색창에 이모티콘 넣는 법 이모티콘과 input 기능이 함께 나오는데 검색창 안으로 넣고 싶을 때는 .search-bar { width: 220px; height: 27px; border-radius: 5px; border: solid 1px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; z-index: 1; opacity: 1; } 먼저 search-bar 의 너비 , 높이 그리고 flex 를 사용하고 center를 사용합니다 그 이후 .search-bar__input { width: 50px; } width 값을 주어서 search-bar 보다 작게 하여 center에 위치하게 하며 /* .search-..

페이지에 들어갔을 때 공지사항을 띄우는 역할을 하는 모달을 연습했습니다. 1. html 내용 만들기 2.css로 내용 정리하기 3.자바스크립트로 모달창 없애는 방법 먼저 html 에 버튼에 onclick 을 적용 시켜주었다. onclick 이란 사용자가 요소를 클릭할 때 이벤트를 발생시킵니다. 혹은 주어진 요소의 click 이벤트를 처리하기 위한 EventHandeler 입니다 그렇다면 EventHandler는 무엇인가요? 이벤트 핸들러 코드를 생성하여 웹 페이지가 변경에 적절하게 대응할 수 있도록 할 수 있다. 버튼에 onclick="closeModal();" 이라는 함수값을 넣어줍니다 (함수 이름은 달라도 상관 없습니다) 자바스크립트에 closeModal이라는 함수를 만들어줍니다 closeModal(..