기억은 변하지만 기록은 변하지 않는다.

WEB11

React - 변경 가능한 제목 만들기(Ant Design) 아이디어 Canva에서 프로젝트명을 바꿀 수 있는 것처럼 여행 제목을 바꿀 수 있어야 합니다. 초기 제목을 표현하기 위해서 h1태그를 활용했지만, 변경이 불가능합니다. Ant Design 컴포넌트 중 Input을 활용하면 변경 가능한 제목을 표현할 수 있습니다. 제목 관련 기능 및 구현 결과 제목을 클릭하면 변경할 수 있어야 합니다.(이 때 윤곽선은 나타나도 괜찮습니다.) Input인 티가 나지 않도록 윤곽선이 없어야 합니다. 값이 변경된 것을 인식하고 적당한 처리를 할 수 있어야 합니다. 글자가 제목처럼 커야합니다.(20px) 위 기능 대로 구현한 결과는 아래와 같습니다. 구현 코드 const editableTitleStyle: React.CSSProperties = { border: "none", m.. WEB/REACT 2024. 4. 10.

React - useState, Hooks 기초 React QuickStart Quick Start – React The library for web and native user interfaces react.dev Updating the screen 컴포넌트가 특정 정보를 기억하고, 이를 보여주는 기능이 필요할 때 사용합니다. ex) 버튼이 클릭된 횟수를 세는 경우가 있죠 이 때, 아래 코드를 사용하면 특정 값의 변화에 따라 컴포넌트가 변화하는 것을 확인할 수 있습니다. 여기서 반드시 setCount(또는 본인이 설정한 함수)로 count(state)를 변경해주어야 합니다. import { useState } from 'react'; function MyButton() { const [count, setCount] = useState(0); func.. WEB/REACT 2024. 4. 6.

React - 완전 기초 리액트 Quick Start Quick Start – React The library for web and native user interfaces react.dev React Component - 반드시 대문자로 시작해야합니다. - HTML은 반드시 소문자이어야 합니다. JSX 아래와 같은 Markup Syntax를 JSX라 부른다. 별도 설치 없이 사용할 수 있습니다. - JSX 태그는 HTML보다 엄격한 규칙을 따라야합니다. - 닫는 태그 가 반드시 필요하며, - 여러 개의 JSX를 리턴할 수 없습니다. - 하나의 JSX태그로 감싸서 리턴해야합니다. ex) ..., ... 엄청 긴 HTML을 JSX코드로 바꾸려면, 다음 페이지에서 변환해보세요~ https://transform.tools/html-t.. WEB/REACT 2024. 4. 6.

[Konva] 유사 CAD 프로그램 제작 - 성능 향상의 기록 Web으로 편집 프로그램 제작을 위해서 회사에서 선택한 것은 Konva.js 왜 선택했는지에 대해서는 넘어가고, 이미 konva로 프로젝트를 진행중이고, 성능 개선이 필요하다면 읽어보면 좋을 것 같다. 문제 상황 사내용으로 만드는 유사 CAD 프로그램이었다. 한 번에 그려지는 객체수는 (1)약 5만개 이상 그리고 각 객체는 (2)위치 이동이 가능해야하며 독립적이지 않고 (3)연관되어 있다. 성능 이슈 작은 개수는 충분히 편집이 가능할 정도의 성능이 나왔다. 하지만, 5만개 정도면 한 번 움직이는데 수 초가 걸릴 정도로 성능이 저하되었다. 도저히 편집기로 사람이 쓸 수 없을 정도였다. 크게 세 가지로 정리하면 1. 대량의 데이터를 한 화면에 보여줄 것 2. 한 화면에서 편집이 가능할 것 3. 1, 2가 너.. WEB/JavaScript 2023. 11. 20.

[JavaScript] 즉시 실행함수/ 클로저 및 scope chaning 즉시 실행 함수 즉시 실행되는 함수 (function add(a, b){ console.log(a+b); }(3,4)); a, b라는 변수가 코드가 실행 후 사라지게 하고 싶을 경우, 즉시 실행함수 활용 -> 같은 변수명이 밖에서 사용되지 않았으면 좋겠을 경우, 활용하도록 한다. 호출없이 사용되기 때문에, framework에서 많이 사용된다. 클로저 디자인 패턴 중 하나로, javascript에는 접근제어자가 없기 때문에, 클로저를 활용하여 문제를 해결할 수 있다. ex) count -> java에서는 static private int count 선언하면 아주 간단히 해결 javascript에서는 function 내부에서 function을 return하도록 하여 return 된 function을 사용하도.. WEB/JavaScript 2023. 9. 6.

