UNIFOX 2025 여름 방학 개인 프로젝트

playC - 엔트리를 모방한 블록 코딩 웹엔트리란? 엔트리는 네이버에서 운영하는 블록 코딩 웹 사이트 입니다.유저가 직접 블록 코딩으로 프로그램을 만들고 커뮤니티에 배포 할 수 있습니다. 제작 동기 저는 초등학생때 엔트리를 통해 코딩을 접하게 되었습니다.단순히 블록을 이어 붙이는 과정이었지만, 원하는 결과가 화면에 구현되는 것은큰 즐거움이 되었습니다.이후로 코딩에 재미를 느껴 여러 프로그램을 만들다가, 인기 작품에 선정 된적도 있습니다.이렇듯 저에게 큰 의미가 있는 엔트리를 직접 구현 해보고 싶었습니다. 그래서 놀다 play에 c언어를 붙혀 playC라는 이름의 프로그램을 만들게 되었습니다. 코드 설명 HTML과 CSS , 그리고 Javascript를 사용하여 웹으로 제작 하였습니다.오프닝은 프론..

  • format_list_bulleted ect./project
  • · 2025. 8. 17.

Nodejs 2차시

node.js란?JavaScript 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경 node.js 장단점장점비동기 이벤트 기반 IO를 사용해 동시에 여러 요청 다루기 편함js를 사용해 프론트엔드 개발자의 백엔드 입문 쉬움v8엔진이 JIT 컴파일러여서 서버 기동이 빠름단점멀티코어 사용시 별도의 작업 필요콜백 중첩을 계속 사용하면 코드작성, 디버깅시 문제발생(콜백 지옥)이벤트 기반 프로그래밍 경험이 없을 시 코드 작성이 어려움 싱글 스레드 콜스택이 하나만 존재한 번에 하나의 작업만 가능 이벤트 기반 아키텍쳐이벤트가 발생하면 미리 등록된 콜백 함수를 호출하여 처리하는 구조이벤트 루프를 통해 비동기적으로 작업을 수행하는 프로그래밍 방식 이벤트 루프Node.js에서 비동기 작업을 처리하기 위해 이벤트..

  • format_list_bulleted web/web
  • · 2025. 8. 10.

nodejs 1차시

백엔드란?웹 사이트나 앱의 뒤에서 작동하는 영역사용자가 볼 수 X - 서버, 데이터 베이스, API 등 관리 서버란?HTTP요청을 받아 다양한 처리를 하는 프로그램을 실행시키는 공간웹 서버정적인 콘텐츠 제공아파치, HTTP sever, NginxWAS동적인 웹 앱을 실행하는데 사용 웹 서버 뒤에서 요청에 대한 응답 제공Spring, django 개발자의 업무과제 할당과제 분석개발테스트QA배포유지 보수협업시 confluence, jira 추천 백엔드 언어1위 파이썬 flask2위 node.js3위 java4위 go등등등데이터 베이스란?(DB)전자적으로 저장되고 체계적인 데이터 모음DBMS(데이터 베이스 관리 시스템)을 사용하여데이터를 저장 및 검색, 편집을 할 수 있다.RDB행과 열로 구성된 테이블 형태..

  • format_list_bulleted web/web
  • · 2025. 8. 10.

JS 4차시 - 비동기

JS성질JS는 기본적으로 동기적 언어이다-> 싱글 스레드 언어 ( 스레드 : 코드가 실행되는 흐름 )한번에 하나의 일만 처리 가능프로그램 난이도 쉽고 cpu와 메모리 적게 사용연산량 많은 작업 수행시 멀티 스레드 필요동기란말 그대로 동시에 일어난다는뜻-> 요청과 동시에 결과가 나타남-> 시간이 늦어져도 요청한 자리에서 결과가 나와야됨-> 순서에 맞춰서 진행 가능하다는 장점-> 여러 요청을 한번에 처리 할 수 없다는 단점비동기란말 그대로 동시에 일어나지 않는다는 뜻-> 요청후 응답과 상관 없이 다음 작업 실행-> 여러 요청 동시에 받고 시간과 관계 없이 응답-> 서로 다른 작업을 동시에 처리 가능하다는 장점-> 설계가 복잡해지고 코드 가독성이 떨어진다는 단점비동기를 쓰는 이유JS는 웹 페이지의 응답 시간..

  • format_list_bulleted web/web
  • · 2025. 7. 29.

Js 3차시 - 객체

객체란 프로그래밍에서 데이터를 저장하고 조작하는 기본 단위 현실에 존재하는 모든것은 객체임객체는 프로퍼티(속성)과 메서드로 이루어져있다const car_gnx = { //객체 name: "gnx", //프로퍼티 color: black, //프로퍼티 weight: "1.5t" //프로퍼티}; 프로퍼티란프로퍼티란 속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미이 두가지 방법으로 접근할수있음객체이름.프로퍼티객체이름[프로퍼티] 매서드란어떤 객체가 가지고 있는 어떤 동작 화살표 함수란function이라는 키워드 없이 => 를 이용해 함수를 생성하는 방법예시 : const sum = (x, y) => x + y; 1.항상 익명인 함수 ( 익명함수: 재사용하지 않을 목적으로 이름을..

  • format_list_bulleted web/web
  • · 2025. 7. 28.

JavaScript 2차시 - 돔, 노드, 이벤트

DOM 이란? HTML내 원하는 위치에 접근하기 위한 하나의 방식 DOM의 역할DOM은 HTML 웹페이지와 JS를 연결하는 역할을 함JS는 document라는 전역 객체를 통해 HTML에 접근돔 트리란?브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체DOM 함수getelementbyid : 특정 id 조회getelementbyname : 특정 name 조회 getelementbytagename : 특정 tage 조회getelementbyclassname : 특정 class 조회노드란?트리구조에서 root노드를 포함한 모든 각각의 객체root 노드 : 가장 위에 있는 노드노드의 종류element node : 모든 HTML문서는 요소 노드, 속성 노드를 가질 수 있는..

  • format_list_bulleted web/web
  • · 2025. 7. 25.