티스토리

블로그 홈

-

구독자: 0

구독하기 방명록

인기글

안경점 vs 안과 하드렌즈 맞추기, 하드렌즈 이물감 없애기 경험담, 하드렌즈 이점공감수0댓글수0조회 14
[PHP] 문자열 자르기 - substr(), mb_substr()공감수0댓글수0조회 7
[PHP] 문자열 비교하기 - ===, strcmp(), strcasecmp(), strncmp()공감수0댓글수0조회 6

주요 글 목록

[JavaScript] visibilitychange 이벤트를 통해 세션 타임아웃 동기화하기글 내용
개요setInterval(), setTimeout()을 이용하여 세션 타임아웃을 구현하는 경우 Page Visibility API로 인해 예상된 결과가 출력되지 않을 수 있습니다.이를 해결하기 위해 visibilitychange 이벤트를 이용하여 세션 타임아웃을 동기화하는 방법을 공유하고자 합니다. setInterval() 함수를 통해 세션 타임아웃 기능을 구현하곤 합니다.세션 타임아웃을 5분으로 설정된 화면에서 사용자는 3분 동안 브라우저를 최소화하였습니다.다시 화면을 활성화하였을 때 예상된 2분과 상이한 결과를 출력되게 됩니다. 다음과 같은 현상은 브라우저 비활성화(탭 이동, 최소화 등)하였을 때 Page Visibility API가 브라우저 리소스를 절약함에 발생하게 됩니다.이를 해결하기 위해 v..
좋아요0
댓글0작성시간2024. 10. 6.
[JavaScript] 숫자 타입의 정수와 실수의 관계글 내용
자바스크립트에서는 추상적 비교 연산인 == 키워드를 제공한다.추상적 비교 연산을 이용하여 값을 비교한다면 의도치 않은 결과값을 반환할 수 있다.1 == '1' // true 의도치 않은 결과를 방지하기 위해 ES5에서는 보다 엄격한 비교 연산인 === 키워드를 제공한다.1 === '1' // false 정수와 실수를 비교 연산하면 결과값은 true일까 false일까?1 === 1.0 // true 자바스크립트에서 숫자 타입은 모두 실수로 처리되기때문에 정답은 true이다.정수가 아닌 실수로 처리되기 때문에 정수끼리 나누기 연산을 하더라도 실수가 출력된다.16/5 // 3.2 또한, 자바스크립트에서는 2진수, 8진수 16진수를 표현하기 위한 타입을 제공하지 않기 때문에 모두 10진수로 표현된다.let bi..
좋아요0
댓글0작성시간2022. 8. 26.
[JavaScript] 변수 선언과 값 할당의 메모리 구조글 내용
JavaScript에서 변수 선언과 할당에 따른 메모리 구조는 다음과 같습니다. JavaScript는 변수 선언과 값 할당을 함께 표현하여도 변수 선언과 할당을 나눠서 표현합니다. // 개발자가 작성한 코드 let value = 'hello'; // 자바스킯트 엔진이 실행하는 코드 let value = undefined; value = 'hello'; 같은 변수에 값을 할당하기 때문에 사용했던 메모리 공간에 값을 할당할 것이라고 생각할 수 있지만 실제로는 새로운 메모리 공간을 생성하여 값을 저장합니다. 새로운 값을 할당하여도 새로운 메모리 공간을 생성하여 값을 저장합니다. 이후 참조되지 않은 불필요한 값들은 가비지컬렉터에 의해 정리됩니다.
좋아요0
댓글0작성시간2022. 8. 26.
[JavaScript] 호이스팅(hosting)의 이해글 내용
JavaScript에서 var 키워드를 사용하는 경우 호이스팅을 조심해야합니다. 즉, 변수 사용 시 예상하지 못한 결과를 반환할 수 있습니다. 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. https://developer.mozilla.org/ko/docs/Glossary/Hoisting 호이스팅 - 용어 사전 | MDN JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다 developer.mozilla.org 호이스팅으로 인해 발견되는 문제점을 보완하기 위해 ES6에서..
좋아요0
댓글0작성시간2022. 8. 26.
[JavaScript] 배열 내 특정 값 찾기 - find(), includes() ,Set 객체의 has()글 내용
find() 메서드를 통해 배열 내 특정 값 찾기const array = [1, 2, 3, 4];array.find(data => data === 1); // 1array.find(data => data === 3); // 3array.find(data => data === 5); // undefinded주어진 조건을 만족하는 값을 출력한다.주어진 조건을 만족하는 값이 존재하지 않을 경우 undefinded를 리턴한다.includes() 메서드를 통해 배열 내 특정 값 찾기const array = [1, 2, 3, 4];array.includes(1) // truearray.includes(3) // truearray.includes(5) // false값이 존재하는 경우 true를 리턴한다.값이 존재하..
좋아요0
댓글0작성시간2022. 7. 19.
[JavaScript] Set 객체를 통해 배열 중복 제거글 내용
const array = new Set([1, 2, 3, 3, 2, 1]); console.log(array) // {1, 2, 3}
좋아요0
댓글0작성시간2022. 7. 19.
[React][Next.js] <Link></Link>를 통한 라우터 기능 - <Link> 내부에 <a> 태그를 넣는 이유글 내용
사용 방법 import Link from 'next/link' function Home() { return ( About ) } export default Home Next.js에서 라우터 기능은 다음과 같이 사용합니다. ... 형식을 사용하지 않는 이유 React는 SPA(Single Page Application)구조를 가지고 있어 하나의 페이지에서 모든 행위들이 일어나야하는데 About us 형식을 사용하게 되면 새로고침(페이지 이동)을 하기 때문입니다. 내부에 태그를 넣는 이유 About 위와 같이 태그를 넣지 않아도 넣은 것과 외관상 차이가 없으며 기능도 정상적으로 동작하는 것을 확인할 수 있습니다. About 그러나 위와 같이 태그 내부에 class 요소를 추가하여 HTML를 랜더링하면 cla..
좋아요0
댓글0작성시간2022. 6. 30.
[react-router-dom][v6] URL 파라미터를 통해 하위 경로로 이동하기글 내용
영화 리스트를 보여주는 페이지와 특정 영화의 상세 정보를 보여주는 페이지를 react-router-dom 패키지를 통해 구현하고자 했다. 다음과 같이 구현해도 정상적으로 동작하였지만 'movies'가 공통적으로 들어가기 때문에 하나의 그룹으로 경로를 묶고자 하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 따라서 다음과 같이 'movies'를 그룹화하여 구현하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 처음에는 다음과 같이 구현하였지만 정상 작동하지 않았다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 공식 문서에서 어떤 차이가 있어 정상 동작하지 않는지 확인하고자 하였으나 해당 페이지에는 별도의 내용이 기술..
좋아요0
댓글0작성시간2022. 6. 18.
useState에서 이전 값을 참조하여 state값 변경하기글 내용
버튼을 클릭하여 이전 state 값을 2로 업데이트 하는 방법 올바른 방법 정상적으로 2씩 state가 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState((prev) => prev + 1); useState((prev) => prev + 1); }; {state} Count Up } 올바르지 않은 방법 1씩 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState(state + 1); useState(state + 1); }; {state} Count Up } 왜 1씩 증가되는가..
좋아요0
댓글0작성시간2022. 6. 6.
mongoose에서 화살표 함수(arrow function)이 동작하지 않는 이유글 내용
javascript에서 제공하는 this는 예외적으로 화살표 함수를 사용할 수 없다. 문제 발생 회원가입 API 호출 시 결과가 false인 경우 오류 메시지가 나오도록 구현하였는데 따로 오류 메시지가 출력되지 않음. 오류 메시지가 출력되지 않은 이유는 아직 파악하지 못함. 원인 결론, this는 화살표 함수를 사용하지 못한다. moogoose 패키지의 userSchema.pre() 함수 사용하여 비밀번호 암호화하는 기능을 구현 비밀번호 정보르르 불러오기 위하여 스키마 정보를 this로 조회 userSchema.pre("save", (next) => { let user = this; if (user.isModified("password")) { // 비밀번호를 암호화 bcrypt.genSalt(saltR..
좋아요0
댓글0작성시간2022. 1. 16.
[CentOS] 방화벽 상태 조회, 해제, 재시작글 내용
방화벽 상태 조회 firewall-cmd --state 방화벽 해제 systemctl stop firewalld 방화벽 재시작 firewall-cmd --reload
좋아요0
댓글0작성시간2021. 9. 23.
[PHP] CURL를 통해 POST 형식으로 body 전송 - JSON 형태로 전송글 내용
json 형태로 body를 전송하기 위해서는반드시 header에 'Content-Type: application/json'을 추가해줘야합니다. header를 추가하지 않고 query형태(?data1=test1&data2=test2)로도 전송이 가능합니다.
좋아요2
댓글0작성시간2021. 8. 6.
[PHP] CURL를 통해 header 전송
좋아요1
댓글0작성시간2021. 8. 6.
[JavaScript] reverse 함수글 내용
reverse()는 배열의 순서를 반전시킵니다. const num = [10, 20, 30, 40, 50]; const value = num.reverse(); console.log(value); // [50, 40, 30, 20, 10]
좋아요0
댓글0작성시간2021. 7. 11.
[JavaScript] reduce() 함수글 내용
간단한 사용 예 const num = [10, 20, 30, 40, 50]; const value = num.reduce((a, b) => { return a + b; }); console.log(value); // 150 상세 설명 및 예시 reduce 함수는 배열의 각 요소에 대해 함수를 실행하고 하나의 결과값을 반환합니다. arr.reduce(callback[, initialValue]) callback은 총 네 가지 인수를 사용할 수 있으며 두 가지의 필수 옵션과 두 가지의 선택 옵션이 존재합니다. 인수 이름 설명 필수 accumulator callback의 반환값을 저장 initalValue를 설정했을 경우 최초 호출 시 intalValue 값을 제공 initalValue를 설정하지 않았을 경우..
좋아요0
댓글0작성시간2021. 7. 11.
[TypeScript] 클로저(closure) - 유효 범위글 내용
클로저 클로저는 지속되는 유효 범위(persistence scope)를 의미합니다. const add = (x: number) => {// 바깥쪽 유효 범위 시작 return (y:number): number => {// 안쪽 유효 범위 시작 return x + y;// 클로저 }// 안쪽 유효 범위 끝 }// 바깥쪽 유효 범위 끝 console.log(add(1)(2));// 3 다음과 같은 예에서 함수 안쪽 유효 범위만 놓고 본다면 'x'는 존재하지 않는 변수입니다. 이처럼 범위 안에서 의미를 알 수 없는 변수를 자유 변수(free variable)라고 합니다. 타입스크립트에서는 자유 변수가 존재한다면 바깥쪽 유효 범위에서 'x'라는 변수를 찾아 컴파일합니다. 따라서, 다음과 같이 사용하는 경우 'a..
좋아요0
댓글0작성시간2021. 7. 10.
[TypeScript] 커리(curry) - 함수에 가로 여러개 사용하는 경우글 내용
커리(curry)란 함수형 프로그래밍 언어에서 커리는 함수 호출 연산자를 연속해서 사용합니다. 일반적인 함수는 호출하는 경우 '함수명(변수)'와 같이 사용합니다. 커리를 이용하는 경우 다음 예시와 같이 '함수명(변수)(변수)'와 같이 사용할 수 있습니다. const add = (x: number) => { return (y:number): number => { return x + y; } } console.log(add(2)(3)); // 5 다음과 같이 부분적으로도 사용할 수 있습니다. const add1 = add(1); console.log(add1(2)); // 3 부분적으로 사용할 수 있는 이유는 클로저(closure)라는 유효 범위를 가지기 때문입니다. [TypeScript] 클로저(closu..
좋아요0
댓글0작성시간2021. 7. 10.
[TypeScript] 고차함수(high-order function)글 내용
2021.07.10 - [TypeScript] - [TypeScript] 커리(curry) - 함수에 가로 여러개 사용하는 경우 고차 함수란 어떤 함수가 또 다른 함수를 반환할 때 고차 함수라고 합니다. 1차 함수 함수가 아닌 단순히 값은 반환 2차 함수 1차 함수를 반환 n차 함수 n-1차 함수를 반환 1차 함수 const inc = (x: number): number => x + 1; console.log(inc(1));// 2 2차 함수 const add = (x: number) => { return (y:number): number => { return x + y; } } console.log(add(2)(3)); // 5 2차 함수를 호출할 때 'inc(2)(3)'과 같이 사용했는데 이는 커리(..
좋아요0
댓글0작성시간2021. 7. 10.
[JavaScript] setInterval, clearInterval 사용법글 내용
setInterval 함수는 호출 주기에 따라 콜백 함수를 동작시키며 기본 구조는 다음과 같습니다. setInterval(콜백 함수, 호출 주기) clearInterval 함수를 이용하면 setInterval 함수를 멈출 수 있습니다. const period = 1000; let count = 0; console.log('program started...'); const id = setInterval(() => { if(count >= 3) { clearInterval(id); console.log('program finished...'); } else { console.log(++count); } }, period); // 1초마다 출력 // === 실행 결과 === // program started...
좋아요0
댓글0작성시간2021. 7. 2.
[Typescript] tsconfig.json 구성요소글 내용
//tsconfig.json { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es5", "moduleResolution": "node", "outDir": "dist", "baseUrl": ".", "sourceMap": true, "downlevelIteration": true, "noImplicitAny": false, "paths": {"*": ["node_modules/*"]} } } compierOptions tsc 명령 형식의 옵션 즉, 타입스크립트에서 자바스크립트로 변환하는데 사용되는 옵션 module tsconfig.ts 파일에서 compilerOptions 항목의 module 키는 동작 대상 ..
좋아요0
댓글0작성시간2021. 6. 30.

문의안내

티스토리
로그인
고객센터