개발여행의 블로그

JSX란? JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App(){ return ( Hello react ); } 위의 코드는 아래와 같이 변환된다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 만약 컴포넌트를 렌더링 할 때 마다 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수..

모든 element를 선택해서 해당 요소 하나하나에 eventListener를 추가한다. 모든 div box들이 click event를 감지할 수 있도록 구현했다. const boxes = document.querySelectorAll('.box'); boxes.forEach( (box) => { box.addEventListener('click', onClickBox) }); querySelectorAll로 모든 box element를 선택했다. 실행화면에서 보면 9개 각각의 박스에 click 이벤트를 감지할 수 있도록 addEventListener를 해두었다. forEach()와 addEventLisner, querySelectorAll에 대한 설명 forEach() forEach() : 메서드는 주..

컴퓨터에서도 귀여운 이모지를 사용할 수 있다. window키 + ; (쉼표) 를 누르면 사진처럼 이모티콘을 사용할 수 있다.😁 🤎🧡💛💚💙💜 이모지는 물론 Kaomoji도 사용할 수 있다 （⊙ｏ⊙） 마지막으로 특수기호도 사용할 수 있다. 윈도우 특수기호 단축키를 기억해두면 편하다!! 굉장히 유용한 윈도우 단축키이다.

Javascript로 간단한 채팅을 구현하는 중, textarea 입력창에서 shift+enter 입력 시 줄 바꿈 되어 출력되는 기능을 추가했다. ( textarea는 input text와 다르게 여러 줄의 문자열을 입력할 수 있다. ) button 클릭과 textarea enter키 입력 시 채팅 내용이 입력되도록 이벤트 처리를 먼저 해두었다. 이벤트 처리 부분 const sendBtnElement = document.querySelector(".btn-send"); const textareaElement = document.querySelector(".textarea"); sendBtnElement.addEventListener("click", () => { sendMessage() }); text..

How to change border color of textarea on :focus? textarea focus 될 때 테두리 색상 변경하기 outline-color: #FE6B8B; /** 기존 textarea border 속성 **/ .textarea { border: 2px solid rgb(213, 194, 194); } /** 기존 textarea border 속성 **/ .textarea { border: 2px solid rgb(213, 194, 194); /** outline-color 속성을 추가하면 focus될 때 테두리 색상을 지정할 수 있다.**/ outline-color: #FE6B8B; }

vscode에서 작업 시 단축키 Ctrl + Shift + L 로 변수명 여러 개를 동시에 변경할 수 있다. 이미 작성 완료한 코드의 변수명을 하나씩 바꾸는 것은 실수가 발생할 위험도 있고 시간도 오래 걸리기에 유용하게 쓰는 단축키 이다. 1. 수정할 변수를 드래그 혹은 더블 클릭하여 선택 2. 단축키 Ctrl + Shift + L 를 누르면 다중 선택이 완료 3. 수정

2021.04.16 (금) 시험 결과가 발표되었다. 기억을 되살려보았을 때 어느정도 안전선에 있다는 것은 예상했지만, 마킹 후 제대로 마킹했는지 확인하지 못하고 omr 카드를 제출했기에 불안함이 있었다.(혹시나 마킹을 잘못했을까) 합격 60~100 / 불합격 0~59 다행히도 결과는 합격이었다. 생각보다 준수한 점수를 받았다. 1과목 10문제 중 3문제, 2과목 40문제 중 7문제를 놓쳤다. 1과목에서 헷갈리는 보기가 많아 혹시 과락이 될까 걱정했었는데 다행히 과락은 없었다. 이 시험을 준비하면서 느낀 점은 문제 유형에 집중하기 보다는 정확한 개념 적립을 통해 응용된 문제가 나왔을 때 풀어내는 것이 중요하겠다는 것이었다. 기출을 여러 번 반복하여 재학습하는 것도 중요하지만 결국 개념을 모른다면 시험은 운..

후기) 객관식 (40문제) + 주관식 (10문제)로 총 50문제가 출제되었다. 1과목(1번~10번) 생각보다 헷갈리는 개념들이 많이 나와서 시간을 많이 소비했다. 2과목(11번~50번) 평이한 문제도 있었고, 쉽지 않은 문제도 있었다. 주관식은 쉽게 나왔던 것 같다. 결과는 2021.04.16(금)에 나온다고 한다. 기억이 나는 문제들과 카페의 후기를 참고하여 문제 정리 1과목 번호 문제 답 1 다이어그램 그림을 제시하고, 옳은 것을 선택 3번 3) IE표기법은 점선으로 표기 4) baker 표기법은 UID bar 2 관계차수 1:1, M:M 등등 설명 제시 후 옳은 것 관계 차수 3 엔터티 특징으로 옳지 않은 것 1개 이상의 인스턴스로 구성되어 있다. 4 엔터티에 대한 설명 제시 후 옳은 것 ( 주식별..

Mybatis에서 다중쿼리를 생성해보자. foreach 예시 UPDATE test_tbl SETtable_name=#{tableName} WHERE table_id=#{tableId} 멀티쿼리 설정 application.properties에서 jdbc 옵션에 multi query 옵션 추가 allowMultiQueries=true - 추가된 예 spring.datasource.url=jdbc:log4jdbc:mariadb://1**.1**.1**.1**:3306/db_test?characterEncoding=UTF-8&serverTimezone=UTC&allowMultiQueries=true

이 글은 SQLD 최종 정리강의 1편 - SELECT문장 ~ 트랜잭션 관리 언어(TCL). 깡마SQLD 강의를 보며 정리한 글입니다. 모든 저작권은 깡마SQLD에 있습니다. [ 숫자 함수 ] ROUND - 지정한 자리에서 반올림하는 함수 ROUND(숫자, 반올림할 자리수) 두번째 인수에서 0은 소수점 첫째 자리이다. 예) 두번째 인수 0일 때 : 소수점 첫째 자리에서 반올림 예) 두번째 인수 -1일 때 : 정수 첫째 자리에서 반올림 예) 두번째 인수 1일 때 : 소수점 둘째 자리에서 반올림 ceil (oracle), ceiling (sql server) - 올림값을 반환하는 함수 문자열 함수 uppper lower LPAD RPAD LTRIM RTRIM substr instr 날짜 함수 TO_CHAR :..