전체 글
-
자바스크립트와 웹 프로그래밍 - Do it 자바스크립트 기본편프론트엔드 2019. 12. 19. 19:53
웹 프로그래밍이란? 웹 프로그래밍 : '웹 브라우저'와 관련된 프로그램을 작성하는 것 서버 : 사용자의 요청을 처리하거나 데이터를 관리하는 컴퓨터 → 백엔드 개발 클라이언트 : 웹 브라우저를 통해 서버에 필요한 정보를 요청하고, 서버가 전달한 정보를 보여주는 컴퓨터(PC, 노트북, 모바일 기기 등) → 프런트엔드 개발 자바스크립트로 할 수 있는 일 웹 사이트에 동적인 기능을 추가할 수 있다 웹 브라우저에서 실행되는 프로그램(웹애플리케이션)을 만들 수 있다 자바스크립트 프레임워크 Node.js를 이용해 서버 프로그램을 개발할 수 있다 자바스크립트의 특징 자바스크립트는 웹 브라우저에서 사용하기 위해 만든 언어. 모든 웹 브라우저에서 동작한다 별도의 프로그램 설치 없이, 웹 브라우저만 있으면 실행할 수 있고 ..
-
레이아웃 따라 만들기 - HTML/CSS프론트엔드 2019. 12. 18. 20:34
※ 자바스크립트 프론트엔드 스터디에서 발표했던 내용을 정리한 글이기 때문에 스터디원이 아니시라면 조금 이해가 어려우실 수 있습니다 위 이미지와 같은 레이아웃을 제작하는 과정입니다.(desktop_components_02) Figma 링크 : https://www.figma.com/file/viEujZmbqeYG4FHhsi0H7o/responsive_web_components_mobikdesign_v1.0-(Copy)?node-id=0%3A1 Figma Created with Figma www.figma.com 먼저 HTML에서 반응형 웹 설정을 해주세요. viewport : viewport란 웹페이지의 전체 영역 중 사용자의 기기 화면에 보여지는 영역을 말합니다. 위의 태그는 '웹페이지가 사용자의 화면에..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - Javascript프론트엔드 2019. 12. 17. 00:29
https://skm1104.tistory.com/4 네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자.. skm1104.tistory.com HTML, CSS에 이어서 Javascript로 기능구현하는 과정까지 보여드릴게요. 저는 간단한 유효성검사 기능까지만 구현했습니다. 사용자가 데이터를 입력하지 않았거나, 잘못된 데이터를 입력했을 때(조건/형식에 맞지 않는 데이터를 입력했을 때) 입력폼 아래에 "필수 정보입니다", "8~16자 영문 대 소문자, 숫자, 특..
-
네이버 회원가입 페이지 따라 만들기(클론코딩) - HTML/CSS프론트엔드 2019. 12. 16. 22:57
HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다. 회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고, Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기 이렇게 간단한 기능을 구현해봤습니다. 자바스크립트로 기능구현한 부분은 따로 글을 작성할 예정이고 이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다. 결과물부터 보여드릴게요 결과물 네이버 실제 회원가입 페이지 따라 만든 페이지 (휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. ) 하필이면 제가 이거..
-
자바스크립트 클로저(Closure) _속 깊은 Javascript 2장프론트엔드 2019. 12. 15. 00:45
※ 책 2장. 자바스크립트의 스코프와 클로저 단원에서 '클로저'부분을 보고 작성한 글입니다. 글에 사용된 예제는 책에 있는 예제를 살짝 변형해서 만들었습니다. 공부하려고 쓴 글이라 부정확한 부분이 있을 수 있습니다. 클로저에 대해 설명하기 전에, 반드시 알고 넘어가야할 '스코프 체인'에 대해 먼저 알아보자. 스코프 체인 자바스크립트는 중괄호( {} )를 기준으로 스코프가 생성되는 다른 언어들과 달리, '함수 단위'로 스코프가 생성된다. 스코프는 함수가 호출될 때마다 새로 생성된다. 이 코드는 다음과 같은 스코프 체인을 생성한다. 스코프 체인에서 변수를 탐색할 때는 다음과 같은 과정을 거친다. inner함수에서 어떤 변수를 사용하려고 하면, inner 함수의 스코프에서 먼저 그 변수를 찾아보고 -> 없으면..
-
[컴퓨터 사이언스] 6장. 객체 지향 프로그래밍CS 2019. 10. 15. 01:10
※ 이 게시글은 저자 양태환, 출판사 길벗 을 보고 공부하면서 중요하거나 이해가 어려운 부분을 개인적으로 정리해둔 글입니다. 공부하는 학생이 쓴 글이므로 부정확한 정보가 있을 수 있으며, 상세한 설명이나 예제는 책 원본을 참고하세요. 프로그래밍 패러다임 : 프로그래밍을 어떻게 바라볼 것인지, 어떻게 프로그래밍할 것인지에 대한 인식이나 체계. (프로그래밍을 바라보는 다양한 시각과 통찰) 절차 지향 프로그래밍, 객체 지향 프로그래밍, 함수형 프로그래밍 등이 있음. 1. 절차 지향 프로그래밍(procedural programming) : 함수(절차, 서브루틴)를 사용해 프로그래밍하는 것. "이 프로그램이 무슨 일을 하는가?" 함수 : 입력을 받아 일련의 연산과정을 거쳐 출력을 내보내는 것. 함수 사용의 장점 ..