반응형
Development
[프론트엔드] 움직이는 3D 카드 효과 만들기
[프론트엔드] 움직이는 3D 카드 효과 만들기
2025.03.13본 포스팅은 아래 코딩애플님의 동영상 '바로 쿠팡 취업가능한 포트폴리오 만들기'를 참고하여 작성하였습니다.https://youtu.be/YDCCauu4lIk?si=hYyzxZVK5CIwoprZ 0. 준비카드로 사용할 이미지 1장(images/3vx2.webp)HTML 파일(index.html) 1. 카드 이미지 파일 출력 2. 마우스 움직임에 따라 카드 이미지 회전 container영역에 마우스의 좌표(e.offsetX, e.offsetY)에 따라서 transform 속성을 줘서 카드 이미지를 회전시킨다.transform: 요소의 변형을 정의하는 CSS 속성입니다. 회전, 이동, 크기 조절, 기울임 등의 효과를 적용할 수 있습니다.perspective(350px): 3D 변형 효과를 줄 ..
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
[Ubuntu] Wordpress 플러그인 설치/삭제 시 FTP 정보 입력 창이 나올 때(Connection Information)
2023.10.17이슈 상황 플러그인을 설치하려고 하는데, 위와 같이 Connection Information창이 출력되면서 FTP 정보를 묻는다. Connection Information To perforam the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact you web host. 해결법 1. 권한 설정 변경 워드프레스 경로의 디렉토리, 파일들의 권한이 제대로 설정되어있지 않은 경우다. sudo chown -R www-data:www-data /var/www/html..
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
[Ubuntu] 워드프레스(Wordpress), LAMP(Linux, Apache, MySQL, PHP) 스택 설치
2023.10.16LAMP 스택 설치 sudo apt update sudo apt install apache2 mysql-server php php-mysql php-curl php-gd php-mbstring php-xml php-xmlrpc MySQL 데이터베이스 및 유저 생성 sudo mysql -u root -p CREATE DATABASE wordpress; CREATE USER '유저 이름'@'localhost' IDENTIFIED BY '비밀번호'; GRANT ALL PRIVILEGES ON wordpress.* TO '유저 이름'@'localhost'; FLUSH PRIVILEGES; EXIT; WordPress 다운로드 cd /var/www/html wget https://wordpress.org/late..
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
[Ubuntu] Let's Encrypt를 통해 HTTPS(SSL) 무료로 구축하기
2023.10.16Certbot 설치 해당 명령어는 Apache 웹서버를 기준으로 합니다. sudo apt update sudo apt install certbot sudo certbot --apache -d example.com WordPress 설정 업데이트 1. 워드프레스 대시보드 로그인 2. 설정 -> 일반 -> WordPress Address (URL)'과 'Site Address (URL)'을 https://example.com으로 변경 SSL 강제 설정 /var/www/html/(워드프레스 경로) .htaccess 파일에 다음 코드를 추가 Apache 재시작 sudo systemctl restart apache2 SSL 갱신 자동화 sudo crontab -e 0 0 1 * * /usr/bin/certbot ..
SPA(Single Page Application), MPA(Multi Page Application)
SPA(Single Page Application), MPA(Multi Page Application)
2022.11.20서론 전통적인 Web Application의 Page life cycle은 MPA(Multi Page Application)였다. 쉽게 말하면 웹 브라우저에서 특정 페이지에 대한 요청을 서버로 보내면, 서버는 데이터를 웹 브라우저에 응답한다. 이때 페이지를 이동할 때마다 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 되는데, 사용자 입장에서는 답답한 경험을 제공할 수 도 있다. (데이터가 많을 경우 페이지를 불러오는 동안 흰 화면을 보고 있어야 한다던가.. 여러 가지 부분에서) 그래서 요즘은 SPA(Single Page Application) 방식으로 개발된 Web Application을 심심치 않게 볼 수 있을 것이다. 다른 페이지로 이동하지 않더라도 하나의 페이지에서 서버와 통신을 통해 사용자에게..
[React] Create React App 을 이용해서 React 설치
[React] Create React App 을 이용해서 React 설치
2022.11.20React 앱 설치 방법 npx create-react-app 예전에는..? Webpack이나 Babel 같은 모듈을 설치하고, 설정해야 React 앱을 시작할 수 있었다. Webpack 이란? 오픈 소스 코드 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화해주는 라이브러리. Babel 이란? 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위하여, 최신 문법을 구형 브라우저에서도 사용 가능하도록 변환해주는 라이브러리 // 아래와 같은 문법을 구형 브라우저에서는 [1, 2, 3].map((n) => n+1); // 이런식으로 변환 시켜준다. [1, 2, 3].map(function(n) { return n+1; }); npx 란? 노드 패키지 실..
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
1. 나만의 심리테스트/MBTI 테스트 만들기 - 화면 설계 및 시작 페이지 작성
2022.04.24프로젝트 생성 및 디렉토리 구성 자 심리테스트 만들기를 본격적으로 시작해보자. 가장 먼저 프로젝트를 생성하자. 필자는 GUIDE라는 이름의 프로젝트를 생성하였고 위와 같이 디렉토리를 구성하였다. GUIDE index.html script.js style.css 이름 설명 index.html 메인 페이지 script.js 페이지에서 기능을 동작하게 하기 위한 자바스크립트 파일 style.css 페이지를 꾸미기 위한 css파일 사실 아주 간단한 프로젝트기 때문에 따로 파일을 분리할 필요가 뭐가 있겠냐고 생각할 수 도 있지만. 필자는 깔끔한 것을 좋아하기 때문에 코드양이 적더라도 분리하였다. 기본적인 html의 소스코드다. 설명할 것도 딱히 없지만, 굳이 설명하자면 link 태그를 통해 style.css 파일..
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
0. 나만의 심리테스트/MBTI 테스트 만들기 - 서론
2022.04.23시작하기 앞서.. 친구들끼리 MBTI 테스트 혹은 심리테스트를 웹페이지에서 진행하고, 결과물을 공유해서 서로의 성향을 비교해 재미를 느껴본 경험은 다들 한 번쯤 있을 것이다. 예시) 코인 투자 성향 심리 테스트 https://cjwoov-invesetment-type.netlify.app/ 글을 쓰게된 계기도 나도 그런 테스트를 한 번 만들어보고 싶었고 경험을 공유하면 좋을 것 같아서 글을 남긴다. 사전 지식 해당 과정은 HTML, CSS, JavaScript 언어를 사용한다. HTML, CSS, JavaScript에 대한 많은 지식도 필요 없으며 아주 기본적인 개념만 알고 있으면 된다. 그렇게 어렵게 만들지 않을 것이기 때문에... 준비물 Visual Studio Code : 소스코드 작성을 위한 에디..
클라이언트와 웹 게임의 통신 관계(feat. 이벤트페이지)
클라이언트와 웹 게임의 통신 관계(feat. 이벤트페이지)
2021.03.30보통 게임에서 통신의 흐름은 다음과 같이 클라이언트가 요청하고 서버가 그에대해 응답하는 방식임 그렇다면 반대로 아래와 같이 서버가 먼저 요청하거나 명령하는 경우는 없을까? 없다고 봐도 무방함. 게임으로 예를 들자면 위와 같이 내 몬스터가 상대방의 몬스터를 죽여서 재화를 얻는 경우는 아래와 같겠지? 1. 클라이언트가 특정 몬스터(헬하운드)를 사냥했다고 서버에게 요청하면, 2. 서버는 진짜로 그 몬스터가 사냥되었는지 데이터를 검토해서 확인하고 진짜로 죽었다면? 서버에 저장되어있는 보상 테이블을 검색해(헬하운드 사냥했을 때 보상은 무엇인가?) 3. 그 보상을 서버 내 데이터베이스에 저장하고 클라이언트쪽으로 경험치 300 올렸다고 응답해줌 4. 클라이언트는 그 응답을 받고 서버가 보내준 경험치만큼 경험치 상승했..
[머신러닝 입문] 03. Linear Regression 의 cost 최소화의 TensorFlow 구현
[머신러닝 입문] 03. Linear Regression 의 cost 최소화의 TensorFlow 구현
2019.08.08목차 Cost function 그래프 Gradient descent algorithm 적용 Optimizer 적용 Cost function 그래프 이전 포스트에서 우리는 Cost function의 미분을 간단하게 하기 위해서 위와 같은 축약 식을 사용하였다. 2019/08/07 - [Development/Machine Learning] - [머신러닝 입문] 03. Linear Regression의 cost 최소화 알고리즘의 원리 설명 [머신러닝 입문] 03. Linear Regression의 cost 최소화 알고리즘의 원리 설명 목차 Minimize Cost function Gradient descent algorithm Convex function Minimize Cost function 지난번 포스트..
[머신러닝 입문] 03. Linear Regression의 cost 최소화 알고리즘의 원리 설명
[머신러닝 입문] 03. Linear Regression의 cost 최소화 알고리즘의 원리 설명
2019.08.07목차 Minimize Cost function Gradient descent algorithm Convex function Minimize Cost function 지난번 포스트에서 Hypothesis와 Cost function을 알아보았고, 우리는 Cost function을 최소화시키는 W와 b를 구하는 것을 과제로 삼았다. 설명을 위해서, Hypothesis를 위와 같이 간단하게 만들었다. (b = 0) 또한 데이터가 아래 표와 같이 주어진다고 가정해보자. X Y 1 1 2 2 3 3 우리는 cost를 최소화 시키는 지점을 찾아야 한다.(=최소화시키는 W를 찾아야 함) W = 1, cost(W) = 0 W = 0, cost(W) = 4.67 W = 2, cost(W) = 4.67 W에 따른 cost(..
[머신러닝 입문] 02. TensorFlow로 Linear regression 구현
[머신러닝 입문] 02. TensorFlow로 Linear regression 구현
2019.07.04목차 Build graph using TensorFlow operations Place holders Build graph using TensorFlow operations Linear regression을 구현하여 그래프를 만들기 위해 위의 그림을 보면서 지난 내용을 복습하도록 하자. Hypothesis와 Cost function의 식은 [그림1]과 같고, 텐서플로우의 메커니즘은 [그림 2]와 같다. # X and Y data x_train = [1, 2, 3] y_train = [1, 2, 3] W = tf.Variable(tf.random_normal([1]), name='weight') b = tf.Variable(tf.random_normal([1]), name='bias') # Our hyph..