Algoroot's space

쇼핑 리스트를 만들어보았다. 구현하고자 하는 것 은 아래와 같았다. 1. input에 쇼핑 item 넣고 Enter 혹은 아래 버튼을 누르면 쇼핑 목록에 추가된다. 2. input에 구매할 item 개수를 넣어 리스트에 개수도 추가된다. 3.아이콘을 이용해서 item을 삭제할 수 있다. 4. 체크 아이콘을 클릭하면 완료된 리스트로 보인다. ( 글씨에 줄 긋고 연하게, 아이템 박스 배경 없애기, 아이콘 배경 없애기, 아이콘 컬러 어둡게 바꾸기) 5. 삭제한 것을 반영하지 않은 items 개수와, check 아이콘을 클릭하지 않은 남은 items 개수를 상단에 표시한다. 추가로 input에 커서를 자동으로 넣고 스크롤도 items가 들어있는 div안에서 움직이도록 설정해줬다. 구현하고자 했던 것들 중 두 개..

거의 다 썼는데 지워져서 다시 쓴다... 왜 저장이 안 되었을까요. 어젯밤 Array, for, forEach 관련해 세 문제를 풀었다. 1, 2 번은 결국에는 틀렸어도 근접은 했고, 왜 틀렸는지 알았을 때 깨달음이 한 번에 왔는데, 3번은 이해하는데 시간이 조금 걸렸고, 특히 forEach를 이용한 것은 답지도없고 너무 어려워서 늦은 밤까지 이해하려고 애를 썼다. 문법책을 보니 orEach를 이해하려면 콜백함수의 개념까지 이해해야 한다고 한다. 그래서 더 어려웠지만, 한 시간 넘게 그것만 바라보니까 적어도 이 문제를 완벽히 이해하는데는 성공했다. 오늘은 세 문제를 15분만에 풀고 기분 좋은 아침을 맞이하는 중이다. Q1 Array 안에서 철수를 찾아라. ( find, indexOf 이런 함수들 사용 금..

애플 코딩님의 강의를 듣고 있는데 이 강사님은 jQuery로 작성법을 알려주실 때가 많다. 순수 Javascript를 알고 싶은 나는 강사님이 jQuery로 작성하시면 강의를 잠시 멈추고 Javascript 작성법으로 최대한 찾아 적어놓는다. 덕분에 강의듣는 시간은 느려지긴 했지만, 이 과정이 꼭 필요하다고 생각했다. 재밌기도 하고.. 이번에는 HTML를 자바스크립트에서 동적으로 생성하는 것을 배웠다. 만약 아래의 HTML 코드에서 주석 처리된 부분을 순수 자바스크립트를 사용해 추가시키고 싶다면 어떻게 해야 할까? 상품선택 모자 셔츠 Select the size 1. jQuery 작성법 강사님이 알려주신 jQuery로 작성하면 간단하다. template라는 변수를 만들어 넣을 html 코드를 넣고 app..

저번 글에서도 몇 번 언급했듯이 지지난주에는 자바스크립트가 나를 조금 힘들게 했다. 문법을 이해하려 해도 잘 안 되었던 언어.. 아무래도 프로그래밍적인 개념이 부족하니 처음 다가가는 언어라 힘들었던 것 같다. 지난번 글에서 알고리즘을 먼저 파보겠다고 했지만, 막상 해보니까 그 속에서 새로 알 수 있는 개념이나, 공부했던 개념이 이렇게 쓰이는구나 싶어 좋기는한데, 정말 한 문제도 답안을 보지 않으면 못 풀겠어서 뭔가 이른 느낌이 들었다. 또 알고리즘을 풀면서 병행할 강의가 필요하다는 생각이 들었다. 항상 뭔가를 결정할 때 굉장히 신중한 편이라 이것 저것 많이 찾아보는 편인데 그래서 강의를 고를 때도 '이왕이면 더 좋은 좋은 강사님과 좋은 코드를 쓰는분이 좋겠지?'라는 생각으로 유투브의 여러 강의를 보았다...

369게임을 응용해서. 1. 3의 배수에서 '박수' 아니면 '통과' // 1부터 369 사이의 자연수에서 3으로 나누어 0으로 떨어지면 '박수' 아니면 '통과' 라고 출력한다. function 삼육구게임(n) { if ( n % 3 == 0) { console.log('박수'); } else { console.log('통과'); } } 1. 3의 배수에서 '박수', 9의 배수에서 '박수 박수' 아니면 '통과' // 9로 나누어 0으로 되면 박수두번치고 3으로 나누어 0으로되면 박수를 한번친다. 둘다해당이 안되면 통과 function 삼육구게임(n) { if ( n % 9 == 0) { console.log('박수x2'); } else if (n % 3 == 0) { console.log('박수'); } ..

Javascript.. 정말 너무 어렵다.. 엘리님 강의 듣다가 너무 어려워서 어떻게 공부해야 할지 또 찾아봤다. 이걸로 참 시간을 많이 보냈다. 누군가가 "이렇게 공부해!"라고 말해도 또 그게 정말 효율적인지 찾아보는 타입이라하나를 못정하고 이해가 안 되면 또 공부방법이 잘못된 건 아닌지 찾아봤던 것 같다. 그리고 다시 생활코딩강의를 들었다.진작에 이걸 먼저 들었으면 좋았겠지만,엘리님 이전 강의들도 좋았어서 이번에도 나랑 잘 맞을 줄 알았다.다 들은 지금은 Javascript는 생활코딩 강의가 훨씬 접근하기 쉬웠다는 생각이 든다. 또 마침 부스트캠프에사 제공하는 강의가 내가 보고 있는 생활코딩 강의이기도 했다.(https://www.boostcourse.org/cs124/notices/53973)다 ..

오늘도 Ellie님 강의를 보며 만들었다. 아예 처음부터 시도해보기는 어려워서 영상을 한 번보고난 후 코드를 쳤다. 한 두 번정도 쳤더니 술술쳐지는 수준이었다. 하지만 오늘은 두 가지의 issue가 있어서 해결하는데 또 시간이 걸렸다. 1. css에서 class가 아닌 태그를 .으로 명명했다. body 와 a 태그에서 전체적으로 수정할 것이 있어서 명령을 했는데 반영이 안되었다. 한참 뭐가 잘못 됬는지 보면서도 못찾다가..한 30분정도 후에 찾아냈다. .body { } .a { } 이런식으로 쳤다. 이 것도 처음에는 이상한줄도 모르고있다가 보다보니까 '어? body와 anchor tag는 class 가 아닌데..?'라는 생각이 들고 깨닫게 되었다. 2. JS에서 event 오류 사실 JS는 아직 배우지도..

(220104_화) 유투버 엘리님이 알려주신 사이트를 참고해 공부했는데 확실히 게임을 하면서 하니 이해도 잘되고 재밌었다. 이제 막 공부하시는 분들께 강력 추천한다. https://flexboxfroggy.com/#en Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 총 24문제인데 헷갈리거나 모르는 경우에는 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 이곳에서 참고하며 풀어보는 게 좋을 것 같다. 나의 경우에는 24번 빼고는 다 풀었는데 24번에서 놓쳤던 부분은 아래와 같다. 조금 고민하다가 답을 참고하였다. 재밌기는 하지만 나는 배울게 너무 많기 때문에 이런 것에 괜한 오기를 가..