프론트엔드9 [웹 백엔드] 클라이언트로부터 온 중복된 데이터 방지 let processedData = []; app.post("/calc", (req, res) => { // 클라이언트로부터 받은 데이터 const clientData = req.body; // 동일한 데이터가 이미 처리되었는지 확인 const isDuplicate = processedData.some((data) => { return JSON.stringify(data) === JSON.stringify(clientData); }); if (!isDuplicate) { // 중복된 데이터가 아닌 경우에만 실행 const clientDataWithDate = { ...clientData, date : new Date().toISOString().slice(0, -5) }; console.log(JSON... 2023. 5. 16. [JS] JavaScript의 개념과 기초 객체 기반 언어인 JS를 배워보자. 객체의 개념 현실 세계는 객체들의 집합이다. 사람, 휴대폰, 자동차 등 객체는 자신만의 고유한 구성 속성을 가지고 있다. 예를 들어, 자동차 : 사람 : 은행 계좌 : Javascript 1995년 넷스케이프 개발 Netscape Navigator 2.0 브라우저에 최초 탑재. 웹 프로그래밍 개념 창시 특징 -HTML 문서에 내장 -스크립트 언어 -인터프리터 실행(컴파일 필요 없음) -C언어 구조 차용 웹페이지에서 JS의 역할 사용자의 입력 및 계산 마우스와 키보드 입력은 오직 자바스크립트로만 가능하다. - 웹 페이지 내용 및 모양의 동적 제어 - HTML 태그의 속성, 콘텐츠, CSS 프로퍼티 값 동적 변경 - 브라우저 제어 - 브라우저 윈도우 크기와 모양 제어 - .. 2022. 10. 31. [CSS] Float (레이아웃 구성) 플롯(float, 매우 중요) 웹 페이지 레이아웃을 구성할 때 반드시 사용하는 속성이다. 키워드 left right none 플롯을 사용할 때 주의해야 할 점이 있다. 부모의 높이 값이 지정 안 되는 현상이 일어나는 것이다. 부모 요소에 1. 가상 요소:after { content: ""; display: block; clear: both;} 2. overflow: hidden 중 택 1을 적용해주면 된다. 기존 div 하나에 div 4개 박스를 넣고 border 값을 줘보았다. 자식 박스를 float left 했더니 이렇게 이상하게 돼있다. 지금이야 border를 적용시켜 눈으로 확인이 쉽지만 나중에 오류가 나면 찾기 힘들다. 첫 번째 방법을 적용하여 부모 박스에 .box:after {content: .. 2022. 9. 26. [CSS] float를 활용한 쇼핑몰 물건 판매 예제 float을 활용한 물건 판매 예제 div 큰 블럭 한 개 하위 width 부모 영역의 50%씩 두 개 블럭 생성 왼쪽은 사진 영역, 오른쪽 영역은 내용 영역. 오른쪽 내용 영역은 다시 세 개의 블럭으로 나눠 정보와 버튼 등을 기입한다. 다양한 박스를 어떻게 선언하고 배치시키는지 이해하는 것이 중요하다. 마치 안드로이드 스튜디오를 할 때 다중 linear layout을 수직(vertical), 수평(horizon) 배치하는 것과 비슷하다. 태그의 열고 닫힘과 들여쓰기 정도를 잘 확인하며 하도록 한다. 아래 코드를 확인하여 위 그림의 1, 2, 3, 4, 5가 어떤 클래스와 아이디에 매치되는지 이해한다. 과제2 제목 : 돌고래 급처분 합니다 내용 : 안녕하세요, 돌고래입니다. 저는 새로운 주인을 찾고있어요.. 2022. 9. 19. [CSS] border & text 속성 ( + 글자 가운데 정렬 방법 ) border border 속성은 테이블 윤곽 설정이다. 보통 3가지 속성을 한 번에 지정해서 사용한다. ex) 1px solid #777 두께 1픽셀, 줄 종류 한 줄, 색상 rgb값 텍스트 속성은 바로 밑에서 설명한다. html에서 p 속성 3개 블록을 만듦. 스타일에서 p 태그 속성에 모두 테이블 윤곽과 색상을 회색으로 정해준다. #rgb값은 대표적인 색깔을 영어로 입력해도 인식한다. border-radius = 테두리가 둥글어짐 p {border: 1px solid #777; border-radius: 8px;} 둥글어진 테두리의 모습 text 속성 color 텍스트 색 지정 line-height 줄 사이의 간격 지정 letter-spacing 글씨 사이의 간격 text-align 수평에서 글자 정.. 2022. 9. 5. [HTML] <video> 태그 사용 방법 (인코딩, controls 속성) video 태그는 사용 방법이 매우 간단하다. Your browser does not support the video tag. 태그를 열어주고 width 원하는 너비와 height 높이값을 준다. (안 주면 기본 크기로 재생된다.) 태그를 열어 어떤 동영상을 어떤 유형(mp4 등)으로 넣을지 설정한다. 인코딩 이때 html을 여는 브라우저가 지원하는 동영상 유형인지 잘 확인하고 유형을 설정하거나 인코딩을 해야 오류가 없다. mp4는 폭넓게 모든 브라우저에서 지원하는데 재생이 안 돼 확인해보니 H.264 + AAC 방식으로 인코딩 된 MP4 포맷 이어야 한다. 이후 source가 재생이 안 될 경우 화면에 표시할 텍스트를 넣어준다. controls 항목은 플레이, 정지와 같이 비디오 실행을 제어할 수 있게.. 2022. 7. 17. [HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) 앵커 태그 자주 쓰는 태그 중 하나로 흔히 ppt와 한글문서에서도 존재하는 하이퍼링크 개념이다. a 태그를 누르면 담겨있는 주소로 이동하는 방식이다. 속성에 값을 넣어 다른 url 혹은 다른 html로 이동 가능하다. 기본 형태 이름 정상적으로 네이버, 구글, hello.html로 이동이 된다. 기본적으로 a + tab으로 자동완성을 사용하면 href만 나오는데 하이퍼링크를 클릭했을 때 이 페이지에서 표시할지 새 페이지에서 열지 지정하는 속성이 있다. 바로 target 이다. 기본 설정은 입력하지 않아도 _self로 설정되어있다. 그래서 보이는 화면에서 이동만 하게된다. 하지만 target에 _blank 속성을 넣어주면 새 탭에서 열리는 것을 확인할 수 있다. 구글로 이동 새 탭으로 열기 결과 ( 클릭 .. 2022. 7. 17. 이해하기 쉬운 CSS 설명 (Cascading Style Sheet 기초 지식) CSS란? Cascading Style Sheet의 약자로 HTML과 XML로 작성한 문서를 화면에 어떻게 표시할지 기술하기 위한 스타일 시트 언어이다. css는 작성된 HTML 등의 문서가 화면에 어떻게 렌더링 되어 표시하는지 지정해준다. 예를 들어 우리가 html 화면에서 ul, li 태그를 이용하여 목록을 만들었다. 기본적인 모양은 이렇게 생성될 텐데 이것을 html 내부 head에 style태그를 열고 li에 너비, 높이 색상들을 지정하고 클릭했을 때 다른 메뉴로 넘어가게 링크를 걸어주면 이렇게 바꿔줄 수 있다. 메일 옆 이미지 파일도 추가할 수 있을 것이다. HTML로 뼈대를 세운다면 CSS로 살을 붙인다고 비유하면 이해가 쉽다. css는 다양하게 표현할 수 있도록 속성들이 많아 외워야 할 것이.. 2022. 7. 17. HTML이란? (웹, 인터넷, URL, DNS 배경 지식) 비전공자도 쉽게 HTML에 대해 이해할 수 있게 기본적인 배경 지식과 기초 지식을 적어보겠다. 웹이란? 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한 가지 형태 인터넷이란? 1개 이상의 네트워크가 연결되어 통신이 가능한 형태 URL이란? 인터넷 웹 페이지의 주소 ex) https://anhanryang.tistory.com/ http란? 통신방법 중 하나 Hyper Text Transfer Protocol의 약자로 서버와 클라이언트(사용자)가 정보를 교환하기 위한 하나의 통신 규격을 말한다. 우리가 웹에서 보는 화면은 코딩된 프로그래밍 언어(JS, html, css) 등이 모두 텍스트로 전달되고 그 텍스트를 크롬, 익스플로러 등에서 다시 태그 등으로 구분하여 읽어 화면에 표시해주는 것이다. IP주.. 2022. 7. 16. 이전 1 다음
