본문 바로가기

[개발] Practice152

[Node.js / MongoDB] MongoDB 셋팅하기 💡 실습 포인트! 💜 MongoDB Atlas 가입/초기 셋팅하기 하나하나 설명하기에는 다소 내용이 길어질 것 같아 요약하여 정리했다. 1. 구글에 Mongodb atlas 라고 검색해서 홈페이지 접속 2. 가입 진행 (이메일 인증 필요!) 3. 계정 설정하기 (빈칸 채우라고 하면 채워주기!) 4. 무료 티어 선택 5. 서버 위치 선택 (한국과 물리적으로 가까운 곳 선택) -> 계속 진행하면 Cluster 생성 6. Database Access 메뉴에서 DB 접속용 아이디/비밀번호 생성 7. Network Access 메뉴에서 IP 추가 (일종의 보안장치) 8. Database / collection 만들기 진행 💜 DB 접속 URL 찾아오기 1. 메인화면 셋팅 끝나면 CONNECT 라는 버튼 클릭 2... 2022. 3. 11.
[Node.js / MongoDB] POST 요청해보기 💡 실습 포인트! 이번에는 글쓰기 페이지에서 폼 내용을 작성한 후, POST 요청을 해보았다. POST 요청을 했을 때, 내가 작성한 내용들이 제대로 전송이 되는 것이 목표! 💜 form 태그 셋팅하기 오늘의 할일 날짜 Submit form 태그에 action 과 method 속성을 넣어, Submit 버튼을 누를 때 /add 라는 경로에 POST 요청을 하도록 설정해주었다. action 은 어떤 경로로 요청을 할 것인지, method 는 어떤 요청을 할 것인지를 정해주는 부분에 해당한다. 또한, input 이 여러 개이므로 name 이라는 속성을 넣어, 서버가 어느 input 의 데이터인지 구별을 할 수 있게끔 해주었다. 💜 body-parser 설치하기 2021년 이전에 설치한 프로젝트들은 body-.. 2022. 3. 11.
[Node.js / MongoDB] Bootstrap 을 이용해 빠르게 UI 개발해보기 💡 실습 포인트! Node.js / MongoDB 강의가 HTML / CSS 를 중점적으로 다루는 수업이 아니므로, Bootstrap 을 이용하여 기본적인 구조를 다듬는 것만 빠르게 진행했다. 💜 Bootstrap 으로 글쓰기 페이지(write.html) 만들기 우선, 본격적으로 레이아웃을 만들기 전에 Bootstrap 에서 starter template 을 먼저 복사해와서 html 파일에 붙여넣어주었다. 이후, Bootstrap 의 Navbar 양식과 form 양식을 이용하여 간단한 레이아웃을 만들었다. 🤍 Navbar 만들기 Todo App Home Write 임시 🤍 글쓰기 form 만들기 글쓰기 오늘의 할일 날짜 Submit 💜 JavaScript 작성하기 app.get('/write', func.. 2022. 3. 11.
[Node.js / MongoDB] 서버에서 HTML 파일전송해보기 💡 실습 포인트! GET 요청 시 HTML 파일을 보내주어 브라우저에 해당 HTML 파일의 내용이 뜰 수 있게 했다. 💜 HTML 파일 만들기 우선 적당한 HTML 파일을 하나 만들어준다. 나는 index.html 라는 파일명으로 HTML 파일을 생성한 후 아래와 같이 내용을 간단히 작성해주었다. 홈페이지입니다. 💜 JavaScript 작성하기 // 누군가가 / 경로에 접속하면 app.get('/', function(req, res){ // index.html 이라는 파일을 보낸다. res.sendFile(__dirname + '/index.html'); }) sendFile() 함수를 사용하면 파일을 보낼 수 있다. __dirname 은 현재 파일의 경로를 의미한다. 💜 브라우저에서 확인하기 HTML .. 2022. 3. 11.
[Node.js / MongoDB] GET 요청 처리해보기 💡 실습 포인트! express 라이브러리를 설치하고 사용하는 방법을 간단하게 알아보았다. node.js 를 미리 설치해주고, 터미널에서 node 라는 명령어를 사용해서 서버를 띄워보았다. ( + nodemon) 특정한 경로로 GET 요청하는 방법을 공부했다. 💜 express 라이브러리 사용법 터미널에서 npm install express 로 express 라이브러리를 설치한 후, express 를 사용할 JavaScript 파일에 아래와 같이 작성하면 서버를 띄울 수 있다. 첫 두 줄은 express 라이브러리를 첨부하고 사용하는 문법이고, app.listen() 은 원하는 포트에 서버를 열어주는 문법이다. listen() 함수는 파라미터로 서버를 오픈할 포트번호와 함수를 필요로 한다. 나의 경우 J.. 2022. 3. 11.
[JavaScript / jQuery] 한 글자씩 출현하는 Typewriting 애니메이션 만들기 💡 실습 포인트! 오늘은 한 글자씩 보여주는 Typewriting 애니메이션을 만들어보았다. Click Me! 버튼을 클릭하면 "Hi! I'm Seoyun. Good to see U." 문구가 한 글자씩 나온다. 이번 기능은 setTimeout 함수를 이용해서 만들 수 있었다. 💜 HTML Click Me! Hi! I'm Seoyun. Good to see U. 먼저 HTML 파일에 버튼과 나와야하는 문구의 내용을 작성해준다. 💜 CSS .container { width: 100%; margin: 50px; } h1 { width: 100%; text-align: center; display: none; } button { display: block; margin: 30px auto; width: 130.. 2022. 3. 9.
[JavaScript / jQuery] 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기 💡 실습 포인트! 애니메이션 효과를 보여주기 위해 천천히 스크롤하면서 GIF 캡처를 해보았다. 개인적으로 아래에 위치하던 다음 사진이 올라오면서 기존의 사진이 흐려지면서 작아지다 다음 사진에 가려지는데, 이 효과가 너무 예쁜데 만드는데 꽤나 힘들었던 거 같다. 💜 HTML 일단 카드이미지를 3개 준비해서, card-box 클래스에 각각 담아준다. 💜 CSS .card-background { height: 3000px; margin-top: 370px; } .card-box img { display: block; margin: auto; max-width: 80%; } .card-box { position: sticky; top: 370px; margin-top: 370px; transition: all .. 2022. 3. 9.
[JavaScript / jQuery] position : sticky 활용하기 💡 실습 포인트! position : sticky 를 이용해서 화면의 좌측에 위치한 텍스트는 스크롤을 내리면 움직이고, 우측의 이미지는 고정되어있는 독특한 구조의 레이아웃을 만들어보았다. 💜 HTML Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita obcaecati ducimus, at quia nam deserunt ad atque ex cupiditate illo itaque laboriosam molestiae dignissimos molestias minima vitae, doloremque non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapien.. 2022. 3. 9.
[JavaScript / jQuery] 쇼핑몰 상품 진열 및 상품 정렬 기능 만들기 💡 실습 포인트! 오늘은 상품 진열 및 상품 정렬 기능을 만들어 보았다. 원래 강의에서 강사님이 진행한 방식대로도 해본 후, "이런 방식으로 하면 코드를 좀 더 줄일 수 있을까" 라는 생각으로 새로운 방식으로 진행해보았다. (아직 배우는 과정이라.. 뭐가 더 나은 방식인지는 모르겠고 고민해봤다는 데에 의의를 둔다 ㅎㅎ) 우선 상품 진열의 경우, html 파일에 레이아웃을 하드코딩을 해놓고 forEach 함수를 사용하여 데이터바인딩 후, 진열 기능을 만들어나가면서 하드코딩한 부분을 지워나갔다. 그 다음 자주 사용되는 JavaScript 문법인 sort, filter 를 사용하여 가나다순 정렬, 가격순 정렬, 6만원 이하 보기(필터) 기능을 넣어보았다. 마지막으로 첫화면으로 되돌리는 원래대로 기능을 추가했다.. 2022. 3. 9.
[JavaScript / jQuery] 인터렉티브 form 만들기 💡 실습 포인트! 이번에는 상품선택 폼을 만들어보았다. 상품 리스트로는 셔츠와 바지가 있고, 각각 클릭하면 사이즈 선택창에 해당하는 사이즈들의 리스트가 나와야한다. 💜 HTML 상품 선택 셔츠 바지 사이즈 선택 JavaScript 코드를 짜는 게 목적이므로 디자인은 간단하게 Bootstrap 에서 복사-붙여넣기했다. 기본적으로 하드코딩을 해서 html 파일에 넣었었지만, 추후 JavaScript 로 코드를 짜면서 사이즈 선택 부분은 수정해보았다. 💜 JavaScript // * input 이벤트 // 값을 수정할 때마다 이벤트 발생 // * change 이벤트 // 요소 변경이 끝나면 이벤트 발생 // 텍스트 입력 요소의 경우 focus 를 잃으면 이벤트 발생 // select, input type=ch.. 2022. 3. 7.
[JavaScript / jQuery] 이벤트 버블링 응용과 dataset 활용하기 💡 실습 포인트! 오늘은 이전에 만들었던 탭 기능 부분의 코드를 조금 개선해보았다. 💜 JavaScript : 기존 for (let i = 0; i < $('.tab-button').length; i++){ $('.tab-button').eq(i).on('click', function(){ $('.tab-button').removeClass('active'); $('.tab-content').removeClass('show'); $('.tab-button').eq(idx).addClass('active'); $('.tab-content').eq(idx).addClass('show'); }) } 기존의 JavaScript 코드는 for 문 안에 넣을 기능들을 단순히 나열한 것이었다. 💜 JavaScript.. 2022. 3. 7.
[JavaScript / jQuery] 탭 기능 만들기 💡 실습 포인트! 탭 만드는 부분은 강의에서 기본 HTML, CSS 를 제공해주어서 기능만 만들면 되었기에 크게 어렵지는 않았다. 다만 Dark Mode 를 제대로 적용하고 싶었는데 border-bottom 부분이 원하는 대로 나오지 않아 일단 보류해두었다. 💜 HTML Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 💜 CSS ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ""; display: block; clear: both; } .tab-button.. 2022. 3. 6.

티스토리툴바