최신글

• 

  npm을 이용해서 create react app설치 터미널에서 npm install -g create-react-app npm install -g create-react-app -g는 글로벌하게라는 뜻 권한이 없어서 에러가나면 sudo npm install create-react-app sudo npm install create-react-app 잘 설치되었는지 확인하기 위해서 create-react-app -V 공식문서에서 npx를 사용하라고 되어있는데 왜 그러냐면 npm은 프로그램을 설치하는 것이고 npx는 한번 쓰고 삭제하는 것임. 실행할 때마다 최신버전이라는게 장점임. ➜ ~ cd /Users/sung_eun/Desktop/programming/ot-react-app ➜ ot-react-app git:(master) ✗ create-react-ap.. 2021.01.28

• 

  210122 TID - Git 오늘 한건 3가지다. 1. 일단 예전에 했던 브랜딩 작업이 pdf로 만들어져있는데 웹포폴 사이트에 올리고 싶었다. 그래서 세로형으로 정리하고 웹페이지로 만들었다. 밑에 짤막한 모션을 추가하였다. 2. 어제 공부하던 git을 다시 봤다. opentutorials.org/course/3839/22593 버전간의 차이점 비교 - 생활코딩 수업소개 버전관리를 하게 되면 버전과 버전 사이의 비교를 할 수 있습니다. 이를 통해서 의사결정을 하는데 큰 도움을 받을 수 있습니다. 강의 opentutorials.org 여기부터 봤다. git diff 새로 바꾼 코드가 어떤 차이점이 있는지 보여준다. git reset --hard 이전 버전으로 돌립니다. git log -p p는 패치라는 뜻이다. 파일이 버전간 무엇이 바.. 2021.01.23

• 

  210121 TIL - git (version) 나는 전에도 git을 사용하고 있긴 했었다. 개인 프로젝트를 협업 할 때도 그냥 레파지토리 하나 만들어서 commit 하고 바로 push해서 썼었다. 내가 만들어놓은 포트폴리오 템플릿도 다른 사람이 풀/다운로드 해서 사용할 수 있도록 하기도 했었다. 하지만 그냥 코드를 외우고 사용하고 있었고 정확히 깃이 어떤 동작을 하는지 모르고 있었다. 협업을 할 때도 팀 프로젝트를 풀 해 와서 나는 내 브렌치에만 푸쉬를 하고, 브렌치를 합치는 것은 프로젝트를 관리하는 PM이나 CTO가 했다. 그리고 나는 그 프로젝트를 풀 해서 사용을 해 왔다. 터미널 창에서 내가 많이 사용했던 명령어들은 1. 깃의 로그들을 볼 때 -> 이렇게 보면 더 깔끔하게 볼 수 있다. 이 레파지토리에 속한 모든 브렌치의 상태를 확인할 수 있다.. 2021.01.22

• html 파일 내에서의 script tag 위치 처음 html css를 배울 때 테그를 일반적으로 body가 끝나는 곳에 위치하라고 배울테지만 이렇게 했을 경우 문제가 생길 때가 있다. html, css를 javascript로 조작해서 스타일을 만드는 경우는 테그를 body가 시작하기 전 head에 위치를 시켜야 한다. 안그렇고 일반적으로 하던대로 body뒤에 위치하는 경우 document가 이미 html css로 화면을 그린 이후이기 때문에 스타일을 조작하는 javascript가 실행되어 보이지 않을 경우가 있었다. 그 외의 동작과 데이터의 처리를 담당하는 javascript의 파일은 body 뒤쪽에 위치를 시킨다. 보통 js파일들은 무거워서 읽는데에 시간이 오래 걸리는데 이렇게 하지 않을 경우 document를 js부터 읽느라 빈 화면이 오래 떠 .. 2021.01.20

• 

  글래스모피즘 디자인을 실현하기는 불가능한가. 왜 background blur는 viewport의 가장자리는 어두워지는걸까... 포트폴리오를 만드려고 개발 삽질을 하고 있다. 과연 이 삽질이 의미 있을지는 잘 모르겠지만... 글래스모피즘 같은 디자인을 사이트에 반영하기 위해 background blur로 글래스 모피즘스럽게 블러가 많이 들어간 시안이 웹에서 어느정도까지 구현이 가능할지 테스트 해보고 있다. 테스트 해볼 시안은 이렇다. 보면 블러를 준 가장 위에 있는 오브젝트는 투명하다. 하지만 이걸 웹에다가 적용을 해보니 블러를 먹인 오브젝트는 화면 가장자리가 어두워진다. 이렇게되면 어두침침한 오브젝트 때문에 깔끔한 글래스모피즘 디자인이 나오지 않는다. 브라우저 문제인가 해서 사파리를 테스트 해봤는데 동일하다... ... 시안을 수정해야겠다. ㅜㅠ .. 2021.01.19

