JiYoung Dev 🖥

LifeCycle 현재 react는 node.js 서버 위에서 돌아가고 있음. node.js는 싱글스레드로 작업을 진행하는 프로세스가 하나 밖에 없음. 그렇기 때문에 위에서 아래로 코드가 작성된 순서대로 진행되는 java와는 달리 코드 중간에 조건문과 같은 무거운 작업이 있으면 위에서 아래로 코드 작성 순서대로 작업을 진행하지 않고, 가벼운 작업부터 진행 후 무거운 작업을 진행시킴. 따라서 React에서는 위에서 아래로 순서대로 코드를 작성한다고 해서 원하는 대로 작업이 실행되지 않음. Reactsms 컴포넌트가 실행되거나, 업데이트 되거나, 삭제될 때 특정 이벤트가 발생함. 이러한 React의 특성을 생명주기(LifeCycle)이라고 하며, React를 통해 우리가 원하는 대로 웹페이지가 작동하게 만들..

useRef 🎈 useRef 예제 작게 버튼을 클릭하면 사각형의 크기가 작게, 원본 버튼을 클릭하면 원본 크기로, 크게 버튼을 클릭하면 사각형의 크기가 크게 변하게 만들기 📖 자바스크립트 자바스크립트에서는 이 문제를 풀기위해 사각형 요소에 접근하기 위해서 document에 접근해야 했음 사각형 요소 : 자바스크립트로 id가 box인 요소에 접근하기 : document.getElementById('box").style.width= 100px 📖 리액트에서 변경시키려면? DOM으로 마찬가지로 접근해야함 useRef 사용 usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용 - 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음 - React..

🎈 FrontController를 사용하는 이유 📖 FrontController 사용하기 전 JoinController, LoginControll를 모두 servlet으로 작성 servlet은 Httpservlet 객체를 받기 때문에 일반 class보다 무거움 → servlet이 많아지면 프로젝트 자체가 무거워짐 따라서 FrontController라는 하나의 컨트롤러(servlet)를 만들고, 그 안에서 각각의 기능에 대한 클래스를 만들어 처리하도록 만듦! 🎈 FrontController 사용하기 📖 사용자 요청 구분 방법 FrontController를 사용하면 mapping값이 하나 > mapping값만 보면 로그인 기능을 하는지, 회원가입 기능을 하는 지등의 어떤 처리를 하는지 구분할 수 없음 사용자..

🎈 구성하기 📖 컴포넌트 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..

🎈 JSP 내장객체 - HttpServletResponse 📖 sendRedirect() 브라우저(클라이언트) 주소창에 작성된 경로 >> 브라우저(클라이언트)가 그 경로에 직접 요청을 했다! 라는 의미 우리는 Ex03redirect로 요청함 최종 주소창에는 Ex03createInput.html이 뜸 즉, 최종적으로 브라우저(클라이언트)가 Ex03createInput.html에 요청!! ⚙️ sendRedirect의 프로세스 서버는 어디로 요청해야하는지 경로를 응답 클라이언트는 응답받은 경로로 요청 요청과 응답이 2번씩 일어남!✨✨ 요청은 request객체를 가지고 사용 가능 1번에서 사용한 request객체와 3번에서 사용한 request객체는 이름만 같을 뿐 서로 다른 객체임 이 둘은 서로 값(데이터)..

Session 🎈 세션(Session) 클라이언트는 세션을 통해 사용자의 정보가 아닌 세션 아이디를 보유하고 있음. 사용자 정보는 서버가 가지고 있음. (브라우저가 종료되기 전까지) - 세션 아이디 : 서버가 클라이언트에게 임의적으로 발급하는 아이디. 모든 클라이언트마다 다 다르게 발급함 쿠키는 클라이언트가 정보를 가지고 있음 사용자의 정보는 서버에서 저장, 클라이언트는 세션 아이디만 가지고 있게됨 세션을 사용하면 사용자의 정보는 서버상에서만 저장되므로 쿠키에 비해 보안상 좋을 것 같지만, 세션 아이디는 클라이언트 하나만을 식별하는 값으로 사용자 정보가 될 수 있음. 세션아이디가 넘겨지는 과정을 보다가 공격을 할 수 도 있음 완전하게 보안상으로 좋다고 할 수는 없다. 쿠키보다는 좋을 수 있음 📖 세션 사..