본문 바로가기

Frontend18

React App 만들기 - 준비 시작하기 전 오래 전, 무료 인터넷 강의를 통해 나만의 크롬 앱 만들기를 진행하였다. html과 css, javascript 를 가지고 만들고, github에 등록하여 내가 있는 지역의 날씨, 현재 시간, 할 일 메모의 기능이 포함 되어있다.강의를 보고 프로젝트를 진행하여, 각 기능들이 정상 작동되는 것을 확인하였으나, css 작업이 고통스러워서내 기준으로 완성이 덜 된 상태로 배포하게 되었고, 이후로는 작업하지 않았다.기능을 구현하는 것에 대해서는 많은 흥미를 느끼고 진행했고, 배포까지 완료된 후 인터넷 환경에서는 어디에서도 확인이 가능한 모습을 보고뿌듯함을 느꼈으나, 자주 들어가지 않은 탓에 점점 내 관심에서 멀어지고 있었다.그러던 어느날, 크롬 시작 페이지를 설정할 수 있다는 기능을 알게 된 후, .. 2023. 6. 14.
[Nodejs] Express 에서 router 연결 Node js로 웹 페이지를 개발 할 수 있는 프레임워크 중 하나인 Express 에서 클라이언트 측 요청에 대한 처리 방법을 일반적으로 프로젝트 폴더 바로 아래에 index.js (이름 변경 가능) 파일 내 기재한다. // index.js const express = require("express") // 프레임워크 호출 const app = express(); // 실행 const port = 3000(); // 1. 도메인 + '/' (초기 페이지) 접속 시 처리 로직 app.get('/' (req, res) => { res.send('Hello world!'); } // 2. 도메인 + '/goods' (상품 페이지) 접속 시 처리 로직 app.get('/goods' (req, res) => { .. 2023. 4. 26.
http & https http 는 클라이언트-서버 간 통신을 위해 요청(클라이언트)과 응답(서버) 사이에서 교환할 신호를 정해놓은 규칙이다. 특정 페이지에서 어떤 링크를 클릭하고 다른 페이지로 넘어갈 때, 이것을 요청과 응답으로 인식하고 정보를 주고 받는다는 규칙을 의미하기도 한다. 클라이언트는 주로 서버로 요청을 보내는 역할을 하는 것으로, 가장 흔하게 접할 수 있는 것은 인터넷 브라우저가 있다. 가장 흔하게 발생하는 요청은 GET 요청하는 것 인데 url 창에 포탈 주소를 입력하고, 정보를 보는 것(브라우저 화면으로 보는 것)과 같다. 이것 외에도 POST, PUT, DELETE 등 단순히 서버에 정보를 요청하는 것 외에도 정보를 갱신하기 위한 요청을 보낼수도 있다. http는 클라이언트와 서버 간 정보를 주고 받는 통신.. 2023. 4. 13.
[Javascript] this 바인딩 (call, apply) javascript에서 상황 별 this 가 바라보는 객체는 아래와 같다 1. 함수 자체로써 호출되었을 때 : 브라우저 환경 - window / node js 환경 - global 2. Method로써 호출되었을 때 : 호출 주체 (객체) // 함수 자체로써 호출되었을 때 - node js 환경 let example_func = function(x, y, z){ console.log(this, x, y, z); } example_func(1, 2, 3); // output : global(실제 출력된 내용은 너무 길게 나옴), 1, 2, 3 // Method로써 호출되었을 때 let example_func_2 = { name: "chunws", ex_method: function (x, y, z){con.. 2023. 4. 8.
Form 필드의 action / method 웹 페이지 내 회원 가입을 위한 폼 작성을 위해 아래와 코드와 같이 작성, submit 버튼에 onclick 함수를 달아준 후 자바 스크립트 함수로 서버로 POST 요청을 보내는 코드를 작성하였다. # register 페이지 내 HTML 코드 가입하기 # button 의 register() 함수 생략 register() 함수 내 DB 내 동일 아이디가 존재하거나, 입력된 비밀번호 두 개가 일치하지 않는다면 알림창이 생성되는 효과를 넣었고 정상 작동을 확인하기 위해 코드 작성을 마친 후 일부로 오류를 내었으나, 어떠한 반응도 오지 않았다 DB 저장 (회원가입) 성공 / 실패에 대한 알림창이 반드시 발생하도록 설계했는데, 반응이 없다는 것은 register() 함수가 실행되지 않았다는 것을 의미했기 때문에 .. 2023. 3. 28.
Modal 창 현재 Html 화면 가운데 위치 시키기 .modal_frame { position: fixed; # .modal_fram 속성을 가진 요소를 현재 보고있는 창을 기준으로 고정, 스크롤되어도 따라다님 left: 50%; # 보고 있는 화면 (= 뷰 포트, position이 fixed 이므로) 가로 선 중앙 50%로 이동 top: 50%; # 보고 있는 화면 세로 선 중앙 50% 이동 transform: translate(-50%, -50%); # 요소를 수직 및 수평으로 -50% 만큼 이동 > 최종적으로 화면 정 중앙에 위치 } 위의 코드를 본 후에 top 50%, left 50% 후 각각 tranfrom -50%을 적용하는 대신 각 수치에 100%, -100%를 적용해도 같은 효과를 보일 것이라고 생각하고, 테스트 해봤다. 테스트 해 본 결과.. 2023. 3. 24.

티스토리툴바