Dev82 리액트 찍먹 1 1. 리액트 설치 및 셋팅 node.js와 VS Code 다운로드가 필요하다. LTS 말고 현재 버전(비번역은 Current 어쩌고라 나왔을 것)을 설치 했다. (VS Code는 이미 사용 중이었어서 캡쳐 패스...) 다운로드가 완료 되었으면 Work Space를 생성해야 한다. 자신이 원하는 위치에 원하는 이름으로 원하는 폴더를 만들면 된다. 나는 C드라이브에 생성해주었다. 폴더 생성 후 상단 메뉴 중 File-Opend Folder로 방금 생성한 폴더를 불러오고 위와 같이 터미널에 npx create-react-app '프로젝트명' 을 입력해준다. 프로젝트를 생성하는 방법이다. 코드 입력 전 빨간 밑줄친 부분을 확인 해야하는데 빨간 밑줄이 본인이 생성한 폴더명으로 끝나야 폴더를 잘 불러온 것이다. 코.. 2023. 4. 13. 자바스크립트 프로토타입? 자바스크립트는 프로토타입 Prototype이라는 공간을 가지고 있다. 프로토타입은 생성자 함수를 사용해 생성된 객체가 공통으로 가지는 공간을 의미한다. //생성자 함수 만들기 function Student(name, korean, math, english) { this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; //메서드 this.getSum = function() { return this.국어 + this.수학 + this.영어; }; this.getAverage = function() { return this.getSum() / 3; }; this.toString = function() { return this.이름 + '\t' .. 2023. 4. 10. JavaScript 자바스크립트 시계 만들기 타이머 관련 예제를 보다가 급 티켓팅할 때 애용했던 네이비즘 서버시간 사이트가 떠올라 간단하게 시계를 만들었다 ㅋㅋㅋ HTML 삽입 미리보기할 수 없는 소스 코드 전문 Date의 getDate() 메서드는 요일을 0~6의 숫자로 표현해준다. 따라서 요일을 담는 배열을 생성해 가져다 쓸 수 있도록 작성 getFullYear() 메서드부터 getSeconds() 메서드를 이용, 문자열을 조합하여 시간을 표현해줌 처음에 setInterval 메서드에 Date 객체 뽑아오는걸 바로 작성 했었는데 그러면 시계가 바로 나오지 않고 1초 뒤에 나오게 된다. 그래서 함수를 따로 만들어 빼주고 그 함수를 호출 해준 뒤 setInterval()이 돌아가게 하면 끝! 재밌다 ㅎ 화면 디자인 완전히 따라 만들진 않았고 이렇게.. 2023. 4. 9. DOM(Document Object Model) 문서 객체 모델 문서 객체 모델(DOM: Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다. DOM을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다. vellalog 위 코드는 아래와 같은 트리 모양으로 나타낼 수 있다. 위 그림 속의 각 요소들을 '노드'라고 부른다. 노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분할 수 있다. 요소 노드는 html 태그를 의미하고 텍스트 노드는 요소 노드 안에 들어있는 글자를 의미한다. 1. 문서 객체 만들기 1-1. 동적으로 문서객체 만들기 💭 웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는.. 2023. 4. 8. Spring 스프링 5버전 Controller - @InitBinder 전송된 값을 받을 때 변환이 가능한 데이터는 자동으로 변환 되지만 경우에 따라서는 파라미터를 변환해서 처리향 하는 경우가 존재한다. 예를 들어, 화면에서 '2022-10-28'과 같이 문자열로 전달된 데이터를 java.util.Data 타입으로 변환하는 작업이 그러하다. 스프링5의 Controller에서는 파라미터를 바인딩 할 때 자동으로 호출되는 @InitBinder 어노테이션을 이용해서 이러한 변환을 처리할 수 있다. 🎇 예제 1) 클래스 작성 2) 컨트롤러 클래스 작성 ✨ 실행 결과 2023. 4. 6. DI(Dependency Injection) 의존성 주입 💡의존성(Dependency)이라는 것은 하나의 객체가 다른 객체 없이 제대로 된 역할을 할 수 없다는 것을 의미한다. 예를 들어 음식점에서 서빙을 담당하는 직원이 못 나오는 상황이 있어도 장사는 할 수 있지만 주방장이 못 나온다면 장사를 할 수 없는 일이 발생한다. 이처럼 의존성은 하나의 객체가 다른 객체의 상태에 따라 영향을 받는 것을 의미한다. 흔히 A객체가 B 객체 없이 동작이 불가능한 상황을 'A가 B에 의존적이다'라고 표현한다. 주입(Injection)은 말 그대로 외부에서 '밀어 넣는 것'을 의미한다. 예를 들어 어떤 음식점의 경우 매일 가게를 열기 전 직접 식재료를 구하기 위해 장을 보지만 프랜차이즈 식당들은 본사가 트럭 등을 이용해 식재료를 공급한다. 이 두 가지 방식의 차이는 필요한 객.. 2023. 4. 6. 이전 1 2 3 4 5 ··· 14 다음
