· FRONT-END(93)
-
[ JS ] DOM 제어
환경 : Visual Studio Code [ DOM 이란? ] Document Object Model(문서 객체 모델) HTML 문서를 객체화한 것 HTML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조 HTML, XML 문서의 프로그래밍 interface DOM은 문서의 구조화된 표현(structed representation)을 제공하며, 프록래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할이다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 그렇다. 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었다... (새삼 ..
2024.06.08 -
[ JS ] 카카오 주소 API 적용 해보기
환경 : Visual Studio Code 카카오 우편 주소 서비스 : https://postcode.map.daum.net/guide 카카오 우편 주소 서비스를 활용하여 코드에 녹여보자.. - API 사용을 위해 주소 삽입 [ 검색하여 찾은 부분이 수정 가능한 코드 ] [ 검색하여 찾은 부분이 수정 불가능한 코드 ] 우편번호 찾기 개인 공부 기록용입니다:)
2024.06.07 -
[ JS / Java ] JS와 Java 비교
같은 코드를 작성하는데 어떻게 다른지 간단하게 이해해보자 - Java public class Student { private String name; private int score; public Student(){ } //getter & setter } Student a = new Student(); - JavaScript function Student(){ } var a = new Student(); 개인 공부 기록용입니다:)
2024.06.06 -
JSON이란???
[ JSON ] "JavaScript Object Notation"로, 경량 데이터 교환 형식 주로 서버와 웹 브라우저 간에 데이터를 전송하거나, 다른 프로그래밍 언어 간에 데이터를 교환하는 데 사용 JSON은 사람과 기계 모두가 쉽게 읽고 쓸 수 있도록 설계되었다 JSON은 키-값 쌍의 집합 └ 키-값 쌍은 객체(object)라고 불르고, 중괄호 {}로 둘러싸여 있다 └ 배열(array)은 대괄호 []로 둘러싸인 값들의 순서 있는 목록 - JSON 객체 예시: { "이름": "John Doe", "나이": 30, "도시": "New York", "성별": "남성", "취미": ["독서", "운동"] } - XML과 비교하여 이해해보자 데이터 XML - 태그 기반 JSON - JS 객체 기반 번호 : 7..
2024.06.05 -
[ JS / AJAX ] 게시판 좋아요 구현
환경 : Spring Tool Suite4 목표 : 를 누르면 좋아요, 를 한 번 더 누르면 취소되도록 구현 (토글~!) + 각 게시글의 총 좋아요 개수 카운트 (중요)들어가기 전 알아야할 부분 JS(JavaScript) : 클라이언트에서 실행 EL(Expression Language) : 서버에서 실행 -> 서로 다른 두 개의 언어를 섞으면 안 돼요~ㅠ (아무리 같은 페이지라도 서로 다른 언어를 혼용하지 말 것) + 좋아요 구현 시 사용되는 코드를 통해 설명하겠다. 해당 코드처럼 현재 파라미터에 있는 번호를 읽어와 추출하고 싶은 경우. 서로 다른 언어를 혼용하여 사용해선 안된다. JS : var boardNo = params.get("boardNo"); EL : var params = new URLSe..
2024.06.04 -
[ JS / AJAX ] 아이디 형식 검사 (여기서 this를 사용하지 않는 이유)
환경 : Visual Studio Code / Spring Tools Suite4 참고 모델 : 네이버 이 글에서... NNNNN은 아이디로 사용할 수 없는 코드 NNNNY은 아이디로 사용할 수 있는 코드 1. (스프링) 아이디 중복 검사 코드 작성 먼저 백엔드 코드를 작성하는 것이 좋다. - AjaxRestController.java //@Controller //사용자에게 화면을 전송하는 컨트롤러 @CrossOrigin //외부에서의 비동기 통신을 허용하는 설정 @RestController //사용자에게 데이터를 전송하는 컨트롤러(화면x) public class AjaxRestController { @Autowired private MemberDao memberDao; @RequestMapping("/..
2024.06.03