본문 바로가기

Life

 (242)
20200817 T.I.L 오늘 한 일 대망의 20개의 미니프로젝트를 오늘 벽돌깨기 프로젝트를 완성하면서 끝 마쳤다. 강의들을 듣고 보고 다시 코딩해보면서 정말 많은 지식들을 얻어가는 것 같아 뿌듯하고 기뻤다. 또 반면에 이제는 무얼 해야하나 하는 생각에 배운것들을 열심히 써먹어보자! 라는 마음으로 홈페이지들을 뒤지기 시작했다. 그러다가 자라 홈페이지가 굉장히 역동적인것 보고 이거다! 이거 어떻게든 해봐야겠다! 라는 마음을 먹어서 열심히 소스를 찾기 시작했다. 영상들이 꽤 많은데 대부분 주소들을 보니 m3u8(? 정확한지 기억은 안난다.) 이런 파일로 엉뚱하게 다운만 받아져서 이게 뭔가하고 한참 시간을 보내다 무료로 좋은 동영상 소스들을 제공해주는 사이트들을 알게되었다. 그래서 사실 자라 홈페이지 포기하려다가 다시 도전! 해보기로..
20200816 T.I.L 오늘 한 일 오늘은 캔버스를 이용해서 벽돌깨기 게임 미니프로젝트를 만들었다. 아직 완성하지는 못했지만 패들을 좌우로 움직이는 것까지는 만들어서 이제 공 튀기는 것과 점수를 먹이는 것을 완성하면 끝난다. 주말이라 약속도 가고 조금 여유롭게 했더니 하나를 다 완성하지 못하고 끝이 났다. ㅜㅜ 늦잠을 자지 말고 조금 부지런 할 걸 하는 후회가 조금 밀려오지만 그래도 하루도 빠지지 않고 꾸준히 개발공부를 해나가는 것에 의의를 두고있다. 내일부터는 다시 열심히 빡공! 해봐야겠다!
20200815 T.I.L 오늘 한 일 오늘도 두 개의 프로젝트를 완성했다. 하나는 바로 순위로 리스트업 되어있는 리스트에서 마우스로 드래그해서 위치를 변경하고 그 위치가 맞는 위치인지 확인하는 페이지이다. 원래 강의에서는 부자 순위로 10순위까지 리스트를 미리 작성해서 자바스크립트에 넣었는데 나는 좀 더 유동적인 것을 원했다. 그래서 한국 영화 박스오피스 API를 검색해서 찾아냈고 그것을 이용해서 순위표를 만들었다. 그리고 마지막 부분에 내가 드래그해서 순위대로 맞게 리스트업 했는지 아닌지 확인하는 과정에서는 내 방식대로 강의의 도움 하나도 없이 코딩해보고 성공해서 시간이 조금 오래 걸렸지만 정말 뿌듯했다. 이렇게 실력이 늘어가는 것인가 보다! 두번째는 내가 마이크에 음성으로 숫자를 말하면 인식하고 랜덤 한 숫자를 맞추는 게임 ..
20200814 T.I.L 오늘 한 일 세가지의 미니프로젝트를 완성했다. 첫번째는 브라우저에서 제공하는 api를 통해 글자와 이미지가 있는 카드를 클릭하면 내가 설정한 나라의 발음으로 그 글자를 읽어주는 페이지였다. 여기서 나라도 내가 선택 할 수 있고 텍스트를 직접 쳐서 원하는 텍스트를 들을 수도 있다. 두번째는 가수나 노래이름을 입력하면 해당하는 가수의 노래들이나 아니면 같은 이름의 노래들을 리스트업해서 페이지에 보여주고 그중하나를 선택하면 해당하는 노래의 가사를 보여주는 페이지였다. 마지막은 새해를 향해 오늘로 부터 카운트다운되는 시간들을 타이머처럼 보여주는 페이지였다. 오늘은 무언가를 많이 하긴 한 것 같은데 뭔가 사실 확실히 내것으로 만들었다. 이런 느낌은 없어서 아쉬웠다. 중간중간 오류가 나는데 왜 나는지 모르겠고 가이..
20200813 T.I.L 오늘 한 일 오늘도 두 개의 프로젝트를 완성했다. 하나는 메모리 카드 페이지로 내가 질문과 답을 인풋 박스에 적어서 추가하면 로컬 스토리지에 저장하고 화면에 카드를 띄워준다 앞면에는 문제가 뒷면에는 답이 적혀 있어서 카드를 누르면 돌려서 반대쪽면을 보여준다. 또 여러 개도 저 잘할 수 있어서 슬라이더로 앞에 것과 뒤에 것을 선택해서 보여준다. 카드 돌리기는 저번에 인터렉티브 웹 인강에서 배워서 수월하게 금방 했는데 슬라이더를 이번에 처음 배워봐서 신기하고 재미있었다. 슬라이더 하는 부분에서 좀 많이 버벅대서 생각보다 오래 걸렸던 프로젝트였다. 또 다음 프로젝트는 거의 css가 주를 이루었던 륄렉서(숨쉬기 운동을 도와주는 페이지)를 만들었다. 어차피 css가 주라 어렵지는 않았는데 만들면서 오오 이거 실생..
20200812 T.I.L 오늘 한 일 오늘도 역시 두 개의 미니 프로젝트를 끝냈다. 하나는 랜덤 포스트 api를 이용하여 스크롤을 내릴 때마다 랜덤 포스트들을 생성해서 DOM에 추가하여 보여주는 것이다. 이게 우리가 익히 알고 있는 인스타그램이라던가 페이스북과 같이 스크롤을 내리면 게시물이 계속 로드되어 보여주는 그 기능이다. 이렇게 하면 저장되어 있는 모든 사진과 정보들을 들고 오지 않아도 앞에 일부만 띄워서 보여주고 스크롤 한 만큼만 추가로 로드해서 보여 줄 수 있기 때문에 속도면에서도 훨씬 빠르고 데이터면에서도 훨씬 절약이 된다. 이 기능을 이용해서 나는 이제 인스타그램 클론을 도전해 볼 수 있는 능력이 생겼다! ㅎㅎㅎ 또 다른 하나는 타자 연습을 할 수 있는 프로젝트인데 처음부터 시간은 1초마다 줄어들고 그사이에 단어를 ..
20200811 T.I.L 오늘 한 일 오늘은 미니 프로젝트 두개를 완성 시켰다. 수입과 지출을 저장해서 수입, 지출, 잔고 상황을 확인할 수 있는 페이지 하나와 여러개의 음악을 내가 원하는 대로 이전버튼과 이후 버튼을 눌러서 감상할 수 있는 디자인이 예쁜 음악 플레이어 페이지를 만들었다. 나는 프로젝트를 하면 할수록 내가 부족한 점을 많이 느끼는 것 같다. 오늘도 분명 똑같이 잘 따라한거 같은데 내것만 동작이 안되고 function이 html에서 정의가 안 되었다는 오류가 계속 떴는데 알고보니 내가 전역변수 선언을 피하고자 처음부터 모든 코드를 감싸는 큰 함수 안에서 코드를 다 써내려갔는데 그 함수 안에 있는 함수를 밖에서 꺼내지 못해서 생기는 문제였다. 한참동안 씨름하다가 문제가 뭔지 찾으니 다행이고 좋다 싶으면서도 이건 좀 ..
20200810 T.I.L 오늘 한 일 오전에 행맨 게임 페이지를 만들기 시작했다. 단어를 리스트로 단순하게 몇 개 넣어놓고 그거를 랜덤으로 돌려서 단어를 맞추도록 했는데 나는 여기서 랜덤 단어 API를 이용하여 만들어보고 싶었다. 근데 자꾸 뭔가 잘 안 됐다. 분명 리스트 안에 들어있는데 이게 또 리스트에서 꺼내려하면 꺼내서 읽히지가 않는다. 이것 때문에 길게 길게 씨름하다가 결국 풀지는 못했다. 내가 여기서 알게 된 건 나는 비동기, 동기, 프로미스, 콜백에 대해 정확히 알지 못한다는 것이다. 그래서 결국 비동기 동기 async부터 뭔지 공부를 다시 하기 시작했다. 그리고 프로그래머스의 바닐라 자바스크립트 스터디(?) 강의(?)를 신청했다. 나에게 가격은 조금 부담이 있지만(이 돈이면 듣고싶은 강의를 몇 개나 들을 수 있는데 ..

티스토리툴바