배경 저번에 글을 한번 올렸었는데 설정이 조금 바뀐것들이 있어서 다시 글을 쓴다. 청크라던가 코드스플리팅은 아직 적용하지 않았다. 너무 어렵다. 진짜... 쉬운게없네... 간단하게 코드와 설명만 적겠다. 개념은 저번글을 참고하면 된다. 버전 package.json "dependencies": { "@babel/cli": "^7.14.8", "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "babel-cli": "^6.26.0", "babel-loader": "^8.2.2", "compression-webpack-plugin": "^9.0.0", "core-js-pure": "^3.16.1", "css-loader": "^6.2.0", "css-min..
배경 프로젝트를 시작할 때 가장 먼저 하는 것은 프로젝트 구조를 짜는 것이다. 특히 팀프로젝트를 하게 되면 이 부분에서 충돌이 생기기도 한다. 주니어 수준에서 무엇이 옳은지 판단하는 것은 쉽지 않다. 시니어 개발자라고 할지라도 당연히 프로젝트가 어떤 프로젝트인지에 따라서 그리고 어떤 목적을 가지고 진행하는지에 따라 구조가 달라진다. 나는 정호영님이 추천한 깃허브를 보고 참고를 많이 했다. https://github.com/santiq/bulletproof-nodejs 공통스타일 prettier 먼저 코딩 스타일을 맞춰야 한다. 혼자서 프로젝트를 하더라도 prettier정도는 적용하는 것을 추천한다. 기본 vscode에 설정할수도 있지만 여러명이서 작업할 때는 아래와같이 루트경로에 파일을 만들어준다. 아래..
개요 보통 서버에서 db를 연결해서 쿼리문을 직접적으로 사용하지 않고 orm을 사용한다. 사실 나는 지금도 쿼리문이 더 편한것같다. 하지만 orm을 많이 사용하는 추세다. 일단 orm을 사용하지 않으면 쿼리문이 굉장히 지저분하게 보인다. 효율적이고 빠른 쿼리문을 짜는 것도 중요하지만 가독성도 그만큼 중요하다. 그래서 한방쿼리보다 그냥 여러번 쿼리를 만드는 방법을 사용하기도 한다. 어쨋든... sequelize는 책을보고 사용해봤고 우아한테크캠프에서도 사용을 했다. 나름대로 사용법을 익혔다고 생각하고 다른 orm을 사용해보고 싶었다. 우아한테크캠프의 마지막 프로젝트를 보니 우리팀을 제외한 모든팀이 typeorm을 사용했다. 그리고 개발바닥의 향로님도 typeorm을 사용하는것을보고 한번 공부해봐야겠다는 생..
일단 가장 간단한 방법은 a태그에 해시태그를 사용하는 방법이다. 이 방법의 단점은 같은 태그를 선택했을 때 화면이 이동하지 않는다. 그럴때에는 scrollIntoView를 사용하자. 사용법은 어렵지 않다. 문서를 한번만 보면된다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org 간단한 예시를 보겠다. behavior smooth를 하면 부드럽게 움직인다..
배경 사실 예전부터 무한 스크롤에 관심이 있었다. 프로젝트를 만들다보면 몇가지 갈림길에 놓이는 경우가 많다. 내가 경험한 바로는 인증에 세션, 토큰(둘다 사용하기도 한다), 스타일링에 styled-components, scss, css module, 게시판 구현방식에 무한 스크롤, 페이징 등이 있다. 나머지는 다 해봤는데 무한 스크롤은 한번도 해본적이 없어서 꼭 해보고 싶었다. 무작정 생각해보기 서버 일단 어떻게 할까 생각을 해봤다. 서버부터 생각을 해보자. 정렬방법에는 여러가지가 있지만 일단은 가장 기본적인 pk desc로 생각을 해보자. 처음에 위에서부터 데이터를 가져오고 그다음에는 id를 받아서 where문에 id보다 작은값을 적용하면 끝날것같다. 그런데 이 방법으로하면 인기순같은 정렬을 해결할 수..
옵저버패턴이란 컴포넌트와 라우터까지 완성을 했다. 이제 바닐라 자바스크립트로 프로젝트를 시작할 수 있을까?? 가능은 하다. 그런데 유저 닉네임 값을 여러곳에서 이용한다면 계속해서 서버와 통신을 해야할까?? 너무 비효율적이다. 그렇지 않다면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줘야 한다. depth가 작으면 문제가 없지만 재사용성을 고려하면서 만든 컴포넌트는 단위가 작고 몇단계씩 데이터를 넘겨야한다. 그렇게되면 의존성도 높아진다. 모듈간에 의존성이 높은 것은 좋은 현상이 아니다. 그래서 웹 프론트엔드에서는 옵저버패턴을 사용한다. 리덕스도 이 패턴을 사용한다. 옵저버패턴에는 구독(subscribe)과 발행(publish) 개념이 존재한다. 어떤일이 발생했을 때 그 일을 알려달라고 하는 것이 구독이..
컴포넌트 글을 보지 않았다면 먼저 봐주세요~~ https://ms3864.tistory.com/380 개요 저번에 만든 컴포넌트와 연동할 라우터를 만들어야 한다. 참고로 리액트 라우터와 유사하게(애초에 리액트 라우터는 context를 사용하기 때문에 다르게 만들 수 밖에 없다.) 만들 것이다. 구현할 것 무엇을 구현해야 할 지 생각해보자. 컴포넌트의 html을 string으로 구현했기 때문에 일단 리액트처럼 Link를 사용할 수는 없다. 그러면 그냥 a태그에 이벤트를 거는 방법도 있을것이고 새로운 태그에 이벤트를 걸어도 괜찮다. 그리고 /로 경로를 나눠서 상태로 가지고 있으면 좋겠다. 왜냐하면 params가 있는경우가 있기 때문이다. 그리고 리액트의 훅같은 함수가 있으면 더 편할것같다. 대충 pushst..
웹폰트 적용하기(다양한 브라우저)
웹폰트는 무조건 사용하기 때문에 한번쯤 정리하고 싶었다. css 파일에서 @font-face로 옵션을 지정하고 font-familly에 지정한 웹폰트를 넣으면 끝이다. 예를 들면 아래와 같다. body { font-family: 'Noto Sans KR'; } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url('../assets/fonts/noto-sans/noto-sans-kr-v21-korean-regular.woff2') format('woff2') } 조금더 상세히 말해보면 font-style, weight를 각각 적어줘야 한다. 그래서 사용하는 font-weight에 따라 필요한 파일의 ..