코딩

스파르타 [왕초보] 비개발자를 위한, 웹개발 종합반 2주차 개발일지

瓜田李下(과전이하) 2022. 10. 31. 14:26

2주차 숙제 !! 마의 2주차를 드디어 넘겼다.

< 수업내용 >

JQuery 배우기

AJax 배우기​

● JQuery란?

미리 작성된 Javascript 코드 이다. 상대적으로 Javascript 보다 직관적이고, 짧다!!

단! 사용하기 위해서는 "임포트"를 해야 사용이 가능하다. <head></head> 태그 보통 맨위에 임포트 해준다. 그 후에는 <script></script>에 쿼리문 작성.

<JQuery 임포트 주소>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

※ jquery를 사용하기 위해도 css에서 class로 값을 지정해주는 것처럼 지정해줘야 한다.

이때 지정은 <bady>태그 안에서 원하는 곳에 id='id명' 으로 지정 해줄수 있다.

ex >

<a onclick="openclose()"​ id="btn-posting-box"​ class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

​

▶ $('#...id명...').명령값();

㉠ 박스의 값가져오기(input박스에서 사용) → $('#...id명...').vel();

㉡ div 보이기 / 숨기기 → $('#...id명...').hide(); / $('#...id명...').show();

㉢ 디스플레이 속성값 가져오기 → $('#...id명...').css()

ex ) $('#...id명...').css('width','700px') = 넓이 변경, 'width'만 치면 현재 크기 값을 가져옴

$('#...id명...').css('display') = display 값 가져오기 / 보이면 = block, 안보이면 = none

㉣ txet 변경하기 → $('#...id명...').text()

㉤ let temp_html = `...붙여 넣을 코드...` $('#...id명...').append(temp_html) = 해당 코드 붙이기 / ` = 백틱

​

 

JQuery 이용해서 풀었던 연습문제

<script> function openclose() { let status = $('#post-box').css('display'); if (status == 'block') { $('#post-box').hide(); $('#btn-posting-box').text('포스팅박스 열기'); } else { $('#post-box').show(); $('#btn-posting-box').text('포스팅박스 닫기'); } } </script>

​

● 서버 클라이언트 통신 이해하기

API는 은행 창구와 같다.

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것, 처리해주는 것이 다른 것처럼

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

* GET 타입 → 통상적으로! 데이터 조회(Read)​를 요청할 때 예) 영화 목록 조회

└ GET 구조

https://movie.naver.com/movie(서버주소)/bi/mi/basic.nhn(은행의창구이름)?(고객이가져가는데이터)code=161967(값)

※ 값은 서버(백앤드)와 클라이언트(프론트엔드) 간의 약속

​

* POST 타입 → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

​

● Ajax는 !! JQuery를 임포트한 사이트만 동작 가능하다 (↓ 기본골격)

$.ajax({ type: "GET", // GET 방식으로 요청한다. url: 요청할 url주소 data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요) success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })
  • 수업하면서 잘한점

공부는 역시 엉덩이가 무거워야 되는거 같다.

강의에서는 알려주지 않았던 파이썬 오류코드 보는 창을 찾아냈다. 덕분에 오타 찾는게 좀 더 쉬워져서 한결 편안해졌고, 이 경고창의 존재를 알고 난 후 좀더 오타가 줄어들었다.

2주차 강의만 벌써 수 번을 돌려 보느라고 3주차를 넘어가지 못했지만 반복학습의 중요성인지 아 이게 이렇게 동작하는 구나~ 하고 비로서 이해 되기 시작했다!! (드디어 회고록 작성을 마지막으로 3주차로 갈수 있다.)

  • 수업하면서 보완할점

여전히 자꾸 부호 하나씩 빼먹는다. 왜그러는 거니...???

줄 바꿔서 코드를 이어 나갈때 줄을 잘 맞추는데 꼭 괄호나 대괄호를 한번씩 빼먹고 안써서 코드가 제대로 동작되지 않았다. 여러 함수나 코드를 같이 쓸때마다 대괄호가 이거의 대괄호인지 아닌지 햇결려서 빼먹고 있다.. ㅎ

​

  • 수업을 하면서 느낀점

사실 공부 하면서도 코딩 공부를 시작한게 잘 한 일일까? 할수 있을까? 난 대체 뭘하고 싶은걸까? 지방이라는 한계가 있는데 취업은 역시 서울로 가야겠지? 등등 공부 초입부터 많은 생각들이 들어 더 공부에 집중도 안되고 진도도 더뎠다. 다시 집중해서 열심히 공부를 해야 할것같다!

 

오늘 100% 이수...를 미리 찍어놔서 스파르타클럽 매니저님이 전화를 주셨다. 100% 이수 축하한다면서... 방심하고 있었는데 전화가 와서 너무 깜짝 놀라 버렸지 뭐야.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 공부 안하고, 집중못하고 있었는데 어떻게 아셨지?!

(첫날 이후로 전화가 없어서 완전 방심 하고 있었다!!... 심지어 아직 SQL은 4주차 강의 보고 있지만 웹은 2주차.. 크흠..)

​

​

<사담>

사실 강의에서는 알려주지 않는 부분들이 많고, 진로 고민에 대한 이야기는 털어 놓거나 조언을 구하기는 조금 힘든 부분이 있었는데....(너무 많은 사람들이 있어 사적인 고민을 말하기가 조금 꺼려지더라는..)

게더에서 스온스 진행 해주시는 매니저님이 많은 이야기를 해주시고 무엇보다 최근 들어가게된 스터디 그룹에서도 많은 정보와 꿀팁. 그리고 조언을 얻고 있다.

사실 내 주변에서는 이 코딩.. 즉 개발자 라는 직업에 대한 공부나 현직에 있는 사람이 없기 때문에 달리 조언을 구할 곳도, 정보를 얻을 곳도 없었는데 스터디 그룹에서는 정말 많은 정보와 꿀팁 심지어 모르는 문제들도 알려주시고, 함께 풀고.. 그리고 고민도 들어주고 조언도 해주고... 덕분에 많은 위로를 받고 있다!

요번주 들어서 아 그냥 포기할까? 싶은 마음도 살짝... 꼼수로 일단 진도부터 내고 다시 차근히 하도록 하자. 20대로 돌아가기가 쉽지가 않네!

​

 

 

저작자표시 비영리 변경금지 (새창열림)