사과 냄새나는 IT이야기 TAESTORY,

State를 사용하려면 React를 import 해줘야함import React,{useState} from "react";컴포넌트는 상태가 변화하면 화면을 다시 그리는 Re-rendering 과정을 거친다.그에 따라 해당 함수가 다시 호출된다.컴포넌트는 State를 여러개 가질 수 있다.import React, { useState } from "react";const Counter = () => { //0에서 출발 //1씩 증가 //1씩 감소 //[상태의값, 상태변화메소드] = 함수(초기값); const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease =..

Playwright를 사용하기 위해 짧게나마 notion에 정리내용을 블로그에 옮김 async함수를 비동기 실행하도록 해줌 return promiseawait비동기 함수 앞에 붙여 호출할 경우 비동기 함수를 동기 형태로 사용할 수 있음await 은 뒤에 있는 함수의 결과를 대기함//일반 함수function hello() { return "hello";}//async를 붙이면 promise를 반환하는 비동기 객체가 됨async function helloAsync() { return "hello async";}console.log(hello()); console.log(helloAsync()); //return promisehelloAsync().then((res) => { console.log(re..

Playwright를 사용하기 위해 짧게나마 notion에 정리내용을 블로그에 옮김 Truthy : 참 같은 값Falsy : 거짓 같은 값//조건 식에 빈 문자열 a를 넣으니 false로 인식해서 FALSE가 출력됨let a = "";if (a) { console.log("TRUE");} else { console.log("FALSE");}//조건 식에 비어있지 않은 문자열 a를 넣으니 true로 인식해서 TRUE가 출력됨let a = "string";if (a) { console.log("TRUE");} else { console.log("FALSE");}이 처럼 Javascript에서는 조건문에 boolean 형식이 아닌 변수를 넣어도 참이나 거짓으로 인식되는 속성이 있음.실제로 boolean..

짧은주소를 생성할때 bit.ly의 api를 쓰는 경우가 많습니다. (http://api.bit.ly)그런데 일반적으로 http 페이지의 경우에는 문제가 없으나 https로 작업된 사이트에서 해당 api를 호출하면프로토콜이 맞지않아 정상적으로 작동하지가 않게됩니다.그래서 https로 구축된 사이트에서는 https://api-ssl.bitly.com 로 api를 호출하면 됩니다.

최근에는 웹에 접속하는 디바이스 숫자가 늘어나면서 agent를 체크하여 분기 처리를 해야할 경우가 많아졌습니다.물론 확인하는 방법도 이전부터 있었지만.. 편리하게 agent를 확인할 수 있는 js를 소개합니다. Kazuma Nishihata라는 일본인 개발자가 github를 통해 공개한 jquery.browser.sp.js 입니다.사용 방법은 간단합니다. 기본적으로 jquery의 플러그인이기 때문에 jquery core의 js를 추가하시고 jquery.browser.sp.js를 추가해주시면 됩니다. 아래는 각 agent를 확인하는 방법 입니다.browse objectbrowser$.browser.uashortcut navigator.userAgent.toLowerCase()$.browser.android..

단순히 값만 확인하고 닫히는 페이지를 만들었는데 크롬에서 window.close를 사용하니 창이 닫히질 않았다.아래와 같이 open 후 close로 크롬에서의 문제는 해결 하였다. window.open('','_self').close(); 하지만 파이어폭스에서는 '스크립트에 의해 열리지 않은 창을 닫을 수 없습니다.' 와 같은 에러가 콘솔창에 나타나고 창이 닫히지 않았다.파이어폭스에서의 문제점은 좀 더 알아봐야겠다.

jquery ui의 autocomplete를 사용하여 자동완성 기능을 기존에 구현하였었습니다.그런데 다시 확인해보니 영문과 한글 입력시에 차이점이 있었습니다.영문은 기본적으로 입력시에 aaa라고 적으면 커서가 a라는 글자의 뒤에 위치하게 됩니다. 그런데 한글은 그렇지가 않죠..그래서 autocomplete에서는 입력커서가 문자 뒤에 위치해야 한글 자동완성이 제대로 작동했습니다.자세히 말하자면 한 이라고 입력했을때 아래에 나타난 단어들을 선택하려고 DOWN 키를 눌럿을때포커스가 아래쪽으로 이동해야하는데 이동함과 동시에 해당 문자가 입력되어버리는거죠.커서를 이동하니 해당 현상은 없었습니다만..사용자가 늘상 본인이 입력하고나서 커서를 이동시키고 자동완성 기능을 이용할리가 만무하고해서 찾아보다가구버전의 auto..

jQuery와 prototype을 함께 사용할 경우 두 가지 모두 $()을 사용하여 충돌이 되어 제대로 선언되어 있는 부분에서 오류가 나거나 하는 경우가 있습니다. 이럴 경우에는 두 가지를 명확히 구분을 해주면 해결이 됩니다. $("#changeBtn").click(function(){ } //아래 처럼 $을 jQuery로 바꾸어 줍니다.jQuery("#changeBtn").click(function(){ }위 와 같이 $을 jQuery로 작성을 하거나 아래와 같이 사용하시면 됩니다. 매번 jQuery를 적기에는 귀찮으시다면 아래 처럼 jQuery를 변수에 담아놓고 사용하는 방법도 있습니다.jQuery.noConflict();var j$ = jQuery;j$("#changeBtn").click(funct..