분류 전체보기 210

node>검색기능 만들기 1

오늘은 게시물의 제목 검색기능 같은걸 만들어봅시다.실은 알아서 다 할 수 있기 때문에 강의 끄고 알아서 해봅시다.혼자 코드를 짜고 싶으면 어떻게 하랬습니까검색기능이 어떻게 동작하는지 한글로 설명부터 하고 그대로 코드로 옮기면 됩니다. 1. 검색 UI 하나 만들고 거기에 "안녕" 이라고 검색어를 입력해서 서버로 전송하면2. 서버는 DB에서 "안녕"이 포함된 제목을 가진 게시물들을 찾아서3. 그 게시물들을 ejs 파일에 넣어서 유저에게 보내주기 근데 안녕이란 단어가 포함된 document들을 찾아오는 법은 아직 안배웠죠? 안배운건 당연히 따로 검색해보면 됩니다. 힌트는 정규식 쓰면 쉽습니다.찾아봐도 모르겠으면 일단은 그냥 제목이 ‘안녕’이랑 정확히 일치하는 글만 찾아오셔도 봐드림     1. 검색 UI 만들..

Node.js 2024.09.19

node>AWS에 Node.js 서버 배포하기 (Elastic Beanstalk)

터미널 열고 node server.js 아니면 nodemon server.js 입력해두면 이러면 여러분 컴퓨터에서 서버를 운영할 수 있습니다. 이제 http://님컴퓨터의ipv4주소:8080 으로 접속하면 사이트 접속이 가능한데 컴퓨터 24시간 켜둘 것입니까 그러지 말고 안전하게 클라우드 서비스에서 컴퓨터 빌려서 서버를 띄워놔봅시다. 사람들 많이 쓰는 AWS를 이용해봅시다.     AWS Elastic Beanstalk 쓸건데 실은 AWS에는 EC2 상품이 가장 유명한데 그냥 컴퓨터 한대를 빌리는 상품입니다.그 컴퓨터에다가 nodejs 설치하고 코드넣고 똑같이 서버띄워놓으면 끝이긴 한데하지만 터미널을 안써봤으면 터미널 써서 그런 짓거리하는게 매우 오래걸리고서버가 맛이갔을 때 자동 재시작도 해야하니 pm2..

Node.js 2024.09.19

node>API들 다른 파일로 분리하기 (Router)

개발하다보면 app.get() app.post() 이런 코드가 몇백개 쌓일 텐데이걸 한 파일에 계속 길게 적으면 나중에 뭔가 하나 찾고 수정하기 힘들 수도 있기 때문에API들을 다른 파일로 쪼개놓는 것도 좋습니다.  app.get('/shop/shirts', (요청, 응답) => {  응답.send('셔츠 파는 페이지입니다')})app.get('/shop/pants', (요청, 응답) => {   응답.send('바지 파는 페이지입니다')})  연습용으로 API 두개를 위처럼 만들어놓고 시작합시다.이제 이 API를 다른 파일로 빼고 싶을 때 어떻게 하는지 알아봅시다.     API 보관용 폴더랑 파일 만들기  API들 보관할 폴더와 파일을 하나 만들어봅시다.  API가 웹페이지 보내는 역할을 하는 경우 ..

Node.js 2024.09.19

node>이미지 업로드 기능 만들기 2

저번시간에 AWS 셋팅 완료했으면이제 글과 함께 이미지를 업로드할 수 있는 기능을 만들어봅시다.  1. 유저가 글과함께 이미지를 서버로 전송하면2. 서버는 그걸 S3에 저장시켜주면 끝이겠죠근데 저장하면 끝이아니라나중에 그 이미지를 html페이지 이런데서 보여주고 싶으면 어떻게 하죠? 어떻게 하냐면 S3에 파일이나 이미지를 업로드하면 URL을 하나 알려주는데 그 URL로 접속하면 이미지가 나옵니다. 그래서 이미지 URL을 DB에 글과 함께 저장해뒀다가 필요할 때 꺼내쓰면 됩니다.   그래서 글과함께 이미지 업로드할 수 있는 기능을 쭉 한글로 정리부터 하면 1. 글작성페이지에 이미지 업로드할 수 있는 인풋하나 만들고 2. 글과 이미지를 서버로 전송시 서버는 전송된 이미지를 S3에 저장시키고 3. 그럼 URL..

Node.js 2024.09.19

