본문 바로가기

Life/TIL

 (239)
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부터 뭔지 공부를 다시 하기 시작했다. 그리고 프로그래머스의 바닐라 자바스크립트 스터디(?) 강의(?)를 신청했다. 나에게 가격은 조금 부담이 있지만(이 돈이면 듣고싶은 강의를 몇 개나 들을 수 있는데 ..
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는 인강을 듣기 전에 샘플페이지만 보고 내가 먼저 작성해보고 후에 다른 부분을 수정해 나가고 자바스크립트 부분은 강의를 본 다음 다시 안 보고 처음부터 내가 짜보는 방법으로 공부를 해나가고 있다. 열심히 보면서 요거는 이럴 때 쓰면 좋겠다. 저런 부분에 응용 가능하겠다. 하는 생각이 들어 내가 할 프로젝트를 구상하는데도 이런 미니 프로젝트 인강이 도움이 많이 되는 거 같다. 그리고 결국 코딩테스트 인강..

티스토리툴바