분류 전체보기
-
[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란웹 개발/ReactJS 2021. 4. 27. 18:52
랜더링이란 (Rendering) 서버로 부터 받은 내용을 브라우저에 표시함 - Loader 가 서버로 부터 원본 HTML 문서를 읽어들임 - 브라우저는 파싱을 통해 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. 1) DOM 트리 구축 2) CSSSOM 트리 구축 3) JavaScript 실행 - 렌더 트리를 구축 - CSS 설정/레이아웃 위치 지정 후 렌더링 트리가 페인팅된다. DOM(Document Object Model) : HTML 요소들의 구조화된 표현 CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현 * DOM이란 무엇인가 seizemymoment.tistory.com/133?category=879018 [Jav..
-
[NextJS] NextJS 특징 및 프로젝트 시작웹 개발/NextJS 2021. 4. 24. 19:03
NextJS의 특징 1) 컴파일과 번들링이 자동으로 된다. 2) 자동 리프레시 기능으로 수정하면 화면에 바로 반영된다. 3) 서버사이드 렌더링이 지원된다. 4) next.js의 페이지는 pages 폴더 내 js, jsx, ts, tsx 파일에서 내보내진 react component이다. pages/about.js -> /about로 접근가능 pages/posts/[id].js -> pages/posts/1, pages/posts/2... [dynamic routes] 5) next.js는 public이라는 폴더 아래에 정적 파일을 제공한다. 기본 URL ( /) 에서 시작하는 코드에서 내부 파일을 참조 할 수 있다. NextJS 프로젝트 생성 및 실행 1) nextJS 프로젝트 생성 npx create-..
-
[Material Design] 구글 머테리얼 폰트(Material Font)와 아이콘(Material Icon) 적용UI UX 디자인 2021. 4. 20. 01:46
fonts.google.com/icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글에서 제공하는 머테리얼 디자인(material design)! 구글에서 제공하는 머테리얼 폰트(material font)와 아이콘(icon)을 정리해둔 사이트가 있다는 것을 알게 되었습니다! 검색기능도 있고 웹을 위한 코드도 정리되어있어 매우 편리합니다 :) 구글 프레임워크인 플러터 상에서는 바로 아이콘 이름을 입력하면 됐는데 Web에서는 다른 설정이 필요한거 같아 적용해본 뒤 다시 정리해보아야겠습니다!
-
[개발 툴] 데이터베이스 ERD 설계를 위한 웹 기반 AQueryTool 소개데이터베이스/프로젝트 툴 2021. 4. 20. 00:56
aquerytool.com/AQueryTool - AQuery.WebAQueryTool은 웹 기반 ERD 툴 + SQL 자동 생성 프로그램입니다.aquerytool.com 데이터베이스 ERD 구조를 짜기 위한 협업툴 AQueryTool을 소개합니다! 늘 포스트잇이나 화이트 보드에 디비 구조를 그리곤 했는데 웹 상에서 바로 디비 구조를 짤 수 있어 협업할 때 매우 편리했습니다! 다만 협업할 때 수정사항이 실시간으로 업데이트가 되지 않아서 불편했습니다 어떤 팀원이 디비를 수정하고 저장하면 다른 팀원은 새로고침 - ERD 불러오기를 통해 업데이트 내용을확인해야 하더라구요! ** 협업 시 저장하지 않으면 다른 팀원에게 업데이트 내용이 보이지 않으니 수정 후 저장해주세요!** ERD 및 테이블 생성 1) 새로운 ..
-
[ReactJS] React 기본 코드 구조 및 component 생성웹 개발/ReactJS 2021. 4. 15. 03:49
React를 공부하며 정리한 내용입니다. React 언어는 JSX (Java script 확장판)이다. - 중괄호 내에 모든 java script 코드를 넣을 수 있으며 중괄호를 사용해 attribute를 정의한다. const element = ; -사용자의 입력을 삽입할 수 있다. const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element = {title}; -jsx는 태그를 꼭 닫아줘야하는데 태그 내에 아무것도 없다면 self-closing을 이용한다. React의 가장 작은 단위는 컴포넌트를 이루는 앨리먼트(element)이다. - 두 가지 예시는 동일한 React element 객체를 생성한다. 공식 다큐먼트는 아래의..
-
[GIT] fatal: 'origin' does not appear to be a git repository 에러 해결기타 2021. 4. 14. 18:11
fatal: 'origin' does not appear to be a git repository push를 했더니 위와 같은 에러가 생겼다. 현재 폴더가 연결되어있는 git repository가 없다는 문제였다. 1) git 원격 저장소 확인 역시나 나는 아무것도 연결 되어있지 않았다. git remote -v *** 연결된 원격 저장소가 있다면 삭제해준다. git remote remove [이름] 2) 원격 저장소를 추가한다. 나는 연결되어있던 저장소가 없어졌기 때문에 git 에서 새로운 repository를 파서 그 url를 추가해주었다. git remote add origin [ 저장소의 github 주소 ]
-
[ReactJS] React 배포웹 개발/ReactJS 2021. 4. 14. 12:21
React 배포 1) create-react-app을 build하는 명령어 -> public 폴더가 실행됨 -> create-react-app 개발환경은 개발의 용이성을 위해 기능을 많이 추가했기 때문에 파일의 무게가 무거움 npm run start 2) 실제 product 환경에서 사용하는 웹을 build하기 위한 명령어 -> build 파일 생성 후 사용 (create-react-app의 불필요한 용량을 줄였음) -> root에 build 안에 있는 디렉토리를 위치시키면 된다. npm run build 3) 웹 서버 설치 npm install -g serve 4) 웹 서버의 document root를 build 폴더로 설정해 실행 npx serve -s build opentutorials.org/mo..
-
[HTML/CSS] Tstory - story 페이지 클론웹 개발/HTML & CSS 2021. 4. 11. 23:49
노마드 코더님이 웹 프레임워크를 사용하기 전에 html css javascript 기초를 탄탄하게 쌓아두어야 한다고 하셨다. react 깔아보니 결국 javascript 기반이라 그런 말을 하셨구나 하는 생각이 들었다. react 공부하면서 틈틈히 공부해둬야겠다며 다짐함과 동시에 시작한 웹 페이지 클론! html css 를 사용하여 티스토리 웹 페이지 클론을 해보았다. 디테일한 디자인 구현보다 레이아웃 잡는 연습을 했는데 (나름 hover도 넣음)flex를 이용해서 컴포넌트 정렬이 확실히 편해졌다. 처음에는 익숙하지 않아서 일일히 컴포넌트 하나하나 다 만들다가중복되는 component은 디자인 적용만 하고 따로 div로 싸서 padding이나 margin을 주는 등 레이아웃을 적용하는 방식으로 리팩토링을..