분류 전체보기 (12) 썸네일형 리스트형 리액트 Hook 1. 리액트 Hook이란? 드림 코딩 리액트 강의를 들으면서 컴포넌트로 쓸 수 있는 두 가지 방식을 배웠는데 첫 번째는 class 두 번째는 함수형이다. 그중에서 리액트 Hook은 class의 this개념이 사라지기 때문에 코드가 더 간결해질 뿐더러 가독성도 더 좋아서 class보단 많이 쓰이기 떄문에 리액트 Hook에 대해서 남기기로 했으며 아래는 리액트 Hook이 나온 배경이다. "React Hooks은 리액트의 새로운 기능으로 React 16.8 버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, rend.. 테오의 스프린트 그 이후 이번 테오의 스프린트 때 만났던 사람들과 강남에서 오프라인 만남을 가지고 남기는 개인적인 회고글이다. 회고 1. 사람들을 만나러 서울까지 간 이유 정말 간단하다. 내가 울산에 살지만 서울 강남까지 가서 사람들과 이렇게 만나게 된 이유는 이번에 같이 프로젝트했던 Vaegopa팀원들과 청년을 구해줘 팀원들은 어떤 사람들인가, 정말 궁금했고 평소에 사람 만나는 것을 정말 좋아했기 때문이다. 그러던 중 마침 '퉁이리'가 이번에 테오도 함께 오프라인 만남에 참여하게 됐다고 카톡방에 고지를 했고 이 때문에 거의 모든 팀원들이 참여하게 됐는데 사람들과 테오 모두 모이는 이 만남의 자리에 이번에 내가 빠진다면 훗날 후회할 것이 분명했기 때문에 바로 ktx를 타고 상경했다. 사실 이렇게 출발하기전에 친구에게도 물어보고 .. Javascript Map, foreach, filter란 ? 1. 자바스크립트를 공부하게 된 배경 길고 길었던 스프린트를 마무리하고 내가 뭘 공부해야할까 라는 생각이 들었고 그 답은 자바스크립트, 리액트 공부였다. 물론 타입스크립트를 사용해 이번 결과물을 만들었지만 " 타입 지정 오류들을 겪으면서 이렇게 오류들을 보여주니까 런타임에서는 에러가 적어지는구나 라고 생각했고, 특히 협업 과정에서는 타입스크립트로 작성된 코드가 그 코드의 의도가 좀 더 명확히 보인다" 라는 점을 조금은 느꼈지만 완벽히 이해하진 못했다. 아직 저런 과정을 겪어본적도 크개 없을뿐더러 기술도 부족하기 떄문이다. 고로 이번에 리액트와 자바스크립트를 공부하기로 했고 드림코딩 리액트과정 강의를 수강했다. 2. 제목의 저3개가 이번에 글의 주제인 이유 운이 좋게도 개발자인 친구가 있는데 그 친구랑 커.. 테오의 스프린트를 마치고나서 근 2주간 테오의 스프린트에 집중하느라 그간 공부하던 것도 잠시 멈추고 블로그 작성도 못했던 것 같다. 원래 테오의 스프린트는 한 번의 스프린트로 1주 만에 끝내는 것인데 이번 스프린트는 스프린트 과정을 2번 걸쳐 총 2주 동안 하게 됐다. 3일 전에 스프린트가 끝났지만 정리할 거 정리하고 그동안 잘 못했던 휴식도 취하고 내용을 종합하여 그간 느꼈던 점과 앞으로 나아가야 할 방향에 대해서 생각을 많이 해봤던 것 같다. 회고 Liked 다양한 개발자들을 만날 수 있다 : 이전에 개발자 지인이라곤 그동안 도움을 많이 받은 실제 친구 한 명밖에 없었지만 이번 테오의 스프린트를 통해 10명이라는 든든한 동료, 팀원들을 만날 수 있었다. 다양한 라이브러리, tool 써보기 : 순수 자바스크립트로만 공부했던 터라 .. 자바 스크립트 공부 (addeventlistner, api, dom) 지난번에 포트폴리오 관련 강의를 마무리하고 자바스크립트에 더욱 흥미가 생겨서 드림코딩에서 프로젝트101강의를 들었다. 아직 자린이기 떄문에 최대한 수업을 열심히 들었고 노마드코더의 크롬앱 코딩에서 배워서 알게 된 기능들이나 지식들은 선 강의 후코딩이 아니라 선코딩 후강의로 진행했다. 우선 이번강의에서 알게 된 내용중 중요하다, 새로웠다 생각한 내용들은 총 세가지고 아래와 같다. 1. New addeventlistener 1 - resize 2 - mousemove 2. API(Application Programming Interfaces) 3. DOM(Document Object Model) 우선 새로 알게된 addeventlistener 중에 resize 와 mousemove가 있었고 간단하게 설명하자.. 나만의 포트폴리오사이트 만들기 이번엔 내가 프런트엔드 개발자에 대한 정보를 정말 많이 받았고 유튜브 강의도 정말 유용하게 봤던 드림 코딩 엘리 채널의 유료 강의 나만의 포트폴리오 사이트 만들기 강의를 들었다. 우선 수업 초반에 나만의 디자인 로고 만들기와 bem에 관한 내용은 정말 유익했다. 1. BEM이란 그중에서 BEM에 관한 내용이 되게 인상적이었고 우선 BEM이란 Block Element Modifier의 줄임말이고 간단하게 말그대로 html 내에서 block, element, modifier의 요소로 나눠서 __, --와 같은 특수기호로 네이밍을 편하게 한다는 이론이다. 자세한 내용은 이미 많은 사람들이 쉽게 알아보기 쉽게 정리한 내용이 있고 나는 나나님의 글이 되게 좋았다. >>https://nykim.work/15 [CS.. todo list 앱만들기 (노마드코더) 2/2 오늘은 자바스크립트 배웠던 거 까먹기 전에 리마인드 하기 위해 아침에 글을 쓴다. 이전에 했던것에 이어서 오늘은 시간 구현 기능을 어떻게 구현했는가에 대해서 시작을 할 건데 몇 시인지 알기 위해선 현재 내 위치에서의 몇 시인지에 관한 데이터를 받아올 필요가 있는데 그것은 아주 간단하게 const date = new Date(); 위와 같이 선언하면 현재 시간을 알 수 있다. console.log(date)를 해보면 현재 시간이 나온다 여기서 내 개발자 툴을 자세히보면 1초마다 시간이 업데이트되는 것을 볼 수 있는데 이는 setInterval이라는 함수를 사용하면 알 수 있다. setInterval(a, b)이란 a라는 함수를 실행하고 b(ms)마다 그것을 업데이트하는 것인데 보통 시간은 1초마다 리셋시.. todo list 앱만들기 (노마드코더) 1/2 이제 그동안의 클론 코딩 덕분에 html css는 어느 정도 통달된 것 같아 자바스크립트 공부를 하려고 검색해보다가 노매드 코더 무료 강의가 눈에 들어왔다. 평도 좋았고 유튜브 알고리즘을 통해 봤던 영상들의 좋은 기억들이 있어서 그대로 강의를 들었다. 자바스크립트는 드림코딩엘리 유튜브 채널에 있는 이론적인 내용의 자바 스크립트로만 배워서 전혀 감이 없었던 상태였다. 제일 처음 배웠던것은 html의 내용을 자바로 grab 하는 여러 속성들이 있었는데 대표적으로 queryselector와 getelementbyid가 있었고 니꼬썜이 99퍼센트가 이것으로 작성한다고 했다. queryselector란 내 document에 있는 class명이나 id명 혹은 div,span과 같은 요소들을 css에서 호출하는 것처.. 이전 1 2 다음
