teleren/devto huggingface dataset:
First Post! First Project!
Tags: beginners, python, gamedev, codenewbie
Published: 2022-11-16 05:26:55

Hey everyone! My name is Kevin and I just recently began my journey in computer science and coding. Prior to this adventure I was a regular day and swing trader of stocks and crpyto. The deeper I climb down the cryptocurrency rabbit hole and blockchain technology has sparked a want to do what I've wanted to do for many years, software development. I believe blockchain technology is the future and I want to begin the foundations of software development and gaming for that future. As I have now began that adventure my first assignment was to post a blog, share my story and my first project!

I have been gaming since the middle 90s, from Atari, Nintendo, and Windows 3.0. Only being 10 at the time I have grown over the decades with the technological advances we all love today. With that, gaming has always been at the forefront of my hobbies and decided to write a small text python game as my first assignment. My python code is simple. The user enters their name, which prints a statement asking the user to select between two types of spaceships. Each ship has it's unique advantages: defender has more HP and the fighter can do more damage. Once the player selects, a small brief is about the ship is displayed before a loop of damage occurs back and forth between the user's selection and the CPU. The numbers are generate randomly and counts down until the first spaceship reaches 0. Once one of the ship reaches 0, either the user won or the CPU one. You are then given a message of victory or defeat as the program ends. This was very challenging and I have learned things outside of my first course of beginner python. Each step of the way has helped my get a better understanding of loops, functions, classes and objects. 

https://github.com/TattooedBandit/First-project.git

Check out the code and let me know what you think! I can't wait to continue this education and see what products I'll be able to produce in the future personally and for those in the industry. Thanks for reading!
ERROR: configuration.module has an unknown property 'loaders'. These properties are valid, 2022-08-29
Tags: react, errors
Published: 2022-11-16 05:21:42

npm run dev-server 시 발생

```
module.exports = {
    entry: './src/index.js',

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        inline: true,
        port: 7777,
        contentBase: __dirname + '/public/'
    },

    module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        cacheDirectory: true,
                        presets: ['es2015', 'react']
                    }
                }
            ]
        }
};
 

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        hot: true,
        host: '0.0.0.0',
        port: 4000,
        static: __dirname + '/public/'
    },

    module: {
        rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        cacheDirectory: true,
                        presets: ['es2015', 'react']
                    }
                }
            ]
        },

        plugins:[
            new webpack.HotModuleReplacementPlugin()
        ]
};
 
```

error : configuration.module has an unknown property 'loaders'. These properties are valid

```
loader 대신에 rules
```

 

error : configuration.module.rules[0] has an unknown property 'query'. These properties are valid

```
query 대신에 options
```

 

error : options has an unknown property 'contentBase'. These properties are valid

```
contentBase 대신에 static
```

 

error : options has an unknown property 'inline'. These properties are valid

```
inline 삭제
```
How Does RS485 Work?
Tags: rs485
Published: 2022-11-16 05:19:26

**What is RS485?**
- RS485 also known as TIA-485(-A) or EIA-485 is a serial communication method for computers and devices similar to RS232.
- RS485 is not only a single device-to-device interface, but also a communication bus used to form a simple network of multiple devices.
- RS485 allows up to 32 multiple devices to add half-distance half-duplex communication on a single pair of wires, and the maximum distance of the ground wire is 1200 meters. (If you wish to extend the length and number of nodes of your network, you can easily do this with repeaters.)
Since RS485 has a wide common mode range, it is able to transmit data over long cables in noisy environments, so RS485 is often used as a protocol in POS, industrial, telecom, especially in noisy environments. RS485 is also common in computers, PLCs, serial servers, microcontrollers and smart sensors in scientific and technical applications.
**How does RS485 work?** (Wiring arrangement)
- In RS485, data is transmitted differentially through two stranded wires (often called "twisted pair cables") that are twisted together. The twisted characteristics make RS485 have high anti-noise ability and long-distance transmission ability.
- As shown in the figure above, the direction of the noise current generated by the ambient magnetic field is opposite to the current in other parts of the cable, so that the noise current is lower than that of ordinary straight cables.
- In RS485 network, it can be configured in 2 common ways: 2-wire (half-duplex system) or 4-wire configuration (full-duplex system)
**2-wire half-duplex system**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thu006ljpdfa6moygbew.png)
- In RS485 2-wire half-duplex system, data can only be transmitted in one direction at a time. (You can only send or receive data at a time) In this setup, the host TX and RX signals will share a pair of wires, which means you save on installation costs, and the nodes can communicate with each other as well.
- In this setup, a transmitter and receiver are connected to each node on a twisted pair. However, in this setup, it's limited to half-duplex, and there's a turnaround delay to be aware of.
**4-wire full duplex system**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os98jjpy70lz56oqzapd.png)
- Using this RS485 4-wire full-duplex system, data can be transferred to and from nodes at the same time. (You can receive and send data at the same time) In this system, 2 wires will be used for transmission and the other 2 wires will be used for reception.
- In this setup, one master port with a transmitter is connected to each node that receives data on a twisted pair. However, in this full-duplex setup, they are limited to master-slave communication where nodes cannot communicate with each other.
ERROR : Plugin/Preset files are not allowed to export objects, only functions, 2022-08-29
Tags: react, errors
Published: 2022-11-16 05:10:01

