[포스코x코딩온] K-Digital training 웹 개발자 입문 과정 6기

교 육 기 간 : 2023. 02. 27 ~ 2023. 05. 22 교 육 과 정 : K-Digital training 웹 개발자 입문 과정 https://educs.posco.co.kr/home/info/business/kdigitalTraining.do2 POSCO K-Digital Academy 사업소개 K-Digital Training K-Digital Training 디지털 핵심 실무인재 양성 사업 K-Digital Training ※ POSCO는 K-디지털 트레이닝의 주요 디지털·신기술 기관 이며, 코딩온은 전문훈련업체 입니다. POSCO K-Digital educs.posco.co.kr 졸예도 아니고 고졸인 나에게 부트캠프 구하기란 쉽지 않았다. 보통 기업에서 해주는 부트캠프는 취업예정자들만..

• format_list_bulleted 기타 덩덩/Experience
• · 2023. 6. 2.
• textsms

React와 Node.js 로 만든 Todo List Mini Project 회고록

🗣️ 프로젝트 소개 Full stack Mini Project ⏰ 개발 기간 2023.04.28 ~ 2023.04.30 ⚙️ 개발 환경 Front-End : React Back-Ent : Node.js Express Server : Mysql ✍ Todo List 기능 - 파비콘 설정 - document.title 변경 - 엔터 입력/ 빈값 입력 x - 반응형 -show / create / edit / delete - 취소선 - 내림차순 정렬 - checkbox 크기 변경 ✍ 코드 기술 Client Public index.html에서 favicon.ico 수정 src components AppTodo.js OnBuutonClick addItem 함수 실행 공백 입력 X input 초기화 onEnterKe..

• format_list_bulleted [Study] FE/React
• · 2023. 5. 6.
• textsms

Sokect.io를 활용한 채팅 서비스

🗣️ 프로젝트 소개 양방향 통신을 위한 웹 소켓 기술을 활용하여 채팅 기능 구현 ✍ 기능 채팅 기능 보낸 시간 채팅 라인 수 확인 대화 상대 목록 공백 입력 X ✍ 코드 기술 static index.css my-chat 사용자가 보낸 채팅 메시지는 오른쪽 div 요소에 메시지 내용과 함께 사용자의 닉네임 출력 other-chat 상대방이 보낸 채팅 메시지 왼쪽 index.js 채팅 애플리케이션의 프론트엔드 코드 Socket.io 소캣 객체 생성 socket.on(' ', ()=>{...}); 소켓에 연결되었을 때 실행할 이벤트 핸들러 등록 views chat.ejs chat.js node.js, Socket.io 로 클라이언트와 서버 간의 양방향 통신을 구현 express 모듈 사용 클라이언트가 웹페이지..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 20.
• textsms

[포스코x코딩온] 1차 프로젝트 회고록

🪙 todays-account-book 프로젝트 소개 1인 가구를 위한 가계부 ✍ 프로젝트에서 담당한 기능 start page 떨어지는 동전 animate.style transform: translate(), rotate(), skew() 사용 animation-duration으로 동전마다 시간 조절 main 사용 설명서 sweetalert2 사용자의 여러 가지 경우 생각 -> then if문 반복 => 피드백 : 이 아니라 함수 사용을 했어야 했다. 다른 팀원께서 강사님께 질문했다가 피드백을 받은 부분이었다. 사용자가 사용 설명서를 읽을 경우 / 읽지 않을 경우 / 읽다가 중간에 닫을 경우를 생각하여 close 버튼과 다음 버튼으로 구성 하였다. 맞춤형 생활 정보 swiper slider 사용 cove..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 27.
• textsms

[포스코 x 코딩온] JS_04 DOM

DOM HTML 문서는 node와 object의 집합으로 구성된다. dom 으로 각각의 node 또는 object에 접근해 문서 구조 , 스타일, 내용 등을 변경할 수 있다. Document : 웹 페이지에 존재하는 HTML 요소에 접근할 때 .querySelector('선택자')요소 선택자를 사용해 요소를 가져오는 메소드문서에서 만나는 첫번째 요소를 반환console.log(document.querySelector(".pink")); //핑크1 클래스 가져오기 .querySelectorAll('선택자')문서에 존재하는 모든 요소를 배열의 인덱스에 맞게 배열 요소로 반환 1 2 3 console.log(document.querySelectorAll(".box")); //모든 요소를 배열의 인덱스에 맞게 ..

• format_list_bulleted [Study] FE/HTML & CSS & JS
• · 2023. 3. 13.
• textsms