Dev.Eunice Dev.Eunice

학기중에 간단하게 html, css를 이용해서 프로젝트를 해본뒤로 피드백을 적용하고자 방학을 기점으로 클론 프로젝트를 진행하였다. 동기들과 함께 쇼핑몰 페이지를 디자인과 기능을 최대한 비슷하게 구현해보고자 하였다. 이번 방학에는 프론트엔드를 담당했고, 해당 프로젝트가 마무리되면 ios로 넘어가서 평소 하고싶었던 앱 개발을 진행해보고자 한다! 이번 프로젝트는 협업을 배우고, 프로젝트 진행 과정과 공부 방법을 배우는것을 목표로했다. 그래서 백엔드보다는 프론트쪽으로 처음 접하기 쉽게 접근했다! 클론하고자 했던 사이트 https://www.jogumanstudio.com/ 조구만 스튜디오 ® 만들고, 그리고, 이야기하는 조구만 스튜디오입니다. www.jogumanstudio.com 아직까지 프로젝트는 진행중이며..

동적인 페이지를 만든것은 아니지만, 공공외교 공모전 준비를 진행하며 소개 페이지를 가볍게 만들어보았다. (4월달에 만든걸 이제서야 아카이빙,,,,부지런해지자 제발 좀,,,) https://docs.google.com/document/d/1SaxIjYOktlDn0IKxbc6XrBzbHRGuagnp/edit 2022 KF국민공공외교 프로젝트 계획서 .docx KF국민공공외교 프로젝트 계획서 ■ 신청구분 : 온라인 프로젝트 ■ 팀명 : K-Universe ※ 단체로 신청 시, 팀명을 단체명과 동일하게 기입 ■ 프로젝트명 :K contents 속 한식 레시피 배우기 팀 구성 정 docs.google.com 공모전은 선발되지 않았지만, 아카이빙 하고자 한다. 프로젝트는 위에 계획서를 보면 알겠지만, 한국 컨텐츠속..

자바스크립트 엔진 동작 원리 Memory Heap - 변수의 값이 저장되어있는 공간 Call Stack - 명령어를 처리하는 공간 (스크립트 엔진은 call stack이 하나뿐이라 아래부터 위로 stack처럼 쌓임, 제일 처음 등록된 업무를 끝마치면 그 다음에 업무가 수행되는식으로 순차적으로 동작) Web APIs - 브라우저가 처리해주는 업무 1) DOM (html, css를 읽어서 브라우저가 동일한 형태로 화면에 출력) 2) AJAX (실시간으로 외부의 데이터를 불러오거나, 서버의 데이터 불러와서 화면에 뿌려주는 비동기 서버통신) 3) Timeout (일정시간동안 코드를 지연시켰다가 실행해줌) 동기방식 - 업무의 순서가 정해져있음 비동기방식 -업무의 순서는 정해져있지만 언제 어떤 업무가 먼저 끝나는지..

Javascript 변천사 https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 자바스크립트 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 자바스크립트JavaScript패러다임프로그래밍 패러다임: 스크립트 언어, 객체 지향 프로그래밍 (프로토타입 기반 프로그래밍), 명령형 프로그래밍, 함수형 프로그 ko.wikipedia.org 간단하게 정리해보자면 (프로젝트 세팅할 때 알아두면 좋음!) - 중요한 버전 : EcmaScript 5.0 (현역에 실행되는 버전의 Javascript) - 모던 자바스크립트는 ES2015부터 중요! (우리가 실제로 코딩하는 자바스크립트 문법은 ES2015 이..

visual studio code와 node.js는 이미 설치한 상태라 parcel 이라는 프로그램만 설치하였다! (아래 링크에서 다운로드 가능) https://ko.parceljs.org/ Parcel – The zero configuration build tool for the web. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application. parceljs.org parcel이라는 프로그램은 프론트엔드 개발자에게 가장 중요한 번들러라고 하는..

flex 속성 (하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성) https://developer.mozilla.org/ko/docs/Web/CSS/flex flex - CSS: Cascading Style Sheets | MDN flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. developer.mozilla.org flex-direction 기본축 설정 (플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정) @charset "UTF-8"; * { margin: 0px; padding: 0px; } main{..

- 웹 문서에 stylesheet 연결 해당 코드 head태그 안에 삽입하고 css폴더에 style.css를 만들어서 css/style.css로 경로를 지정해주기. - 선택자 자손 선택자 - 문서 구조에서 특정 요소의 자손을 선택하는 선택자 (자식, 손자 그 이후에 후손을 모두 포함) 자식 선택자 - 특정 요소의 직계 자식만 선택하는 선택자 (자식 이후 손자, 후손을 포함하지 않음) 목록1 목록2 링크 @charset "UTF-8"; div{ border:1px solid red; /* 테두리 */ } div li{ /* 자손 선택자 */ border:1px solid blue; } div > a { /*자식 선택자*/ border:1px solid green; } 순서 선택자 - 순서를 이용하여 선택하..

- Visual Studio 확장 설치 https://blog.naver.com/PostView.naver?blogId=hadaboni80&logNo=222537302196&categoryNo=38&parentCategoryNo=38&from=thumbnailList Visual Studio 설치 및 환경설정 Visual Studio code 설치 아래 웹 페이지에서 visual stuido code를 여러분의 OS별로 다운로드 한 뒤 ... blog.naver.com - node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - 설치확..