2021 10월 TIL 모음

Frontend

SCSS 관련

• @mixin으로 정의된 것은 @include로 가져와서 쓸 수 있다

→ CSS 모듈 사용할 땐 클래스명 주의해야한다. 디폴트로 파일이름이 클래스명에 붙기 때문에 부트스트랩 등 디폴트 스타일을 변경할 때에는 아래와 같이 클래스명을 직접 지정해줘야 한다.

.carouselWrapper {
    &__indicator {
        position: absolute;
        justify-content: start;
        margin-left: 60px;
        bottom: 320px;
        & li {
            background-color: $gray-700;
            list-style-type: none;
        }
        & li[class='active'] {
            width: 1.5rem;
            height: 0.375rem;
            border-radius: 0.5rem;
        }
    }
    &__control {
        & > span[class='carousel-control-prev-icon'] {
            background-color: $gray-700;
            position: absolute;
        }
    }
}

이미지 s3배포 이전에 로컬에서 불러오기

• 로컬 이미지를 img테그의 src로 불러올 땨애는 require(이미지 경로) 이런 식으로 불러야 모듈처리 되어 불러와진다

state값을 인자로 하는 함수에서 주의할 것

• state를 인자로 넘기는 함수의 경우, state값을 디펜던시로 해서 useEffect를 사용해도 그 state값이 변경되기 전까지 함수는 실행되지 않는다 → 그러므로 state의 값을 변화시키는 시점에서(setState를 하는 시점) 그 state값을 set하는 인자를 함께 넘겨야만 한다. (state가 변경되고 나서 바꾸면 한 박자 늦는다 )

const changeGameStyle = (type) => {
        setGameStyle(type);
        setLectureIndex(indexInfo[type].index);
        // gameStyle변경은 늦게 적용되므로 인자로 type을 넘김
        setLessons(setLessonInfos(type));
    };

이런 식으로!

useLayoutEffect

• useEffect를 사용했을 때 깜박임 현상이 일어난다면 useLayoutEffect의 활용을 고려해보기.
• useEffect와는 달리 DOM이 화면에 그려지기 이전에 호출된다
• 동기적으로 호출되기 때문에 이용할 때 주의가 필요하지만, 잘 사용하면 사용자경험을 좋게 향상시킬 수 있다 !

Backend

기본적인 흐름

• app.js에서 라우팅 → routes/index.js에서 해당 엔드포인트에 대한 작업들 처리(req, res받고 보냄) → 그 처리를 하는데 필요한 db 제어하는 함수들은 import해서 사용 (db 관리하는 함수는 무조건 모듈로 만들어서 사용하기)
• 서버 개발할 때에는 수정할 때마다 빌드를 다시할 필요가 없으므로 전체 빌드 이후 서버를 껐다 켰다 하면서 개발하는 것이 간편
• 빌드할 때 vm 메모리 부족하면 Ps aux 명령어 이용해서 불필요한 거 kill 하기

새로운 npm 패키지 사용할 때 갖춰야 할 태도

• docs 정독, 어떤 것을 이용해야 하는지 확고하게. 왜 그걸 이용해야하는지도 확고하게
• 지시받은 업무가 그 확고한 선에서 벗어난다면, 주저하지 말고 여쭤보기 (이런 거 아닐까? 하고 아니라고 확신하는 다른 방식 시도할 필요 없다)
• 내가 docs를 확실히 이해해야 내가 모르는 걸 확실하게 설명할 수 있음을 명심 !

그냥 서버 개발하면서 느낀 거

• console에 찍히지 않으면 잘 생각하기. 어디에선가 내가 예상하는 흐름을 벗어났다는 것.
• 모든 분기처리된 흐름에 대해 콘솔에 찍어보며 확인하기
• process.exit()는 아예 프로세스 끝내버린다는 뜻 → 함부로 쓰지 말 것

여러 개의 모듈 export 할 때

• export 할 때
  

  const { GoogleSpreadsheet } = require('google-spreadsheet'); 
  const googleSheet = { async getSheet() {}, async drawSheet() {}, }; 
  module.exports = googleSheet;​

• import 할 때
  

  const utilGoogleSheet = require('export한 경로'); 
  //사용할 땐 utilGoogleSheet.함수이름 이런 식으로 사용​

MongoDb 관련

query연산자

https://www.zerocho.com/category/MongoDB/post/59bd148b1474c800194b695a

db 연결

0. mongoose, 사용할 schema, 사용할 모듈들 import
1. dbHost객체 설정 (op, dev)
2. mongoose 연결

   const testConnection = mongoose.createConnection(IS_OP ? dbHost.op : dbHost.dev, { 
     useNewUrlParser: true, 
     keepAlive: true, 
     autoReconnect: true, 
     bufferMaxEntries: 0, 
     poolSize: 100, 
   });

3. db연결

   const db = { test: testConnection.model(db이름, 불러온 스키마), };

4. 사용

   const testList = db.test.find({조건들..});

사용가능한 도메인 정보 가져와야 할 때

• db에 activate true로 되어있는 채널들 중에서도 기간 만료된 애들이 있을 수 있음
• route53에 등록된 CNAME을 기준으로 접속가능한 채널들을 확인해서 한 번 더 필터링 해야한다.

11월달에 무조건 공부해야겠다 싶은 거

• aws, firebase 대략적으로 어떤 기능들 있는지 정리가 좀 필요할 거 같다.. 어떻게 활용할 수 있는지에 대한 개괄적인 정리하기..
• noSQL / SQL 공통점 차이점 정리! SQL은 정말 처음이라 세미나 내용 꼼꼼히 정리해야할듯
• 리덕스 툴킷 사용해보기
• CDD방식으로 유니버스 개발 시작 .. 다나으진한테 스토리북 설명해줄 수 있을 정도로 정리해두기
• text replacement 사프 데이터셋 모으자 ..