본문 바로가기

전체 글

(80)
테이블 안에 체크박스 Shift 키 감지(+ Vue.js, TypeScript) 체크박스테이블 안에 체크박스 Shift 키 감지문제 → 회사에서 v-data-table 컴포넌트를 쓰는데 전체 체크박스 이외에는 기능이 없음.회사에서는 Shift 키를 누른 상태일 경우 클릭을 시작한 지점부터 마지막 클릭 지점까지 영역이체크가 동기화 되길 원함.우선 Shift키를 누르고 있는 지에 대한 확인이 필요하고 마지막 체크한 로우의 값,그리고 체크 된 값들을 넘겨줄 배열을 만들었다.const isShiftPressed = ref(false);const lastChecked = ref(null);const checkedValues = ref([]);window.addEventListener("keydown", keydownShift);window.addEventListener("keyup", key..
string 정렬 ant design table을 회사에서 쓰는데 공식문서에 나와있는 그대로 해도 string 정렬이 안되는 것... ^^ number 데이터는 당연히 잘되는데 string만 정렬 하려고 하면 먹통임. 내가 넣은 코드sorter: (a, b) => a.name - b.name  sort를 사용해서 정렬 하려고 하니까 안되는 거였다.문자열 비교 연산이 있어서 넣으니 잘 된다.  String.prototype.localCompare()refStr.localeCompare(compareString);refStr.localeCompare(compareString, locales);refStr.localeCompare(compareString, locales, options); refStr: 기준 문자열compar..
프론트엔드 이벤트루프 Event Loop 우선 스택(Stack LIFO)과 큐(Queue FIFO)에 대한 기본 지식이 있어야  하는거더라..  콜스택 Call Stack실행된 코드의 환경을 저장하는 자료 구조로 함수 호출 시에 저장되는 곳이다.코드가 실행될 때 쌓이는 곳.어떠한 함수를 저장 -> 스택에 쌓고 -> 다른 함수를 호출 -> 그 다음 스택에 쌓음그리고 가장 위에 있는 함수를 가장 먼저 처리한다. Last In First Out  콜백큐 Callback Queue함수를 저장하는 자료 구조, Call Stack과 다르게 가장 먼저 들어온 함수부터 순차대로 처리 First In First Out WebAPI브라우저에서 제공하는 API다. DOM, Ajax, TimeOut 등이 있다.CallStack 에서 실행된 비동기 함수는 Web AP..
반려동물 친화, 펫프렌들리 존 관련 서비스 1. connectmong 커넥트몽하고자하는 서비스와 가장 흡사하다. 반려동물 관련 네이버 스토어팜도 함께 운영중이다.2. wayo 와요펫 시터와 펫 교육 관련이 메인이다. 웹 서비스에 카테고리로 플레이스에 펫 프렌들리 존이 표시된다.  마음에 드는 장소는 찜 기능으로 담아둘 수 있다.
[Programmers] JavaScript 순서 쌍의 개수 function solution(n) { let answer = 0; for(let i=1; i=1; j--) { if(i*j == n) { answer++; } } } } return answer;}  처음에  for문만 써서 작성했는데 코드 실행에서는 잘 됐다가 제출하면 시간 초과가 떴다.... 구글링 해보니 우선 첫번째 매개변수가 n으로 나눠진다면 약수이기 때문에if문을 넣었더니 해결 되었다.   수학을 잘했더라면... ^_^
[Programmers] JS 가위바위보 function solution(rsp) { let answer = ""; for(let i=0; i  # 다른 사람의 풀이 1:1로 대응되니까 map으로 푸는 거 정말 좋은 방법이다 ㅎㅎ
입사 처음 후 부딪혔던 문제들 정리 2022년에 첫 입사 후 나는 사수를 정말 잘 만났다.사수 본인도 새로운 프로젝트에 적응하랴 새로운 사람들과 적응하랴,또 나랑 입사한 물음표 살인마도 아니고 물음표 강도 동기때문에 아주 고생이셨을텐데물어보는 질문마다 옆방 자리였던 내 자리까지 와서 답변 주시고 본인이 직접 테스트 해보시고솔루션을 주셨다. 지금 생각해도 감사합니다.... 2022/7/27내가 구현하고자 했던 기능문제점해결 방법인풋들을 가지고 와서 input 안의 값이 하나라도 length 해당 boolean 값에 따라 button의 disable를 컨트롤 해야 함.1. 각 인풋값을 훑고 각각 true나 false는 잘 가지고 와짐. 데이터도 잘 가지고 와지는데 전체를 훑어서 false를 반환하지는 못함. 2. for in에만 꽂혀서 그랬던..
프론트엔드의 WebPack 여러가지의 모듈 (왼쪽) 들을 하나의 번들(like 꾸러미)로 만들어주는 역할.이렇게 번들링 된 파일은 웹 서버에 정적 파일로 제공된다. 그래서 웹팩이 Module Bundler라고 불린다. 웹팩의 장점1. 다양한 모듈 형식을 지원하여  웹 페이징 로딩 속도를 개선2. JS파일 이외에도 그림의 왼쪽에 보이는 다양한 파일(의존성을 가진)을 로드할 수 있어 풍부한 웹 페이지 제작 가능3. 번들링 결과물에 대한 후처리 작업을 수행하여 최적화 작업을 쉽게 수행할 수 있다. 4. 코드를 적절히 분할하여(Code Splitting)초기 로딩  속도를 개선할 수 있다.5. 브라우저를 새로고침 하지 않고 변경 사항을 즉시 반영하여 개발 효율성을 높일 수  있다.6. 파일이 변경될 때마다 자동으로 번들링 해주므로 개발자..
사전과제 제출 1. JavaScript ES6+ 기능문제: JavaScript ES6 이후에 추가된 주요 기능 중에서, 템플릿 리터럴, 화살표 함수, 스프레드 연산자를 설명하고, 이러한 기능들이 JavaScript 프로그래밍에 어떤 이점을 제공하는지 구체적인 예를 들어 설명해 주세요. 템플릿 리터럴 백틱을 이용하여 여러줄의 문자열을 쉽게 작성하여 런타임 시점에 일반 스크립트 문자열로 처리 변환한다. 가독성이 좋고 코드가 깔끔해진다.let name = "철수";let age = 12;let templateMessage = `안녕하세요, ${name}입니다. 나이는 ${age}살입니다.`;화살표 함수(Arrow Function) function 키워드를 사용하지 않고 => 를 사용해서 함수를 선언한다. 한줄일 경우 중괄호..
가비지 컬렉션? 가비지 컬렉터? 면접 때 가비지 컬렉션에 대해 질문이 있었다는 걸 듣고 충격먹음. 왜냐면 내가 모르기 때문에 ^____________^사실 C언어를 공부하면서 가비지컬렉션에 대해 진짜 어렴풋이 알듯말듯 (모른다는  뜻)했는데 이번 기회에 제대로 찾아서 정리해보고자 작성하는 블로그.우선 개발에서의 Garbage란 못쓰게 된 메모리, 해제하지 않은 메모리를 뜻한다. (Like 동적할당)C언어 같ㅇ은 경우는 프로그래머가 메모리를 할당한 뒤 수동으로 햊까지 해줘야 하는 방식이었어서 메모리  누수가 생기거나 버그가 양산되고는 했다.C언어에서는 malloc 이라는 걸로 메모리 관리를 한다.malloc 또는 calloc을 호출하게 됨면 힙 영역에 필요한 만큼의 메모리 공간을 확보하고 이후에 그 메모리 공간의 시작 위치를 포인터로 반..