dev_0hoon

먼저 프로젝트 폴더에 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을 같이 쉽게..

* 본 블로그의 모든 내용은 직접 공부하는 내용을 정리목적으로 관리할 뿐입니다. 글의 내용이 부실한 점 죄송합니다. 요란한 제목으로 리액트를 시작해보기로 했다. (개발자 감성내고 싶었어여..) 스프링도 마찬가지지만 역시 개발은 환경설정이 반이 아닌가? 먼저 리액트를 하기로 마음 먹었다면 -> 리액트 웹사이트를 먼저 방문해봅시다. 리액트 웹 사이트에 시작하기를 누른다면 개발문서를 볼 수 있다. 이런 개발문서를 읽어보며 개발을 시작하는 것을 고수들은 아주 칭찬하지만, function 과 class 정도까지만 아는 나같은 초보 개발자들은 검색을 많이 이용해야 할 것이다. (예를 들면 러닝커브(learning curve) 같은 것들?) 시작하기로 마음먹었으니 시작하기를 눌러준다. (글자색이 검은색으로 돌아오지 ..

HTTP (HYPERText transfer protocol) 중점 요약 웹이 성장하면서 단순한 http의 기능만으로 성능 보안 안정성을 확보하는것이 어려워졌다. 오죽하면 월드와이드웹을 월드와이드 웨이트라고 불렀다. 이미지 오디오 등 멀티미디어를 보내는 프로토콜로 성장했다. 웹을 넘어서서 인터넷을 동작하는 근간이라 할 수 있다. 서버님 html주세요 = request 여깃습니다 하고 물건을 주는 행위 = response 리퀘스트헤더에서 가장 위에있는 것은 요청행 이라 부른다 requestLine requestHeaders 합쳐서 request Message Header status 상태가 나오는데 순서대로 http 버전, 응답결과 (status code) , 응답결과는 이해하기쉽게 풀어쓴것이 나온다 ht..

계속해서 강의를 돌려보다가 역시 해보지 않으면 늘지 않겠다 싶어서 ​ 웹사이트 카피를 열심히 한 날입니다. ​ 와우 역시 직접 해볼 수록 제 약점들이 하나하나 생깁니다. ​ 그러면서 제 공부방법이 만들어 지는거 같습니다. ​ 일단 강의를 정해진 시간만큼 보고 따라합니다 (흩어보는 단계) ​ 혼자서 웹사이트 카피를 합니다 (하는 단계) ​ 제가 못하는 것들을 다시 강의나 검색으로 찾아내서 해결합니다 (약점을 파악하고 개선하는 단계) ​ ​ 총 3가지로 ​ 1. 흩어보는 단계 ​ 여기서는 제 영역이 넓어짐을 느낍니다. 이런거도 있구나 저런거도 있구나 하면서 ​ 지식이 흩뿌려진 상태로 흐릿하게나마 머리속에 남습니다. ​ 2. 하는 단계 ​ 여기서는 그냥 즐기는 타임입니다. 집중해서 코딩하다보면 제 실력이 가늠..