코딩

노마드코더 캐럿마켓 클론코딩 예약구매 완료!

프로그래밍을 처음 배우기 시작하면서부터 지금까지 쭉 함께하고 있는 노마드코더 Learning by doing을 통해 프로그래밍을 배울 수 있는 가장 좋은 사이트라고 생각한다. 새로운 기술을 배우고 -> 이 기술이 왜 필요한지, 왜 탄생했는지를 찾아보고 -> 혼자 여러 방면으로 연습해보는 일련의 과정이 나에게 참 잘 맞았다. 복습해야할 강의도 많고 수료해야할 챌린지도 많고, 이론에 대한 공부할 것도 너무 많지만, 중압감은 하나도 없다. 커리큘럼을 재밌게 구성한 니꼬쌤 덕이 아닐까!! 요 니꼬쌤이 이번에 15시간 이상 분량의 NextJS 강의를 만들었다 처음 바닐라 자바스크립트에 입문하며 후에 편리한(?) 리액트 프레임워크를 배우게 될 생각에 기대가 됐었는데, 마찬가지로 리액트를 처음 배우기 시작할때도 리액..

노마드코더 유튜브 클론 보충

2021.08.08 user athentication 파트 공부 중 부족한 부분 URLsearchParams() html 헤더, 바디, 그리고 github api의 어센티케이션 flow ES6 화살표함수 / await async(promise)와 then의 명확한 차이 2021.8.10 {...} 문법 비구조화할당/ 구조분해 할당 표현식 [a1, a2, a3, a4, ...restOfA] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(a1) // 1 console.log(a2) // 2 console.log(a3) // 3 console.log(restOfA) // [4, 5, 6, 7, 8, 9, 10] 전개 연산자 이후 변수가 있을경우 혹은 좌항 우항의 속성이 다를..

