본문 바로가기

HMWK122

[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] 이벤트 버블링 응용과 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.
[JavaScript / jQuery] Scroll 이벤트로 재미있는 기능 만들기 💡 실습 포인트! 오늘은 스크롤 기능을 어떤 식으로 활용하는지에 대해 공부했다. 확실히 그냥 문법만 배우는 것보다 직접 구글링하며 이것저것 기능을 넣어 페이지를 만드는 게 도움이 되는 것 같다. 수업에서는 간단히 "이런 것도 해보세요~" 라며 숙제를 내주시지만.. 나란 사람은 또 디테일에 집착했다. 예를 들면, 메인 화면이 아래쪽으로 어느정도 스크롤되면 로고가 커지고, 다시 스크롤을 올리면 로고가 원래대로 돌아오는 기능을 만들었다. 근데 그렇게 되면 기존의 css 중 서브메뉴리스트, 이벤트 배너, 메인화면 상단 사진 이런 것들의 위치가 다 조금씩 틀어지더라.. 그래서 이것들의 위치와 겹쳐지는 부분들 중 어떤 것을 위쪽에 두고 어떤 것을 아래쪽에 둘지를 조정하고 그것들을 JavaScript 로 구현하느라 .. 2022. 3. 6.
[JavaScript / jQuery] 캐러셀(이미지 슬라이드) 만들기 💡 실습 포인트! 오늘은 이미지 슬라이드를 만들어보았다. 화면 하단 가운데에 있는 동그라미 버튼 3개는 각 버튼을 눌렀을 때 해당하는 순서의 슬라이드로 이동시켜준다. 동그라미 버튼들 옆에 화살표는 이전, 다음 버튼으로 현재 슬라이드를 기준으로 이전 슬라이드나 다음 슬라이드로 이동시켜준다. 사실 동그라미 버튼 3개는 아래쪽에, 화살표 버튼은 슬라이드 양 끝에 넣고 싶었는데 position: absolute 도 z-index 를 이용해도 원하는 배치가 잘 나오지 않았고, 어찌어찌 나오면 반응형에서 예쁘게 배치되지 않았다. 그래도 굳이 만들려면 media query 를 사용해야 할 것 같은데... 다음번에 좀 더 공부해서 다시 도전해봐야 할 것 같다. 💜 HTML 💜 CSS .slide-container { .. 2022. 3. 5.

티스토리툴바