[JavaScript] 기초 - 람다표기법(화살표 함수)/ for / 단축평가/ == vs === 자바스크립트에서는 함수를 매개변수로 전달한다.(Strategy Pattern과 유사하다. Java의 interface느낌으로) 함수를 표현하는 표기법 람다 표기법 = 화살표 함수 아래는 forEach를 실행하는 다양한 방법이다. var array = [100,200,300,400,500]; array.forEach(function(item){ console.log(item); }) for(var i of array){ console.log(i); } // in 키워드는 index를 가져옴 for(var i in array){ console.log(array[i]); } var log = function(i){ console.log(i); } var doc = function(item){ document... WEB/JavaScript 2023. 9. 6.

[Spring] Error- 에러처리 . 단일 기본 페이지 . /resources/static/error.html . /resources/public/error.html . /resources/template/error.[템플릿확장자] . http status별 기본 에러 페이지를 정해줄 수 있다. error폴더를 만들어 줘야함. . /resources/[static|public|template]/error/4xx.[html|템플릿 확장자] @ExceptionHandler - HandlerMethod에 속한다. . 비즈니스 로직이 던진 예외에 반응하는 핸들러 메소드 - 예외처리 범위 . @Controller 내부 : 해당 컨트롤러만 . @ControllerAdvice : 프로젝트 전체. @ControllerAdvice : 전체 Control.. WEB/SpringBoot 2023. 5. 4.

[JSP] JSP프로젝트 시작 : Dynamic Web Project(eclipse) jsp프로젝트는 새로운 프로젝트 시작하기보다는, 공부용으로 보려는 사람이 많을 것이라 생각한다. 아무튼 회사에서는 동료와 협업하여 환경을 구축하다보니, 모르는 부분이 있을 것 같아서 AtoZ로 직접 해보자. 생각보다 쉽다. * tomcat은 미리 깔아두도록 하자 어쩌다보니 길어진 것 같아서 요약 ※ Build Path에 Server Runtime추가. ※ eclipse에서 서버 설정 *Server Runtime 빌드패스 추가. 1. File>New>DynamicWebProject 프로젝트명 설정하고 넘어가자. 2. test.jsp작성: src>main>webapp>test.jsp Test JSP파일입니다.asdfafsd 이렇게 하면 아마 첫줄에서 jakarta.servlet.http.Http~~라면서 빨.. WEB/JSP 2023. 3. 8.

[JSP] Servlet이란? 클라이언트와 서버 사이의 Bridge 서블릿으로 프로그래밍을 진행했지만, 내부적으로 어떻게 동작하는지는 살펴본적이 없어서 살펴보고자 한다. Servlet은 클라이언트와 Backend사이의 다리 역할을 한다. ■서블릿 : 클라이언트의 요청을 받아서 처리한 뒤 응답한다. 특징 - 클라이언트 요청에 동적으로 작동하는 웹 애플리케이션 컴포넌트 - html을 사용해 요청에 응답 - Java Thread로 동작. - MVC의 Controller - HTTP 프로토콜 서비스 지원하는 javax.servlet.http.HttpServlet 클래스 상속받음 - UDP 보다 처리 속도 느림 Servlet은 웹서버가 동적인 페이지를 제공할 수 있도록 도와준다. CGI : Common Gateway Interface 별도로 제작된 웹서버와 프로그램간의 교환방식이.. WEB/JSP 2023. 3. 7.

[Spring] Spring boot - Properties Spring boot properties : 스프링 부트 기본 기능 전체를 튜닝하는 부트 전용 설정 프로퍼티 - classpath : application.properties, application.yml로 제어 가능. - 부트 기능 거의 대부분을 제어 - 기본값이 세팅되어 있어서 아무것도 쓰지 않아도 동작함. - 경로 : root>resource>application.properties Configuration과 동일한 동작을 한다. 다음은 동일한 동작을 하는 configuration파일과 application.properties이다. application.properties는 Configuration에 비해 간단하게 처리가능 할 수 있으나, configuration은 더 복잡한 로직을 처리할 수 있다.. WEB/SpringBoot 2022. 12. 27.

[JavaScript] img src 변경하기 1. img 요소 가져오기 : 이 때 script가 해당하는 html(mainImg) 이후에 있어야 읽힌다. 이는 script를 읽는 도중에는 html이 안읽히기 때문, (javascript로 html 생성이 가능하기 떄문에 html read를 잠시 멈춤) 관련한 블로그 글 : https://blogpack.tistory.com/1087 document.getElementById("mainImg") //또는 $('#mainImg') 2. src 바꾸기 document.getElementById("mainImg").src = "원하는 img 경로 또는 주소" //또는 $('#mainImg').src = "원하는 img 경로 또는 주소" WEB/JavaScript 2022. 10. 15.

이전 1 다음

티스토리툴바