ternary operation, absolute/relative url

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 조건 ? 참일경우실행 : 거짓일경우실행 conditon 조건이 참이면 ? 뒤를 실행. false면 : 뒤를 실행. 다중 삼항도 가능. - href="경로" '경로' 가 /로 시작하면 절대경로 else: 상대경로. 중요한건, 경로를 더하는게 아님. 마지막 경로를 바꾼다. 즉 videos/13 페이지에서 href="/edit" 링크를 누른다면 videos/13/edit 으로 가는게 아니라 videos/edit으로 간다! 만약 videos/13/edit 으로 가고 싶다면, relative url을 이용해 href=`${video.id}/edit..

셀레니움을 활용한 스크래퍼 만든 소회

노마드코더(nomadcoder.co)에서 니꼬쌤에게 배운 파이썬으로 혼자 로켓펀치 스크래퍼를 만들어봤다. 첨엔 강의에서 배운대로 따라하면 금방 만들겠지(?)라는 생각으로 재밌겠다고 시작했다. 허나 왠걸, 로켓펀치는 자바스크립트(를 사용한 것 같다)를 통해 브라우저에서 페이지를 로딩하는 것 형식이라 indeed나 stackoverflow와 다르게 requests만으로 html소스를 가져올 수가 없었다. pagination에서 마지막 페이지를 가져오는 것조차 아예 긁어와지지 않는다면 처음부터 다른 방법을 찾았을텐데 난 내가 css selector를 잘못 선택한 줄 알았다. 근데 오히려 지금 생각해보면, 어떨때는 html 태그가 가져와지는 것 자체가 css selector 문제는 아니란거네. 암튼, 그래서 찾..

노마드코더 유튜브 클론 수강 시작!

드디어 시작! 파이썬 스크래퍼 강좌에서 생각보다 지체됐다. 강좌 속 indeed 사이트의 태그가 많이 바뀌어 이것저것 강좌와는 다른 방식으로 스크래핑 해보느라 시간이 걸리기도 했고 파이썬 챌린지에서 또 드랍해버려 좌절(?) 하고 있기도 했다. 그러나 또 열심히 달릴 시간이다. 다음주면 세번째 파이썬 챌린지 시작 + 2주뒤면 6주에 걸친 유튜브 클론 챌린지 시작이다. 매번 챌린지에 도전할때마다 느끼는거지만, 강좌로 완성되는건 게임으로 치면 튜토리얼 수준이고 반드시 챌린지 과정을 속에서 에러를 해결해나가야 실력도 훨씬 느는것같다. 언젠가 뱃지를 다 모을때까지. 실력도 더 늘어있겠지? Take small steps every day and eventually you'll get there. 틀림없이!

노마드코더 바닐라JS 챌린지 수료!

사실 챌린지가 종료된지는 일주일 넘게 흘렀지만 채점에 시간이 걸리기에 어제 막 수료증을 받았다! 요렇게 사이트 내에서 뱃지들이 쌓여가는게 보고 있음 기분이 좋다. 자격증도 아니고 공신력도 없지만, 독학으로 혼자 공부해나가는 입장에선 그래도 내가 무언가 쌓아올려가고 있구나라는 생각도 들고 도움이 된다. 물론 챌린지를 수료했다고 대단한걸 해낸건 아니다. 이제 그럭저럭 구글링 해나가면서 기초적인걸 만들줄은 아는 단계가 아닐까? 그리고 이게 독학에선 가장 필요한 시발점이라 생각하고. 사실 이번 졸업작품(구글 모멘텀 앱 클론)을 만들면서 애니메이션도 넣고 반응형(?)을 몇 개 넣어보고 싶었는데 언제나처럼 욕심 >>> 능력 이기에 시간이 쫓겨 제출하고 다른 공부를 하기에 급급하다. 어쩌다보니 코딩 공부를 병렬적으로..

[html] form의 중요한 2가지 attribute: action, method

*id와 class중 편한것은 어떤것일지 생각해보자. 주로 classa를 많이 쓰긴한다! id를 사용할 경우 상대적으로 더 많은 인자를 써야하는듯? - CSS 파일에서 주석처리는 /* */로 감싸주면 된다. - styles.css 파일에는 font-family, background-color와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다. 이는 하나의 방식이고, 자신만의 편한 방식을 택하면 된다. - form은 중요한 2가지 속성(attribute)을 가지고 있다. 하나는 action이고, 다른 하나는 method이다. - action은 어떤 페이지로 data를 보낼건지 지정할 수 있다. - action에 적어 놓은 URL에 해당하는 파일이 반드시 존재해야한다. - method는 2가지 방식 중..

[파이썬] 노마드코더 파이썬 챌린지 3일만에 실패ㅠ.ㅠ

처음 코딩 공부를 시작하기로 마음먹었을때 추천 받았던 언어는 파이썬이었다. 초보자가 배우기도 좋고 이후 활용성도 높기 때문? 프로그래머스 기초 강좌에서 무료로 배우기 시작했었다 그리고 반정도 수강한 시점부터 노마드코더에서 html, css를 배우기 위한 클론코딩 강좌를 듣기 시작했다. 내가 쓴 코드가 에러가 나면 원인을 찾기위해 골머리를 싸는게 답답하긴 해도, 어렸을때부터 키보드 두드리는 걸 좋아해서 과정 자체가 즐거웠다. 과정이 즐거우니 의욕도 불타올랐는데, 이 열정과 함께 노마드코더에서 진행하는 2주 챌린지 과정을 두 개 등록하고 기다리고 있었다. BUT 의욕과 달리 파이썬 챌린지 내용이 생각보다 쉽지가 않다. 평소 검색을 잘한다고 자부하는 나였는데 막히는 부분에서 아무리 구글에 서치를 해도 원하는 ..

[CSS] status-bar를 중앙 정렬해 위치시키는 hack! // 드디어 시작된 클론코딩!

css hack (justify-content: space-between 를 대신해 사용가능!) - 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다. - 1 상위 박스 : justify-content: center; -중앙으로 몰림 -> 가운데 시계가 한쪽으로 쏠리는 문제가 발생!! - 2 내부 박스 범위 : width: 33%; -왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨 - 3 중앙에 위치할 박스 : display: flex; justify-content: center; -중앙에 위치할 박스만 중앙에 위치함 - 4 오른쪽에 정렬할 박스 : *display*: flex; *justify-content*: flex-end; *align-items*: center; -오른..

[CSS] Flexbox, Media Queries recap

display에서 inline-blcck의 활용상 문제로 Flexbox를 고안했다. 자유롭게 box를 둘 수 있다. flexbox는 이름자체가 flexibe이다 2차원 레이아웃에서 잘 작동한다. 1) 부모 엘리먼트에만 명시해야한다. 나중에 이해하게 될것 부모 엘리먼트에만 말을 한다 3개의 dvi를 가리키는 자식을 움직이고 싶으면 flex를 할 필요없다 div의 부모에게 말하면된다 즉 body! body가 의 부모다 부모에게만 명시하면된다 부모 엘리먼트를 flex container로 만들어야한다 즉 body의 display가 flex를 주면된다 이제 body가 children을 제어할 수 있다 ※ Rule no1. flex는 부모의 display 속성에 해야한다 절대 자식에하는것이 아니다! display ..