letsgojieun

html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재한다. 오늘은 상황에 따라서 어떻게 script를 불러와야 효율적인지 각각의 방법과 그 특징에 대해서 알아보자! 1. 에 를 별다른 조건 없이 넣는 경우 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자체를 막아버리기 때문에 (자바스크립트의 기본 옵션은? 동기처리이다! ) 스크립트에서 DOM 요소에 접근이 불가능해진다. 실행 흐름을 보면, 브라우저가 html 문서를 위에서부터 아래로 쭉 읽는데 여기서 script를 만나면 바로 script 안의 내용을 한 줄 한 줄 해석하기 시작한다. 하지만 ..

JSON이란 무엇인가 ? JSON이란 JavaScript Object Notation의 약자로 자바스크립트 객체 문법을 기반으로 하는 데이터 교환 형식을 말한다. 형태는 속성 : 값 (Key : Value) 형태로 이루어져 있으며, 비동기 브라우저/서버 통신인 Ajax를 위해 사용하는 데이터 포맷이다. (= 프로그래밍 언어가 아닌 데이터 표기 방법 중 하나이다.) 전에는 XML을 사용했지만 매번 태그를 달아줘야 하는 번거로움이 있어 요즘엔 웹 개발 형식이 훨씬 더 간편하게 작성이 가능한 JSON으로 바뀌고 있다 JSON 특징 ? 자바스크립트 객체 표기법을 사용하여 자바스크립트에서 사용하기가 매우 편리하다 프로그래밍 언어, 플랫폼에 독립적이라 C, C++, 자바, 파이썬 등 다른 프로그래밍언어에서도 쉽게 ..

콜백함수(Callback)란 ? 이름에서 알 수 있듯이 나중에 호출되는 함수이다. 바로 전 포스팅에서 설명했던 비동기처리 방식으로, 어떠한 행동을 다른 객체에게 전달하고 그 일이 끝날 때까지 기다리지 않고 곧바로 다른 일을 한다. 즉 어떤 이벤트가 발생 또는 특정한 시점에 도달했을 때 호출되는 함수를 말한다. (호출 방식을 말함) 이러한 방식으로 싱글스레드가 계속 움직일 수 있게 해주는 Non-Blocking 방식으로 동작하며 이를 비동기적 테크닉이라고 부른다. 콜백지옥은 어떻게 생기는가 ? 여러 개의 함수를 비동기적으로 하나씩 불러오고 싶을 때 콜백을 사용할 것이다. ex. 1번 로드하고 에러 없으면 2번 로드하고 에러 없으면 3번 ... 이러한 코드를 생각하면 콜백 안에 콜백을 넣게 되는데 단 몇 개..

비동기처리와 동기처리의 차이점 ? 동기처리(Synchronous) : 클라이언트가 서버에게 데이터 요청을 하면 그 요청에 맞는 응답이 올때까지 다른 작업을 하지 않고(멈춰있음) 기다린다. 그 후에 요청에 맞는 응답을 받게 되면 그제야 다음 요청을 처리한다. 즉, 브라우저는 스크립트가 서버로부터 데이터를 수집하고 이를 처리한 후 페이지 나머지 부분이 모두 로드될 때까지 대기하는 것이다. 비동기처리(Asynchronous) : 클라이언트가 서버에게 데이터 요청을 한 후, 서버가 요청에 맞는 응답을 언제 줄지 모르기 때문에 무작정 기다리지 않고 비동기처리를 한다. 즉, 요청만 보내놓고 응답이 오지 않아도 다음 새로운 요청으로 넘어가버린다. (다른 작업이 가능) 여기서 자바스크립트 언어는 순차적 연산을 거치는 ..

margin: 0 auto; margin 0 auto; 를 주면 0은 위아래 여백을 주지 않는다는 의미이고 auto는 좌우 여백의 너비를 똑같이 주어 가로 중앙에 배치된다. (ex.왼쪽 너비가 50px이면 오른쪽 너비도 50px) margin: 0 auto; 적용할 때 주의할 점으로 1. width 크기가 지정되어 있어야 한다. 2. block 요소에만 적용이 된다. 블럭이 아닌 인라인 요소에 적용했다면 display:block;으로 해결을 하거나, 인라인 요소의 부모인 블럭요소에 margin이 아닌 text-align:center; 값을 주어서 해결 가능하다. section과 article 차이점 Sementic tag HTML에서 가장 중요한 건 최대한 Sementic tag 를 이용하는 것이다. 말..

