창업 즉, 업을 만들다는 것은 새로운 가치있는 '일'을 만들어 내는 것이다. 가치를 만들어 나는 소비자에게 최고의 가치를 선사하며 그 대가로 또 다른 가치를 지불 받는 것인데 결국 나의 목표는 '가치'를 만들어 '돈'을 받는 것이다.
내가 사람들에게 줄 수 있는 가치는 무엇일지부터가 고민이다.
과연 내가 줄만한 가치 있는 것들이 무엇이 일을까? 세상에 날고 기는 사람들이 넘쳐나는 이 세상에서 내가 과연 경쟁자들의 틈에서 승리할 수 있을까. 매일 매일이 나의 의구심과의 싸움이다. 그런데 오늘도 나는 그런 싸움에서 '창업'을 선택했다.
여러 타이탄의 도구와 구현기술들을 단련하고 마련해가는 중에 예전부터 관심을 갖고 있던 코딩에 대해 공부하게 되었다. 내일배움카드를 통해 41만원에서 4만원의 비용으로 국가 지원을 받아 온라인 수업을 듣게 되었다. <스파르타 코딩>이라는 기업의 5주차 강의. 벌써 2주차에 들어섰다.
무자본 소자본 창업 준비 과정 #1_스파르타 코딩 기초 <2023년 나의 버킷리스트 만들기> 정리
퇴사 후 창업준비, 스파르타 웹개발 종합반 1주차 강의 정리 및 후기 시대 흐름에 맞는 자기계발을 놓치지 않기 위해 가볍게 도전해 볼 수 있는 것이 무엇이 있을까 고민하다가 웹개발을 선택했
jiniearth.tistory.com
2주차 코딩 강의 요약_자바스크립트
✏️hey 라고 지칭하는 버튼을 누르면 '안녕' 이 뜬다
1.<script>
funtion hey() {
alert('안녕!') }
</script>
2. <body>
<button onclick="hey">
</body>
✏️홀짝판별 onclick 함수
<script>
let count = 0 ▶︎ 카운트가 0부터 시작한다
function hey() {
count +=1 ▶︎ 카운트가 하나씩 증가한다
if (count % 2 == 0) { ▶︎ 카운트 갯수를 2로 나눴을 때 나머지가 0이면
alert('짝짝짝👏'); ▶︎짝수입니다.
} else {
alert('홀홀홀🎅');
}
</script>
✏️jQuery란?
html 요소 조작하는, 편리한 자바스크립트를 미리 작성해둔 것 (라이브러리)
JQuery CDN
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- input박스 값 가져와보기
- div 보이기 숨기기
- 태그 내 html 입력학
✏️1. url 가져오려면 지칭할게 필요하다
css -> class
jquery -> id가 지칭 이름
📌백틱 : 쉬프트 없이 물결표
📌스파르타피디아 연습 URL
http://spartacodingclub.shop/web/movie
📌퀴즈완성본
http://spartacodingclub.shop/ajaxquiz/00_0
📌제이쿼리 퀴즈
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
(힌트) // 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>
✏️완성
👉function q1() {
let txt = $('#input-q1').val()
if (txt == '') {
alert('빈칸입니다')
} else {
alert(txt)
}
}
👉포함하면 true -> 나눠서 'gmail' 값 불러오기
function q2() {
let txt2 = $('#input-q2').val()
if (txt2.includes('@') == true) { ▶︎@ 를 포함하면
alert(txt2.split('@')[1].split('.')[0]) ▶︎@기준으로 [1] (두번째) 값 : gmail.com ▶︎ . 기준으로 [0] (첫번째) 값 : gmail
} else {
alert('이메일이 아닙니다') ▶︎@ 를 포함하고 있지 않으면 '이메일이 아닙니다' 라고 뜨도록 한다.
}
console.log(txt2.includes('@')) ▶︎@ 를 포함하면 true 포함하지 않으면 false
}
✏️붙이기 지우기
function q3() {
let txt3 = $('#input-q3').val()
let temp_html = `<li>${txt3}</li>` 📌` ` 백틱쓰기
$('#names-q3').append(temp_html) ▶︎ 빈칸에 단어를 쓰고 '이름붙이기'라는 버튼을 누르면 names-q3 항목에 추가
}
function q3_remove() {
$('#names-q3').empty() ▶︎ '지우기'라는 버튼을 누르면 전부다 삭제
}
</script>
후기
처음엔 쉬운줄 알았는데 가면 갈 수록 어려워진다. 강사님은 계속 쉽죠? 쉽죠? 이러시는데 <스틱!> 책에 나오는 '지식의 저주'에 걸리신 것 같다. 본인은 알고 있으니 워낙 쉬울테지만 정작 처음 접하는 우리에게 단번에 이해하기란 너무 어렵다. 무엇보다 온라인 강의이다 보니 타이핑을 한번 놓치면 15초를 다시 돌아가서 들어야한다. 하루에 짧은 (최대 4분)강의를 8개까지 들을 수 있다. 따지고보면 한 주차 강의당 거의 1시간에서 길면 2시간 정도로 짧은 시간인 것 같지만 영상을 계속 반복해서 돌려보다보면 하루 4강의 듣다가도 3~4시간이 훌쩍 가기도 한다. 직장인들도 야근이 없거나 잠이 없는(?) 분들은 충분히 가능하겠다. 하지만 직장이 바쁜 분들에게는 조금 빠듯할 수도 있을 것 같다. 특히웹개발, 코딩을 처음 접하는 사람들에게는 스트레스로 다가올 수도...
나는 80% 이상 들으면 납부했던 4만원도 환급이 되기 때문에 사실 듣는거는 문제가 없을 것 같다. 다만 5주차 강의로 끝내면 진짜 맛보기 수준에서 그치치 않을까 싶다. 강사님이 소개한 다음 심화 강의들을 고려해봐야할 것 같다.
'창업일지' 카테고리의 다른 글
| 스파르타 코딩 강의 정리_API를 이용해 원하는 구성으로 웹에 표현하기 (0) | 2023.01.15 |
|---|---|
| 창업 준비 과정#3_스파르타 코딩 2주차 jQuery+Ajax의 조합을 연습하자 (0) | 2023.01.10 |
| 무자본 소자본 창업 준비 과정 #1_스파르타 코딩 기초 <2023년 나의 버킷리스트 만들기> 정리 (1) | 2023.01.08 |
| 무자본 소자본 창업 준비 과정 #0_프롤로그 (1) | 2023.01.08 |
| 퇴사 후 창업준비, 스파르타 웹개발 종합반 1주차 강의 정리 및 후기 (0) | 2023.01.06 |
