분류 전체보기 (7) 썸네일형 리스트형 netlify 배포 에러 netlify로 배포하려고 하는데 계속 안됨. build 명령어를 CI=를 붙여서 해보래서 붙여서 yarn build, npm run build, react-scripts build 별 걸 다 해봤는데 안된다. https://answers.netlify.com/t/enoent-no-such-file-or-directory-open-opt-build-repo-package-json/15732 ENOENT: no such file or directory, open '/opt/build/repo/package.json' Our site builds in development, but fails in production. The error seems to be here: ENOENT: no such file o.. justify-content가 적용이 안될 때 원인: justify-content(메인축 정렬)는 flex item이 여유 공간을 흡수하기 위해 남은 공간이 있는 경우에만 효과가 있다. if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container. if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items. flex의 default 값인 initial은 플렉스 컨테이너의 크기를 넘지 않음. === flex: 0 1 auto와 동일 여기서 이제 justify-conte.. [자료구조] 해시 테이블 공부 자료구조이지만 자료구조 게시판은 따로 만들지 않았다. 왜냐하면 내가 자주 쓸 것 같진 않아서... 어쨌든 오랜만에 다시 공부가 필요할 것 같아서 공부를 해보았다.JavaScript에선 HashTable은 Map이라는 자료형으로 사용된다. 코테 풀 때 자주 사용했지만 구현해본 적은 없었다. 여러 글들과 책을 보고 일단 대충 정리해보았다. 해시 테이블이란, 키-값 쌍을 저장해두는 자료구조이다. 단지 어떤 인덱스에 저장해두느냐 그게 문제. 그래서 해시 함수를 사용하여, 값을 넣었을 때 나오는 인덱스에 저장해둔다. 그러면 당연하게도 수많은 값들을 해시 함수에 넣어보면, 겹치는 인덱스가 많을 것이다. 이게 해시 충돌이다. 해시 함수가 값을 넓게 가질수록 해시 테이블의 적재율이 높아지므로, 정교한 해시 함수일수록 .. [CSS] html, css, js로 포트폴리오 클론코딩을 해보았다. html과 css에 너무 약하다는 생각이 들어서 오랜만에 유튜브에서 맘에 드는 영상을 찾아 클론 코딩을 해보았다. 다시 해보니까, 요즘 또 마구잡이로 하던 CSS 클래스 네이밍이라던가, 웬만하면 거의 div로 했던 나쁜 습관들을 느낄 수 있었다. 예전에 처음 html, css를 공부하며 할 땐 딱히 구조같은 걸 이해한다기보다는 정말 생각없이 따라쓰는 것이였어서 느끼지 못했었음. BEM을 써보려고 하는데, 일단 기능 먼저 구현!!!! 이게 머릿속에 잡혀있다보니 네이밍의 중요성을 잘 깨닫지 못하고 있었다.... 어쨌든 클론 코딩하면서 느낀 점은 1. CSS 네이밍을 신경쓰자. (BEM?) 2. 반응형 제대로! 3. Mobile First 사실, 여태 뭔가를 만들면서 그냥 당연하게 데스크탑을 우선으로 하고 그.. mern stack 앱을 heroku로 배포(1) - google oauth config 유튜브 영상이나 블로그들에 heroku 배포하는 방법이 친절하게 쓰인 글이 많지만, 내가 만든 앱과 구조가 똑같진 않기 때문에 따라하다보면 응? 난 왜 막히지... 하고 한참 검색을 했었다. 헤로쿠로 배포를 직접 해보면서 막혔던 부분만 간단히 정리해보자. 이 글은 heroku에 처음부터 배포하는 과정을 담은 튜토리얼이 아닙니다! 1. google api credential 등록heroku에 config vars를 설정하는 건 되게 간단하다. mongodb uri일 경우, key에 mongo_uri, value에 uri를 넣어주면 된다.그런데 프로젝트에서 구글 API를 사용했기 때문에, 구글의 credential 파일도 config vars에 등록해야되는데 거기서 헤맸다.그냥 넣어주니까 안돼서 찾아봄. 검.. [CSS] Grid layout 공부 CSS 공부는 대충하고(맨날 flex로 어떻게 하다보면 되긴 됐음) 항상 어찌저찌해서 레이아웃을 만들고 css를 넣고 하는 게 힘들었어서, grid로 레이아웃 짜는 걸 다시 공부해보기로 했다. Pancake Stack See the Pen pancake stack by garosero (@garosero) on CodePen. 이런 걸 팬케이크 스택이라고 하는건 처음 알았다. 전에 비슷한 구조를 만들었던 걸 보니, { display: flex; flex-direction: column; height: 100vh } 이런 식으로 해놨다. 역시 flex를 많이 썼다.가장 큰 가운데 item에는 height 100%로 하고 나머지 두 item에는 그냥 고정값을 준 듯? 저 1fr 단위가 좀 헷갈렸어서 잘 안썼.. passport.js refresh token 발급 + 재발급 받기 refresh token이 발급되지 않아 로그인이 됐다가 안됐다가를 반복했다. 찾아보니 방법은 간단. offline access 옵션을 넣어주면 된다. access_type을 offline으로 해야한다고 쓰여있다. 앱이 백업 서비스를 실행할 때, 유저가 접속중이지 않아도 알아서 access token을 refresh할 수 있게끔 하는 게 offline access의 용도인듯. 그런데 이 간단한 한 줄 넣으면 되는 걸 왜 이렇게 오래 걸렸냐면, 엉뚱한 곳에다가 넣었었기 때문. passport.use(new GoogleStrategy({ clientID : process.env.GOOGLE_CLIENT_ID, clientSecret : process.env.GOOGLE_CLIENT_SECRET, callba.. 이전 1 다음
