본문 바로가기

Life

 (242)
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는 인강을 듣기 전에 샘플페이지만 보고 내가 먼저 작성해보고 후에 다른 부분을 수정해 나가고 자바스크립트 부분은 강의를 본 다음 다시 안 보고 처음부터 내가 짜보는 방법으로 공부를 해나가고 있다. 열심히 보면서 요거는 이럴 때 쓰면 좋겠다. 저런 부분에 응용 가능하겠다. 하는 생각이 들어 내가 할 프로젝트를 구상하는데도 이런 미니 프로젝트 인강이 도움이 많이 되는 거 같다. 그리고 결국 코딩테스트 인강..
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를 고치며 결국 완성을 해 냈다. 아직 내가 보기에 만족스러운 부분들이 투성이이고 내 능력 밖이지만 원하는 기능들을 더 추가하고 싶은 마음이 굴뚝같아서 아쉽지만 프로젝트의 묘미는 끝을 둔다는 거에 있다. 언젠가 내가 더 발전해서 이 프로젝트를 다시 시작할 수 있겠지만 지금의 최선을 다하고 완성을 했다는 거에는 만족감을 만끽해도 된다. 그래도 약간의 아쉬운점은 일단 이미지 용량이 너무 많아서 그런가;;; 이미지가 초반에 자꾸 깨진다. 앞으로 트래픽 문제? 에 대해서도 좀 더 알아보고 싶다. 그리고 마우스 휠이 부드럽지 않아서 스크롤바를 직접 내려보는 걸로 두 번째 동영상을 찍어보았다. 앞으로 할 일 알고리즘..
20200802 T.I.L 오늘 한일 마우스 이벤트를 이용해 마우스를 움직였을 때 우주공간이 3d 관점에서 보일 수 있도록 만들었다. 캐릭터의 팔다리 부분들과 몸통, 꼬리까지 css로 하나의 캐릭터로 조립을 완성했다. 중간에 우주 되지의 손이 검은색이라 우주공간에서 안 보이는 부분도 포토샵으로 색을 수정해서 보이도록 했다. 조립한 각각의 팔다리 꼬리들의 에니메이션들을 완성했다. 꼬리는 항상 흔들거리게, 팔다리는 class 이름이 swim 일 경우에 흔들거리게 만들었고 data-direction 이 forward, backward, left, right일 때 포지션에 맞게 캐릭터를 회전시켜 정말 수영하는 것처럼 보이게 만들었다. 대강의 css들은 모두 완성한거같다. 내일 할 일 오늘 자바스크립트 코드를 많이 작성하지 못해서 못한 블..

티스토리툴바