프론트엔드28 AJAX란? JS를 공부하던 중 AJAX라는 친구를 마주쳤습니다. 휴 공부를 하면 할 수록 할게 더 생기는 건 왜 일까요? 오늘은 AJAX의 개념과 사용 방법에 대해 공부해보았습니다. AJAX란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 서버가 주고받을 수 있는 데이터 형태 목록 > 더보기서버가 주고받을 수 있는 데이터 형태 - JSON - XML - HTML - TXT AJAX의 사.. 2023. 7. 11. JAVASCRIPT에서 날짜, 시간을 얻거나 생성하는 법 안녕하세요. 오늘은 JAVASCRIPT에서 날짜, 시간을 구하는 방법에 대해 포스팅하겠습니다. JAVASCRIPT에서 날짜와 시간을 얻거나 생성할 대 Date 객체를 사용합니다. Date 객체 생성 오늘 날짜를 얻기 위해 생성자로 Date 객체를 호출합니다. var today = new Date(); 생성된 Date 객체는 현재 날짜와 시간을 담고 있으며 그리니치 표준시로 출력됩니다. 막간 TMI > GMT (Greenwich Mean Time) 더보기 런던을 기점으로 하고, 웰링턴에 종점으로 설정되는 협정 세계시의 기준 시간대를 GMT라고 합니다. 본초 자오선을 기준으로 세계 시간을 계산하게 되는데요. 지구는 360도 이고 24시간마다 1회전 하므로 360도 / 24시간 = 15 즉, 15도 마다 1시.. 2023. 7. 11. NODE.JS 란? NODE.JS의 개념과 장단점 안녕하세요. 오늘은 Node.js에 대한 정보를 가져왔어요. 좋은 기회가 생겨 Node.js를 같이 학습할 스터디원을 구했거든요. 아직 js도 익숙하지 않은데 Node.js를 배우려니 막막하긴 하네요. 그래도 배워놓으면 좋으니 열심히 공부해봐야겠어요. 이번 포스팅에서는 Node.js의 개념과 장단점에 대해 정리해보겠습니다. Node.js의 개념 Node.js의 뜻 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이자 서버 사이드 플랫폼입니다. 2009년에 Ryan Dahi에 의해 개발되었습니다. Node.js의 등장배경 Node.js 등장 전 Javascript는 웹에서만 동작한다는 한계가 있었습니다. Node.js는 Javascript를 웹 브라우저 뿐만 .. 2023. 7. 11. jstl에서 if-else문 사용하기 jsp 코드를 작성할 때 조건에 따라 다른 결과를 보여주어야 할 때가 있습니다. 조건이 하나라면 c;if 태그를 이용해 표현할 수 있지만, 조건이 여러개인 경우에는 어떻게 해야할까요? 오늘은 c:if문과 c:choose에 대해 학습해보았습니다. c:if 조건이 하나인 경우 해당 조건에 맞는경우 실행 현재 해당 게시판은 리스트가 존재하지 않습니다. c:choose 조건이 여러 개인 경우 해당 조건에 맞는경우 실행 그 외의 경우 실행 count가 10보다 작은 경우 count가 10보다 크고 20보다 작은 경우 count가 20보다 큰 경우 c:choose를 사용하면 어떤 경우를 나누고 싶었는지 보기가 명확해지기 때문에 조건이 여러 가지인 경우 유용하게 사용할 수 있을 것 같습니다. 2023. 7. 3. HTML5 DATA 속성 사용하기 안녕하세요. HTML에서 DATA 속성을 사용할 수 있다는 사실, 알고 계셨나요? 브라우저에 영향을 주지 않고 요소에 특정한 데이터를 저장하고 싶은 경우 사용하는 속성이라고 하는데요. 오늘은 DATA 속성의 장점과 사용법에 대해 학습해보겠습니다. DATA- 속성이란? HTML 표준인 value 속성과 별개로 만들어진 사용자 지정 데이터 속성입니다. hidden 태그로 데이터를 저장할 필요가 없습니다. 하나의 HTML 요소에 여러 데이터 속성을 사용할 수 있습니다. 어느 엘리먼트에서나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있습니다. DATA- 속성 사용법 특정 속성값만 추출하기 console.log(input.dataset... 2023. 6. 28. CAT-MBTI 고양이도 MBTI 검사할 권리가 있다! 패스트캠퍼스에서 '내안에 숨은 직업캐 찾기' 강의를 듣고 MBTI 테스트를 만들어본 적이 있습니다. https://astounding-creponne-8984f4.netlify.app/ 내 안에 숨어있는 직업캐 찾기! 누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요! prismatic-monstera-4c9d6a.netlify.app 지난번 만들었던 프로젝트를 조금 변형해서 고양이 MBTI 사이트를 만들어보았습니다. 고양이 MBTI 검사하러 가기 https://joyful-syrniki-84389e.netlify.app/ 우리집 주인님의 MBTI는 뭘까? 냥이의 성격을 파악하고, 냥이와 찰떡인 이미지를 알려드려요 joyful-syrniki-84389e.netlify.app 프로젝트 구.. 2023. 6. 19. VSCODE HTML파일 바로 실행하기 OPEN IN BROWSER 위 확장자를 추가하면 HTML 파일을 크롬에서 바로 확인해볼 수 있다. 2023. 6. 15. HTML 특수문자 의미 HTML 특수문자를 사용하는 이유 HTML문서에 텍스트를 작성하고 웹으로 확인하면 꺽쇠 안의 내용이 표기 되지 않는 경우가 있습니다. HTML이 기본적으로 를 내용이 아닌 태그로 인식하기 때문입니다. 특수문자를 사용하면 이러한 문제를 방지할 수 있습니다. 하단에 자주 쓰이는 특수문자표와 특수문자 리스트 사이트를 첨부하였습니다. 자주 쓰이는 특수문자 및 의미 ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; # ' " " : 공백 앰퍼샌드 & 부등호 쌍따옴표 " sharp # 따옴표 ' 유니코드 특수문자 리스트 HTML 특수문자 리스트 ßßßSmall sharp s, German (sz ligature) kor.pe.kr 2023. 5. 30. [JS] JAVASCRIPT 기초 개념 모음 1. 'Hello' : 문자(String) 데이터 2. 123: 숫자(number) 데이터 3. true / false : 불린(boolean) 데이터 4. null : Null데이터 5. {} {키1: 값1, 키2 : 값2} : 객체(Object) 데이터, Key: value 형태로 데이터 저장 ex) const user = { name: 'java', age: 85 } console.log(user.name) console.log(user[name]) 점 표기법 혹은 대괄호 표기법으로 데이터를 사용 6. [] [값1, 값2, 값3] : 배열(Array) 데이터, 데이터를 나열해서 저장 ex) const fruits = ['apple', 'banana'] console.log(fruits[0]) con.. 2023. 2. 16. [CSS] CSS 기초 개념 모음 1. width: 100px; max-width / min-width : 요소의 가로 너비 2. height: 100px; max-height / min-height : 요소의 세로 너비 3. margin-top: 20px; margin-top / margin-bottom / margin-left / margin-right : 요소의 외부(바깥) 여백 4. padding-top: 20px; padding-top / padding-bottom / padding-left / padding-right: 요소의 내부(안쪽) 여백 5. border: 4px solid red; : 요소의 테두리 선 6. border-radius: 10px : 요소의 모서리 둥글게 (50%: 동그라미) 7. box-shadow: 4.. 2023. 2. 16. [HTML] HTML 기초 개념 모음 1. 2023. 2. 16. 이전 1 2 다음 반응형