> ERROR : Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\dev14\sts4-worksapce\W.only\node_modules\babel-preset-es2015\lib\index.js

 

```

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env
```
 

```
//webpack.config.js

presets:["@babel/preset-env", "@babel/preset-react"]
```
 

_참조 : https://sisparang.tistory.com/49_
ERROR: Cannot find module '@babel/core', 2022-08-29
Tags: react, errors
Published: 2022-11-16 05:03:59

> ERROR: Cannot find module '@babel/core'

 

```
npm install --save-dev @babel/core
```
 

 

_참조 : https://wotres.tistory.com/entry/webpack-error-%ED%95%B4%EA%B2%B0%EB%B2%95-Error-Cannot-find-module-babelcore_
WARNING : configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value, 2022-08-29
Tags: react, warning
Published: 2022-11-16 05:03:16

> WARNING : configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/


```
//webpack.config.js

mode: 'development',
```
mysql 계정 생성, 2022-06-07
Tags: mysql
Published: 2022-11-16 04:57:54

1. MYSQL 계정 생성

```
create user '계정ID'@'localhost' identified by '비밀번호';
```
 

2. 모든 권한 부여

```
grant all privileges on *.* to '계정ID'@'localhost';
```
 

3. 권한 적용

```
FLUSH PRIVILEGES;
```
 

4. MYSQL 데이터베이스 만들기

```
CREATE DATABASE 데이터베이스 이름;
```
Laravel Multiple Choice Questions
Tags: laravel, mcq, beginners, career
Published: 2022-11-16 04:54:47

