![]()
public 폴더에서 이미지 가져오기 1. public 폴더 리액트 프로젝트를 하는 도중, 이미지 파일을 많이 불러와야 하는 상황이 발생하는 경우가 있습니다. import로 이미지를 불러오니, 너무 많은 코드가 작성되고 심지어 지저분합니다.. import로 불러오는 방식 대신 public 폴더에 이미지 파일들을 옮긴 후, 불러오겠습니다! 그 전에, public 폴더에 대해 알아봅시다. public 폴더란? 정적 자산을 호스팅하기 위한 장소입니다. 이 폴더의 파일들은 빌드 프로세스에서 변경되지 않고, 그대로 유지됩니다. CSS 파일, 이미지, 폰트 등의 정적 자산들은 public 폴더에 위치할 수 있습니다. 2. public 폴더에서 이미지 가져오기 그럼 이제, public 폴더에서 이미지를 가져와 봅시다..
![]()
CI/CD 1. CI/CD CI/CD에 대해 알아봅시다. 2. CI (Continuous Integration) CI란? 영어 그대로 지속적 통합을 뜻합니다. 여러 개발자가 동시에 작업할 때, 애플리케이션의 일부를 통합하는 프로세스입니다. 주로 코드 변경이 발생할 때마다 자동으로 테스트를 수행하여, 코드의 빌드 가능성을 검증하고, 이를 통해 팀원 간의 협업을 용이하게 하고, 애플리케이션의 품질을 유지하며 개발 주기를 단축시킵니다. 3. CD (Continuous Deployment) CD란? 지속적 배포를 뜻합니다. CI 이후, 자동화된 프로세스를 통해 애플리케이션 변경 사항을 실제 환경에 배포하는 것을 의미합니다. 즉, 코드 변경사항이 테스트를 통과하면, 자동으로 프로덕션 환경에 배포됩니다. 이를 통해..
![]()
데이터 포맷 1. 데이터 포맷 이번엔 데이터 포맷에 대해 알아보겠습니다. 데이터 모팻이란? 데이터를 어떻게 표현하고 구조화하는지에 대한 것입니다. 다양한 종류의 데이터를 처리하고 다룰 때, 사용됩니다. 2. 데이터 포맷 종류 JavaScript에서 자주 사용되는 몇가지 데이터 포맷에 대해 알아봅시다. 1) JSON JSON(JavaScript Object Notation)은 JavaScript에서 데이터를 표현하기 위한 경량의 데이터 형식입니다. 키-값 쌍의 집합으로 구성되어 있으며, 배열과 객체의 형태를 가집니다. JSON의 기본적인 형태는 다음과 같습니다. { "students": [ { "name": "Kim", "age": 20, "sex": "female", "grade": 3 } ] } JS..
![]()
웹 스토리지 1. 웹 스토리지 웹 스토리지에 대해 알아보겠습니다. 웹 스토리지란? 웹 브라우저에서 데이터를 장시간 보관하기 위한 메커니즘입니다. 주로 두가지 유형이 있습니다. 로컬 스토리지(Local Storage) : 브라우저 종료 시에도 유지되는 데이터 세션 스토리지(Section Storage) : 새로 고침 시에도 유지되는 데이터 (같은 탭 내에서만) 웹 스토리지는 쿠키와 달리 요청 헤더에 포함되지 않고, 클라이언트에서만 조정 가능하며, 해당 URL에서만 접근 가능합니다. 2. 웹 스토리지 쓰기, 접근, 삭제 웹 스토리지 쓰기, 접근, 삭제 또한 로컬과 세션으로 나뉩니다. 웹 스토리지 쓰기는 다음과 같은 방법으로 사용합니다. // 1. 웹 스토리지 쓰기 // 로컬 스토리지 localStorage...
![]()
쿠키 받아오기(Cookie) 1. 쿠키 받아오기 이번엔 브라우저 기능인 쿠키에 대해 알아보겠습니다. 쿠키(Cookie)란? 브라우저에 저장되는 작은 크기의 문자열을 뜻합니다. 주로 웹 브라우저에서 사용되며, 웹 서버에서 클라이언트로 전송되어 클라이언트의 로컬 컴퓨터에 저장됩니다. 2. 쿠키의 구성 쿠키의 구성은 다음과 같습니다. Name : 키 Value : 값 Domain : 사용하는 도메인 Path : 접근 경로 Expires / max-age : 쿠키 만료일 HttpOnly : HTTP외의 통신 허용 여부 Secure : 보안 설정 3. 쿠키 설정 쿠키를 설정하는 방법은 크게 두가지가 있습니다. 클라이언트 코드에서는 다음과 같습니다. document.cookie="name=juv; path=/; m..
![]()
네트워크 요청 1. 네트워크 요청 네트워크 요청에 대해 알아봅시다. 네트워크 요청이란? 클라이언트가 서버에 데이터를 요청하거나 보내는 일련의 통신 과정을 말합니다. 2. Fetch API Fetch API는 JavaScript에서 네트워크 요청을 만들고 응답을 다루는 기능을 제공하는 기술입니다. 기존의 XMLHttpRequest 객체보다 더 간결하고 강력한 인터페이스를 제공하합니다. fetch 함수는 주로 다음과 같은 방식으로 사용합니다. fetch('URL', { method: 'POST', // method : 네트워크 요청의 종류 headers: { // headers : 서버에 부가적으로 전달할 정보를 넣음 Cookie: '', }, body: { // body : 데이터를 실어 보내는 필드 na..
![]()
에러 핸들링(Error Handling) 1. 에러 핸들링(Error Handling) 에러 핸들링에 대해 알아봅시다! 에러 핸들링(Error Handling)이란? 코드 실행 중 발생할 수 있는 예외 상황에 대응하는 방법입니다. 올바른 에러 핸들링은 애플리케이션의 안정성을 높이고, UX를 향상 시킵니다. 2. 사용방법 대표적인 에러 핸들링 DOM 이벤트는 다음과 같습니다. try { // 실행하려는 코드 } catch (error) { // error 객체 // 에러 발생 시, 실행할 코드 } finally { // 항상 실행할 코드 } 여기서 error 객체의 속성은 다음과 같습니다. Error { name : 에러명, message : 에러의 상세 내용, stack : 호출 스택, } 예를 들어 봅..
![]()
이벤트(Event) 1. 이벤트(Event) JavaScript에서 이벤트에 대해 알아봅시다! 이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다. 이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다. 이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다. 2. 이벤트 핸들러 종류 대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다. 1) click 요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다. 예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다. See the Pen Tistory_Front-End Study_JavaScript..
![]()
브라우저 객체 1. 브라우저 객체 브라우저 객체에 대해 알아봅시다! 브라우저 객체란? 웹 브라우저 환경에서 사용할 수 있는 객체들을 말합니다. 이러한 객체들은 웹 페이지의 구조, 동작, 스타일 등을 조작하는 데 사용됩니다. 2. 브라우저 객체의 종류 주요한 브라우저 객체들은 다음과 같습니다. 1) Window 객체 모든 브라우저 객체의 최상위 객체로, 브라우저 윈도우를 나타냅니다. 전역 객체이기도 하며, 브라우저 창의 크기, 위치, 브라우저 히스토리, 타이머 등을 다룰 수 있습니다. window 객체의 속성은 다음과 같습니다. window { alert : 경고 메시지 출력 함수, confirm : 확인 메시지 출력 함수, prompt : 입력 메시지 출력 함수, setTimeout : n초 후에 함수를..
![]()
DOM 1. DOM DOM(Document Object Model)에 대해 알아봅시다. 여기서 DOM이란? HTML, XHTML 또는 XML 문서의 프로그래밍 인터페이스를 나타냅니다. 이는 웹 페이지의 구조화된 표현을 나타내며, 프로그래밍 언어가 해당 구조를 조작할 수 있는 방법을 제공합니다. 2. 특정요소 찾기 그러면 DOM을 다뤄봅시다! DOM에서 특정 요소를 찾는 데 사용되는 주요 메서드로는 다음과 같이 있습니다. document.getElementById('아이디') : 해당 ID를 가진 요소를 찾습니다. document.querySelecter('css') : CSS 선택자를 사용하여, 첫 번째 일치하는 요소를 반환합니다. document.getElementsByClassName('class')..
![]()
디버깅(Debugging) 1. 디버깅(Debugging) 디버깅(Debugging)에 대해 알아봅시다! 디버깅(Debugging)이란? 컴퓨터 프로그램 개발 단계 중 발생한 시스템의 논리적 오류 or 버그를 찾아내고 수정하는 작업 과정을 말합니다. 2. 디버깅 도구 및 기법 JavaScript에선 디버깅을 수행하는 데 사용할 수 있는 몇 가지 도구와 기법이 있습니다. 1) 브라우저 콘솔 대부분 웹 브라우저는 개발자 도구를 제공하며, 코드 실행 시 발생하는 오류를 보고하는 console이 포함되어 있습니다. 오류 메시지, 경고 및 로그 메시지를 확인하여 코드에서 발생하는 문제를 식별할 수 있습니다. Chrome 브라우저에서는 F12를 누르고, Console 탭을 선택하여 콘솔을 열 수 있습니다. 2) 디..
![]()
데이터를 받아와서 상품 목록 만들기 1. 데이터를 받아와서 상품 목록 만들기 이번엔 데이터를 직접 받아와서 상품 목록을 만들어 봅시다! #1. assets 폴더 안에 oneRoom.js 파일을 생성한 후, post.js 파일 안에 다음과 같이 입력하여 데이터를 추가해 줍니다. export default [ { id: 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000, }, { id: 1, title: "Changdong Aurora Bedroom(Queen-size)", image: ..
![]()
export와 export default의 차이 1. export와 export default의 차이 코딩을 하다보면, export를 사용하는 경우와 export default를 사용하는 경우가 있습니다. 이 둘의 차이는 뭘까요? 2. export export는 모듈에서 하나 이상의 변수, 함수 or 객체를 내보내는 데 사용합니다. 여러 개의 이름이 지정된 항목을 모듈에서 내보낼 수 있습니다. 예를 들어 봅시다. → 이 경우, aaa와 bbb를 내보내고 다른 모듈에서 가져올 때, 이름으로 가져올 수 있습니다. // 항목 1 const aaa = 'aaa'; // 항목 2 function bbb() { return 'bbb'; } export {aaa, bbb}; /* 이렇게도 사용할 수 있음 export..
![]()
Modal 0. 시작하기 전 일단 시작하기 전에 페이지를 꾸며봅시다. #1. App.vue에 들어가서 다음과 같이 입력해 이미지를 추가해 줍니다. ... ... ... // 1. Modal 이번엔 Modal 창을 만들어 봅시다. Modal이란? 추가 정보를 제공하거나 사용자 입력을 요구하거나 확인을 요청하기 위해 메인 콘텐츠 위에 나타나는 창을 의미합니다. #1. 바로 실습해 봅시다. 다음과 같이 입력하여, modal 창 생성 및 기본 디자인을 구현해 줍니다. 상세 페이지 상세 페이지 내용 ... // 이제 동적인 UI를 만들어야 합니다. 동적인 UI를 만들기 위해선 UI의 현재 상태를 데이터에 저장해두고, 데이터에 따라 UI가 어떻게 보일지 작성하면 됩니다. #2. script 태그 안에 다음과 같은 ..
![]()
이벤트 핸들러 (Event Handler) 1. 이벤트 핸들러 (Event Handler) 이번엔 이벤트 핸들러에 대해 배워봅시다. Vue.js의 이벤트 핸들러란? 사용자의 클릭, 요소 위로 마우스를 올리거나 입력 필드에 타이핑하는 등 특정 이벤트가 발생할 때, 실행되는 메서드 or 함수입니다. 버튼을 눌렀을 때, JS를 실행하려면 다음과 같이 입력하면 됩니다. v-on:click="JavaScript 문장" // v-on을 @로 사용할 수 있음 @click="JavaScript 문장" #1. 바로 실습해 봅시다. App.vue에 들어가 다음과 같이 입력하여, 버튼 이벤트를 생성해 줍시다. 허위매물신고 신고수 : {{ declareNo }} // → 브라우저에 들어가면, 버튼을 누를 때마다 숫자가 오르는..
