디자이너에서 개발자 디자이너에서 개발자

전체 글

• [패스트캠퍼스] 웹 개발 강의(파이썬으로 하는 크롤링)

  패스트캠퍼스/웹개발 2023. 4. 20. 11:31

  국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다. 웹사이트 구성원리 주소(www.naver.com)를 입력하면 실제 숫자(IP)로 이루어진 주소로 컨텐츠 요청(네이버 서버)하면 서버에서 내용 확인하고 사용자 브라우저 HTML을 보내고 브라우저가 HTML을 해석해서 화면에 보여주는 형식으로 구성된다. 서버와 통신 Ajax 통신이 왜 필요할까? 매번 페이지가 새로고침되면 불편한 상황이 있다. 이런 상황에서 Ajax를 통해 페이지는 변경되지 않고 정보가 변경(서버와 통신)된다. API 데이터를 주는 주소로 제공해주는 인터페이스 테스트해볼 수 있는 API https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake RES..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(React 시작하기)

  패스트캠퍼스/React&Redux 2023. 4. 19. 18:20

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. 리액트는 무엇일까? 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 사용한다. vue.js와 Angular는 프레임워크이고, 리액트는 라이브러리이다. 프레임워크: 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것(프레임워크 안에 여러 모듈이 있다) 라이브러리: 특정 기능을 모듈화 해놓은 것 리액트는 View를 담당하는데, 그외에 Model과 Controler를 조작하기 위해서는 여러 모듈을 사용하게 된다. 라우팅(페이지이동): react-router-dom 상태관리: redux, mobx, recoil 테스트: Jest, Mocha Node.js가 필요한 이유? 프로젝트를 개발할때 필요한 모듈인 바벨이나 웹팩 등이 ..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(JavaScript)

  패스트캠퍼스/React&Redux 2023. 4. 18. 16:27

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. MDN 문서를 참고합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 위 문서에서 String 생성자란, new라는 키워드로 문자 데이터를 만들어 내는 것인데, JS에서 '' 를 통해 생성해 준다. 이처럼 기호를 통해 손쉽게 생성하는 방법을 리터럴 방식이라고 한다. 이 외에도 객체: {}, 배열 [] ...등 이 있다. https://developer.mozilla...

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(Node.js와 Git)

  패스트캠퍼스/React&Redux 2023. 4. 17. 09:53

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Node.js Node.js는 Chrome V8 JavaScript 엔진(자바스크립트 문법을 해석하는 엔진)으로 빌드된 JavaScript 런타임(자바스크립트 언어가 프로그램이 동작하는 환경)이고, 자바스크립트는 프로그램 언어인데, 컴퓨터(로컬)에서도 동작할 수 있고, Chrome 웹브라우저에서도 동작할 수 있다. 웹페이지를 개발하기 위해 Node.js의 도움을 받는 용도로 사용한다. 여러 모듈을 사용하여 개발하고 node.js로 html,css,js 파일로 변환하여 웹브라우저에 넘긴다. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..

  Read More
• [패스트캠퍼스] 프론트엔드 강의 학습일지(HTML/CSS/JS 기본)

  패스트캠퍼스/React&Redux 2023. 4. 12. 22:48

  국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. https://fastcampus.co.kr/b2g_kdc_web [중급] 프론트엔드 종합반 : HTML&CSS, JS, React | 패스트캠퍼스 패스트캠퍼스 온라인 강의를 국비지원으로 0원에 수강하세요! fastcampus.co.kr 개요 프론트엔드란? HTML, CSS, JS로 GUI(사용자에게 보이는 화면) 구현하는 것입니다. 웹앱의 동작 원리 브라우저 통신 > 프로토콜 접속 > 최초 요청(Request) > 서버 > 최초 응답(Response HTML) > 브라우저 화면에 응답받은 HTML 랜더링> 추가 필요한 파일 요청 > 추가 응답(CSS, JS, JPG 등) 웹 표준과 브라우저 웹표준은 웹에서 사용되는 표준..

  Read More
• [Vue.js] 다국어 처리(i18n)

  Development/Vue.js 2022. 4. 29. 18:36

  Vue I18n 모듈 사용하여 다국어 처리를 할 수 있습니다. 아래 공식 문서를 참고해주세요. https://kazupon.github.io/vue-i18n/installation.html#compatibility-note Installation | Vue I18n Installation Compatibility Note Direct Download / CDN https://unpkg.com/vue-i18n@8 (opens new window) unpkg.com (opens new window) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specif..

  Read More
• [SCSS] 중첩

  Development/SCSS 2021. 11. 4. 12:39

  SCSS에는 편리한 중첩 방법이 있습니다. codepen을 통해 직접 작성해보겠습니다. https://codepen.io/wdpmong/pen/XWaeYYr scss 중첩 ... codepen.io 위 코드와 같이 중첩하여 사용할 수 있습니다. CSS로 변환하면 아래와 같은 코드가 됩니다. .container ul li { font-size: 50px; } .container ul li .name { color: skyblue; } .container ul li .description { color: pink; } 위와 같이 중복되는 후손 선택자들을 SCSS를 사용한다면 줄일 수 있습니다. 만약 자식 선택자로 명시를 해줘야 한다면, 아래와 같이 SCSS 문법에서 > 를 사용하면 됩니다. CSS로 변환하면..

  Read More
• [SCSS] 주석 처리 방법

  Development/SCSS 2021. 11. 3. 15:46

  codepen은 간단한 코딩 하기에 용이합니다. codepen을 통해 직접 작성해보겠습니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 먼저, CSS탭에서 설정 버튼을 클릭한 후 SCSS로 설정해줍니다. SCSS에서는 두 가지의 주석 처리 방법이 있습니다. 1. /**/ 2. // 1번과 같은 경우에는 컴파일(변환)해도 css코드로 남아있고, 2번과 같은 경우에는 컴파일(변환)하면 c..

  Read More