고지은고

조 프로젝트의 매장관리 페이지에서 매장을 대표할 태그를 작성하는 기능이 존재한다. 오늘은 이 부분에 대한 html 마크업과 js 코드를 수정해봤다 기존의 html 마크업 기존의 js 코드이다. 여기서 코드의 의문점은 1. 왜 이 부분만 window.onload 가 들어가야 하는지 2. 밑에 이미 중복되는 코드 존재 이 부분이었다. 알고 보니 window.onload로 따로 코드를 작성해주지 않으면, 태그를 처음 작성할 때는 태그의 텍스트와 삭제할 수 있는 X 버튼이 한 묶음으로 나오지만, 새로고침을 하면 이 두 개가 정말 분리되어 버리는 문제가 발생한다는 점이었다. 기존 태그의 텍스트도 버튼 형식인데, 부트스트랩의 close 버튼을 가져와서 쓰려다 보니 이 또한 버튼 형식으로 작성했던 것이다. 그래서 c..

최종 프로젝트가 끝난 지 벌써 이주가 되었다 3주라는 기간의 프로젝트를 진행하는 동안 분명 프로젝트의 완성도를 위해 급하게 넘긴 코드들이 있을 테고, 이 부분들을 찾아서 수정하고 싶어서 오랜만에 우리 프로젝트의 코드를 오픈했다 (!!) 내가 작성하지 않은, 다른 조원들의 코드를 읽는 게 쉽지는 않지만 적어도 한 번은 싹 다 흐름을 제대로 이해해야겠다는 생각이 들어 차근차근 코드의 흐름을 따라가다가 발견했던 setTimeout 함수 이 코드는 매장 주문 확인 페이지에서 가장 상단에 10초의 카운터가 흐르면서 새로고침 되는 코드이다 현재 countDown으로 중복되는 3가지의 함수가 있어서 이를 하나의 countDown으로 줄였더니 10초 후 -> 9초 후 까지 카운트가 표시되고 그 이후로 표시가 안되다가 ..

1. basic basic 타입은 number, string, boolean, undefined, null, any, unknown, never, void, object 이 존재한다. 보통 변수를 선언할 경우 const name:string = '이름'; const num:number = 4; 이렇게 변수명:type 형식으로 작성이 가능하다 만약 변수에 하나의 타입이 아닌 다른 타입도 함께 받고 싶다면, let name: string | undefined; 로 작성이 가능하다. 여기서 | 는 or을 의미한다 void는 생략이 가능하며 any, unknown은 어떤 타입이든 다 담을 수 있지만 이러한 이유로 사용을 권장하지 않는 편이다 never은 함수에서 절대 리턴되지 않는 (ex. 에러를 던지거나 wh..

인터랙티브 디벨로퍼님의 유튜브 강의를 보다가 발견 한 댓글. 별 의심 없이 보고 있었다가 댓글을 보고 코드를 다시 봤다 if의 this.point.unshift는 배열의 앞에 새로운 값을 차곡차곡 넣어주고 else if의 this.point.splice는 배열에서 값을 잘라내주는데, 밑의 글을 참고하면 splice(-1)이므로, start값이 음수라 배열의 끝에서부터 요소를 세면서 deleteCount는 따로 존재하지 않기 때문에 (생략) start부터의 모든 요소를 제거한다 하지만 위에서 if를 충족하면 else if 조건문으로 넘어가지 않기 때문에 if의 코드 블록인 unshift만 계속 실행되어 배열 앞의 길이가 계속 추가만 되는 것 (=배열의 길이가 계속 길어짐) 그리고 if문을 충족하였으므로 위..

slice는 이미 존재하는 배열을 똑같이 복제하기도 하고, 존재하는 배열에서 원하는 인덱스만큼 따로 추출해서 새로운 배열로 만들어준다 splice와 slice는 언뜻 비슷해 보이지만 이 둘의 가장 큰 차이점은 splice() 메서드는 기존에 존재하는 배열의 요소를 수정 및 삭제 추가를 하면 원본 배열 자체를 수정하게 되는 것이며 slice() 메서드는 수정 및 삭제를 해도 원본 배열이 아닌 복사본을 만들어서 새로운 배열 객체로 반환해준다. 그래서 위에서 기존 배열에서 순서를 바꾸지만 원본 배열 자체에 영향을 주고 싶지 않다면 array 다음에 slice로 복제본을 하나 생성 후, 이 복제본에 sort 메서드를 통해 새롭게 정렬해주면 된다 * a-b는 오름차순 / b-a는 내림차순 숫자는 위처럼 a-b로 ..

요즘 제로초님의 자바스크립트와 리액트 강의를 번갈아 듣고 있는데, array.fill.map 함수에서 정확히 fill의 쓰임을 본 적이 없어서 찾아보다가 전체적으로 함수의 흐름을 정리해보면 좋겠다는 생각이 들었다. Array(45)를 콘솔 창에 쳐보면 텅텅 빈 45개의 배열이 생성된다. 여기서 배열의 모든 공간에 숫자 1을 넣고 싶다면, Array(45). fill(1)이라고 작성하면 된다. 그럼 위에 콘솔 창에 찍혀있는 것처럼 배열에 1이 45개가 들어간다. fill() 메서드는 arr.fill(value [, start [, end]]) 의 구문으로, value : 배열을 채울 값 start : 시작 인덱스 end : 끝 인덱스 ( end가 3이면, 3은 포함되지 않는다 ) 로 작성이 가능하다. 만약..