개발 (7) 썸네일형 리스트형 배열 마지막 요소(값) 깔끔하게 추출 하는 방법 Array.at() 우리의 멋진 바닐라 자바스크립트에서 지원하는 기본 함수 입니다. 해당 함수를 이용하여, 배열의 요소를 직관적으로 추출할 수 있습니다. * 구문 Array.at(Array Index) 아래 코드는 배열의 첫번째 요소를 추출 하는 함수입니다. 매개변수를 입력 하지 않는 경우 배열의 첫번째 요소를 가져옵니다. ["JavaScript","Spring","NodeJS"].at() >> 'JavaScript' //물론 아래 방식도 가능합니다. ["JavaScript","Spring","NodeJS"].at(0) >> 'JavaScript' 제가 해당 함수를 보고 감탄 했던 이유는 아래처럼 배열의 마지막 요소를 깔끔하게 가져올 수 있어서 입니다. const languages = ["JavaScri.. git push 하지 않은 상태에서 commit(커밋) 취소 실제 회사에서 업무를 진행하다 보면, 서버에 push 하기 전 commit 내용을 점검할 때가 있다. 그러다보면 누락된 파일이나, 잘못 적용된 소스가 발견 될 떄가 많은데 그때 사용하는 명령어를 기억하기위해 해당 글을 작성하기로 했다. git reset --soft HEAD^ 해당 명령어는 서버(git)에 반영(push)하기 전인, commit(커밋)을 취소 하는 명령어다. 서버에 로그는 남지 않는다. 아래는 위 명령어에 적용된 옵션 내용이다 --soft commit을 취소하고 staged area는 그대로 유지한다. git add src/index.tsx git commit -m "test" git reset --soft HEAD^ 위 명령어를 사용 하고 나면 아래와 같은 상태가 된다 (git add가.. 자바스크립트 필수 개꿀 연산자 (삼항연산자) 실무에서도 많이쓰이는 개꿀 연산자입니다. var member; member = (member)||'default'; 일단 한가지 먼저 말씀드려야 겟네요 자바스크립트에선 (값) 괄호 안에 값이 null, undefined등일 경우에도 false로 사용 가능합니다. 그럼 위에서 member를 초기화 하지도 않고 아무 값도 넣지않았습니다. 그렇기에 (member) false가 되겟죠 그리고 바로 옆 || 해당연산자는 조건1 || 값 조건1이 true일경우 아무 작업도 하지 않지만 false일경우 || 뒤에있는 값을 호출하라 라는 뜻입니다. 그렇기에 (member)||'default' -> 'default' 로 변해버린것이지요. 그래서 member 에는 default가 들어가게 됩니다. 또 이와 비슷한 연산자가.. [kmhdev] promise ? 비동기함수 비동기 함수하면 가장 먼저 떠오르는 promise, async await 함수에 대해 정리하려한다. Promise 는 보통 비동기 함수, 연산등의 처리가 끝난후에 실행하도록 명시하기 위해 객체이다. Promise 는 보통 3가지의 상태를 가집니다. 대기(pending) - 이행(fulfilled) 거부(rejected) 대기(pending)은 말그대로 아직 함수가 이행되기전 입니다. 쉽게 말해서 new Promise(res, rej) 라 선언하면 대기 상태에 들어가는겁니다. 이행(fulfilled)는 말그대로 연산이 성공하였다 입니다. 거부(rejected)는 말그대로 연산이 실패하였다 입니다. 이행, 거부에 관해서는 한가지 더 설명 드려야 하는것이 있습니다. Promise를 사용할떄에는 보통 익명함수를.. [kmhdev] 클래스 컴포넌트 ? 함수형 컴포넌트 ? * 함수형 컴포넌트 함수형 컴포넌트는 아래 소스와 같이 함수형태로 컴포넌트를 구현하는것입니다. 흔히 사용하는 es6의 화살표 함수를 이용해서 구현이 가능하죠. 저는 그럼 함수형 컴포넌트를 도대체 왜 쓰는거지? 왜 클래스 컴포넌트랑 함수형으로 구분을 해서 나눈거지라는 의문이 들어 찾아봤습니다. 2019년 함수형 컴포넌트는 개편되어 클래스형 컴포넌트보다 첫 마운팅 시점이 5~10%정도까직 상승 되었다하며 또한 기존 클래스 컴포넌트보다 코드가 짧으며 후에 유지보수를 할떄 가독성이 매우 좋아졌습니다. 과거에는 컴포넌트 state를 사용하기위해 함수형 컴포넌트를 -> 클래스 컴포넌트로 변환하는 작업을 많이 했엇지만\ 최근에는 hook라는것이 등장하여 함수형 컴포넌트에서도 state를 사용할 수 있게되었습니다. h.. [kmhDev] redirect ? forward ? 란 무엇인가 *redirect MDN 일부 내용 https://developer.mozilla.org/ko/docs/Web/HTTP/Redirections 1. HTTP에서, 리다이렉션은 요청에 대해 특별한 응답(리다이렉트)을 전송함으로써 촉발됩니다. 2. HTTP 리다이렉트는 3xx 상태 코드를 지닌 응답입니다. 리다이렉트 응답을 수신한 브라우저는, 제공된 새로운 URL을 사용하며 그것을 즉시 로드합니다: 3. 대부분의 경우, 리다이렉션은 사용자에게는 보이지 않는데다가, 적은 성능 저하를 일으킵니다. 내용이 복잡하지만 제가 이해하고 제가 주로 쓰는 용도로 정리하겠습니다. 1. redirect는 브라우저의 해당 url을 변경할떄 씁니다. 2. request, response 객체가 소멸됩니다. 3. 보통 컨트롤러로 .. [kmhDev] Controller 에서 해당 페이지에 alert 띄우기 alert용 jsp페이지를 생성한후 -> controller에서 model로 alert메세지와 url을 보내고 -> jsp에서는 받은 메세지를 alert로 띄운후 받은 url로 이동한다. *controller.jave public String selectLogin(wsMapUserVO userVO, Model model) throws Exception ... model.addAttribute("msg", "아이디 또는 비밀번호가 잘못되었습니다."); model.addAttribute("url", "login.do"); *alert.jsp 이전 1 다음
