처음 비트나미 wamp를 깐뒤에 C:\Bitnami\wampstack-7.3.28-0\apache2\htdocs 이경로안에 php 파일을 만들고 127.0.0.1/test.php 이렇게 url로 서버에 접속할 수 있다. 다음으로 php를 하기전에 환경설정을 할게 있는데 이 display_errors 를 On으로 바꾸게 되면 (앞에 대문자 주의) 뭔가 틀렸을 경우 오류 표시를 해준다 다만 사용자도 오류를 볼 수 있기 때문에 개인정보 노출 우려가 있기에 프로그램완성후 다시 Off로 처리해줘야 하지 않을까 싶다. opcache.enambel은 1 또는 2면 켜져있다. 0으로 바꿔서 꺼버리는 이유는 켜져있을경우 수정이 바로 변경되지않고 30초 10초 후에 바뀌기에 개발시에 불편하다 설정을 저장했다면 아파치 서버..
리액트를 본다면 아무것도 하지않았으매 리액트 자체에 좋은 개발환경을 위해 짜놓은 것으로 인해 1.7MB이라는 큰 용량으로 잡혀있다 그렇기에 배포할 때에 한번 빌드를 통해야한다. 터미널에 npm run build를 입력해주면 이렇게 build 라는 폴더가 생성되는데 이곳에 html css js 의 형태로만 파일이 남게 되는데 리액트에서 불필요했던 것들을 정리해서 용량을 줄인 폴더의 형태로 만들어준다 그런 뒤에 index.html을 그냥 여는 것이아닌 터미널에 npx serve -s build 적어주면 npx로 한번씩 사용할 수 있는 웹사이트 서버를 만들어준다 용량이 굉장히 줄어든 것을 확인 할 수 있다.
index.js파일안에 import를 살펴보면 ./index.css가 있다 경로를 찾아가 보도록하자 이렇게 index.js에 import 되어있는 css는 현재 index.html에 전체 css라 볼 수 있다. (아직까지 짐작에는 index.js는 html로 진입 전에 값을 받는 도구라고 생각된다 마치 스프링에서는 디스패처서블릿 같은 존재? 또는 컨트롤러 같은 존재같다) 그리고 index.js에서 컴포너트 값을 받은 App.js또한 css를 가지고있는걸 확인 할 수 있는데 이곳의 css는 컴포넌트의 디자인이 된다. 아래에 컴포넌트 값들에 css를 심어주는 import라 생각하면 된다.
먼저 프로젝트 폴더에 public 폴더를 보게 되면 index.html을 볼 수 있는데 그 곳에 id="root" 인 div 태그를 볼 수 있다 html을 안다면 이해를 할것이다. 이 div안에 아무 태그가 없지 않은가? 하지만 브라우저에 검사를 들어가게 되면 이렇게 id가 root 인 태그 안에 class = "App"이 들어와있다. 어디에서 온걸까? src폴더에 index.js를 눌러보자. 이런 코드로 되어있는데 여기서 주목 할 것은 //컴포넌트 , 위에 코드에 보이는 인데 이것을 컴포넌트라 말할 수 있다. 아래에 document.getElementById로 root를 선택해 가져오게 되는데 이 아이디에 App /을 넣는다고 생각하면 된다. 컴포넌트란 사용자 지정 태그라 하는데 이 App이라는 컴포넌..
툴은 비쥬얼 스튜디오 코드를 사용한다. 상단 바에 view -> Appearance -> show Panel 을 누르면 하단에 패널이 표시 되는데 그곳에 TERMINAL 을 사용할 수 있는데 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내부적으로 설치 되기때문에 비주얼스튜디오코드를 사용합니다. 여기서 open folder로 react 프로젝트를 불러온다 ( 이전 글을 봤다면 creact-react-app을 설치한 폴더이다) 그 뒤에 TERMINAL에 npm run start를 입력해준다 성공시에 이렇게 나오게 된다. 그리고 이렇게 서버에 연결 된 웹이 뜨게 된다. 뜨지 않을시에 local 또는 on Your Network에 표시된 url을 브라우저에 입력해준다. ctrl+c 를 누르면 꺼진다. 다시 키고..
이제 원하는 디렉토리에 react-app이라는 폴더를 만들어준다 ( 아무 이름이나 상관없다 자신의 프로젝트 이름을 넣어라) cmd 창을 연후에 cd를 입력한후 enter를 누르지 않은 상태에서 만든 폴더를 넣어주면 자동으로 경로가 나온다 enter를 눌러 그 파일 경로로 이동한 후 (cd는 change directory를 뜻합니다.) 그런 뒤에 create-react-app . 을 입력한다 ( 한칸 띄우고 . 을 꼭 입력해야합니다) 이렇게 설치가 시작될 것이고 완료 됌을 확인 할 수 있다!
*이 글은 유투브 우아한tech의 유안님께서 발표한 강의를 배경으로 정리식으로 작성된 글입니다. 그렇기에 제가 잘못 이해 했을 수 있으니 읽기전에 주의하시길 바랍니다. ioc/ di 란? 토비의 스프링에서는 스프링 프레임워크의 근간 오브젝트의 생명주기와 의존관계에 대한 프로그래밍 모델 유연하고 확장성이 뛰어난 코드를 만들 수 있게 해주는 프로그래밍 모델 유연하고 확장성이 뛰어나다 => 변경이 있을 떄 수정이 쉽다(쓸데 없는 부분은 신경쓰지않고 수정할 수 있다) => 수정할 부분만 수정하면 된다 => 관심사의 분리가 잘 이루어졌다 전략패턴 관심사의 분리를 위해 준비한 코드 public class Car { private MovingStrategy movingStrategy; private int dista..
왜 스프링을 사용하고 있는지에 포커스를 맞춰보겠다 Dependency Injection : 스프링 프레임워크의 핵심 기능 스프링을 사용하는 이유 중 가장 중요했던 이유는 dependency injection 과 이 트랜젝션을 관리해주는 transaction management 가 있다 트렉젝션을 관리하는 것이 어려움이 있었는데 스프링이 깔끔하게관리해주는 부분이있다 물론 transaction management을 지원하는 자바에디션이 있긴하다. java EE로 불리는 enterprise edition이 있는데 하지만 트랜젝션 관리가 쉽지 않았고 컴포넌트를 올리고 설정을 하다보면 여러복잡성이 있었다. 스프링은 단순하게 라이브러리를 사용하며 깔끔하게 처리해주고 dependency injection을 같이 쉽게..
- Total
- Today
- Yesterday
- rejectValue
- reject
- 향해99
- JPA
- filter
- 항해플러스
- 리터럴
- HTTP
- jpa api
- 인터셉터
- 백엔드 개발자 공부
- hypertexttransferprotocol
- BindingResult
- 로그인
- Java
- SpringBoot
- thymleaf
- 백엔드 개발자 역량
- ArgumentResolver
- 항해99
- React
- Intercepter
- 예외처리
- 향해플러스
- 스프링부트
- 향해플러스백엔드
- 컨트
- 스프링공부
- exception
- react실행
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |