짧은코딩

해결법 이 문제에서 난쟁이가 아닌 2명을 찾기 위해서는 일일히 다 찾아봐야 한다. 따라서 처음 배열의 모든 합을 구하고 다른 난쟁이를 찾기 위해서 이중 for문을 사용한다. 그리고 2개씩 고르면서 미리 구해놨던 합에서 for문에서 찾은 2개의 값을 빼서 100이되면 정답이다. 코드 splice를 사용하면 배열에서 값을 제거할 수 있다. 그리고 뒤에꺼부터 제거해야 인덱스 번호에 영향을 안준다.

ERD(Entity Relationship Diagram)는 DB 구축의 뼈대이며 릴레이션 간의 관계를 정의한 것이다. 서비스를 구축할 때 ERD를 고려하지 않으면 큰일날 것이다. ERD의 중요성 ERD는 시스템 요구 사항을 기반으로 작성된다. 그리고 이를 기반으로 DB 구축한다. DB 구축 후에도 디버깅, 리팩토링 등에 유용하다. 하지만 이런 ERD도 정형 데이터는 구성할 수 있지만 비정형 데이터는 표현할 수 없다. 예시 -승원 영업부서의 ERD 요구 사항 1. 영업 사원은 0~n명의 고객 관리 2. 고객은 0~n개의 주문 넣을 수 있다. 3. 주문에는 1~n개의 상품이 들어간다. 정규화 과정 정규화 과정은 릴레이션 간의 잘못된 종속 관계로 인해서 DB에 이상 현상이 일어나는 것을 막아준다. 그 뿐만 ..

Math.ceil() Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 무조건 올림해준다. for문 -범위로 구하기 for (let i = 1; i

내 풀이 -해결법 날짜와 자동차 번호를 각각 문자열로 바꾸고 마지막 문자를 가져와서 비교해준다. -코드 toString과 slice를 이용해서 풀었다. 효율적 풀이 -해결법 날짜와 차 번호 모두 10으로 나눈 나머지 값으로 비교한다. -코드 이렇게 간단하게 나머지 연산자를 이용해서 풀 수 있다.

SCSS SCSS는 기본적으로 CSS preprocessor이다. Sass나 Scss는 같은 방식으로 사용한다. 사람들이 sass나 scss를 말할 땐 둘 다 거의 같다. scss는 css를 programming language처럼 만든다. -gulpfile.bable.js gulpfile.bable.js이 파일 안에서 const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "dest/css", }, }; src를 보면 styles.scss를 계속 관찰하고 있다. 그리고 이 파일에서 일어나는 일는 css로 컴파일된다. 그러면 styles.scss에서 수정하면 styles.css가 바뀐다. variables.scss 이..

npm 우선 npm은 Node Package Manager이다. JS를 위한 패키지 관리 툴이다. npm은 Node.js에 내장되어 있다. 결국 이런 관리 툴인 npm을 이용해서 공개되어 있는 모듈을 쉽게 설치하고 사용할 수 있다. -package.json package.json은 프로젝트 정보와 의존성을 관리한다. 어떤 패키지를 사용하고 버전도 확인이 가능하다. yarn yarn은 npm과 같은 기능을 수행하지만 yarn이 좀 더 가볍다. yarn은 페이스북에서 만든 JS 패키지 매니저이다. yarn은 npm의 단점을 보완하기 위해서 만든 매니저 툴이다. npm의 단점으로는 속도(performance), 안정성(stability), 보안성(security) 등이 문제이다. -속도 따라서 yarn은 다운..

배포 -webpack-bundle-analyzer npm i webpack-bundle-analyzer npm i -D @types/webpack-bundle-analyzer 이걸 깔아서 사용한다. 프론트엔드 개발자라면 webpack에 bundle-analyzer을 까는게 좋다. 왜냐하면 용량을 확인할 수 있기 때문이다. 그래서 배포 전 압축했을 때 용량을 확인할 수 있다. 이것은 개발 모드와 배포 모드로 나눠서 사용해야 한다. if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); ..

SWR Devtools SWR은 디버깅이 쉽지 않다. 따라서 유용한 페키지를 설치해야한다. npm i @jjordy/swr-devtools 이렇게 설치할 수 있다. -공식 문서 https://www.npmjs.com/package/@jjordy/swr-devtools @jjordy/swr-devtools Devtools for SWR. Latest version: 2.2.0, last published: 9 months ago. Start using @jjordy/swr-devtools in your project by running `npm i @jjordy/swr-devtools`. There are no other projects in the npm registry using @jjordy/swr-..

안 읽은 메시지 수 구하기 안 읽은 메시지 수를 구하는 것은 생각보다 어렵다. 내가 어디까지 읽었는지와 그 이후로 몇 개가 쌓였는지도 알아야 한다. 얼마나 쌓였는지는 API로 알 수 있다. 어디까지 읽었는지는 어떤 채널이나 디엠에 들어갔을 때, 어디까지 읽었는지 저장을 해야한다. 또 어디에 저장할지도 생각해야한다. 크게 DB에 저장할 수 있고 아니면 로컬 스토리지에 저장할 수 있다. 이걸 DB에 저장하면 서버가 부담스러울 수도 있다. 따라서 로컬 스토리지에 저장하는 방식을 사용하겠다. 따라서 EachChannel, EachDM을 만들어서 하나하나 컴포넌트로 만들었다. 채널이나 DM 클릭했을 때를 기록해주면 된다. -ChannelList {!channelCollapse && channelData?.map(..

이미지 업로드 onDragOver 하는 동안 사진을 끌고 다닌다. onDrop는 사진을 놓는다. 따라서 onDragOver는 계속 호출이된다. {dragOver && 업로드!} -onDragOver const onDragOver = useCallback((e: any) => { e.preventDefault(); console.log(e); setDragOver(true); }, []); 이렇게 해서 '업로드!'를 화면에 띄워준다. -OnDrop const onDrop = useCallback( (e: any) => { e.preventDefault(); console.log(e); const formData = new FormData(); //dataTransfer 안에 이미지의 정보가 있다. 브라우저..