HACKDUN

웹 공부를 하다 보면 자주 접하게 될 용어인 프론트엔드와 백엔드 정확히 어떤 것인지 정리를 해보았다. Front end : HTML, CSS, JavaScript 등 ... -> 사용자의 눈에 직접적으로 보이는 영역에 해당함 웹 페이지에 접속했을 때, 보여지는 모든 것 (웹 디자인, 레이아웃, 텍스트, 컬러 등) 각각의 역할을 살펴보면 HTML - 웹 페이지의 전체적인 틀을 구성 CSS - 폰트, 컬러 등의 디자인적인 부분들을 담당 JavaScript - 정적인 페이지를 동적으로 만들어줌 Back end : JAVA, JSP, 스프링 프레임워크, Python , PHP 등 ... -> 눈에 보이지 않는 서버, 프로그램 기능 등의 영역에 해당함 웹 페이지의 콘텐츠를 공급하며, 내부적으로는 DB들을 저장하거..

개발환경을 윈도우에서 우분투로 옮긴 후, 거의 2시간 동안 삽질했던 게 있는데 바로 html 코드 안의 php 코드가 실행되지 않는다는 것 ㅠㅠ.... 예를 들어서 index.php 파일 안의 는 실행이 되는데 실행이 되지 않았다. 그리고 개발자 모드로 확인을 해보니 html 코드 안의 php 코드가 주석처리되서 나타나 있는 것을 알 수 있었다. 1. /etc/apache2/mods-enabled/mime.conf 파일에 내용 추가 AddType application/x-httpd-php .php .php3 .html .htm AddType application/x-httpd-php-source .phps 2. /etc/php/7.0/apache2/php.ini short_open_ta..

제가 삽질을 많이 했던 부분 중 하나가 바로 링크를 거는 부분입니다. ㅠㅠ 그래서 팁을 하나 드리자면 로컬에서는 링크를 href로 걸어도 작동이 되지만, heroku 등에 업로드 하게 되면, 링크가 실행이 되지 않더라구요. angular에서는 href 대신 routerLink 속성을 이용해서 링크를 생성해주셔야 합니다!

Angular는 라우터를 지정해줘야지만 해당 경로로 이동할 수 있음 ex) 127.0.0.1:4200/register 이런 경로 App-routing.module.ts 파일 수정 import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; //RouterModule 읽어오기 import { RegisterComponent } from "./components/register/register.component"; //필요한 컴포넌트 객체 생성 const routes: Routes = [ { path: "", component: HomeComponent }, { path: "register", ..

컴포넌트 생성하기 > ng g component 컴포넌트명 컴포넌트란? -> 페이지 등과 같이 UI를 가지는 구성요소

app.module.ts : 메인 앱 모듈 (각종 모듈, 컴포넌트, 서비스들을 결합하는 장소) ex ) declarations : 컴포넌트를 추가 imports : 모듈 추가 providers : 서비스를 추가 bootstrap : 시작 컴포넌트를 지정 app.component.html : 브라우저의 메인 화면 모습을 지정하는 템플릿 파일

새로운 App 생성 1. 현재 프로젝트 폴더로 이동 > cd node2019 2. >ng new angular-src (새로운 앱 생성 명령) ? Angular routing? Yes (라우팅 기능 사용 여부) ? Stylesheet format? SCSS (스타일시트 사용 방식 지정) -> angular-src라는 이름으로 새로운 앱 생성 성공! -> 각종 패키지/파일들이 자동 설치가 됨 angular-src/node_modules 폴더에 패키지 설치 src/app 폴더에 주요 소스파일이 존재함 App 실행 1. App 폴더로 이동 > cd angular-src 2. App 실행 (node.js 실행되어 있어야 함) > ng serve -o 3. 브라우저로 확인 주소 : http://localhost:..

Angular란 ? 구글이 제공하는 프론트엔드 프레임워크 프론트엔드 웹 페이지를 쉽게 작성/운영하게 도와줌 홈페이지 https://angular.io Angular CLI 웹 서비스를 쉽게 제작할 수 있는 Command Line Interface 도구 (https://cli/angular.io/) Angular CLI 사용 방법 Angular/cli 글로벌 설치 새로운 APP 생성 생성된 APP 폴더로 이동 APP 서비스 시작 (잘 만들어진 기본 웹페이지 포맷을 제공함 -> 이후 필요에 따라 컴포넌트를 추라, 수정) Angular cli 설치 방법 > npm install -g @angular/cli (컴퓨터 내 어디서든 사용가능하게 -g 옵션으로 설치) > npm install --save-dev @a..