변수 선언 방식 let vs var 1. let let BlogName = "PeachGreenTea"; { let age = 100; console.log(age); // 100 출력 age = 99; console.log(age); // 99 출력 console.log(BlogName); // PeachGreenTea 출력 } console.log(age); // 출력 불가 블럭 안에 있는 지역 변수(괄호 안에 있는 변수)는 블럭 밖에서 사용할 수 없습니다. 반대로 블럭 밖에 있는 전역 변수는 어느 곳에서나 접근이 가능합니다. 2. var 프로그래밍에서는 변수를 선언하고 값을 할당하는 게 정상인데, var는 변수를 선언하기도 전에 값을 할당할 수 있습니다. 게다가 값이 할당되기 전에도 출력을 할 수 ..
html 파일에 자바스크립트 파일을 연결하는 네 가지 방법과 장단점입니다. 1. head 태그에 js 파일 연결하기 실행 순서: 위에서부터 순차적으로 html 파일을 불러오고 -> JS 파일을 다운/실행 -> 남은 html을 마저 불러옵니다. 단점: 스크립트 양에 따라서 웹페이지를 불러오는 시간이 오래 걸릴 수 있습니다. 2. body 태그의 끝 부분에 js 파일 연결하기 실행 순서: html 파일을 모두 불러오고 나서 JS 파일을 다운/실행합니다. 단점: 웹페이지에 스크립트 동작을 많이 넣어둘 경우에 원하는 모양의 페이지를 한 번에 불러올 수 없습니다. async와 defer 속성의 공통점 : html를 불러오면서(DOM을 구성하면서) 동시에 스크립트를 다운로드합니다. 3. script 태그에 asyn..
마크업 개발, 웹퍼블리싱 - 디자이너와 제플린으로 협업하기
마크업 개발자분이 올린 제플린 질문글을 보고 실무에선 어떻게 제플린으로 협업하고 있는지 기록 겸 정보 공유를 하고 싶어져서 쓰는 글입니다. 마크업 개발자(= 웹퍼블리셔)가 디자인을 받아서 UI 작업을 하는 입장에서 써보겠습니다. 1. 처음 시작하기 제플린 메인화면(app.zeplin.io/)을 가게 되면 Workspace -> Projects가 있습니다. 프로젝트는 하나의 서버라고 생각을 하시면 되는데, 이 서버에 누구나 접근해서 확인할 수는 없고 디자이너분이 해당 프로젝트에 계정 추가를 해주셔야 해당 프로젝트의 디자인을 확인할 수 있습니다. 우측 상단에 있는 프로필을 눌러서 'example@gmail.com'로 되어있는 본인 이메일을 알려주시면 됩니다. 번외. 링크없이 디자인 찾아 나서기 더보기 보통은..
마크업 개발, 웹퍼블리싱 - 모바일 화면 검수하기
제가 실무에서 모바일 화면을 검수할 때 사용하는 방법을 공유하려고 합니다. 모바일 기기 사이즈는 320px, 360px, 375px 등을 맞추고 있습니다. 모바일 브라우저는 삼성 인터넷(안드로이드), 크롬, 사파리, 네이버앱에서 확인하고 있습니다. 간단한 방법부터 소개하겠습니다. 구글 크롬에서 DevTools 사용하기 1. 개발 툴 열기 키보드 F12 버튼을 눌러서 개발 툴을 열게되면 이러한 화면이 나오게 되는데, 여기서 Toggle device toolbar를 누릅니다. 2. 확인할 기기 사이즈 선택하기 기본적으로 몇 가지 기기가 포함되어 있습니다. 기기별로 모두 볼 필요는 없고 원하는 기기 사이즈에 맞는 걸로 보면 됩니다. 저는 iPhone 5/SE(320px), iPhone6/7/8 Plus(375..
컴퓨터과학과 3학년 1학기 커리큘럼
직장인이지만 3학년 1학기는 호기롭게 7과목을 다 채웠습니다. 수학은 진작 포기한 비전공자로서 이산수학(+ 상위 과목)은 포기하고, 빅데이터, 클라우드컴퓨팅, 보안은 현재 직업과 관련이 없기도 하고 전문적인 분야여서 위 네 종류는 졸업까진 들을 생각이 없습니다. 대체적으로 1학년 과목과 HTML 웹프로그래밍은 쉬웠지만 C프로그래밍과 Java프로그래밍을 동시에 배우다보니 겹치는 이론이 많이 있어서 수업을 들을 때마다 혼동이 오고 있습니다. Java 교수님이 1강부터 언급하시긴 하지만 C -> C++ -> Java 순으로 배웠어야 할 것 같은데 조금 후회중입니다. C, Java는 출석수업과제물도 구글링과 여러 개발 커뮤니티에 물어물어 겨우 해결을 했던 터라 과제에 대한 내용은 조만간 정리해서 올릴 생각입니다..
git을 실무에서 처음 접해서 유용하게 쓰고 있는 명령어만 적어보려고 합니다. 알아듣기 편한게 좋아서 해당 포스팅에는 git 강의처럼 전문적인 설명은 없습니다. 😎 git config user.name : git에서 사용중인(출력되는) 이름을 바꾼다. git config user.email : git에서 사용중인(출력되는) 이메일을 바꾼다. * config 뒤에 --global를 붙이면 전역 설정을 할 수 있습니다. git checkout -b "브랜치 이름" : 브랜치를 새로 만듦과 동시에 이름을 정합니다. * 예시: git checkout -b "modify-popup-design" -> 결과: modify-popup-design이라는 이름의 브랜치가 만들어집니다. * 명령어 입력 시 따옴표는 없어도..
안녕하세요, 학점은행제를 활용한 편입 정보 겸 제 얘기를 적고 싶어서 다른 포스팅과 다르게 시작해보려고 합니다. 3학년 편입 전 학력과 모아둔 학점 호텔전문학교를 1학년까지만 다니고 자퇴했습니다. 학점은행제의 개념을 전혀 몰라서 자퇴하면 모아둔 학점이 다 사라지는 줄 알았는데, 알고보니 학점은행에 42학점이 남아있었습니다. 학점은행제 홈페이지(www.cb.or.kr/)에서 확인할 수 있습니다. 방송통신대를 들어가게 된 계기 첫 사회생활을 웹퍼블리셔라는 직업으로 시작하게 되었습니다. 직업이 마음에 들었지만 업계에서는 초급 -> 중급(SW 기술자 등급제 기준)으로 올라가는 시간이 학력에 따라 대략 몇 년이 차이나는 걸 알게 되었고, 오래 일하려면 4년제 학력이 있으면 좋을 것 같아 알아보게 되었습니다. (개..
css로 요소 개수 알아내어 유연하게 코딩하기
css로 요소가 하나만 있을 때, 여러 개가 있을 때를 알아내어 각자 값을 주는 방법입니다. 요소 개수를 알아내어 적용하는 방법은 여러가지가 있지만 그 중 제일 깔끔하고 간단한 코드입니다. only-child를 활용하는 방법 .banner > div:first-child {border-radius: 20px 0 0 20px} // 첫번째 요소 .banner > div:last-child {border-radius: 0 20px 20px 0} // 마지막 요소 .banner > div:only-child {border-radius: 20px} // 하나만 있을 때 // only-child는 제일 아래에 적용해야 함 - only-child는 요소가 하나만 있을 때 적용할 수 있는 가상선택자입니다. Resul..