안드로이드 기능 구현의 단계별 설명

안드로이드 기능 구현의 단계별 설명1. 버튼 클릭 이벤트 처리가장 기본적인 기능 구현 중 하나로, 버튼을 클릭했을 때 특정 동작이 실행되도록 하는 방법입니다.버튼 추가 (XML 파일에서) 코드 복사Button android:id="@+id/myButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click Me"/>xml이벤트 처리 (Java/Kotlin 파일에서)java코드 복사Button myButton = findViewById(R.id.myButton); myButton.setOnClickListener(new View.OnClickListener() { @Override publi..

안드로이드 주요 UI 요소 및 활용 방법

안드로이드 주요 UI 요소 및 활용 방법1. 이미지와 비디오 추가ImageView (이미지뷰)이미지를 표시하는 기본 요소.android:src 속성을 사용하여 이미지를 설정하며, scaleType으로 이미지 크기 조정 방법을 지정할 수 있습니다.xml코드 복사ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/sample_image" android:scaleType="centerCrop"/>VideoView (비디오뷰)동영상 재생을 위한 UI 요소.setVideoURI() 메서드를 통해 비디오 파일의 경로를 설정하고 재생할 수 있습니다.xml코드 복사VideoView ..

안드로이드 스튜디오 앱개발 단계

1단계: 개발 환경 설정 자세히 알아보기안드로이드 앱 개발을 시작하기 위해 필요한 환경 설정 과정을 자세히 설명하겠습니다. 이 과정은 안드로이드 스튜디오 설치부터 프로젝트 생성까지의 필수적인 설정을 포함합니다.1. 안드로이드 스튜디오 설치다운로드 및 설치안드로이드 스튜디오를 안드로이드 공식 웹사이트에서 다운로드합니다.다운로드한 설치 파일을 실행하여 설치 과정을 진행합니다. 설치 중에 Java Development Kit (JDK)도 함께 설치하게 됩니다. JDK는 안드로이드 앱 개발에 필수적입니다.안드로이드 스튜디오 첫 실행설치가 완료되면 안드로이드 스튜디오를 처음 실행합니다. 처음 실행할 때 몇 가지 초기 설정 화면이 나타납니다. 기본 설정으로 진행해도 무방하며, 향후 필요에 따라 설정을 변경할 수 있..

리액트 조건부 상태관리

구매자와 판매자의 경우에 따라 컴포넌트를 다르게 표시하는 방법은 보통 조건부 렌더링을 통해 구현할 수 있습니다. 이를 위해 사용자가 구매자인지 판매자인지를 식별하는 상태 값을 가지고, 그 상태에 따라 다른 컴포넌트를 렌더링하면 됩니다. 예를 들어, React와 같은 프론트엔드 프레임워크를 사용한다면 다음과 같은 방법으로 구현할 수 있습니다: 1. **상태 관리**: 사용자 타입(구매자/판매자)을 상태로 관리합니다. 예를 들어, `userType`이라는 상태 값을 생성하여 사용자가 구매자인지 판매자인지를 저장합니다. 2. **조건부 렌더링**: `userType` 값을 기준으로 조건부 렌더링을 사용하여 다른 컴포넌트를 렌더링합니다. ### 예시 코드 (React) ```javascript import Re..

카테고리 없음 2024.09.10

spring boot)MySQL Database 호스팅 받기

실제 서비스를 운영하려면 고객데이터 상품데이터 주문데이터 이런걸 다 저장해둬야하지 않겠습니까엑셀이나 메모장에 저장해둬도 되긴 하는데 보통은 데이터베이스를 사용합니다.그래야 대량의 데이터를 보관해둘 수도 있고 빠르게 원하는 데이터만 입출력할 수 있으니까요.     관계형 데이터베이스 데이터베이스는 여러 종류가 있습니다. key : value 형태로 단순하게 저장하는 것도 있고key : value를 여러개 묶어서 document 형태로 저장하는 데이터베이스도 있고 그래프나 벡터형식을 저장할 수 있는 데이터베이스도 있습니다.근데 우리는 관계형 데이터베이스를 써볼겁니다.역사와 전통이 있고 일반적으로 많이 쓰니까요.      (1) 관계형 데이터베이스는 표 형식으로 데이터를 저장해둡니다.맨 윗줄에 어떤 데이터를 ..

카테고리 없음 2024.09.10