🤍Context API란 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능 🤍전역 상태 관리 일반적인 리액트 네이티브(React-Native) 애플리케이션의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됨. 예를 들어, 어떤 데이터를 App 컴포넌트에서 관리할 경우, App 컴포넌트로부터 데이터를 필요로 하는 컴포넌트까지 props를 통해 값을 전달해 사용함. -> 하지만 props를 사용하는 방법은 번거로움. (관리하는 상태가 추가, 변경될 경우 과정에 속한 모든 컴포넌트를 찾아 수정해야함.) 이때, Context API를 생성하면 중간 과정에 있는 컴포넌트들을 거치지 않고 한 번에 원하는 데이터를 바로 받아와서 사용할 수 있다. 🤍Context API 실습 expo init react-nat..

🔍Vue.js 이벤트 핸들링 기존 Javascript의 'addEventListener' 메서드, jQuery의 '.on' 메서드와 같이 이벤트를 연결하여 사용하는 기능 'v-on' 디렉티브, '@' 2가지를 사용해서 이벤트 핸들링 처리함. 🔍메서드 이벤트 핸들러 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하여 처리 click 이벤트 핸들링의 기본적인 예제를 해보기 전에 기존에 자바스크립트에서 사용했던 onclick 이벤트를 적용시켜보면 버튼을 누르면 설정해둔 alert창이 잘 뜬다. v-on:을 붙여서 이벤트 핸들러를 적용시켜도 동일하게 잘 뜬다. 이번에는 함수를 통해 처리해보았다. 더하기 버튼, 빼기 버튼이 잘 동작한다. submit에도 적용시킬 수가 있다. 입력 후 버튼을 누르면..

2015년에 자바스크립트 문법에 매우 큰 변화가 있었음. => ES2015(ES6) 🔍const, let 보통 var로 변수를 선언하는 방법부터 배우지만 이제부터 var은 const, let이 대체함. if(true){ var x = 3; } console.log(x);//3 if(true){ const y = 3; } console.log(y);//error x는 정상적으로 출력, y는 에러가 발생하는 이유는 var은 함수 스코프를 가지므로 if문의 블록에 영향을 받지 않는다. 하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다. (블록의 범위는 if, while, for 등에서 볼 수 있는 중괄호임.) const는 한 번 값을 할당하면 다른 값을 할당할 수 없고 ..

노드 핵심 개념 이해하기 -Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. 🔍서버와 런타임 서버 노드는 다양한 자바스크립트 애플리케이션 중 서버 애플리케이션 실행 시 제일 많이 사용함. 서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 or 프로그램을 말함. 클라이언트 : 브라우저, 데스크톱 프로그램, 모바일 앱... 자바스크립트 런타임 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 말한다. 노드는 자바스크립트 런타임 -> 노드는 자바스크립트 프로그램을 컴퓨터에서 실행 가능 -> 쉽게 말해 노드는 자바스크립트 실행기라고 볼 수 있음. (기존에는 자바스크립트 프로그램을 웹 브라우저 위에서만 실행 가능했다.) 🔍이벤트 기..

💡기존에는 form 태그에 action으로 주소를 걸어서 전송하는 방식을 사용했었는데 여기에서는 기존의 방식이 아닌, JSON을 활용해서 Ajax로 회원가입을 요청하는 방식으로 구현할 것이다. 1. 서버 요청이 들어왔을 때 기본으로 스캔하는 곳인 src/main/resources/static 아래에 user.js 파일을 생성해 준다. 2. 회원가입 버튼이 기존에 submit 타입이었는데 타입을 지우고 id값을 부여해 준다. 회원가입완료 3. id값을 가져와서 자바스크립트 코드를 작성해 준다. 4. 테스트용으로 아무 값을 입력하지 않고 회원가입완료 버튼을 눌러보면 alert창이 잘 뜨는 것을 확인할 수 있다. 5. 이제 ajax 코드를 작성해줄 것이다. 💡회원가입 시 Ajax를 사용하는 2가지 이유? 1...

✅일반 변수의 선언 방식 let num = 1; num = 2; ✅useState 선언 방식 let [num, setNum] = useState(1); setNum(2); ✅useState 사용 시 주의할 점 상단에 정의할 것 바로 실행하지 말 것 반복문 안에 정의하지 말 것 if문 안에 정의하지 말 것 🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때 아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나 console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다. 이때 useState()를 활용할 수 있다. 실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다. useState를 사용하면 -> setNum이라는 함수를 사용했을 때..

DataSource 이용해 데이터베이스 연동 1) ConnectionPool 등장 배경 -애플리케이션에서 DB 연결 과정에 시간이 많이 걸림(기존 연동 방법 문제점) ==>미리 Connection 객체를 생성한 후 미리 데이터베이스 연결을 맺음, 애플리케이션은 DB 연동 작업 발생시 이 Connection 객체를 이용해서 작업. 2)JNDI(Java Naming and Directory Interface) -필요한 자원을 키/값(key/value)쌍으로 저장한 후 필요할 때 키를 이용해 값을 얻는 방법. -커넥션 풀에 적용 -톰캣 컨테이너가 ConnectionPool 객체를 생성하면 이 객체에 대한 JNDI 이름(key)을 미리 설정해놓음. -그러면 웹 애플리케이션에서 DB와 연동 작업할 때 이 JNDI..