Web

node js 실습 - 사진 분류하기
nodejs-photoscript 확장자 혹은 수정 여부에 따라 사진, 동영상을 분리합니다. 실행방법 node photo 폴더명 node photo 폴더명 스크린샷 확장자 .png 혹은 .aae -> captured 수정된 사진의 원본 사진 -> duplicated 동영상 확장자 .mov 혹은 .mp4 -> video

iterm2 테마 변경후 폰트 깨짐 해결/폰트 변경
결론: 깨짐이 없는 폰트를 다운받자 iTerm2를 다운받고 좀 더 예쁘게 쓰고싶어서 테마를 변경하던중, 현재 작업중인 브랜치를 보여준다는 zsh테마를 변경했다. ZSH_THEME="agnoster" 로 변경하면 브랜치가 뜬다고 했는데... 이거먼데..왜 화살표가 안뜨고 깨지는건데... 폰트 문제인것 같아서 폰트를 바꿔주기로 했다. iTerm2 -> Preference -> Profiles -> Text 로 들어가서 폰트를 변경 할 수 있다. 기본으로 Monaco라는 폰트로 설정되어 있었는데 기본으로 뜨는 다른 폰트들을 적용 해 보아도 변함없이 깨졌다. 한글이 지원되는 폰트를 다운받아서 설치해보았다. 그러니까 바로 잘 나타났다. 깃 작업환경에서 브랜치를 나타내는 문자도 깨짐없이 잘 뜬다. 네이버 D2 Co..

티스토리 블로그에 TOC 달기
참고한 블로그 링크가 여깄징 https://depast.tistory.com/40 위 블로그의 글을 통해 라이브러리로 간단하게 달았다. 올려주신 코드를 그대로 사용하니 스크롤을 반쯤 내려야 목록이 뜨게 된다. 나는 포스트를 들어올 때 부터 바로 떴으면 좋겠어서 수정을 했다. 내가 수정한 디자인 문제점 발견 간단하게 수정후 원하는 위치에 달려있는 목록창을 보고 느낀 뿌듯함은 찰나였고 카테고리 메뉴를 열어도 지조있게 제자리를 고수하는 녀석을 발견 이걸 또 수정하기 너무 귀찮아서 잠시 고민했다. 1.처음 코드 그대로 복구해서 스크롤 중간에만 띄우기 2. 그냥 이대로 쓰자 그냥 2번으로 가기로 ㅎㅎ..귀찮으니까 어차피 나중에 다른 플랫폼으로 블로그를 이전하고싶기 때문에 있는대로 쓰기로했다.

여행 기록 웹페이지 제작하기
제작 목적 html, css, js에 익숙해질겸 간단한 웹페이지 하나를 제작해보았다. 친구들과 여행했던 그리스 사진들과 사진마다 설명을 보여주는 웹페이지를 제작하기로 결정. 소개 9개의 사진을 보여주고 클릭하면 해당 사진을 크게 보여주고 오른쪽엔 그 사진에 대해 작성한 글을 보여준다. 선택된 사진을 한번 더 클릭하면 다시 사진 목록을 띄워주어 다른 사진도 확인 가능. 초기 디자인 사실 초창기 컨셉은 2000년도 느낌의 웹페이지 느낌을 만들고 싶었다. 뭔가.. html로 열심히 꾸민듯한 그런 느낌. 화면 가운데에 사진들을 보여주고 클릭한 사진을 배경으로, 사진을 고르는 선택창은 글을 보여주는 창으로 바뀌는 방식으로 계획을 잡았다. 그런데 막상 그렇게 만들고 나니 마음에 들지 않았다. 설명창을 완전 하얀색으..
![[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 삭제하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc4xxZv%2FbtqTyBniiJA%2Fo7O8LUj6bKNqqKdH0grRo1%2Fimg.png)
[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 삭제하기
로그인한 사용자가 작성한 글에만 삭제 버튼이 보이고 삭제를 누르면 글 삭제가 가능하다. 프론트 수정 //main.html ... {% if twit.User.id == user.id %} 삭제 {% endif %} ... {% block script %} {% endblock %} 라우터 추가 //routes/post.js router.post('/:id/delete',async(req,res,next)=>{ try{ const post=await Post.findOne({where:{id:req.params.id, userId:req.user.id}}); await post.destroy(); res.redirect('/'); } catch(error){ console.error(error); next..
![[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 좋아요 및 좋아요 취소](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhhXbN%2FbtqTENmy9fr%2FPWDTVyr0JP9kyKsY4YnXN0%2Fimg.png)
[node.js 교과서] 9.5.1 스스로 해보기 - 게시글 좋아요 및 좋아요 취소
해당 게시글에 좋아요를 누른 사람을 기록 할 테이블이 필요하다. 사용자는 많은 게시글을 좋아요 할 수 있고 게시글은 많은 유저들에게 좋아요를 받을 수 있다. 따라서 사용자-게시글 간 모델 설정이 필요하다. /models/user.js ... static associate(db) { db.User.hasMany(db.Post); db.User.belongsToMany(db.User, { foreignKey: 'followingId', as: 'Followers', through: 'Follow', }); db.User.belongsToMany(db.User, { foreignKey: 'followerId', as: 'Followings', through: 'Follow', }); db.User.belong..