• 

  웹사이트에 GA(Google Analytics) 사용하기 / GA와 Google Tag Manager연결하기 웹 사이트를 디자인을 했지만 어떻게 사람들이 이 사이트를 이용을 하고 있는지 모르겠네요 . 그래서 사람들의 이용을 추적을 하고 싶어서 GA랑 테그 메니저를 공부하려 합니다. 우리가 보는 웹사이트는 디자인되어 있지만 안을 까보면 소스코드로 생성되어 있습니다. 이 소스코드 안에 데이터 추척 코드를 넣어야지 데이터 추적이 가능 합니다. 물론 소스코드를 볼 수 없는 남의 사이트는 데이터 추적이 불가능 하겠죠. 여러분의 웹이나 블로그만 트래픽 추적이 가능합니다 추적 코드를 삽입을 하고 약 3-4시간 텀으로 추적이 딜레이가 있으니 참고 하세요. 회사 사이트는 있지만 거기에 소스코드를 잘못 건드렸다가는 큰일 나므로 딱히 소스코드를 넣을만한 웹사이트가 없군요. 그래서 제 죽어가는 티스토리 안에다가 GA 추적 코드를 넣.. 2021.01.19

• 

  깃허브 컨트리뷰션(contributions)에 초록색이 안찍힐 때 1일 1 커밋 하려고 했는데 컨트리뷰션에 초록색이 생기지 않는다... 왜 그런지 찾아보는데 24시간이 지나지 않아서 그런가 하고 일단 기다려봤다. 더 기다려본다... 3일을 기다렸는데 아직도 생기지 않아서 아 뭔가 문제가 있다. 라고 생각되어 해결책을 찾아봤다. 윈도우에서는 :c드라이브 안에 있는 .gitconfig파일의 이메일을 수정하면 된다고 하는데 안타깝게도 나는 맥 유저다. c드라이브가 어디있는지도 모르겠고 gitconfig파일을 찾아봐도 나오지 않는다. 그래서 뒤지던 와중에 터미널을 이용해서 gitconfig를 수정하는 방법을 알아냈다. 내 컨트리뷰션이 내 커밋을 초록색으로 표시하지 못하는 이유 깃헙 사이트에 가입할 때 쓰는 이메일과 gitconfig파일 안의 이메일이 다를 경우 컨트리뷰션이 그.. 2021.01.18

• 

  Flexbox Froggy로 Css Flexbox공부하기 (및 정답 공유) 1~10번 플렉스박스에 대한 지겨운 이론 대신 게임으로 쉽게 공부할 수 있는 Flexbox Froggy. 플렉스박스에 대해 익숙해 지고 싶다면 한번 풀어보는걸 추천한다. 그리고 무엇보다 개구리들이 귀엽다 :) http://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 슉슉 넘어가다보니 개념 정리도 잘 안되는거 같고... 문제 풀기에 급급한 사람들을 위해, 그리고 다음 스테이지로 넘어가고 싶은데 정답을 모르겠는 사람들을 위해 Flexbox Froggy에서 나온 개념들과 정답을 공유하려고 한다. 붙여넣기 좋으라고 코드를 다시 입력해놨다. 풀면서 모르겠는 부분 있으시면 참고하시고... 또 한번 풀었는데 머릿속에서 정리.. 2020.08.10

• 

  리디자인 방법, 단계별 가이드 이 글에서 설명하는 프로세스는 한가지 기능이나 단일 화면 뷰에서부터 전체 어플리케이션의 리디자인까지 다양한 리디자인의 범주에서 활용될 수 있습니다. 이 권고사항들은 우리가 수백 개의 리디자인, 실패를 겪어오면서 알게 된 것들이고, 여러분이 함정에 빠지는 걸 막아주고 가치를 더 빠르게 전달할 수 있도록 도울 겁니다. 변화는 단번에 일어나는 게 아니라 점진적으로 일어나는 것이다. 이 글은 명확한 길을 제시하고 있지 않음을 처음부터 확실히 하고 가고 싶습니다. 제품을 디자인할 때, 엄격한 프로세스를 세워놓고 이것을 모든 상황마다 따라가는 것은 불가능하고 실용적이지 않습니다. 우리는 상황에 빨리 적응해야 합니다. 여러분이 따라갈 디자인 프로세스의 아웃라인을 정해놓는 것이 필요합니다. 결과물이 만족스럽지 않다면,.. 2020.08.04

• 

  위너 브라더스의 디자인 리뉴얼 위너브라더스는 1923년에 설립되었습니다. 위너브라더스는 장편 영화, 텔레비전, 홈 엔터테인먼트 프로덕션, 애니메이션, 만화책, 비디오 게임, 제품 및 브랜드 라이선스, 방송 전반에 걸쳐 콘텐츠의 제작, 제작, 배급, 라이선스 및 마케팅을 하는 유명한 엔터테인먼트 회사 중 하나입니다. 위너브라더스의 전 작들은 8,600편 이상의 장편 영화와 5,000개의 텔레비전 프로그램을 포함하는 100,000시간 이상의 프로그래밍으로 구성되어 있습니다. 가장 유명한 것들로는 DC 우주, 해리 포터, 반지의 제왕, 친구들, 그리고 빅뱅 이론이 있습니다. 위너브라더스는 워너미디어(AT&T 소유)가 소유하고 있습니다. 생산량에 따라 5,000명에서 10,000명 사이의 직원을 고용하고 있으며, 2018년 전 세계적으로 5.. 2020.07.27