JiYoung Dev 🖥

🎈 구성하기 📖 컴포넌트 1. TodoList 2. TodoItem 3. TodoInput 📖 컨텍스트 - TodoContext 전역적으로 사용할 값 1. todos : 내용, 완료여부 (객체로 저장) 2. newTodo : 내용 🎈 코드 작성하기 (순서) 1) 화면에 첫 Todo 보이게 하기 컴포넌트 연결 컨텍스트 연결 컨텍스트로 사용할 값 state로 저장 후 초깃값 지정하여 출력되도록 2) 입력창에 글씨를 입력하면 newTodo에 저장 handleNewTodo() 3) Add 버튼클릭시 Todos에 newTodo 객체 추가, input 텍스트 창 공백으로 addNewTodo() 4) add 버튼 클릭시 추가된 객체 화면에 띄우기 addNewTodo() 5) delete 클릭하면 해당 리스트 삭제 d..

🎈 context API 쓰는 이유 📖 props의 단점 단방향 데이터의 흐름 위와 같은 데이트 흐름을 단방향 데이터 흐름 (one-way reactive data flow)이라하고 react는 이러한 흐름을 가지고 있음 단방향 데이터 흐름의 장점 1. 관리에 용이함 2. DOM과의 궁합 - tree구조의 dom 구조에 유리함 단방향 데이터 흐름의 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없음 ⚙️ 부모요소가 자식요소의 값을 받아볼 수 있도록 하는 방법 귀찮다 >> contextAPI를 사용함 🎈 context API 📖 context API 사용하는 이유 props를 사용하면 여러번 사용해야 함 데이터를 따로 보관하여 끌어다 쓰는 법 >> Context API 장점 : 전역적으로 사용할 수..

지난주부터 리액트를 배우기 시작했는데 구조와 문법, 쓰는 이유에 대하여 이해가 안되어 따로 정리한 내용! 1. 리액트(React)란? 리액트란, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 meta(구 facebook)에서 제공해주는 라이브러리로 주로 SPA(Single Page Application)을 만들 때 사용 React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있음 1-1. 기존 자바 스크립트의 단점 1) HTML과 JS가 가진 분리감 & 직관적이지만 너무 긴 자바스크립트 문법 자바스크립트에서 HTML 요소에 접근하기 위해서는 document.getElementById 등 으로 시작하는 긴 코드 작성을 통해 요소를 불러 올 수 있음 리액트는 HTML과 JS 문서를 합..

🎈 Build 흩어진 자원들을 WAS가 인식할 수 있는 구조로 맞춰주는 것 ex. 화면에 보여야 하는 것은 web-app 내부에 들어가야 함. WEB-INF는 클라이언트가 직접 접근 불가한 곳으로 라이브러리 등을 저장 과거에는 구조를 만들어줘야 했음 >> 자동화를 위한 만들어진 도구 >> 빌드 도구 📖 빌드도구 ⚙ Ant 자바 프로젝트의 빌드를 자동화해주는 빌드 툴 ⚙ Maven 자바 프로젝트의 빌드를 자동화해주는 빌드 툴 컴파일과 빌드를 동시에 수행, 테스트를 병행하거나 서버 자원을 관리할 수 있는 환경 제공 Ant를 간편화한 것 - Ant의 경우 - Maven의 경우 라이브러리 파일을 직접 다운받아 넣어주는게 아니라 pom.xml에 적기만 하면 됨 🎈 Maven 실습 📖 Maven 프로젝트 생성 Gr..

🎈 디자인 패턴(Design Pattern) 의사소통 수단의 일종 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책 소스나 기계 코드로 바로 전환될 수 있는 완성된 디자인은 아니며 다른 상황에 맞게 사용될 수 있는 문제들을 해결하는데에 쓰이는 템플릿 프로그래머가 어플리케이션이나 시스템을 디자인할 때 공통된 문제들을 해결하는데에 쓰이는 형식화된 관행 🎈 웹 디자인 패턴 코드의 재사용과 유지보수의 편리성을 위해서 정해진 약속대로 구조를 디자인 하는 것 Spring 프레임워크에서는 MVC 패턴이 기본 🎈 MVC패턴 📖 웹 MVC 패턴 2가지 ⚙️ Model1 view, controller 모두 jsp에서 작성 ⚙️ Model2 view는 jsp (htm..