🚨 이슈 상황 게시글을 조회했을 때 조회수가 증가해야하는 데, 새로고침을 해도 조회수가 계속 증가하는 문제가 생겼다. 이를 보완하기 위해 찾아보다가 쿠키로 적용 시킨 방법이다. 🔎 개선 방안 💡 IP 장점 조작이 불가능하다(해킹하지않는한) 단점 IP는 장소에 따라 유동적으로 변할 수 있는 문제점이 있다. MAC 주소와 같은 유저라도 다른 기기라면 다른 유저로 식별하게 된다. IP와 MAC 주소는 값이 길기 때문에 수많은 유저와 수많은 게시글과 날짜를 함께 저장하기에 문제가 있다. 💡 세션 - 세션의 특징으로는 사용자 정보를 서버에서 관리하는 것입니다. 장점 사용자 정보를 서버에 둔다는 뜻은 쿠키보다 보안에 좋다. 저장데이터에 제한이 없다.(서버 성능에 따라 다름) 단점 서버에 데이터를 저장한다는 것은 서..
혼자서 프로젝트를 하기 위해 프론트 부트스트랩에 대해서 스터디 중입니다. 틀린 부분이 있으면 답글 달아 주세요😊😊 👉 리액트 부트스트랩 (react-bootstrap) 이란 • 부트스트랩(bootstrap)은 오픈 소스 프론트엔드 프레임워크이다. • react에서 Bootstrap5을 사용 가능하도록 개발한 라이브러리입니다. • 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하면 사용 가능합니다. 👉 Bootstrap 라이브러리 패키지 설치하기 •react Bootstrap 문서에..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. Modal 창으로 띄우는 상세 페이지 👉 Modal UI 디자인하기 위 예시처럼 return 내에서 연속된 태그들은 사용 불가능 ❌❌❌ 복잡하고 어려운 div 지옥😈 2. HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법 👉 Component 만드는 법 1. 함수를 만들고 이름을 짓는다. 2. 축약을 원하는 HTML 넣는다. 3. 원하는 곳에서 사용 🚨 Component 유의사항 1. 이름은 대괄호로 시작한다. 2. return() 안에 있는 건 태그 하나로 묶어야함 - return() 내부를 묶을 때 의미없는 쓰기 싫으면 을 사용한다. 3. Component는 functi..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (하드코딩 버전) 🚨유의사항🚨 - 제목변경() 함수에 소괄호()를 넣을 경우, 버튼 클릭시가 아닌 바로 함수가 실행 된다. 2. 버튼을 누르면 첫째 제목이 '수원 카페 추천' 으로 변경하는 법 (복사본 만들기) 수정된 [데이터]를 만듭니다. 다만, 원본 state 수정은 불가❌❌ 👉 state 데이터 수정 테크닉 deep copy 해서 수정하는 방법 deep copy : 값 공유❌, 서로 독립적인 값을 가지는 복사 👉 Array, Object state 데이터 수정 방법 - 일단 변경함수를 써야한다. - 변경함수(대체할 데이터) - state..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 1. 터미널에 뜨는 warning 없애는 방법 - eslint가 잡아주는 문법 체크사항 - eslint란, 잘못된 코딩 관습을 바로 잡아주는 작업 warning을 보고 싶지 않다면, /* eslint-disable */ 작성하기 2. 좋아요 버튼을 만들어보자👍 onClick={클릭될 때 실행할 함수} onClick={()=>{실행할 내용}} 3. 따봉 누를 때마다 1 증가 시키기 따봉은 자주 변하는 숫자이므로 useState로 만들어야 한다. state는 그냥 변경이 안된다. 하단 예시로는 사용이 어렵다. 👉 state 변경 방법 따봉이랑 같이 만들었던 따봉변경() 함수 따봉변경(대체할 데이터) 따봉을 누르면 ..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 리액트에서 데이터는 1. 변수에 넣거나 2. state에 넣어서 사용하는 두가지 방법이 있다. 👉리액트의 데이터 저장공간 state 만드는 방법 1. { useState } 상단에 첨부 2. useState(데이터) 3. (참고) ES6 destructuring 문법 [10,100]; array 된 이 두개 데이터를 변수로 담고 싶으면? var [a,b] = [10, 100]; 이렇게 작성할 경우, 10을 a 라는 변수에 100을 b라는 변수에 담는 다는 뜻이다. ⭐⭐⭐ array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 ⭐⭐⭐ 👆 [state 데이터, state 데이터 변경 함수] 👆 예..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 이전글 App.js 에서 필요없는 코드 기존 작성된 header 부분 삭제 왜 App.js가 메인 페이지냐? index.js가 App.js에 있는 HTML을 index.html로 넣어주기 때문에 App.js의 코드가 보여지는 것이다. 1. 블로그 navbar 만들기 React에서는 HTML처럼 생겼지만 똑같지는 않은 JSX 문법을 사용한다. 기존 으로 사용할 수 없고, 으로 사용해야 한다. 2. css 수정 3. 리액드에서 데이터 바인딩 하는 법 중괄호 { }에 변수명 또는 함수 등을 넣어서 데이터를 쉽게 넣을 수 있다. 1) 변수명 적용 2) 함수 적용 3) 이미지 적용 ⭐⭐⭐상상하는 모든 곳에 중괄호 {} 로 변수..
코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다. 1. Node.js 설치 https://nodejs.org/ko 사이트에서 가장 최신버전 설치 2. Visual Studio Code 설치 - 코드편집을 위한 에디터 https://visualstudio.microsoft.com/downloads/ 사이트에서 최신 무료버전 다운로드한다. 설치가 완료되면 실행한다. 3. 작업폴더 생성 프로젝트 저장을 원하는 곳에 폴더만 생성해준다. 4. Visual Studio Code 에디터에서 상단 File -> Open Folder -> 만든 작업 폴더 열어준다. 직접 작명한 작업폴더명이 뜨면 성공 5. 리액트 프로젝트 생성 Terminal -> New Terminal 누른다. O..
Servlet 이 왜 나왔는가? 🤔 1. 정적데이터만 전달하는 Web Server 초창기 웹 어플리케이션은 단순히 html 파일과 같은 정적 데이터만 제공할 수 있었습니다. 즉, 그림과 같이 모든 사용자는 같은 화면만 제공받을 수 있었습니다. 정적 컨텐츠만 제공하는 웹서버는 사용자들에게 다양한 화면을 제공하기 위해 동적 컨텐츠의 필요성을 느끼게 됩니다. 🚨문제점🚨 사용자(요청)에 따라 다른처리를 해줄 수 없다. 동적인 처리를 해주는 웹 어플리케이션이 없다. 2. 동적 데이터를 처리하는 CGI(Common Gateway Interface) 이러한 문제 해결을 위해 CGI(Common Gateway Interface)라는 동적인 데이터를 제공하기 위한 규약이 나오게 됩니다. 1) Client로 부터 요청이 ..
public class VariableTypes { int 인스턴스_변수; static int 클래스_변수; public void method(int 매개변수) { int 지역_변수; } } # 변수의 종류 1. 지역 변수 (local variables) - 중괄호 내에서 선언된 변수 2. 매개 변수 (parameters) - 매소드에 넘겨주는 변수 3. 인스턴스 변수 (instance variables) - 매소드 밖에, 클래스 안에 선언된 변수, 앞에는 static 이라는 예약어가 없는 변수 4. 클래스 변수 (class variables) - 메소드 밖에, 클래스 안에 선언된 변수 중에서 타입 선언 앞에 static 이라는 예약어가 있는 변수 # 변수의 생명주기 1. 지역 변수 (local vari..
