전체 글 125

[포스코x코딩온] 웹개발자 입문 과정 5주차 | 콜백함수, Promise

1. 비동기 방식이란 - 동기방식: '순차적'으로 동작하는 방식 요청을 보낸 후 응답을 받아야 다음 동작 실행 - 비동기 방식: '비'순차적 방식 요청을 보낸 후 응답에 관계없이 바로 다음 동작 실행 - 왜 비동기 방식을 써야하는가?: 동기 방식을 사용하면 서버가 언제 응답을 줄지 모르기때문에 계속 대기해야함 2. 비동기 '처리'가 필요한 이유 아래 코드를 돌려보자 function goMart() { console.log("마트에 가서 어떤 음료를 살지 고민! "); } function pickDrink(){ setTimeout(()=>{ console.log("고민 끝"); product = "제로콜라"; price = 2000; },1000) function pay(product, price){ co..

백앤드/Node.js 2023.03.28

[포스코x코딩온] 웹개발자 입문 과정 4주차 | 프로젝트 회고

일단 모든 팀원들과 나 자신에게 수고했다고 말하고 싶다. 계속 밤을 샜는데도 시간이 너무 부족했던 것 같다. 프로젝트 설명 잘한 점 전반적인 디자인을 글꼴, 헤더, 메인화면 지도 등을 담당했었는데 정말 재밌어서 밤을 새는데도 그렇게 힘들지 않았다. 또한 미로찾기 부분에서 대각선으로 이동하는 문제를 해결하기 위해서 밤을 또 샜었는데 후천적으로 처리를 결국엔 해내서 성취감이 있었다. 근본 문제는 교민님이 해결하셨는데 그 과정에서 배우는 점이 많았다. 아쉬운 점 피드백 대로 차차 수정해나가야겠다.

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-05 | NCP 기초

1. 레퍼지토리에 업로드 먼저 이전에 실행시켰었던 node.js 관련 폴더를 깃에 새로운 레퍼지토리에 업로드 한다. //해당 폴더 이동 cd /code/BackEnd/20230317/trial //깃 올리기 git init git branch -M main git add . git commit -m 'backend' //깃 페이지에서 새로운 레퍼지토리 생성 및 아래 코드 복붙 git init git add README.md git commit -m "first commit" git branch -M main git remote add origin 레퍼지토리주소 git push -u origin main 2. ncp서버 이동 root@서버IP주소 이후 비밀번호 입력 3. ncp서버에 깃 클론 및 깃설정 g..

백앤드/배포 2023.03.17

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-04 | 백앤드 기초

1. Back-End 뒷단에서 데이터 다루는 역할 웹 백앤드 언어 종류로는 node.js, jsp, Django(python) 가 있음 우리나라에서는 아직까지 jsp를 많이 사용 중이나 세계적으로는 node.js 점유율이 계속 증가하는 추세임 MERN Stack이라고 해서 React + Node.js + Express + MongoDB 로 보통 웹사이트 만듦 미래를 위해서 node.js사용 권장함 * MongoDB: 웹 애플리케이션과 인터넷 기반을 위해 설계된 데이터베이스 관리 시스템 * Node.js: 구글 크롬의 자바스크립트 엔진(V8Engine)에 기반해 만들어진 Javascript 런타임, 이벤트 기반, 비동기 입출력 모델을 사용해서 가볍고 효율적임, npm 패키지는 가장 큰 오픈소스 라이브러리임..

백앤드/Node.js 2023.03.17

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-03 | JQuery

1.jQuery란: : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다. - 사용 방법: $(선택자).동작함수(); 처음엔 jQuery가 많이 사용 되었으나 jQuery를 대체할 react 나 view 같은 가상 dom을 다루는 라이브러리들이 많이 생겼으며, 기본 자바스크립트도 많이 기능들이 생기기도 했고 jQuery가 무거워서 잘 안쓰이는 추세이다. 2.사용 방법 https://releases.jquery.com/ 에서 당연한 말이지만 이 과정이 없으면 적용이 안된다. 3.메소드 1) 값 가져오기 & 설정하기: - $(선택자).val(); ex. var value =$('input').val(); - $(선택자).val('설정할 값'); ex. var..

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-02 | JavaScript addEventListener

1. addEventListener란? DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. * 사용방법: 요소.addEventListener(이벤트, 명령) 선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행 2. addEventListener 이벤트의 종류 1) Click 클릭 2) Mouse 계열 - Mouseover: 요소에 커서를 올렸을 때 - Mouseout: 마우스가 요소를 벗어날 떄 - Mousedown: 마우스 버튼을 누르고 있는 상태 - Mouseup: 마우스 버튼을 떼는 순간 3) Focus: 포커스가 갔을 떄 4) Blur: 포커스가 벗어나는 순간 5) Key 계열 - Keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발..

백준- 단계별로 풀어보기| 3단계- 반복문

단계 문제번호 제목 코드 1 2739 구구단 num = int(input()) for i in range(9): print(num,'*',i+1,'=',num*(i+1)) 구구단을 출력하는 문제 2 10950 A+B - 3 test_case = int(input()) for i in range(test_case): num1, num2 = map(int, input().split()) print(num1+num2) A+B를 여러 번 출력하는 문제 3 8393 합 n = int(input()) sum = 0 for i in range(n): i += 1 sum+=i print(sum) 1부터 N까지의 합을 구하는 문제. 물론 반복문 없이 풀 수도 있습니다. 4 25304 영수증 total = int(inpu..

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-01 | JavaScript DOM

1. DOM이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 * 인터페이스란? 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면 * : 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다. 2. DOM을 통한 요소 선택 - 요소 선택자를 사용해서 가져옴 1) document.querySelector('요소 선택자') - 태그 중 맨 처음 요소를 가져옴 console.log(document.querySelector(".others")); console.log(document.querySelector("#green")); console.log(d..