본문 바로가기

분류 전체보기

 (101)
[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-4 문제점 지금은 한 가지의 답안만을 가지고 있습니다 하나의 정답만 사용할 수 있습니다 기능 개선 여러 가지 정답을 가지고 그중에서 하나를 사용하는 방식으로 변경하겠습니다 방법은 배열을 통해서 여러 가지 정답을 가지고 랜덤으로 호출되게 변경하도록 하겠습니다 //정답 const answer = 'basic'; 지금은 "answer" 변수에 하나의 답만 가지고 있습니다 별도의 정답 목록을 가지고 answer의 답안을 변경하도록 하겠습니다 정답을 모은 answerList 변수를 만듭니다 //정답 목록 const answerList = ['basic', 'black', 'bread', 'clean', 'chair', 'count', 'drink']; 정답 목록을 만들었습니다 이제 answer에서 이 중에서 하나의 ..
[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-3 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해 happycodingdiary.tistory.com 지금 버그 중 하나는 두 번째부터는 색상 변경이 안 됩니다 색상을 처리하는 부분은 for문으로 관련된 코드를 살펴봅니다 원인 파악 단어를 입력해서 버그가 어떻게 발생하는지 살펴봅니다. 크롬 개발자 도구를 살펴보면 에러 표시가 없습니다 코드 상의 에러가 아니라 처리하는 방식에 뭔가 문제가 있습니다 let input = document.querySelectorAll('inpu..
[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2 [JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해서 점점 자기만의 것으로 만들어 가는 과정입니다 코드의 happycodingdiary.tistory.com 이전에 만들었던 게임의 문제점 중에 입력 칸에 두 글자 이상 입력이 가능한 점이 있었습니다 한 칸에 하나의 철자가 들어가야 하는데 2개 이상이 입력되는 현상을 없애도록 하겠습니다 해결방법은 간단합니다 입력 칸은 html의 input을 사용해서 입력한 철자를 보여줍니다 여기서 처음 입력할 때 한 글자씩만 입력되도록 변경하면 됩니다 따로 기능을 구현할 필요 없이 input에서 제공하는 속성을 사용하..
[JavaScript] 요즘 유행하는 Wordle 따라 하면서 만들어 보기-1 ※ 처음은 다른 사람이 만들어 놓은 것을 토대로 만들고 그 이후에는 있었으면 하는 기능과 부족한 점 혹은 문제점을 고치는 식으로 해서 점점 자기만의 것으로 만들어 가는 과정입니다 코드의 소스는 유튜브 코딩 애플 님이 올린 영상 중 "JavaScript로 요즘 유행하는 Wordle 게임 만들기 (개 쉬움)"을 참고해서 만들 예정입니다 구성 게임 소개 게임 규칙 소스 설명 실제 게임 화면 문제점 개선 게임 소개 워들이란? 위키백과 워들(Wordle)은 2021년 10월 조시 워들(Josh Wardle)이 공개한 영어 단어 맞추기 게임이다. 게임 이름은 '단어'를 뜻하는 Word와 자신의 성 Wardle을 섞어 지은 것이다. 게임 규칙 위키백과 게임의 궁극적인 목표는 프로그램이 원하는 다섯 글자 영어 단어를 ..
[Oracle] 오라클 like 찾고 싶은 단어 검색하기 컬럼에서 데이터를 찾고 싶을 때 특정 단어가 들어있는 단어를 찾고 싶을 때가 있다 LIKE 구문을 이용해서 "%"로 찾는다 그런데 이때 단어 중 앞뒤 내용을 모르지만 두 번째, 세 번째 등 특정 위치에 들어간 단어를 찾아야 할 때가 있다 그런 경우 사용할 수 있는 방법이다 LIKE 구문 사용방법 1. 특정 단어로 끝나는 경우 SELECT * FROM [테이블명] WHERE 컬럼명 LIKE '%단어' -- ex SELECT * FROM table1 WHERE column LIKE '%word' 2. 특정 단어로 시작하는 경우 SELECT * FROM [테이블명] WHERE 컬럼명 LIKE '단어%' SELECT * FROM table1 WHERE column LIKE 'word%' 3. 특정 단어가 가운데..
[Oracle] SQL Developer 다운로드 구글에서 "sql developer" 검색합니다 첫 번째 목록을 클릭해서 "Oracle(오라클)" 사이트로 접속합니다 "SQL Developer" 버튼을 클릭합니다 운영체제에 맞는 다운로드 버튼을 클릭합니다 윈도의 경우 2개의 목록이 존재합니다 첫 번째는 자바를 포함한 버전이고 두 번째는 자바를 미포함한 버전입니다 자바를 설치했다면 미포함 버전을 설치해도 됩니다 라이선스 동의를 하고 아래 다운로드 버튼을 클릭합니다 다운로드한 파일을 압축을 풀면 "" 폴더가 생성됩니다 생성된 폴더에서 "sqldeveloper.exe" 파일을 실행합니다 로딩 창이 나오고 "환경설정 임포트 확인" 창이 나옵니다 "아니오" 버튼을 클릭합니다 다운로드가 완료되었습니다
포트폴리오와 블로그 등을 무료로 호스팅 할 수 있는 사이트 네트리파이를 이용해서 웹 호스팅 하는 방법 블로그 또는 포트폴리오 등을 만들고 보여주기 위해서는 호스팅이 필요합니다 간단한 블로그 혹은 취업용으로 보여주려고 하는 입장에서 매달 비용을 지불하고 호스팅 업체를 이용하는 것은 비효율적입니다 이때 사용할 수 있는 무료 호스팅 사이트가 몇 군데 있는데 그중에서 무료로 호스팅을 제공하는 netlify에 손쉽고 빠르게 등록 가능합니다 구글에서 netlify 검색합니다 홈페이지로 접속하고 오른쪽 상단의 Sign up 버튼을 클릭해서 가입을 합니다 가입을 해야 정상적으로 서비스를 이용할 수 있습니다 회원가입 창으로 GitHub, GitLab, Bitbucket, Email 4가지 방법으로 회원가입이 가능합니다 GitHub, GitLab, Bitbucket 등이 있다면 연동이 수월하므로 GitHub, GitLab..
[STS] Spring Properties 파일을 이용해서 DB 정보 분리하는 방법 DB 정보를 root-context.xml 파일에서 설정을 할 수 있습니다 bean 등록을 통해서 아래와 같이 사용 가능합니다 이렇게 사용하면 DB 연결을 바꿀 경우 매번 property의 값을 변경해야 합니다 oracle, mysql 등 여러 가지 DB를 시용하는 경우 쉽고 간편하게 관리할 수 있게 properties 파일로 DB 정보를 변경하는 방법입니다 우선 src/main/resources 경로 아래에 database.properties 이름으로 파일을 만듭니다 src/main/resources 경로에 마우스 우클릭 후 New 선택 후 Folder를 클릭해서 config 이름으로 폴더를 만듭니다 config 폴더 우클릭 후 New 선택 후 File을 클릭합니다 파일 안에 DB 정보를 입력합니다 #..
[Chrom] 웹 스토어 항목을 게시하려면 먼저 연락이 가능한 이메일 주소를 입력해야 합니다. 웹 스토어에 확장 프로그램에 등록 중 제출하여 검토받기 버튼이 비활성화되고 제출할 수 없는 이유 클릭하면 아래의 화면처럼 확인할 수 있습니다 빨간 글씨로 되어있는 항목을 모두 해결해야 제출하여 검토받기 버튼이 활성화됩니다 항목을 게시하려면 먼저 연락이 가능한 이메일 주소를 입력해야 합니다. 계정 탭에서 연락을 받을 이메일을 입력하세요. 항목을 게시하려면 먼저 연락이 가능한 이메일을 확인해야 합니다. 계정 탭에서 확인 과정을 시작하세요. 개발자 대시보드 메인 화면으로 이동합니다 계정 탭을 클릭해서 이동합니다 이메일 추가 버튼을 클릭해서 인증, 연락받을 메일을 등록합니다 메일을 입력하면 인증 메일이 입력한 메일 계정으로 발송됩니다 메일을 열면 나오는 링크를 클릭합니다 연락처 이메일 주소가 확인됨으로 변경된 ..
[Chrom] 크롬 웹 스토어 계정 등록하기 브라우저에서 사용할 확장 프로그램을 만들고 웹 스토어에 등록하기 위해서는 구글에 계정을 등록해야 합니다 가격은 5$입니다 구글에 크롬 웹스토어를 검색 혹은 아래의 사이트를 클릭합니다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 로그인을 한 상태로 웹 스토어 이동 혹은 웹 스토어에서 로그인을 화면 아래와 같이 화면의 맨 위의 톱니바퀴 모양을 클릭합니다 톱니바퀴 모양을 클릭하고 개발자 대시보드 클릭합니다 웹 스토어 개발자 등록 과정입니다 개발자 계약 및 개인정보처리방침을 읽었으며 이에 동의합니다 체크박스를 체크합니다 체크를 하지 않으면 다음 단계 진행이 안 됩니다. 등록 수수료 결제 버튼을 클릭합니다 체크카드, 신용카드..

티스토리툴바