Programing14 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. 1. 28. html 파일 내에서의 script tag 위치 처음 html css를 배울 때 테그를 일반적으로 body가 끝나는 곳에 위치하라고 배울테지만 이렇게 했을 경우 문제가 생길 때가 있다. html, css를 javascript로 조작해서 스타일을 만드는 경우는 테그를 body가 시작하기 전 head에 위치를 시켜야 한다. 안그렇고 일반적으로 하던대로 body뒤에 위치하는 경우 document가 이미 html css로 화면을 그린 이후이기 때문에 스타일을 조작하는 javascript가 실행되어 보이지 않을 경우가 있었다. 그 외의 동작과 데이터의 처리를 담당하는 javascript의 파일은 body 뒤쪽에 위치를 시킨다. 보통 js파일들은 무거워서 읽는데에 시간이 오래 걸리는데 이렇게 하지 않을 경우 document를 js부터 읽느라 빈 화면이 오래 떠 .. 2021. 1. 20. 글래스모피즘 디자인을 실현하기는 불가능한가. 왜 background blur는 viewport의 가장자리는 어두워지는걸까... 포트폴리오를 만드려고 개발 삽질을 하고 있다. 과연 이 삽질이 의미 있을지는 잘 모르겠지만... 글래스모피즘 같은 디자인을 사이트에 반영하기 위해 background blur로 글래스 모피즘스럽게 블러가 많이 들어간 시안이 웹에서 어느정도까지 구현이 가능할지 테스트 해보고 있다. 테스트 해볼 시안은 이렇다. 보면 블러를 준 가장 위에 있는 오브젝트는 투명하다. 하지만 이걸 웹에다가 적용을 해보니 블러를 먹인 오브젝트는 화면 가장자리가 어두워진다. 이렇게되면 어두침침한 오브젝트 때문에 깔끔한 글래스모피즘 디자인이 나오지 않는다. 브라우저 문제인가 해서 사파리를 테스트 해봤는데 동일하다... ... 시안을 수정해야겠다. ㅜㅠ .. 2021. 1. 19. 깃허브 컨트리뷰션(contributions)에 초록색이 안찍힐 때 1일 1 커밋 하려고 했는데 컨트리뷰션에 초록색이 생기지 않는다... 왜 그런지 찾아보는데 24시간이 지나지 않아서 그런가 하고 일단 기다려봤다. 더 기다려본다... 3일을 기다렸는데 아직도 생기지 않아서 아 뭔가 문제가 있다. 라고 생각되어 해결책을 찾아봤다. 윈도우에서는 :c드라이브 안에 있는 .gitconfig파일의 이메일을 수정하면 된다고 하는데 안타깝게도 나는 맥 유저다. c드라이브가 어디있는지도 모르겠고 gitconfig파일을 찾아봐도 나오지 않는다. 그래서 뒤지던 와중에 터미널을 이용해서 gitconfig를 수정하는 방법을 알아냈다. 내 컨트리뷰션이 내 커밋을 초록색으로 표시하지 못하는 이유 깃헙 사이트에 가입할 때 쓰는 이메일과 gitconfig파일 안의 이메일이 다를 경우 컨트리뷰션이 그.. 2021. 1. 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. 8. 10. SCSS css를 쓰다보면 scss나 sass를 요구하는 곳이 많다는걸 알게된다. SCSS 가 CSS 를 사용하는 것 보다 코드도 줄일 수 있고 다음 코드를 수정하는 사람이 봤을 때 가독성도 좋다. 웬만하면 사용하는 것을 추천한다고 한다. 유지 보수가 훨씬 쉽다. 그 이유는 밑에와 같은 기능을 사용할 수 있기 때문이다. Variable (변수)Math Operators (수학 연산자)Built-in Functions (내장함수)Nesting (중첩)Import (불러오기)Extend (상속)Mixin (믹스인)Function (함수)본인이 사용하는 개발 환경에서 css파일이 없고 scss파일이 자동으로 생성되고, 무슨 말인지 모르겠으면 그냥 SCSS파일 안에 내가 알던 CSS를 사용한다면 아무런 문제가 없다. C.. 2017. 7. 27. 이전 1 2 3 다음