home brew 설치 이후로 건드려본 적이 없었던 맥os 터미널 저번에 타입스크립트 설치를 위해 node.js 먼저 설치하고 (npm이 자동으로 같이 설치된다) 글로벌 버전의 타입스크립트를 설치하려는 순간.. ????????! 전혀 예상치 못하게 설치 과정에 에러가 발생했다 경로와 관련된 문제였는데 이때는 가뜩이나 터미널을 처음 접해본 입장이라 (= 아는 게 1도 없는 상태) 미치고 환장할 노릇.. a missing write access to, no such file or directory, the operation was rejected by your operating system 등등 모든 에러 내용을 복사해서 구글링과 스택오버플로어를 돌고 돌았다 그렇게 나와 비슷한 에러를 겪고 있는 사람들이 해..

오늘 수업 시간에 쿠키에 대한 개념을 얕게나마 배웠다. 조금 더 보충이 필요할 것 같아서 구글링+유튜브로 검색해보니 쿠키, 세션, 캐시 이 세 가지의 개념을 함께 다루는 경우가 많았다. 정리를 통해 각각의 개념 정리를 해두면 좋을 것 같아서 포스팅을 하게 되었다. 쿠키 (Cookie) 란? : 사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 작은 조각을 말한다. 예를 들어서, 웹사이트에서 우리가 로그인을 할 때 옵션으로 '아이디/비밀번호 저장'을 클릭하면 다음번에 그 사이트에 다시 접속했을 때 우리가 로그인했던 아이디와 비밀번호가 미리 입력되어 있다 하지만 이 정보는 우리의 컴퓨터(= 사용자/클라이언트 브라우저) 에만 존재하고, 다른 컴퓨터에서 똑같은 웹사이트에 접속한다 해도 우리가 입력했던 아..

HTML 배우면서 많이 사용했었던 앵커(링크)와 ul, ol, li 리스트어제 4-5페이지의 웹사이트 만들기 과제를 했었고 별생각 없이 앵커를 쭉 나열하였다.(평소 앵커에 리스트로 감싸는 것은 Navbar에서만 자주 사용했기 때문에) 오늘 수업을 들으면서 페이지를 넘길 때 (ex. 페이지넘버를 이용하여 페이지 이동 시) 여기에 있는 앵커 모두리스트로 묶어줘야 한다는 걸 깨달았다 ..근데 생각해보면 당연한건데 그 당연한 걸 생각을 못 하고 있었다이제라도 인지해서 그나마 다행이다 다음엔 꼭 잊지 말고 사용하자,,!

심플한 웹사이트 디자인의 치트키라고 할 수 있는 부트스트랩!많이 들어봤는데 사용해보진 않다가 최근 수업에서 부트스트랩 사용법을 배웠다이번 포스팅에선 부트스트랩 사용법과 Java jsp 의 templates 사용법에 대해간단히 작성해보았다.     부트스트랩 사용방법 1.  부트스트랩 홈페이지에 들어가서 빨간색 동그라미 표시가 된 Get started 를 클릭한다(navbar에 있는 Docs 클릭해도 된다)  2.  위의 버튼을 누르면 이 페이지가 나오는 걸 확인할 수 있는데 여기서 스크롤을 조금만 내리면     이러한 화면이 보인다.동그라미 표시 한 CSS, JS 코드를 복사하고 자신이 쓰는 편집기에 붙여넣기한다.나는 태그 바로 밑에다 복붙했다  3.    이제 본인이 원하는 디자인 코드를 가져다가 사용..

저번 포스팅에서 add, commit을 하는 방법을 알았으니 이번엔 내가 작업했던 시점의 이전(add, commit, push하기 이전) 으로 돌아가는 방법을 작성해 보려 한다저번에 작성했던 index파일은 내버려 두고 새로운 index2.html 파일을 만들었다우선 파일을 새롭게 하나 만들었으니 git add를 해주고git status로 현재 git 저장소의 상태를 보니 하단에 new file이라며 새로운 파일을감지했다는 걸 알 수 있다.그런데 갑자기 git add한 내용을 취고 하고 수정해서 다시 add하고 싶어졌다면?git reset HEAD [파일명] 을 작성하여 git add취소가 가능하다후에 git status를 다시 보니 Untracked file이라며add가 제대로 취소된 것을 확인 가능하..