본문 바로가기

Programming27

[React] Webpack, Babel이란? Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어냄 파일을 하나 하나 만든 것들을 HTML에서 매번 불러오는게 아니라, js에서 import한 것들을 bundling작업을 하게될 때 특정 확장자마다 어떠한 처리 작업을 하도록 준비를 해줌. 이미지들을 압축하고, 그 결과물로는 특정 경로에 특정 이름으로 저장하게끔 만들 수 있음. js파일을 여러 개 만들었을 때, 나중에 합쳐서 하나의 파일로 만들어줌. (나중에 원하면 규칙에 따라 분리시켜줄 수도 있음) 추가 : 우리가 나중에 ES6를 사용할건데, 구형 브라우저에서 지원이 안되는 경우가 있음. 그래서 새로운 문법을 사용할 수 있게끔 나중에 Babel을 사용함. js파일이 여러 종류의 브라우저에서 사용될 수 있게!.. 2020. 7. 6.
한 대의 맥에서 여러 개의 github 계정 사용하기 문제점 이 글의 가장 큰 문제점은 거의 다 쓴 글이 날아갔다는 것이다. 거지같은 컴퓨터.. 너무 화가 난다. 왜 임시저장이 자동으로 되지 않는거지!??!!?!? (스트레스) 아 열심히 썼는데 %^^^... 각설하고, 이번에 개인적인 일로 깃헙 계정을 한 개 더 만들어야 할 일이 생겼다. 이미 깃헙 계정이 등록되어있는 나의 맥에서 새로운 깃헙 계정을 써야 할 일이 생긴 것이다. 예전에 ssh key 등록을 할 때 나름 애먹은 기억이 있어 괜히 망설여지긴 했지만, 그래도 쉽게 잘 됐다. 아래 순서대로 차근차근 따라오면 여러분들도 쉽게 만들 수 있을 거에욥 ^___^... 1. 키 생성 먼저, 아래 명령을 터미널에 입력한다. ssh-keygen -t rsa -b 4096 -C "등록하고싶은 깃헙 이메일 주소".. 2020. 2. 18.
[Django] DB 옮길 때 shell 사용해 옮기는 꼼수 # 문제 최근 페이지를 만들면서 친구에게 코드 리뷰를 받았다. Model에 코드가 중복되어 있어 좋은 코드가 아니라고 해서, 기존의 모델을 한 개로 합치기로 했다. 실리콘밸리 레터와 미라클 레터라는 모델 두개를 "Letter"라는 모델 하나로 만들어 넣는데, 내가 저장해 놓은 데이터들을 어떻게 옮기느냐의 문제가 생겼다. 하나 하나 옮기려면 시간이 너무 많이 걸릴 것으로 생각되어 python의 Shell을 이용해 옮기기로 했다. # 해결 1. 터미널에 아래를 입력해 shell을 켠다. python3 manage.py shell 2. 우리가 사용할 django와 모델을 import 해준다. import django from letter.models import LetterML 3. 쿼리셋에 Letter의 o.. 2020. 2. 14.
[Django] static debug 문제 # 문제점 요즘 장고로 간단한 웹 개발을 하고 있는데, 어제 pythonanywhere로 배포를 했다. 마지막에 Debug False로 해두고 뭔가를 바꾸어서 올리려 했는데 갑자기 css가 불러와지지 않았다.ㅠㅠ css 경로 그런거 아무것도 안만졌는데!!!!! (사실 내가 뭐 잘못 눌러서 에러뜨는 줄 알고 멀쩡한 코드만 눈빠져라 봤다아아아악) 결론은 아래와 같은 에러가 떠서 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 찾아봤는데 stackoverflow에는 계속 내가 경로설정을 잘못했다고 했다.....(경로건드린거없는데^ ^^..) 어쨌든 1시간동.. 2020. 2. 13.
리액트 기초 리액트로 프로젝트를 생성하면, node_modules, public, src 폴더가 생긴 것을 알 수 있다. 뭐, 우리는 node_modules나 public 을 거의 건드리지는 않을거고, 거의 src 안의 파일들을 건드리게 될 것이당! 케케 하지만 먼저 public 폴더의 index.html을 보자.우리가 알던 흔한 html의 파일과는 쬐금 다르다. yarn start를 하면 분명 이렇게 페이지가 켜지는데, DOCTYPE html> React App index.html 을 보면 아무 내용이 없고, body 안에 root라는 id를 가진 div 하나만이 있는 것을 볼 수 있다. >>ㅑ 짱신기 일단 신기한 걸 제외하고, src 폴더 안의 파일들을 보면 App.css,App.js,App.test.jsinde.. 2018. 6. 16.
로컬에서 리액트 개발환경 세팅하기 1. Node.js를 설치한다.2. git을 설치한다. (xcode가 있으면 다운 안받아도 된당)3. 터미널을 연다. (윈도우는 git-bash 실행)4. `sudo npm install create-react-app -g`5. `sudo npm install yarn -g`6. `create-react-app testapp`7. `cd testapp`8. `yarn start`그럼 시작한다앗!!! 2018. 6. 16.
react 시작하기 1. Web 과 Application 의 차이 웹은 설치하지 않아도, 브라우저를 통해 볼 수 있고,어플리케이션은 설치를 해야만 실행할 수 있다. 2. 검색, 과거와 현재 우리가 웹에서 검색을 하게 되면, 과거에는 1. http 요청2. http 응답3. 리소스 다운 (index.html, css, js, image file.. )4. 해석5. 렌더6. 노출이런 형식으로 웹이 작동해서 우리가 볼 수 있었다. 하지만 현대에는 1. http 요청 (필요한 것만!)2. http 응답 - 데이터 (json, xml.. )3. html 그리기 (js로) [이게 새로 생김!]=> 이걸 "뷰" 라고 부른다! => 요걸 효율적으로 바꾸었음 좋겠다, 해서 나온게 vue, polymar, angular, react.. 등등.. 2018. 6. 16.
HTML & CSS - 2. CSS 기본 HTML & CSS 기본 - CSS란? 1. CSS가 무엇인가요? CSS : Cascading Style Sheet == 상위 스타일이 하위 스타일에 영향을 주는 스타일 시트 Cascading의 뜻은 폭포수가 흐르는 모양이다. 그런 것처럼 css에서는 상위 스타일이 하위 스타일에 영향을 끼친다. 간단히 예를 들자면, body 요소 안의 스타일들은 body 요소의 영향을 받게 된다는 것이다. 문법 body { /* body 안에 스타일을 정해 준다는 것은 결국 이 웹 페이지 전체에 영향을 주는 스타일을 적용하겠다는뜻이다. /* 앞서 말했듯이 body 요소 안에는 유저들에게 보여질 모든 내용이 들어가게 되니까! /* 전체 스타일에 영향을 주는 스타일에는 폰트, 배경, 문서의 너비 등등이 있게 된다. } " .. 2018. 4. 19.
HTML & CSS - 1. html 기본 HTML & CSS 기본 - html 이란? 1. HTML이 무엇인가요? HTML : Hyper Text(웹) Markup(활자) Language(언어) == 웹을 만들어내는 마크업 언어 웹 사이트는 곧 웹 문서 라고도 불린다. 그 중에서도 다른 사람들이 모두 접근 가능한 문서이다. HTML은 이러한 문서를 만들기 위한 언어이며, 웹을 구성하는 가장 작은 단위이다. 하지만 요즘에는 문서가 아닌 것을 만들기 위해서도 사용되기도 한다. (웹 어플리케이션, 또는 웹 앱이 있다.) 웹 사이트와 웹 어플리케이션의 차이가 뭐냐면, 웹 사이트는 " 주로 정보 제공" 용이고, 웹 어플리케이션은 "주로 사용자가 작업을 수행할 수 있게" 한다. 쉽게 예를 들자면, 뉴스, 등 정보를 제공하는 페이지는 웹 사이트고, 메일을 .. 2018. 4. 18.

티스토리툴바