elevne's Study Note

저번 시간에 이어서 React 기초 공부! 이전 시간에 알아보았던 JSX에서 {} 중괄호를 사용하는 것. 여기에는 변수뿐만 아니라 function도 넣을 수 있다고 한다. 또, JSX에서 class 명을 지정해줄 때는 HTML에서 하는 것처럼 똑같이 class= 이런 식으로 작성하면 안된다고 한다. 대신에, className= 을 사용해야 한다. 또 tag에 style을 지정해주고 싶을 때는 style= 에 object 스타일로 넣어주어야 한다고 한다. (e.g., {{fontSize:30px}} ) 또, 왼쪽의 예시를 보면 font-size 스타일이 fontSize (Camel Case)로 작성되어 있는데, 이는 - 가 JS에서 다른 식으로 사용되는 기호이기 때문이라고 한다. 또 React에서는 변수가..

React 공부를 시작해보았다. 실습환경은 stackblitz이다. 유튜버 '생활코딩'은 React는 사용자 정의 태그를 만드는 기술이라고 설명한다. React의 특징에 대해 더 알아보기 위해 홈페이지를 살펴보니 아래와 같은 특징이 있다고 한다. 선언형: React는 데이터가 변경됨에 따라 적절한 Component만 효율적으로 갱신/렌더링 함 컴포넌트 기반: 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들 수 있다. (DOM과 별개로 상태를 관리할 수 있다.) 간단한 컴포넌트: React 컴포넌트는 render() 메서드를 구현하는데 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 하는 것 상태를 가지는 컴포넌트: this.props를 이용해 입력데이터를 다루는 것 외에도 내부적인 상태 데..

1. HTML 파일 상에서 Input tag 등을 사용하여 입력값을 받을 때, tag 내에 onkeyup을 사용할 일이 있었다. (Input tag 안에 숫자값만 받고자 하였다.) Tag 내에 넣어줄 수 있는 유사한 것들로 onKeyUp, onKeydown, onKeyPress 가 있는데 기능은 아래와 같다. onKeyup: 사용자가 키보드의 키를 눌렀다가 땔 때 작동할 것 지정 onKeydown: 사용자가 키보드의 키를 눌렀을 때 작동할 것 지정 onKeyPress: 사용자가 키보드의 키를 눌렀을 때 작동할 것을 지정(onKeydown과 다른 점은 이는 ASCII 값으로 사용된다는 점) 아무튼 나는 Input tag 내에서 숫자만 입력받고 싶었기에 (input type="text"로 지정해야 할 이유가..

오늘은 최근 웹 개발을 진행하면서 새롭게 알게된 것들에 대해서 정리해보려고 한다. 1. 첫 번째로 Naver 스마트에디터를 사용해보았다. 게시판 기능을 포함한 웹사이트 제작을 할 때 유용하게 사용할 수 있는 오픈소스 에디터이다. 지금까지 많은 버전이 나왔는데 2.9 버전부터는 사진 업로드 기능이 제공되지 않는다고 한다. 2.8 Version을 아래 링크에서 zip 파일로 우선 다운받아주었다. 링크: https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3 압축을 풀어준 후, 원하는 경로에 파일들을 전부 복사/붙여넣기 해준다. 그 후, 필요한 js 파일을 html 파일에서 가져와야한다. (참고로 Spring Boot에서는 HTML에서 불러올 때 기본적으로 ..

게시판과 같은 List들을 쭉 뽑아와야 할 때에는 거의 대부분 Pagination 작업이 필요하다. 한 화면에 전체 데이터를 불러와서 띄우게 되면 로딩 속도도 많이 느려지고, 보기에도 매우 불편하다. Paging 처리를 하기 위해서는 ROW_NUM을 SELECT 문에서 가져올 필요가 있다. 쿼리는 아래와 같이 작성해줄 수 있다. (아래 예는 Oracle의 경우) SELECT * FROM ( SELECT ROW_NUMBER() OVER(ORDER BY COL1) AS ROW_NUM , COL2 , COL3 FROM TABLE1 ) WHERE ROW_NUM BETWEEN 0 AND 10 위와 같은 쿼리를 실행하게 되면 ROW_NUMBER() OVER()을 통해 ROW_NUM을, COL1 기준으로 가져오게 된..

JSP파일에서 forEach문으로 게시판 보드에 tr 태그 별로 다른 값을 넣어주었다. 여기에서, 각 tr 태그에 Input 값이 따로 있는데 특정 버튼을 눌렀을 때 이 Input tag 안에 해당 행의 다른 열에서 값을 가져와서 value setting을 해줘야하는 로직이 필요했다. 처음에는 varStatus의 .index 혹은 .count를 사용하여 class이름을 row 별로 세팅해준 후 javascript for문을 돌릴까 했지만,, 비효율적인 것 같아서 방법을 고민하다 다음과 같은 코드로 마무리할 수 있었다. $('table > tbody > tr ').each(function(index, tr) { var data = $(this).find("td:eq(1) input[type='text']"..

자바스크립트의 비동기처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추는 것이 아니라, 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기처리의 가장 흔한 사례는 ajax를 사용할 때라고 한다. ajax를 사용하는 함수와, 이를 통해 가져온 정보를 출력하는 함수를 순서대로 적었을 때, 밑의 console.log의 결과 값이 undefined로 나온다는 것이다. (ajax로 값을 가져오기 이전에 console.log가 실행되어 버리는 것) 아래 코드가 그 예시가 될 수 있다. $.ajax({ type: "POST", url:"/json", dataType:"json", data:{ value : value }, success: function(data) { result =..

프로젝트를 진행하면서 지금껏 다뤄보지 않았던 상황을 마주했다. 두 개의 Select 태그와 하나의 Input(text) 태그가 있다. 1. 1번 Selector의 value를 사용하여 ajax function을 이용하여 2번 Selector의 label, value를 동적으로 변경한다. 2번 Selector는 기본적으로 비활성화 되어있고, 1번 Selector의 Option을 선택하면 2번 Selector가 활성화된다. 2. 2번 Selector의 label을 기반으로 Input의 value를 자동으로 채울 수 있도록 한다. 2번은 간단하게 다음과 같은 짧은 코드로 해결할 수 있었다. function setInputTag(value){ $("#InputTag").val($("#secondSelector ..