노마드코더6 2020.11.09 TIL _ 노마드코더 인스타그램 클론코딩 서버 완성 14일만에 노마드코더의 인스타그램 클로닝 서버를 완성했다 🎉 노마드코더 인스타그램 클로닝 완성작 : github.com/iknowahra/insta-clone 직장생활과 병행하다 보니 시간이 좀 더 걸렸지만 목표한 시간 안에 도달했다. 해당 강의는 아직 PRISAM 1을 기반으로 촬영 되었기 떄문에 PRISMA2와 다른 점을 찾아가며 해야 했다. PRISMA1을 사용할 수 있었지만 graphql을 알고 있는 상황에서 뭔가 도전할 부분이 필요했기 때문이다. Prisma는 정말 혁신적인 도구다. 직관적으로 쓸 수 있고, 변화한 부분을 db 를 잘 알지 못하더라도 쉽게 CRUD를 할 수 있도록 prisma studio를 제공한다. 나는 mysql 의 workbench 사용에 익숙해서 workbench를 주로 .. 2020. 11. 10. 2020.10.27 TIL 개발과 관련 없는 회사 일을 하며 사이드 프로젝트를 셀프 동기 부여하며 한정된 시간내로 끝내는 것은 아직 어렵다고 판단. 회사에서 노예처럼 번 돈으로 강의를 사서 인스타그램 클론을 할 예정이다. 노마드 코더의 인스타그램 클론 코딩 강의를 수강 신청했다. 해당 강의에서 사용하는 기술 스택이 코드 스테이츠 마지막 프로젝트에 사용한 스택과 유사했기 때문에 복습차원으로 선택했다. 마지막 프로젝트에 사용한 db와 orm은 mysql과 typeorm 이었는데, 해당 강의는 prisma를 사용한 점이 달랐다. prisma는 예전부터 써보고 싶었기 때문에 기대하는 마음으로 시작했다. 해당 강의는 prisma1을 가지고 녹화가 진행되었기 때문에, prisma2의 실험 버전은 적용할 수 없다. 코드스테이츠에서 새로운 기술.. 2020. 10. 28. 2020.10.21 TIL 노마드코더 코코아톡 클로닝 후기 노마드코더 코코아톡 (카카오톡) HTML CSS 클로닝이 끝났다. CSS는 프론트엔드에서 사용자의 사용감과 인상에 밀접한 영향을 주지만, 개인적으로는 개념을 잘 알지못해 지루하고 어려운 부분으로 생각했었다. 그런데 CSS를 한 번 해보니, 백엔드와 다른게 적용되는게 눈으로 확확 보여서 재밌다. 해당 수업에 대해 배운 내용을 좀 더 정리하자면, 그간에 내멋대로 지었던 변수명에 대해서 일정 규칙과 아이디어를 얻었다. 그동안 나를 애먹였던 block 과 inline CSS 레이아웃에 대한 기본 사용법을 익혔다. CSS도 코드 재활용성을 충분히 높일 수 있다. 코드스테이츠에서 제대로 잘 배워서 github에 리드미까지 작성하는 것도 잊지 않았다. 끝! 2020. 10. 22. 2020.10.19 TIL will-change : 애니메이션에서 어떤 부분이 변화할지 미리 브라우저에게 언질을 주는 것 z-index : 포토샵의 레이어 같은 개념인데, 지난번 포스팅에서 숫자가 낮을 수록 맨 위에 노출 된다고 작성한 부분은 틀렸다. 숫자가 클수록 상위에 노출된다. github 에서 서버 없이 클라이언트 부분을 무료로 퍼블리싱 하는 기능을 제공하는데 굉장하다! @media screen / print 부분을 통제할 수 있다. @media screen and (max-width: 600px) and (orientation: portrait) { #no-mobile { display: none; } } @media print { body { color: black; } #no-mobile { display: none;.. 2020. 10. 20. 2020.10.18 TIL z-index는 포토샵의 layer 라고 생각하면 된다. 만약, 서로의 엘리먼트의 요소가 겹칠 경우, 어떤 엘리먼트를 맨 위로 표현할 것인지를 z-index를 통해 지정해주면 된다. 숫자가 낮을 수록 최 상단에 노출된다. 0이 제일 위로 올라오며, 숫자가 커질수록 밑에 깔려 표현된다. order는 flex된 children 요소들에게서 사용할 수 있다. 순서를 바꿀 수 있다. modifier 를 이용해서 가급적 코드를 재활용하도록 하자. 얇게 알던 CSS를 하나하나씩 따라해보면서 그간에 무식하게 하나씩 적용했던 지루한 CSS에 흥미가 생겼다. CSS는 기존에 코딩 중에서도 가장 재미없고, 반복적이라고 생각했는데 그건 CSS를 제대로 할 줄 몰라서 였다... 내일 정도면 kakao talk css 클로닝이.. 2020. 10. 19. 2020.10.12 TIL CSS 루트에 변수 지정하여 여러번 활용하기 :root { --main-color : #0000000 } p { background-color : var(--main-color) } var(--변수명) 이런 식으로 루트에 메인 컬러를 변수로 지정하고 사용할 수 있다. transition transition 은 state (:active, :hover ...)에 따라 property가 달라질 때 사용한다. transition 은 state가 아니라 root 가 되는 element 에 있어야 한다. a { background-color : tomato; color : wheat; transition : all 5s ease-in-out //배경과 글자 모두 변화 } a:hover { background-co.. 2020. 10. 12. 이전 1 다음
