본문 바로가기

분류 전체보기

 (173)
ES6로 문자열의 바이트(Byte) 구하기 Share Links는 반응형 바둑판 레이아웃(항목의 가로길이는 고정, 세로길이는 유동적)를 사용합니다. 한마디로 말해서 핀터레스트(Pinterest)의 레이아웃입니다. `flex`나 `grid`로 하려했으나 실패해 결국에는 자바스크립트의 힘을 빌렸습니다. 처음에 핀터레스트는 어떻게 구현한건지 살펴보니 일일이 `top`과 `left`를 때려박아서(...) 만들어져있었습니다. 여하튼 한번 만들어놓고 잘 썼었습니다만, 태그 목록이 길어지면 `overflow:auto` 시켜서 가로스크롤로 표현하는 대신, 세로를 `height:auto`로 설정해 스크롤 없이 표현하는 것으로 레이아웃을 변경하려고 했습니다. 또한 제목이 길어지면 역시 태그처럼 스크롤을 생성하지 않게 레이아웃을 변경하려했습니다. 이제 auto로 늘..
JavaScript array delete item(Array에서 특정 인덱스의 아이템 제거) 자바스크립트에서 특정 Index에 위치하고 있는 Item을 제거하는 함수function deleteItem(array,deleteIndex) { return array.reduce((prev, now, index) => index !== deleteIndex ? [...prev, now] : prev, []); },특정 inedx의 경우에는 now를 추가해 반환하지 않고, 그대로 prev를 반환한다.
자바스크립트에서 Python range을 비슷하게 사용하는 방법 단순히 for(let i =0;iconsole.log(index)); //0 1 2 3 40 ~ n-1 까지의 수가 필요한 경우(map등을 사용해야 하는 경우)Array.from(Array(n).keys()).map(v=>v) // 0 1 2 3 4m ~ n -1 까지의 배열(m=5, n=10)Array.from(Array(n - m).keys()).map(v=>v+m).map(v=>v); // 5 6 7 8 9 물론 더 좋은 방법이 있을 수도 있다.
Chrome DevTools 다크 테마(Dark Theme) 크롬 개발자 도구를 다크 테마로 사용하는 방법은 간단하다.먼저, 크롬 개발자 도구에서, 점 세 개가 세로로 나열된 버튼을 누르고, settings를 누른다.아니면, 개발자 도구에서 F1키를 눌러 접근 가능하다. Preferences 탭에 Appearance 제일 맨 위에 Theme : Light가 있을 것이다.이제 Light를 Dark로 바꾸면 다크 테마가 적용된다.
checkRequest- 요청이 올바른지 검사하는 함수 이번에 만든 함수는 checkRequest라는 함수이다.이 함수는 예를들면 POST요청이 들어왔을 때, session과 key에 접근해서 데이터를 불러와야한다면, 사용자의 요청에 session과 key가 있는지 검사를 해야한다. 근데 이러한 요청 인자가 한 두개가 아니라면, if문이 너무 길어지게 된다. 그래서 만든 함수가 아래와 같은 함수이다.위의 함수에서 data는 Object.keys(req.body)이고, keys는 접근해야하는 key값의 목록이다. 위의 예시를 이용해 함수를 호출한다 하면, checkRequest(Object.keys(req.body), ['session', 'key'])이다. 위의 함수의 원리를 살펴보자면, 먼저, data 안에 keys의 값을 하나씩 뽑은 값이 있는지 확인하고..
CSS) 한가운데 div 배치하기(가로세로중앙정렬) 예를 들어 아래와 같은 코드가 있을 때,article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다..container{ display:flex; justify-content:center; align-items:center; }그러나 이는 실패한다.가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?한줄만 추가해주면 된다..container{ display:flex; justify-content:center; align-items:center; height:100vh }vh는 viewport height의 약자이다.이제 .container는 사용자가 ..
Firebase로 nuxt.js 배포하기 1. generate 커맨드로 dist 파일 생성2. firebase-tools 설치(npm install firebase-tools -g)3. firebase login으로 구글 로그인4. firebase deploy5. 이때, firebase.json의 hosting을 'dist'로 바꿔주면, dist폴더의 내용이 업로드 된다.
SSH 포트를 막고 연결을 끊었을 때 복구방법 예를 들어 ufw deny 22 같은 명령어를 칠 사람은 거의 없겠지만, 방화벽을 켜놓고 ufw allow 22를 안한 경우도 있을 것이다. 게다가 호스팅을 사용하는 경우에는, 더욱 곤란할 수 밖에 없다. 그렇지만, AWS를 사용할 때에는 좋은 방법이 있다.먼저 해당 EC2 인스턴스의 디스크를 복사해서 다른 ec2 인스턴스로 연다. 여기서 다른 ec2 인스턴스를 여는것은, 다른 추가 디스크로 열어야한다그 다음, 해당 인스턴스로 ssh 접속을 한다./etc/ufw/ufw.conf를 편집기로 열고 ENABLED=no로 바꾼다.그 다음 해당 디스크를 바탕으로 원래 쓰던 서버의 디스크 이미지를 교체한다

티스토리툴바