Front-end Developer

2월 23일 (화) 오늘 한 일 HTML, CSS, JavaScript를 이용해서 캔버스를 만들어 보았다. CSS에서 flex와 box-shadow에 대해서 공부하고 연습했다. JavaScript에서 canvas 만들때 필요한 method를 찾아보고 연습해보았다. 알고리즘 정렬과 탐색에 대해서 배운것을 블로그에 기록했다. 알고리즘 : 정렬(Sort), 탐색(Search) 느낀점 아직 많이 배운건 아니지만 JavaScript로 할 수 있는게 많구나라는 생각이 들었다. method를 이해하고 그것을 함수안에서 어떻게 사용할지도 생각해보고 연습해볼 필요성을 느꼈다. 알고리즘은 어렵지만 문제를 이해하고 생각하는 과정이 생각보다 재미있는것같다. 아직 많이 부족하기에 더 열심히 해야겠다. 그리고 열심히하는것도 중요..

개념 정렬(Sort) 두개 이상의 원소로 이루어진 배열을 정해진 기준에 따라서 다시 나열하는 일이다. 파이썬에서 정렬을 할 때 대표적으로 두가지 방법이 있다. sorted() : 원래있는 리스트를 가지고 정렬된 새로운 리스트를 만드는 함수이다. .sort() : 해당 리스트를 정렬시키는 method이다. L = [4,2,6,63,5,1] L2 = sorted(L) #기존 리스트를 가지고 새로운 정렬된 리스트를 만든다. L.sort() #기존 리스트를 정렬시킨다. 새로운 리스트 X L2 = sorted(L, reverse=True) L.sort(reverse=True) 정렬의 순서를 반대로 할 때 위에 코드처럼 reverse = True 값을 주면 된다. 문자열 리스트 경우 알파벳 순서로 정렬한다. 대문자..

script async & defer JavaScript를 사용할 때 코드의 양이 별로 없으면 상관 없지만 그 양이 많을 때 Javascript 파일을 어떻게 HTML파일에 붙여야 효과적으로 코드가 실행이 될지 고민해야한다. async 와 defer은 boolean 타입이여서 return처럼 그대로 사용하면 프로그램이 인식한다. 고려해야될 사항은 총 3가지 인데 Script가 다운받는데 걸리는 시간, Script가 실행되는데 걸리는 시간, Script가 실행되기 전에 필요한 HTML이 파싱이 되었는지이다. 이 세가지를 고려하면서 어떤 코드가 제일 효율적일지 생각해봐야 한다. async 또는 defer 이 들어가지 않은것이 제일 비효율적일 것이다. async, defer 중에서 어떤것이 나을지 봐야한다. ..

2월 21일 (일) 오늘 한 일 HTML & CSS로 Sign up 페이지를 만들어 봤다. HTML에서 input type, input required, input name 그리고 label for에 대해서 공부하고 연습했다. CSS에서 grid property들과 :hover 그리고 media query에 대해서 공부하고 연습했다. 알고리즘 선형배열에 대해서 배운것을 블로그에 기록했다. 알고리즘 : 선형 배열(Linear Arrays) 느낀점 프로젝트를 하면서 내가 배우게 되는 method에 대해서 필요한것만 배우지말고 그거에 대해서 좀더 깊이 이해하고 나중에 그 method를 사용할 때 자유롭게 적용할 수 있어야겠다고 생각했습니다.

개념 선형 배열은 데이터들이 일 직선으로 나열되어있는 형태를 말합니다. Python에서는 여러가지 데이터들을 줄지어서 나열시킬 수 있는 리스트(list)가 있습니다. 알고리즘을 할 때 리스트에서 사용할 수 있는 연산들이 있습니다. 리스트 길이와 관계없이 빠르게 실행되는 연산 그리고 리스트의 길이에 비례해서 시간이 걸리는 연산, 크게 이 두가지 종류의 연산들이 있습니다. 그리고 마지막으로 list index 개념에대해서 이야기해보겠습니다. 리스트 길이에 관계없이 실행 속도가 빠른 연산 .append() : 데이터를 리스트에 덧붙일 때 사용됩니다. 추가된 데이터는 리스트 맨 뒤에 자리에하게 됩니다. .pop(): 리스트 맨 끝에 있는 데이터를 밖으로 빼올 때 사용할 수 있습니다. 리스트 길이에 비례해서 실행..

2월 20일 (토) 오늘 한 일 HTML & CSS로 Login_Page를 만들어 봤다. HTML에서 태그와 태그를 이해하고 연습해보았다. CSS에서 grid, Justify-items, align-items를 공부하고 연습해봤다. 알고리즘 : 선형배열에 대해서 공부했다. 리스트의 index값이 어떻게 나오는지 공부했다. 리스트 길이에 따라서 어떤 연산들이 영향을 받는지 안받는지 공부했다. 느낀점 주말에도 열심히 공부하는 스터디 그룹원들을 보면서 나도 열심히해야겠다는 생각이 들었고, 개념들을 따로 공부하기 보다는 한가지 프로젝트를 하는게 더 많이 배울 수 있다는 생각을 했다. 알고리즘을 처음 공부해봤는데 간단한것도 생각이 필요함을 느꼈고 매일매일 1시간씩 개념 공부하고 문제를 풀어야겠다.

HTML & CSS를 더 공부할 겸 로그인 페이지를 만들어 봤습니다. 생각보다 간단해 보이는데도 잘 구현 되지 않아서 오래걸렸지만 중요한 개념들을 배울 수 있는 시간이였습니다. 새롭게 배운것들을 정리해보겠습니다. HTML Login 잘못된 아이디 비밀번호 입니다. 태그는 그 문서에 중요한 content를 특정시키기 위해 사용하는 태그이다. 다시말해서 태그처럼 content를 한 그룹으로 묶으는데, 그 content가 해당 페이지에서 제일 중심이 되는 내용이여야 한다. 태그는 그 페이지에 하나만 있어야하고 , , , , 태그들 child element로 들어가면 안된다. 처음에 login button을 태그를 이용해서 만들려고 했었는데 겉으로는 같게 만들 수 있겠지만 로그인 버튼의 기능을 생각했을 때 모든..

2월 19일 (금) 오늘 한 일 vanilla_Javascript와 CSS로 momentum 프로젝트에 기능을 추가했다. mouseover과 mouseout event를 사용해서 버튼을 원할 때만 보이게 만들었다. 다른 Javascript파일에 있어도 함수이름을 같게하면 오류를 만들 수 있음을 알게됬다. input (타입:checkbox)를 사용해서 한 일들을 체크할 수 있게 설정했다. media_query를 사용해서 핸드폰 사이즈에서는 글씨 크기가 작아지게 설정했다. 느낀점 모멘텀 기능을 추가하면서 생각보다 시간이 너무 오래걸렸고 계속 기능이 구현되지않아서 고민하고 또 고민했다. 그 과정에서 오류을 디버깅하는 방법도 배웠고 내가 무엇이 부족한지도 알 수 있었다. 좀더 하루를 알차게 보내기 위해서 계획 ..