본문 바로가기

프론트엔드개발자

 (16)
코드숨 리액트 2기 후기 코드숨 예찬론자가 되어 남기는 코드 숨 리액트편 2기 후기 코드숨을 신청한 계기 스쳐 지나가는 취미가 아닌 나는 개발자가 되어야겠다 라고 마음을 먹고 첫걸음부터 다시 혼자서 공부하면서 인프런과 유데미에서 좋은 강의들을 많이 들었다. 인강으로 배웠던 것으로 응용해서 연습해보면서 "사용법"을 익히는 수준까지 올라왔다. 하지만 여기까지 올라오니 내가 올바른 방향으로 올라가고 있나? 에 대한 의구심이 들었다. 의문 점이 들 때마다 물어볼 곳이 없어 혼자 하는 공부의 한계를 크게 느끼고 이대로는 안 되겠다! 어디든 스승이 있는 곳을 찾아가야겠다!라는 생각이 들어 배울 수 있는 여러 곳을 엄청 검색해서 코드숨을 찾아냈고 충동적으로 신청하게 되었다. 코드숨을 선택한 이유? 코드 리뷰와 배움에 대한 갈증 처음 코딩을 ..
html에서 자바스크립트 불러오기 - script async 와 defer의 차이점 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다. head 안에 포함되어 있을때 html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기 먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다. 이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불..
20200807 T.I.L 오늘 한 일 오늘은 산뜻하게 환율 api로 환율 계산기를 만들어보는 미니 프로젝트와 인물 정보를 랜덤하게 만들어주는 api와 dom Array Methods 를 이용해서 사람의 재산을 곱하거나 더하거나 걸러서 보여주거나 합계를 내주는 미니 프로젝트를 인강을 따라가며 완성해보았다. 나는 주로 html과 css는 인강을 듣기 전에 샘플페이지만 보고 내가 먼저 작성해보고 후에 다른 부분을 수정해 나가고 자바스크립트 부분은 강의를 본 다음 다시 안 보고 처음부터 내가 짜보는 방법으로 공부를 해나가고 있다. 열심히 보면서 요거는 이럴 때 쓰면 좋겠다. 저런 부분에 응용 가능하겠다. 하는 생각이 들어 내가 할 프로젝트를 구상하는데도 이런 미니 프로젝트 인강이 도움이 많이 되는 거 같다. 그리고 결국 코딩테스트 인강..
20200806 T.I.L 오늘 한 일 영화관 좌석 선택 페이지를 완성했다. 동영상플레이어를 커스텀해서 페이지를 만들었다. 동영상이 진행이 될때 진행 바를 움직여서 시간을 바로바로 옮기고 싶었는데 클릭을 정확하게 하지 않으면 너무 버벅대고 그래서 어떻게 해결해야하는지 고민을 많이 했는데 그부분은 해결하지 못했다. ㅜㅜㅜ 일단은 클릭의 정확도를 높이면 선택이 잘되니 추후에 넷플릭스 클론코딩을 할때 더 고민해봐야할 점인거같다. 이 커스텀 동영상 플레이어 페이지를 만들다가 내가 정말 좋아하는 넷플릭스 페이지를 클론 코딩해보고싶은 마음이 생겼다. 20개의 프로젝트가 다 끝나면 바루 실행으로 옮겨야겠다. 코딩 기초 문제 10문제 정도를 풀어보면서 앞으로 어떻게 공부해나가야 할지 고민해봤다. 파이썬으로 그래도 알고리즘 문제 몇개는 풀어봐서 ..
2020.08.05 T.I.L 오늘 한 일 오늘은 생각보다 동생을 돕는일이 길어져서 공부를 오래하지 못했다 ㅜㅜ 원래 주말에는 그래도 평일보다는 여유가 있게 공부하는 편인데 이번 주말은 버닝해야 할 것 같다. 그래도 타자연습으로 간단히 공부를 시작했다. 영화관에서 영화선택과 좌석선택을 할 수 있는 페이지를 만들었다. html, css를 완성한다음 자바스크립트로 좌석을 클릭하여 선택하고 다시 클릭하여 선택을 취소할 수 있게 하고 선택한 좌석수와 영화의 가격에 맞는 총 가격을 보여주는 것까지 완성했다. 아직 서버에 선택한 정보를 넘겨주거나 페이지를 새로 고침해도 그 기록이 그래도 남아있는기능을 추가해야한다. 앞으로 할 일 지금 하는 페이지 작업을 마무리하고 ES6공부와 ES5 복습을 해야한다. 그리고 코딩 초급문제부터 차근히 풀어봐야겠다.
20200804 T.I.L 오늘 한 일 오전에는 자바스크립트 ES6에 대한 강의를 듣기 시작했다. ES5와는 확실히 다르게 추가된 점들이 많은 거 같은데 여기서 내가 ES5 강의를 듣기를 정말 잘한 거 같다. 기본 개념이 좀 잡혀있어서 다른 점이 어떻게 다른지 파악할 수 있고 일단 ES6를 가르치는 강의는 자바스크립트 기본에 대한 내용이 없고 전체를 어우르는 강의는 본질을 너무 얕게 배우는 느낌이 들었달까... 두 개를 분리해서 차근차근 배워나가는 게 좋은 거 같다. 아직 그래도 ES5에 대한 거도 확실히 100% 다 파악하지는 못한 거 같아서 열심히 복습도 해야겠다. 복습을 안 하니까 다 까먹는 느낌이다. ㅜㅜ 또 바닐라 자바스크립트로 웹페이지 만드는 실습하는 강의도 함께 시작했다. 첫프로젝트 때는 매번 제이쿼리로 시작을 해서 ..
20200803 T.I.L 오늘 한 일 SPACE PIG 작업을 모두 마쳤다! 하루 종일 코드를 적어 내려 가고 여기저기 css를 고치며 결국 완성을 해 냈다. 아직 내가 보기에 만족스러운 부분들이 투성이이고 내 능력 밖이지만 원하는 기능들을 더 추가하고 싶은 마음이 굴뚝같아서 아쉽지만 프로젝트의 묘미는 끝을 둔다는 거에 있다. 언젠가 내가 더 발전해서 이 프로젝트를 다시 시작할 수 있겠지만 지금의 최선을 다하고 완성을 했다는 거에는 만족감을 만끽해도 된다. 그래도 약간의 아쉬운점은 일단 이미지 용량이 너무 많아서 그런가;;; 이미지가 초반에 자꾸 깨진다. 앞으로 트래픽 문제? 에 대해서도 좀 더 알아보고 싶다. 그리고 마우스 휠이 부드럽지 않아서 스크롤바를 직접 내려보는 걸로 두 번째 동영상을 찍어보았다. 앞으로 할 일 알고리즘..
[반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. addEventListener( ) 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 일반적으로 Element, Documnet, Window 지만 이벤트를 지원하는 모든 객체를 대상으로 할 수 있다. target.addEventListener(type, listener); type: 반응할 이벤트 유형을 나타낸다. (대소문자 구분) listener: 여기에는 함수가 들어간다 안에 함수를 바로 작성해주어도 되고 함수 이름을 넣어주고 함수는 따로 작성해주어도 된다 window.addEventListener('click', function () { new Character(); }); . function clic..

티스토리툴바