후니후니

#Node.js 오늘은 유저의 프로필 데이터를 변경하는 작업을 진행해보았다. userRouter.post(routes.editProfile, onlyPrivate, uploadAvatar, postEditProfile); export const postEditProfile = async (req, res) => { const { body: { name, email }, file, user: { _id } } = req; try { const user = await User.findById(_id) await User.findByIdAndUpdate(_id, { name, email, avatarUrl: file ? file.path : req.user.avatarUrl }); await user.save..

#Node.js 어제는 페이스북 로그인 시 callback 함수로 데이터를 가져오는 것까지 구현했다. 오늘은 페이스북 로그인을 마무리하려고 한다. export const facebookLoginCallback = async (_, __, profile, cb) => { const { _json: { id, name, email } } = profile; try { const user = await User.findOne({ email }); if (user) { user.facebookId = id; user.avatarUrl = `https://graph.facebook.com/${id}/picture?type=large`; user.save(); return cb(null, user); } const..

# CSS 현 직장의 프로젝트가 점점 커지면서, 기존 CSS 규칙이 모호한 게 문제가 되기 시작했다. 방법론이 정해져있지 않고, 네이밍 규칙은 단순히 하이픈 2개 이상 사용하지 않는 것으로 되어있다. 입사 후에는 신입인지라, 이게 문제가 될 것이라 생각을 하지 못 했는데, CSS를 같이 계속 다루다 보니, 파일 용량도 커지고, 파일 수는 늘어나고, 규칙은 엄격하지 못하니 중복되는 네이밍도 생기고, 무엇보다 가독성이 굉장히 떨어졌다. 그래서 CSS 규칙 및 구조 개편 의견을 제안했는데, 회사에서 해당 내용에 공감해주고 일정까지 따로 마련해주셔서 이번에 작업할 수 있게 되었다. CSS 방법론은 BEM 을 사용하려고 하고, 그 외 다른 규칙은 같이 근무하는 퍼블리셔 분과 상의하여 맞추려고 하고 있다. 현재 C..

# Node.JS export const githubLoginCallback = async (_, __, profile, cb) => { const { id, avatar_url, name, email } = profile._json; console.log(profile); try { const user = await User.findOne({ email }); if (user) { user.githubId = id; user.save(); return cb(null, user); } const newUser = await User.create({ email, name, githubId: id, avatarUrl: avatar_url }); return cb(null, newUser); } catch (..

프로젝트에서 조금 더 의미있는 마크업을 하기 위해 시멘틱 마크업 관련 글을 검색해서 찾아보았다. 기본적으로 의미가 있는 태그를 사용하는 게 의미 있다고 생각하여, 리스트 관련 내용은 ul & li, 테이블은 table, 상단, 하단 헤더 푸터는 header & footer, 적절한 태그가 없을 경우 div 등을 사용해왔다. 근데 의미있는 마크업을 검색해보니 section, article 등이 나왔다. 알고 있는 태그이긴 했지만 잘 사용하지 않았기 때문에 어떤 태그인지 조금 자세히 찾아보고, 앞으로 더 의미있는 마크업을 하기 위해 사용해보려고 한다. article : 해당 컨텐트 영역은 페이지에서 독립적인 내용이어야 하며, 해당 부분을 떼어 다른 페이지로 이동해도 그 영역의 내용만으로 온전히 하나의 기사가..

개발자 카페를 둘러보다가 CORS에 대한 내용을 봤었는데, CORS CORS 들어보기만 했지, 정확한 뜻을 이해하지 못하고 있던 것 같아 조금 더 정보를 찾아봤다. 일반적으로 https://domain-a.com 에서 https://domain-b.com 자료를 요청하는경우 불가능하다. 왜 불가능할까? 동일출처 정책에 의해서 같은 도메인인 경우에만 자료 요청이 가능하고, 다른 도메인으로 요청하는 경우 가능하지 않다. 하지만, 해당 도메인을 CORS 허용 해준다면, 자료를 가지고 올 수 있다. CORS는 Cross-Origin Resource Sharing의 약자다. 그렇다면 허용을 어떻게 해줄 수 있을까? 서버에서 Access-control-allow-origin 설정을 통해 할 수 있다고 한다. 이 부..

요즘 결혼식 준비한다고 공부를 거의 못 했다. 오랜만에 유튜브 클론 강의를 다시 듣기 시작했다. 거의 일주일을 보지 않았더니, MongoDB 명령어를 기억에서 삭제해버렸다. mongod로 mongo를 실행한 후, start mongo로 터미널을 먼저 열었는데, 컬렉션을 조회하거나, 정보를 조회하는 명령어를 기억해내느라 애먹었다. 먼저 show dbs로 생성된 db 목록을 확인한 후, use "db 이름" 으로 이동했다. show collections로 생성한 collection을 확인하고, db.stats()로 현재 db의 정보를 확인하며 공부했던 기억을 떠올려갔다. 오늘 사용한 명령어를 정리해보자면, DB 조회 = show dbs 해당 DB 이동 = use "db" Collections 조회 = sho..

#TDD TDD 스터디 중 축약 문법을 사용하여 최대한 짧게 작성한 함수와, 코드를 조금 길게 작성하더라도 가독성을 위한 코드, 둘 중 무엇이 좋을까 의견을 나누어봤다. 의견을 나누어보니, 코드를 길게하더라도 성능 이슈가 크지 않다면 가독성을 높이는 게 더 좋겠다는 의견이 많았고, 요즘 컴퓨터 성능이 좋아지면서 크리티컬한 성능 문제가 있지 않을 경우 코드 길이를 조금 길게한다고 하여 성능에 큰 이상을 줄 것 같지는 않아 가독성 있게 코드를 작성해보기로 했다. 오늘 공부할 테스트 코드는 [평균 구하기]로, 배열을 전달받아 배열의 수를 모두 더한 후 평균을 구하는 코드다. // 테스트 코드 import { solution } from "./평균구하기"; const array1 = [1, 2, 3, 4]; c..

#TDD 수박수박.js 테스트 코드를 작성하고 리팩토링을 했다. --- 수박수박.js export const solution = (n) => { const arrayWaterMelon = []; for (let i = 1; i a + c); }; --- 수박수박.test.js import { solution } from "./수박수박"; describe("수박수박 테스트", () => { it("수박수박", () => { expect(solution(3)).toEqual("수박수"); expect(solution(4)).toEqual("수박수박"); expect(solution(1)).toEqual("수"); }); }); 별로 리팩토링 한 건 없다. 처음에는 변수로 const water = "수" co..

# TDD 어제 작성한 "두 정수 사이의 합" 테스트 코드를 리팩토링 했다. const arrayCompare = (a, b) => { const array = []; const maxNum = a > b ? a : b; const minNum = a ac + cu); }; 숫자가 같을 경우 정수 사이의 합이 없기 때문에 그대로 리턴해주는 코드를 추가하고, maxNum & minNum에 담는 값을 바로 계산하여 indent를 줄이고, 삼항연산자를 사용하여 if 문을 제거했다. 조금 더 간결하고 가독성있고, 좋은 코드가 있을 거 같은데..