[Tip] function 은 되도록 사용하지 마세요.
2022. 11. 4. 21:07
프로그래밍 언어/JavaScript
다양한 곳에서 사용되어 오히려 헷갈리는 기존 function 키워드 예시 1) 일반 함수로 활용 출력 결과는 다음과 같습니다. 여기서 this 는 window 를 가리킵니다. 예시 2) 생성자 함수로 활용 출력 결과는 다음과 같습니다. 여기서 가리키는 this 는 Func 클래스에 의해 만들어진 인스턴스입니다. this 가 windows 가 아니기 때문에 func 라고 하는 인스턴스에 프로퍼티 args 를 만들어서 거기에 배열을 담고 있게 됩니다. 예시 3) 객체 메소드로 활용 출력 결과는 다음과 같습니다. 객체에 있는 메소드를 실행했을 때 this 는 . 앞에 있는 bar 가 됩니다. 위와 같이 function 키워드는 일반 함수로도 객체 생성자 함수로도 객체 메서드로 활용될 수 있다 보니 범용적으로 ..
[React] useMemo 훅
2022. 10. 2. 23:04
라이브러리 & 프레임워크/React
들어가며 최근 회사에서 리액트로 개발하는 도중 무분별한 리렌더링이 발생하는 이슈를 겪었다. 대표적으로, 사용자가 문의사항을 남기는 페이지에서 문의 내용을 입력할 때마다 다른 인풋이 깜빡거리는 현상이 발생했다. 이 깜빡거리는 현상의 원인은 문의 내용 입력 시 content state 의 업데이트로 컴포넌트가 리렌더링되었기 때문이었다. 리액트는 상태의 변경에 따라 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 렌더링의 대상이 된다. 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 렌더링이 일어난다고 한다. 리액트의 특성상 content state 가 업데이트되었는데 다른 인풋 또한 불필요하게 렌더링이 발생한 것으로 예상된다. 위와 같은 리렌더링 이슈를 막기 위해 해..
[Algorithm] 이진 탐색(Binary Search)
2022. 9. 24. 20:44
알고리즘/개념
들어가며 개발자의 길을 걸은 이후 프로젝트 요구사항에 따른 기능 구현에만 초점을 맞추어 공부를 진행해왔었습니다. 그때그때 문제가 발생할 때마다 구글링을 통해 어떻게든 문제를 해결했습니다. 그러나 그마저도 다른 사람들이 해결한 방법을 적용하는 것에 급급할 따름이었습니다. 문제 해결력을 키우고 싶어 알고리즘을 공부해야 겠다고 느끼게 되었고, 이 포스팅이 바로 그 시작점입니다. 회사 생활을 하는 탓에 매일 포스팅을 올리지는 못하겠지만 앞으로 학습한 개념들을 하나씩 정리하며 포스팅할 계획입니다. 알고리즘은 개념 학습에만 그치면 겉핥기 학습 밖에 되지 않습니다. 직접 문제를 풀어보는 게 매우 중요하므로 백준 문제 풀이 또한 포스팅할 계획입니다. 여러 블로그 글을 참조하며 공부하고 정리한 내용이니 약간의 오류가 있..
[JavaScript] for, foreach, filter, map, reduce 기능 및 퍼포먼스의 차이
2022. 9. 24. 20:22
프로그래밍 언어/JavaScript
들어가며 나는 평소 백엔드 API 로부터 응답받은 데이터를 가져와 화면에 보여줄 때 forEach 함수를 자주 사용하곤 했다. for 문에 비해 가독성이 좋아서 forEach 를 사용했었다. 이외에도 케이스에 따라 filter, map, reduce 등을 사용하곤 했었다. 하지만 이들의 퍼포먼스 차이에 대해서는 아직까지 찾아본 적이 없었다. 오늘 백준에서 이진 탐색 알고리즘 문제를 풀던 중 filter, reduce 메서드 등을 사용하게 되었다. 코드가 올바르게 동작해 예상한 값이 출력되었지만, 메모리 초과로 계속 통과하지 못했다. 그러나, 이들 대신 forEach 메서드를 사용하니 메모리 초과 문제가 해결되며 통과했다. 이를 계기로 filter, reduce 메서드와 forEach 메서드가 어떤 퍼포먼..
[MySQL] Alter Table 실행 도중 발생한 Connection Lost 에러 해결
2022. 8. 23. 23:00
시행착오
[MySQL] Alter Table 실행 도중 발생한 Connection Lost 에러 해결 들어가며 post 테이블의 컬럼 viewCount 를 따로 postViewCount 테이블로 분리하기 위해 viewCount 컬럼을 post 테이블에서 삭제하고자 했습니다. 그러나, 쿼리가 현재 실행 중이라는 로딩 상태만 보여주다 결국 Error Code: 2013. Lost connection to MySQL server during query 에러가 발생했습니다. Operation failed: There was an error while applying the SQL script to the database. ERROR 2013: Lost connection to MySQL server during quer..
[Typescript] Builder Pattern
2022. 8. 7. 21:25
프로그래밍 언어/TypeScript
들어가며 개발을 하면서 빌더 패턴에 대해서 정확히 알지 못한 상태로 사용 중이었다. 모르고 쓰는 것에 답답함을 느껴 찾아보게 되었다. 두고두고 볼 용도로 공부한 내용을 정리하고자 한다. Builder Pattern 이란? 클래스의 구축을 단순화하고, 사용자가 전문 지식 없이 클래스를 구축할 때 사용하는 패턴이다. 생성 패턴(인스턴스를 만드는 절차를 추상화하는 패턴)의 일종이다. 언제 쓰는가? “The builder pattern itself is used to separate the construction of complex object from its presentation.” - Wikipedia 예를 들어 함수가 여러 개의 인자를 받고 있고, 중간 중간에 null 값을 넘겨줘야 하는 인자가 있을 경..
트랜잭션의 연산 중 COMMIT의 개념을 간략히 설명해주세요.
2022. 8. 6. 15:57
컴퓨터 과학/데이터베이스
COMMIT이란? 트랜잭션의 연산 중의 하나이다. 저장되지 않은 모든 데이터를 데이터베이스에 저장하고 현재의 트랜잭션을 종료하는 명령이다. COMMIT 명령이 실행되기 이전 작업 과정에서 오류가 생긴다면, ROLLBACK 명령을 통해 원상태로 되돌릴 수 있다. 정리 COMMIT은 트랜잭션의 연산 중의 하나이며, 저장되지 않은 모든 데이터를 데이터베이스에 저장하고 현재의 트랜잭션을 종료하는 명령이다. COMMIT 명령 실행 후 데이터를 이전 상태로 되돌릴 수 없다.
Generator
2020. 11. 23. 17:22
프로그래밍 언어/JavaScript
JavaScript에서 iterator 객체를 쉽게 구현할 수 있는 방법에는 Generator가 있습니다. Generator 란? Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. - MDN. Generator 의 특징 generator의 특징은 함수가 특정 지점에서 끝나고 다음 실행 때는 끝난 시점에서 다시 시작된다는 것입니다. function* () { // syntax; } 위처럼 *를 붙이는 함수는 generator가 됩니다. 이 함수는 특별한 함수인데 일반적인 함수와는 다르게 내부에서 yield라는 문법이 ..