**Laravel** is the most popular PHP framework that is used by hundreds of thousands of developers around the world. Laravel facilitates rapid development of web applications, with minimal effort on developers’ part. It has become a clear favourite among developers due to its super simple yet powerful syntax, clean and elegant design and low learning curve.
Finally, published the 10 most popular [Laravel Multiple Choice Questions](https://www.onlineinterviewquestions.com/laravel-mcq-multiple-choice-questions/) to test your basic knowledge about Laravel.

- What is the REPL used in Laravel?
_robots
artisan
**tinker**_


- Which of the following file us used to put database credentials?
_**.env - Correct!**
config/attr.php
config/database.php_


- choose the file extension of the Laravel blade files?
_blade
**.blade.php**
.blade.compiled__


- Which of the following option is used to queue worker using the command line?
__**php artisan queue:work**
php artisan queue:start
php artisan queue work_

- Laravel framework is founded by .........?
_Spatie
**Taylor Otwell**
James Gosling_

- Which command is used to flush the application cache?
_php artisan cache:flush
**php artisan cache:clear**
php artisan cache:forget_


- Which command is used to start the Laravel server?
_php artisan start:server
php artisan create:server
**php artisan serve**_


- choose the right command to make a new controller in Laravel?
_php artisan create:controller CatsController
php artisan new:controller CatsController
**php artisan make:controller CatsController**_


- Laravel project runs on which of the following PORT?
_Port 5000
**Port 8000**
Port 3000_


- Choose the right command to roll back migration operation in laravel?
_php artisan rollback
php artisan migration:rollback
**php artisan migrate:rollback**_
ERROR: listening on: (DESCRIPTION=(ADDRESS=(PROTOCOL=IPC)(KEY=EXTPROC_FOR_XE))), 2022-06-02
Tags: oracle, errors
Published: 2022-11-16 04:51:15

1. 에러사항​

lsnrctl start 시 에러가 발생

```
LSNRCTL for Linux: Version 11.2.0.2.0 - Production on 02-JUN-2022 11:32:06

Copyright (c) 1991, 2011, Oracle.  All rights reserved.

Starting /u01/app/oracle/product/11.2.0/xe/bin/tnslsnr: please wait...

TNSLSNR for Linux: Version 11.2.0.2.0 - Production
System parameter file is /u01/app/oracle/product/11.2.0/xe/network/admin/listener.ora
Log messages written to /u01/app/oracle/diag/tnslsnr/test/listener/alert/log.xml
Error listening on: (DESCRIPTION=(ADDRESS=(PROTOCOL=IPC)(KEY=EXTPROC_FOR_XE)))
TNS-12555: TNS:permission denied
 TNS-12560: TNS:protocol adapter error
  TNS-00525: Insufficient privilege for operation
   Linux Error: 1: Operation not permitted

Listener failed to start. See the error message(s) above...
```
 

2. 시도 방안

```
cd /var/tmp/.oracle
chmod 01777 /var/tmp/.oracle
chown root /var/tmp/.oracle
chgrp root /var/tmp/.oracle
```
 

3. 해결방안

```
# root 권한으로 들어오기(su)
su

# .oracle 파일로 이동
cd /var/tmp/.oracle

# /var/tmp/.oracle 모든 소켓 지우기
lsnrctl start
LSNRCTL for Linux: Version 11.2.0.2.0 - Production on 02-JUN-2022 11:36:10

Copyright (c) 1991, 2011, Oracle.  All rights reserved.

Starting /u01/app/oracle/product/11.2.0/xe/bin/tnslsnr: please wait...

TNSLSNR for Linux: Version 11.2.0.2.0 - Production
System parameter file is /u01/app/oracle/product/11.2.0/xe/network/admin/listener.ora
Log messages written to /u01/app/oracle/diag/tnslsnr/test/listener/alert/log.xml
Listening on: (DESCRIPTION=(ADDRESS=(PROTOCOL=ipc)(KEY=EXTPROC_FOR_XE)))
Listening on: (DESCRIPTION=(ADDRESS=(PROTOCOL=tcp)(HOST=test)(PORT=1521)))

Connecting to (DESCRIPTION=(ADDRESS=(PROTOCOL=IPC)(KEY=EXTPROC_FOR_XE)))
STATUS of the LISTENER
------------------------
Alias                     LISTENER
Version                   TNSLSNR for Linux: Version 11.2.0.2.0 - Production
Start Date                02-JUN-2022 11:36:10
Uptime                    0 days 0 hr. 0 min. 0 sec
Trace Level               off
Security                  ON: Local OS Authentication
SNMP                      OFF
Default Service           XE
Listener Parameter File   /u01/app/oracle/product/11.2.0/xe/network/admin/listener.ora
Listener Log File         /u01/app/oracle/diag/tnslsnr/test/listener/alert/log.xml
Listening Endpoints Summary...
  (DESCRIPTION=(ADDRESS=(PROTOCOL=ipc)(KEY=EXTPROC_FOR_XE)))
  (DESCRIPTION=(ADDRESS=(PROTOCOL=tcp)(HOST=test)(PORT=1521)))
Services Summary...
Service "PLSExtProc" has 1 instance(s).
  Instance "PLSExtProc", status UNKNOWN, has 1 handler(s) for this service...
The command completed successfully
```
또한 ORCLE을 지우고 다시 하는 것도 좋은 방법

참조 : https://knowledge.exlibrisgroup.com/Primo/Knowledge_Articles/Oracle_Listener_fails_to_start%2C_error_messages_TNS-12555%2C_TNS-12560%2C_TNS-00525
server(linux) - mysql 설치, 2022-06-01
Tags: server, linux, ubuntu, mysql
Published: 2022-11-16 04:47:17

1. mysql 설치

```
sudo apt-get install mysql-server
```
 

2. ufw mysql 허가

```
sudo ufw allow mysql
```
 

3. mysql 시작

```
sudo systemctl start mysql
```
 

4. Ubuntu 서버 재시작시 MySQL 자동 재시작

```
sudo systemctl enable mysql
```
 

5. MYSQL 시작

```
sudo /usr/bin/mysql -u root -p
```

참조 : _[[Ubuntu] 우분투에 MySQL 설치하기 (velog.io)](https://velog.io/@seungsang00/Ubuntu-%EC%9A%B0%EB%B6%84%ED%88%AC%EC%97%90-MySQL-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0)_
server(linux) - oracle 설치, 2022-05-30
Tags: server, oracle, linux, ubuntu
Published: 2022-11-16 04:44:58

1. 윈도우 ➨ 리눅스 위해 전송프로그램 설치

```
sudo apt install lrzsz

# oracle 파일 만들기
mkdir oracle
# oracle 파일로 이동
cd oracle
```
 

2. zip파일 풀기 위해서 설치

```
sudo apt install unzip
```
 

3. alien : RPM 패키지를 Debian 패키지로 변환하기 위해 설치

```
sudo apt-get install -y alien
```
 

4. zip파일 다운&풀기

```
#오라클11g zip 파일 다운
https://www.oracle.com/database/technologies/xe-prior-release-downloads.html

#zip파일 풀기
unzip oracle-xe-11.2.0-1.0.x86_64.rpm.zip
```
 

5. RPM ➨ DEB 변환

```
# Disk1 파일로 이동
cd Disk1

#변환
sudo alien --scripts -d oracle-xe-11.2.0-1.0.x86_64.rpm
```
 

6. DEB 파일 설치

```
sudo dpkg --install oracle-xe_11.2.0-2_amd64.deb
```
 

7. 오라클 설정

```
sudo /etc/init.d/oracle-xe configure
```
 

8. 환경변수 설정

```
vim ~/.bashrc

#vim ~/.bashrc
export ORACLE_HOME=/u01/app/oracle/product/11.2.0/xe 
export ORACLE_SID=XE 
export NLS_LANG=`$ORACLE_HOME/bin/nls_lang.sh` 
export ORACLE_BASE=/u01/app/oracle
export LD_LIBRARY_PATH=$ORACLE_HOME/lib:$LD_LIBRARY_PATH 
export PATH=$ORACLE_HOME/bin:$PATH
```
 

9. 환경변수 적용

```
source ~/.bashrc
```
 

10. 리스너 상태 확인

```
lsnrctl status
```
 

11. 오라클 재부팅 후에도 자동 설정

```
# bash.bashrc 수정
sudo vim /etc/bash.bashrc

# bash.bashrc 맨아래에 붙여넣기
. /u01/app/oracle/product/11.2.0/xe/bin/oracle_env.sh
```
 

12. 오라클

```
# 처음로그인 할때
sqlplus "/as sysdba"

ERROR:
ORA-01034: ORACLE not available
ORA-27101: shared memory realm does not exist
Linux-x86_64 Error: 2: No such file or directory
Process ID: 0
Session ID: 0 Serial number: 0
```
 

12-1. 해결 방안

```
# 처음로그인 할때
sqlplus /nolog

#sys 계정 접속
conn sys/ as sysdba

#계정 생성
create user [ID] identified by [PW];

#모든 권한 부여
grant connect, dba, resource to [ID];
```

참조 : _[Ubuntu 20.04] 11장-05교시 데이터베이스서버: Oracle 설치 및 운영 - YouTube_

_[Linux] 우분투에서 오라클 설치하기 (tistory.com)_
ORACLE-CLUDE 2, 2022-05-07
Tags: cloud, oraclecloud, setting
Published: 2022-11-16 04:40:25

1. SSH 접속​

-예약된 IP ➯ 연결 밑 사용자 인증 클릭 ➯ public key 클릭 ➯ 사용자 키 찾아보기 ➯ 사용자 키 가져오기 ➯ 저장한 키 중에서 .pub이 포함되어 있지 않는 (그림이 없는) 키 선택 ➯ 확인

 

2. ROOT 비밀번호 설정

```
sudo passwd root
```

3. UPDATE & UPGRADE

```
sudo apt-get update && sudo apt-get upgrade
```

4. APACHE2 설치

```
sudo apt-get install apache2
```
4-1. APACHE2 실행 및 상태확인

```
# 실행
sudo service apache2 start
# 상태확인
service apache2 status
# 서버에서 아파치 실행 필수
sudo update-rc.d apache2 defaults
```

5. JAVA 설치

```
sudo apt install openjdk-11-jdk
# 버전은 본인과 맞춰서 설치
```
5-1. JAVA 설치 확인

```
java -version 
javac -version
```
5-2. JAVA_HOME 설정

```
vim ~/.bashrc

# 맨 아래에 설정 ~/.bashrc
export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which java))))
export PATH=$PATH:$JAVA_HOME/bin

source ~/.bashrc
```
5-3. JAVA_HOME 확인

```
echo $JAVA_HOME
# /usr/lib/jvm/java-11-openjdk-amd64
```

6. TOMCAT9 설치

```
sudo apt install tomcat9
```
6-1. TOMCAT9 실행 및 상태 확인

```
# 실행
sudo service tomcat9 start
# 확인
service tomcat9 status
```

7. 방화벽 설치 및 설정

```
# 설치
sudo apt-get install ufw

# 설정
sudo ufw enable
#y

# 80포트 443포트 8080포트 모두 승인
sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow 8080
```

8. 포트 열기 및 확인

```
# 포트 열기
sudo iptables -I INPUT 1 -p tcp --dport 80 -j ACCEPT
sudo iptables -I INPUT 1 -p tcp --dport 443 -j ACCEPT
sudo iptables -I INPUT 1 -p tcp --dport 8080 -j ACCEPT

# 포트 확인
sudo iptables --list
```

9. MOD-JK 설치

```
sudo apt install libapache2-mod-jk
```

10. 연결하기 위해 수정
10-1. /etc/libapache2-mod-jk/workers.properties 수정 (su로 접속)

```
# JDK 설치 경로 확인
readlink /etc/alternatives/java
#/usr/lib/jvm/java-8-openjdk-amd64    </jre/bin/java> 여기부분은 사용하지 않음 

# 수정
vi /etc/libapache2-mod-jk/workers.properties

# /etc/libapache2-mod-jk/workers.properties
workers.tomcat_home=/usr/share/tomcat9
workers.java_home=/usr/lib/jvm/java-11-openjdk-amd64
```
10-2. 톰캣 server.xml 파일 수정

```
# 수정
vi /var/lib/tomcat9/conf/server.xml

# /var/lib/tomcat9/conf/server.xml
<Connector protocol="AJP/1.3"
     port="8009"
     address="0.0.0.0"
     secretRequired="false"
     redirectPort="8443" />
<Engine name="Catalina" defaultHost="localhost" jvmRoute="ajp13_worker">
```
10-3. /etc/apache2/sites-enabled/000-default.conf 수정

```
# 수정
vi /etc/apache2/sites-enabled/000-default.conf

# /etc/apache2/sites-enabled/000-default.conf
<VirtualHost *:80>
        ServerName localhost
        JkMount /* ajp13_worker
        DocumentRoot /var/lib/tomcat9/webapps/ROOT
</VirtualHost>
```
10-4. /etc/apache2/apache2.conf 수정

```
# 수정
vi /etc/apache2/apache2.conf

#/etc/apache2/apache2.conf
ServerName localhost
JkWorkersFile /etc/libapache2-mod-jk/workers.properties
```

11. TOMCAT9 & APACHE2 다시시작(su로 접속)

```
service tomcat9 restart
service apache2 restart
```

탐캣이 restart가 안될 시에는

```
systemctl daemon-reload
```


참조 : _필라이프 메모장: 우분투 - 아파치 톰캣 연동 (daisyleh.blogspot.com)_

_[Ubuntu 20.04 - OpenJDK 11 설치, 삭제 (codechacha.com)](<https://codechacha.com/ko/ubuntu-install-open-jdk11/>)_
Iniciar un proyecto en Vite
Tags: vite
Published: 2022-11-16 04:38:55




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ule2xud3tokmpk99cwn6.png)

[Vite](https://vitejs.dev/) es una Herramienta de frontend de última generación la cual es increible para iniciar proyectos.

Vite te permite trabajar con:

- Vainilla
- Vue
- React
- Preact
- Lit
- Svelt
 
También te permite trabajar en combinación con TypeScript 

para poder utilizarlo puedes instalar un gestor de paquetes de tu elección puede ser [npm](https://www.npmjs.com/) o [yarn](https://yarnpkg.com/).

Puedes empezar en npm escribiendo en tu consola:

```
npm create vite@latest

```
puedes empezar en yarn escribiendo en tu consola:

```
yarn create vite

```
en seguida te  preguntará lo siguiente:
```
Project name:
? Select a framework:
- Vainilla
- Vue
- React
- Preact
- Lit
- Svelt

```
Escoge el conjunto de tecnologías con las que trabajas.

Felicidades ya tienes creado tu proyecto listo para empezar a codear.

Para poder instalar las dependencias, dirígete en el directorio donde se encuentra tu proyecto y ejecuta:

```
npm i

```
instalará las dependencias y podrás utilizar los siguientes comandos:

```
npm run dev // Te permitirá levantar tu proyecto local

```

```
npm run build // Crea la build de proyecto listo para el deploy en una carpeta dist

```
ORACLE - CLOUD 1, 2022-05-07
Tags: cloud, setting, oraclecloud
Published: 2022-11-16 04:33:34

1. ORACLE CLOUD 회원가입

​

2. 한국어로 변경

​

3. 리소스 실행

-VM 인스턴스 생성

3-1. 이미지 및 구성

-Canonical Ubuntu 20.04버전

-VM.Standard.E2.1.Micro

3-2. SSH 키 추가

-자동으로 키 쌍 생성

-전용 키 저장

-공용 키 저장

3-3. 보트 볼륨

-사용자 정의 부트 볼륨 크기 지정

100기가

-전송 암호화 사용

​

4. 컴퓨트-인스턴스

4-1. 연결된 VNIC

-이름 클릭

-IPv4 주소

-공용 IP 없음 ➯ 업데이트

-예약된 공용 IP ➯ 새 예약된 IP 주소 생성 ➯ ORACLE ➯ 업데이트

4-2. 서브넷 클릭

-이름 클릭

-수신 규칙 추가 ➯ 소스 CIDR 0.0.0.0/0 ➯ 대상 포트 80, 8080 ➯ 수신 규칙 추가
기본개념, 2022-04-19
Tags: mvc, ajax
Published: 2022-11-16 04:30:42

Ajax

-서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것

-JSON, XML, HTML, 일반텍스 형식 등 비동기성

-사용자의 이벤트가 있으면 일부분 업데이트 가능

-페이지 새로고침없이 서버에 요청

-서버로부터 데이터를 받고 작업을 수행

-Ajax 클라이언트 서버에 데이터를 요청하는 클라이언트폴딩 방식

-서버 푸시 방식의 실시간 서비스 X

-바이너리 데이터X 보내거나 받을 수 없음

-Ajax 스크립트가 포함된 서버가 아닌 다른서버로 Ajax 요청X

-클라이언트PC로 Ajax 요청을 보낼 수 없음

​

MVC

-모델, 뷰, 컨트롤러

-모델 : 데이터와 비즈니스 로직

-뷰 : 레이아웃, 화면처리

-컨트롤러 : 명령은 모델과 뷰 부분 라우팅

-모델 : 데이터 리스트 항목

-뷰 : 데이터 보여주는 방식

-컨틀롤러 : 로직
javascript, 2022-04-13
Tags: javascript
Published: 2022-11-16 04:26:26

```
//jqurey 문법
	$("#id_seg")
//js 문법
	document.getElementById("id_seg")

//id가 testid로 시작하는 엘리먼트들 접근
   $("[id^='testid']")
//id가 testid로 끝나는 엘리먼트들 접근
   $("[id$='testid']")
//id가 testid를 포함하는 엘리먼트들 접근
	 $("[id*='testid']")
//id가 testid과 단어와 속성이 일치하는 엘리먼트들 접근
	 $("[id~='testid']")
//id가 testid를 일치하는 엘리먼트들 접근
	 $("[id='testid']")
//id가 testid를 불일치하는 엘리먼트들 접근
	 $("[id!='testid']")
```
How to Make Language Translator in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-11-16 04:04:25

In this article, we will make a language translator in JavaScript. In here, we will provide two fields for text, one for text input and another for output text. To get translate the language, we will use an API of mymemory. Using this API, we will also add other languages for selection, and also we provide a button to listen the text in the speech form. Lastly, we have added another button to copy the text, and also we will provide a button to translate the text.

This is going to be an interesting and cool project to do. So let’s make it step-by-step.

##Creating Skeleton
For this project, we need to basically three files. First will be our index.html, in this we will add our elements, and you can simply say we will create the skeleton of the project using HTML file. Then for designing purpose we will be adding our style.css file, with this we will add some styles to our HTML, this is going to be purely based on you, like you can customize it any way. And lastly, our script.js file, this will be our main file because we will add functionality so that we can translate the text using the JavaScript file.

Now in HTML, we have firstly added a font-awesome link to use icons. Then in body part, we have added two text-area for input and output text. In output text-area, we have added an attribute name readonly-disabled class, which is actually used to disable modification for the specific class. Simply, it will make output text-area which will be unchangeable.

After that, we have added two icons for volume and copy icons. Then we have added a select menu which is currently empty, but we will fill it using JS code. Also for output field, we again added same icons and select menu. Lastly, we have added a button to translate text from one language to targeted language.[Read More](https://rocoderes.com/how-to-make-language-translator-in-javascript/)