본문 바로가기

전체 글

 (325)
Hoisting(호이스팅), Scope(스코프) Hoisting 어디에 선언을 했는지와는 상관없이 항상 제일 위로 끌어올려주는 것. scope 어떤 변수에 접근할 수 있는지를 정의하는 것. 전역 스코프와 지역스코프로 나뉘며 지역 스코프는 또 함수 스코프, 블록 스코프로 구분한다. const apple = 'red'; function print() { const lemon = 'yellow' console.log(apple); // 'red' } print(); console.log(lemon); //Uncaught ReferenceError: lemon is not defined 전역 스코프 변수 변수가 모든 함수에 속하지 않고 {}괄호안에도 들어있지 않다면 전역 변수라고 한다. 전역 변수를 선언하면 자바스크립트 코드 어디서든 불러서 쓸 수 있다. 전..
20200812 T.I.L 오늘 한 일 오늘도 역시 두 개의 미니 프로젝트를 끝냈다. 하나는 랜덤 포스트 api를 이용하여 스크롤을 내릴 때마다 랜덤 포스트들을 생성해서 DOM에 추가하여 보여주는 것이다. 이게 우리가 익히 알고 있는 인스타그램이라던가 페이스북과 같이 스크롤을 내리면 게시물이 계속 로드되어 보여주는 그 기능이다. 이렇게 하면 저장되어 있는 모든 사진과 정보들을 들고 오지 않아도 앞에 일부만 띄워서 보여주고 스크롤 한 만큼만 추가로 로드해서 보여 줄 수 있기 때문에 속도면에서도 훨씬 빠르고 데이터면에서도 훨씬 절약이 된다. 이 기능을 이용해서 나는 이제 인스타그램 클론을 도전해 볼 수 있는 능력이 생겼다! ㅎㅎㅎ 또 다른 하나는 타자 연습을 할 수 있는 프로젝트인데 처음부터 시간은 1초마다 줄어들고 그사이에 단어를 ..
20200811 T.I.L 오늘 한 일 오늘은 미니 프로젝트 두개를 완성 시켰다. 수입과 지출을 저장해서 수입, 지출, 잔고 상황을 확인할 수 있는 페이지 하나와 여러개의 음악을 내가 원하는 대로 이전버튼과 이후 버튼을 눌러서 감상할 수 있는 디자인이 예쁜 음악 플레이어 페이지를 만들었다. 나는 프로젝트를 하면 할수록 내가 부족한 점을 많이 느끼는 것 같다. 오늘도 분명 똑같이 잘 따라한거 같은데 내것만 동작이 안되고 function이 html에서 정의가 안 되었다는 오류가 계속 떴는데 알고보니 내가 전역변수 선언을 피하고자 처음부터 모든 코드를 감싸는 큰 함수 안에서 코드를 다 써내려갔는데 그 함수 안에 있는 함수를 밖에서 꺼내지 못해서 생기는 문제였다. 한참동안 씨름하다가 문제가 뭔지 찾으니 다행이고 좋다 싶으면서도 이건 좀 ..
20200810 T.I.L 오늘 한 일 오전에 행맨 게임 페이지를 만들기 시작했다. 단어를 리스트로 단순하게 몇 개 넣어놓고 그거를 랜덤으로 돌려서 단어를 맞추도록 했는데 나는 여기서 랜덤 단어 API를 이용하여 만들어보고 싶었다. 근데 자꾸 뭔가 잘 안 됐다. 분명 리스트 안에 들어있는데 이게 또 리스트에서 꺼내려하면 꺼내서 읽히지가 않는다. 이것 때문에 길게 길게 씨름하다가 결국 풀지는 못했다. 내가 여기서 알게 된 건 나는 비동기, 동기, 프로미스, 콜백에 대해 정확히 알지 못한다는 것이다. 그래서 결국 비동기 동기 async부터 뭔지 공부를 다시 하기 시작했다. 그리고 프로그래머스의 바닐라 자바스크립트 스터디(?) 강의(?)를 신청했다. 나에게 가격은 조금 부담이 있지만(이 돈이면 듣고싶은 강의를 몇 개나 들을 수 있는데 ..
html에서 자바스크립트 불러오기 - script async 와 defer의 차이점 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다. head 안에 포함되어 있을때 html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기 먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다. 이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불..
20200809 T.I.L 오늘 한 일 - 초 간단한 일요일의 한일 - 오늘은 random meal API를 이용해서 키워드로 음식을 검색하고 그에 따른 레시피를 알려주는 페이지를 만들었다. 마지막에는 랜덤 버튼을 누르면 랜덤 하게 선택된 음식의 레시피를 보여주는 이벤트까지 완성했다. fetch를 어떻게 쓰는지 이해는 했는데 promise? 이런 용어들이 나오면 뭐가뭔지 아직 모르겠다. 세세하게 알아보고 비동기와 동기에 대한 공부가 필요할 것 같다.
20200808 T.I.L 오늘 한 일 또 하나의 미니 프로젝트 인강을 듣고 사이드 메뉴와 모달 창을 만들어 띄우는 페이지를 완성했다. 이렇게 하나하나 배워나가는 게 재밌어서 개발 공부를 지겨워하지 않고 해 나가는 거 같다. 중간중간 이론적인 언어에 대한 공부를 하는 게 어렵지만 그래도 실습으로 싹 치유 힐링~ 되는 거 같다 ㅎㅎㅎ 그래도 이론공부는 꼭 해야 할 일이므로 어제 구입한 코딩 테스트 인강에서 제공해 준 기본적인 자바스크립트 문법 강의를 다 들었다. 기본이라고 해도 생각보다 꽤 길어서 다 듣는데 오래 걸렸지만 다 자주 쓰이는 것들이라 알고리즘 문제를 풀면서 많이 익숙해져야겠다. 앞으로 할 일 프로그래머스 사이트를 오늘 처음 알아서 거기서 유료 스터디가 있는 것도 처음 알았다. 26일에 시작하는 거라 한 2주 정도는 넘게..
20200807 T.I.L 오늘 한 일 오늘은 산뜻하게 환율 api로 환율 계산기를 만들어보는 미니 프로젝트와 인물 정보를 랜덤하게 만들어주는 api와 dom Array Methods 를 이용해서 사람의 재산을 곱하거나 더하거나 걸러서 보여주거나 합계를 내주는 미니 프로젝트를 인강을 따라가며 완성해보았다. 나는 주로 html과 css는 인강을 듣기 전에 샘플페이지만 보고 내가 먼저 작성해보고 후에 다른 부분을 수정해 나가고 자바스크립트 부분은 강의를 본 다음 다시 안 보고 처음부터 내가 짜보는 방법으로 공부를 해나가고 있다. 열심히 보면서 요거는 이럴 때 쓰면 좋겠다. 저런 부분에 응용 가능하겠다. 하는 생각이 들어 내가 할 프로젝트를 구상하는데도 이런 미니 프로젝트 인강이 도움이 많이 되는 거 같다. 그리고 결국 코딩테스트 인강..

티스토리툴바