Front66 [Javascript] OR 연산자와 Default Parameter(ES6), Nullish coalescing(ES11) 차이점 [Javascript] OR 연산자와 Default Parameter(ES6), Nullish coalescing(ES11) 차이점 Logical OR operation (OR 연산자) result = leftExpr || rightExpr leftExpr가 truthy 면 leftExpr, falsy 면 rightExpr를 반환 falsy : false, 0, -0, NaN, ' ', " ", undefined, null Default Parameter (기본값 매개변수) (ES6 문법) function sum(a = 0, b = 0) { return a+ b; } Default Parameter는 undefined 인 경우만 설정한 기본값 매개변수를 설정해준다. function getName(name.. Front/JavaScript 2021. 11. 1. [Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing [Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing Optional Chaining console.log(person.job?.manager?.name); 다음과 같이 person1, person2라는 Object가 있다. const person1 = { name: 'Haenny', job: { title: 'S/W Engineer', manager: { name: 'Chris', } } }; const person2 = { name: 'Bob' } 위의 두 객체를 다음과 같은식으로 작성하면 어플리케이션이 정상적으로 작동하지 않는다. function printManager(person) { console.log(person.jo.. Front/JavaScript 2021. 10. 30. [WebTobe] TmaxSoft 웹투비 컴파일 및 시작/종료 명령어 http.m 설정 파일을 수정한 뒤 해당 파일을 컴파일 한 후 재기동을 하고 싶을 때 참고하자. http.m 컴파일 명령어 wscfl -i http.m 웹투비 서버 종료 명령어 wsdown y 웹투비 서버 시작 명령어 wsboot Front/WebServer 2021. 5. 28. [Javascript] 자바스크립트 코드 경량화(minify)하기, 경량화(minify) 풀기 [Javascript] 자바스크립트 코드 경량화(minify)하기, 경량화(minify) 풀기 1. 자바스크립트 코드 경량화 (minify) 하기 - minifier 사이트 접속 Minify JS and CSS online, or include the minifier in your project for on-the-fly compression. Minify JS and CSS online, or include the minifier in your project for on-the-fly compression. www.minifier.org ① JS 파일을 붙여넣기 ② JS 언어를 선택 (언어를 감지해서 자동으로 선택되기는 한다) ③ Minify 버튼 클릭 그러면 ① 박스에 들여쓰기와 엔터와 같은 공백이 .. Front/JavaScript 2021. 5. 12. [Javascript] 자바스크립트 SNS 간편 로그인 API 구현하기 [Javascript] 자바스크립트 SNS 간편 로그인 API 구현하기 - 내 애플리케이션 클릭 - 애플리케이션 추가하기 - 플랫폼 설정하기 - web 플랫폼 등록 (일단 로컬 개발 도메인으로 설정) - 카카오 로그인 Redirect URI 설정 페이지 https://developers.kakao.com/tool/demo/login/login - Kakao Developers 카카오 로그인 데모에서 다음 코드를 복사 테스트가 가능 Front/API 2021. 5. 4. [CSS3] title 속성에 style 입히기 [CSS3] title 속성에 style 입히기 HTML 의 title 속성은 해당 요소에 대한 설명을 툴팁으로 제공해준다. HTML title Attribute HTML title Attribute Definition and Usage The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. Applies to The title attribute is part of the Global At www.w3schools.com 1. 기본 title 속성 - CSS3 div { widt.. Front/CSS 2021. 5. 3. [CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법 [CSS3] 이미지 편집하지 않고, 투명한 배경 유지하면서 색상 변경 시키는 방법 아이콘과 같이 이미지를 생성받았는데, 투명한 배경에 해당 이미지 색상만 변경하고 싶다고해서 매번 이미지를 색상별로 요청할 수 없을 때 CSS로 이미지 색상 변경하는 방법이다. 참고로 정식 방법은 아니여서 정확한 색상표현이 되진 않는다. 위의 스프라이트 아이콘 이미지로 살펴보자. img { filter: opacity(0.5) drop-shadow(0 0 0 red); } red 자리에 원하는 색상을 넣으면 된다. 기존에 만들어진 이미지 색상의 투명도를 주고, 색상을 얹는 잔머리를 사용한 방식이라 정확한 색상이 표현되지 않고 혼합된 색상으로 표현되니, 협업이 힘들거나 커스텀이 필요한 경우에만 사용하기에 좋을 것 같다. - r.. Front/CSS 2021. 5. 3. [Javascript] base64 이미지 Data → File 객체로 변환 이는.. Smart Editor를 사용하면서 부딪히게 된 난항이다.. [Javascript] Naver SmartEditor 사용하기 [Javascript] Naver SmartEditor 사용하기 게시글 작성란 등에 사용되는 Editor 중에 SmartEditor와 CKEditor를 사용해보았다. 일단 UI 화면으로는 CKEditor가 훨씬 깔끔하지만, 기능 세팅이나 옵션설정은 Smar.. haenny.tistory.com SmartEditor 를 사용하여 글자를 입력할 때 입력한 글자 수를 표출하는 부분을 구현을 했는데, SmartEditor는 이미지를 복사 붙여넣기가 가능한 것. 글자 수를 표출한 것은 사용자의 편리도 있지만, 해당 내용을 저장하는 DB 의 데이터 크기를 넘어서지 않게 하기 위함이었.. Front/JavaScript 2021. 4. 30. [Javascript] Naver SmartEditor 사용 및 입력 글자 수 표시하기 [Javascript] Naver SmartEditor 사용하기 및 입력 글자 수 표시하기 게시글 작성란 등에 사용되는 Editor 중에 SmartEditor와 CKEditor를 사용해보았다. 일단 UI 화면으로는 CKEditor가 훨씬 깔끔하지만, 기능 세팅이나 옵션설정은 SmartEditor가 훨씬 간편하다. 다음에는 CKEditor 사용방법을 알아보기로 하고, 오늘은 SmartEditor 기본 사용방법을 살펴보자. SmartEditor 에 대한 소개 및 기능은 본 페이지를 참고한다. 네이버 스마트에디터 ONE 모든 창작의 중심. SmartEditor ONE을 소개합니다. smarteditor.naver.com 일단 기본적으로 사용되는 SmartEditor 생성 시 속성은 다음과 같다. var oEd.. Front/API 2021. 4. 30. [Javascript] iframe 하위 객체 접근 방법 [Javascript] iframe 하위 객체 접근 방법 보통 Document 하위 객체를 접근하기 위해서는 셀렉터 사용 혹은 자식 요소를 통해 접근한다. 자식의 자식 예를들면, class가 child2인 요소를 찾기 위해서는 다음과 같은 방법 등으로 접근할 수 있는 것이다. document.querySelector(".child2"); document.querySelector(".parent").firstElementChild.firstElementChild; 하지만 iframe 요소의 하위를 찾을 때는 위와 같이 동일한 방법이 적용되지 않기 때문에 다음과 같이 활용해야 한다. iframe 내부에 iframe 내부에 .se2_inputarea 라는 요소를 찾기 위한 방법 1. JQuery var tex.. Front/JavaScript 2021. 4. 30. [Apache] SpringBoot 내장톰캣 도메인 연결 Apache Proxy 설정 아파치(Apache) 설치 및 설정 내용은 다음 게시글을 참고하자. [Apache] Windows 10 64bit 환경 Apache2.4 설치 및 설정 [Apache] Windows 10 64bit 환경 Apache 설치 및 설정 1. 아파치(Apache) 2.4 설치파일 다운로드 Apache VS16 binaries and modules download www.apachelounge.com 운영체제 환경이 64 bit인 경우 첫 번.. haenny.tistory.com 만약 도메인 연결 필요 없이 아이피로 접근이 가능하다면 AJP 로 분기하는 것이 훨씬 편하고 간편하다. 참고로 모든 전제는 SpringBoot의 내장톰캣을 사용하므로 외부 톰캣을 별도로 설치하지 않았다. SpringBoot AJP 포트 .. Front/WebServer 2021. 3. 15. [Apache] AH00558 : httpd: Could not reliably determine the server's fully qualified domain name, ~ 에러로그 AH00558 : httpd: Could not reliably determine the server's fully qualified domain name, using fe80::69f6:8b58:dbdb:ffe4 Set the 'ServerName' directivne globally to suppress this message 아파치를 재시작하면서 발생한 오류로, 설정된 ServerName 으로 IP 설정을 찾다보니 찾을 수 없다는 내용으로 ServerName 설정을 해주면 된다. Apache/conf 경로의 httpd.conf 파일을 열어 'ServerName' 을 찾아 ServerName localhost:80 으로 변경해준다. Front/WebServer 2021. 3. 12. 이전 1 2 3 4 5 6 다음 추천 글 728x90 반응형