IT 개발85 react 확장프로그램 : 컴포넌트 코드 자동완성 code snippet 수업 들을 땐 일일이 import나 컴포넌트를 타이핑했는데,code snippet의 단축키를 통해서 편리하게 자동 완성되는 기능을 알게 되었다!VS Code의 Reactjs Code Snippet라는 확장 프로그램이다 리액트의 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트가 존재하는데리액트 개발자들은 함수 컴포넌트 사용을 권장한다고 한다 (함수 컴포넌트 + hooks 사용) rsc + Tab키 : 함수 컴포넌트 코드 자동완성 rcc + Tab키: 클래스 컴포넌트 코드 자동완성) 2021. 9. 15. React 학원에서 리액트에 대한 아주 기초적인 부분만 배워서 적어도 리액트를 통한 프로젝트를 구현하고 싶다는 목표로벨로퍼트님의 리액트를 다루는 기술이라는 책을 읽게 되었다. 설명이 너무 잘되어있어서 아주 만족하면서 읽고 있다 리액트의 이해 자바스크립트의 프레임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View Model) 아키텍처를사용하여 애플리케이션을 구조화한다.이러한 아키텍처의 구조는 데이터를 관리하는 model, 그 데이터가 사용자에게 보이는 view라는 부분이 존재한다사용자로 인해 어떠한 이벤트가 발생하면(마우스 클릭 등) 컨트롤러가 모델 데이터를 수정하고, 변경된 사항을 뷰에 반영한다. 하지만 규모가 크면 클수록 이러한 구조가 매우 복잡해지고 제대로 관.. 2021. 9. 14. 반응형웹 만들기 (디바이스별 분기점) 최종 프로젝트 목표 중 하나였던 반응형 웹 구현하기미디어 쿼리를 배워본 적도, 사용해본 적도 없던 터라 바로 구글링을 했다모바일퍼스트, 데스크톱 퍼스트 등 웹페이지를 구현할 때도 처음에 고려해야 할 사항이 많다는 걸 다시 느꼈다 요즘은 모바일로 접속하는 횟수가 많기 때문에 모바일퍼스트 추세라고는 하지만아직 데스트톱을 기준으로 웹페이지를 구현하는 곳도 많다고 한다.만약 모바일퍼스트로 웹앱을 구현하고 싶다면, 모바일 기준으로 먼저 페이지를 구현 후 차츰차츰 태블릿, 웹브라우저 등페이지를 구현해야 한다고 한다. 우선 head 태그에 meta viewport를 설정해줘야 해서위의 meta viewport태그를 선언해줘야 한다content에 작성된 의미는, width=device-width : 화면의 넓이를 디.. 2021. 9. 8. SweetAlert으로 Alert창 꾸미기 (사용법과 사용예제) 프로젝트를 진행하면서 로그인하거나 그 외에 alert창을 띄울 때, 디자인을 추가하고 싶다는 생각을 하다가 발견 한 sweetalert!사용법이 매우 매우 간단하다 터미널에 직접 설치하는 방법도 존재하지만 난 jsp 페이지에 script를 추가하는 방식으로 사용하였다 사용 방식은,alert 대신 swal을 사용해줘야 한다. swal('타이틀', '내용', '아이콘'); 형식으로 작성해주면 되는데, 밑에 실제로 내가 사용 한 예제를 추가해봤다 swal('로그인 성공!', data.login.result.name+"님 로그인되었습니다.", 'success') swal('로그인 실패!', "아이디와 비밀번호를 확인해 주세요", 'warning'); 그런데 이런 식으로 만 작성하면 OK 버.. 2021. 9. 7. React 시작하기 2 App.js의 Render에서 리턴해줬던 걸 해석해서 id가 root인 위치에 넣어줬다 바로 전 포스팅에서도 작성했지만클래스에서 함수를 만들 땐, 화살표 함수를 사용해야 그 안에서 this 사용이 가능하다 Vue, React 에선 아이디 속성을 잘 주지 않는다 (그런 패턴이 잘 보이지 않음)왜냐하면 SPA 기반으로 만들어서 하나의 페이지에서 아이디는 겹칠 수 없고,애플리케이션 전체에서 유일해야 하는데 이를 SPA에선 특히 관리하기 쉽지가 않기 때문이다그래서 아이디 대신 클래스 사용이 많다 a와 b는 다르다그래서 새로운 배열의 참조값을 얻어내야 하는데, 이는 기존 배열에 아이템을 추가해서 새로운 배열의 참조값을얻어내는 것이다. 이렇게 하는 방법이 펼침 연산자... 또는 concat을 이용하면 .. 2021. 9. 6. React 시작하기 먼저 npm install -g yarn을 설치한다yarn이 안되면 npm도 상관없지만 yarn은 npm의 편리한 버전이라고 생각하면 된다 원하는 경로에 create-react-app 프로젝트명을 입력하면 자동으로 설치가 진행된다 설치되는 동안 VSC에 플러그인 설치하기 1. ESLint ( javascript 문법 체크)2. Reactjs code snippets (Charalampos Karypidis)3. Relative Path (상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구)4. Guides(들여쓰기 가이드라인) 설치 완료되면 cd hello 입력하여 생성한 프로젝트 파일로 경로를 옮긴 후yarn start를 입력하여 서버를 실행시켜준다 리액트 첫 실행 시 브라우저에.. 2021. 9. 5. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음 반응형
