개발하자

최근에 다시 Groo에 신경 써서 열심히 코딩을 하고 있었다. Groo는 DB를 따로 사용하지 않고 localstorage를 이용해서 데이터를 저장하고, 업데이트 하고 있다. Groo의 메인 컨셉이 오늘 실천한 행동 버튼을 선택하고 물을 주면 나무가 자라나는 컨셉이다. 양동이 버튼을 누르면 tree 와 관련된 데이터가 변경된다. tree 는 groo, watering, cnt 프로퍼티를 가지고 있다. groo: 현재 몇 그루의 나무를 키웠는지 저장 watering: 현재 나무에 물을 얼마나 주었는지 저장 cnt: 몇개의 행동을 실천했는지 저장 그리고 watering과 cnt를 계산하여 groo 프로퍼티를 성장하게 할 수 있도록 했다. 근데 여기서 문제가 발생했다!!! 양동이 버튼을 눌렀을 때 sideba..

채용공고 자소서는 세개항목이 있었고, 그 외에 기본 인적 사항들을 작성 했다. 나는 마감날 부랴부랴 제출 했는데, 다음날이 바로 시험이라서 놀랐다ㅋㅋㅋㅋ 채용 일정 및 테스트 안내 코딩테스트 후기 오늘 카카오 페이 코딩 테스트를 쳤다. 3시간 시험이였고, 4문제가 나왔다. 최근 며칠동안 알고리즘을 안 풀다가 갑자기 친 시험이었다, 그래서 4문제 중에 3문제만 풀었다 ㅜㅜ 세금 비율을 계산, 행렬 스와이프, 정규표현식, 전기선?? 문제는 어렵지는 않았던 것 같은데 짜잘하게 실수를 해서 시간이 너무 오래 걸렸다! 그래도 최근에 정규표현식을 공부한 것이 매우매우 도움이 됐다. 잘 치진 못했지만 그래도 점점 성장하고 있다는 것을 느끼고 있으니까 그것으로 만족해야겠다. 알고리즘은 꾸준한게 최고인 것 같다!! 그게..

JS에서 Scope와 Closure를 이해하기 위해서는 Lexical Evironmet에 대한 이해가 선행되어야 한다. 그래서 아래 포스팅을 해석하며 Execution Context를 이해해보려고 했다!! https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0 Understanding Execution Context and Execution Stack in Javascript Understanding execution context and stack to become a better Javascript developer. blog.bitsrc.io Execution Context..

내가 테크러닝을 신청 전 혼자 개발을 하고 있었다. 이것이 내가 지원하게된 주요한 이유인데, 혼자 개발 공부를 할 때 문제점들이 있다. (물론 학원이나 교육을 받아도 마찬가지 일수도 있다. 복불복으로 좋은 멘토를 만나지 못한다면 방향 자체가 잘못됐을 수 있기 때문이다.) 1. 모르는 것을 모른다. 요즘은 정보가 너무 많기도하고, 프론트엔드 쪽은 몇년전과 지금의 기술이 급속하게 변했다. 그래서 가이드라인이 없는 상태로 토이프로젝트를 한다면, 원하는 기능은 만들어 낼 수 있을지도 모른다. 하지만 그것이 최신의 방식인지? 그리고 다른 방식은 어떤 것이 있는지? 본질적으로는 어떤 차이가 있는지? 구글 선생님으로는 초짜인 내가 판단하기는 힘들었다. 그리고 저런 고민을 하지 않는다면 그냥 주먹구구로 계속 코딩을 해..

이 날은 진행방식에 한계를 느끼고, 앞으로의 강의 방식을 투표로 수정했다. 그래서 이 날은 문답 형식으로 수업을 많이 진행했기 때문에 질문 위주로 정리했다! react에서 말하는 컴포넌트는 뭔지? - 리액트에서 말하는 컴포넌트는 컴포넌트가 아니라고 생각 함 - 컴포넌트가 아니기 때문에 재활용이 일어나지 않음 - 리액트 관점에서 virtualDOM을 구성하는 조각에 불과함(UI의 최소 조각) 진짜? 컴포넌트는 뭔지? - 웹컴포넌트 표준 스펙 (https://developer.mozilla.org/ko/docs/Web/Web_Components) - 컴포넌트가 되기 위해서 어떤 기술이나 스펙이 필요한지 알 수 있음 - 컴포넌트는 그 자체로 완전한 독립성을 갖고 있어야 함 - 역설적이게도 웹 컴포넌트는 너무 ..

과제 확인 : google 로그인, editor프레임워크(draft, slate) 프로토타입 만들어오기 네분이 과제 발표를 하셨다!! 1. google 로그인 react-google-login : 공식 문서를 보고 로그인을 구현하기에는 기간 안에 힘들어서 대부분의 분들이 이 패키지를 이용해서 구현해 오셨다. : 하지만 구글의 오피셜 패키지는 아니라서 직접 구글 인증을 공부해 볼 필요가 있을 것 같다. passport : 백엔드에서 인증을 할 때 자주 사용되는 라이브러리이다. : 민태님도 작업을 할 때 백엔드 단에서만 인증을 해봤다고 하셨다. 직접 구현(이 분 코드를 제대로 봐볼려고 한다!!) : 백엔드에서 라이브러리를 사용하지 않고 구현하셨다고 했다. : 처음에 react-googlt-login을 사용했..

기존 프론트 구조 - 함수만을 이용 - 페이지마다 html 파일을 두고 새로운 페이지를 렌더링 하도록 구현 - localStorage에 필요한 정보를 모두 저장해두고 있음 발생한 문제 - 중복되는 기능이 있는 함수를 페이지마다 만들어야 함 - 마크업에 있는 태그가 아니라면 오류가 발생함 (당연하지만,,, ) -> 이거 때문에 중복이 더 많아짐 -> 해결방법이 있을 것 같은데 내가 못 찾는 느낌!! (이것도 찾아봐야겠다) 변경한 프론트 구조 - 클래스를 이용 - SPA 구현 ( data-href 라는 옵션을 태그에 추가해서 구별할 수 있도록) - 페이지 별로 클래스를 생성 - habit, user, comment 클래스를 생성해서 각 기능별로 load, save 기능을 수행할 수 있도록 함 클래스로 변경하..

과제 확인 React + Typescript 로 생성한 레포를 슬랙에 공유하는게 과제였다. 30명 이상이 슬랙에 레포를 공유했는데 그에 대한 리뷰를 해주셨다. 대부분 create-react-app을 사용한 레포를 올렸는데 그게 조금 아쉬우셨던 것 같다. 한 분이 babel, webpack을 사용한 레포를 소개해 주셨고, 그 레포로 이후에 프로젝트를 진행하기로 했다. 이사님 리뷰 목표를 구체화 한 레포가 없고, README에 어느 정도의 기획을 해왔을 것이라 생각했는데 그런 사람이 없었다라는 말씀을 하셨다. 그것은 소통의 부재 때문이고 우리가 목표를 정확하게 설정하지 않고 지난 수업을 끝냈기 때문이라면서 앞으로는 궁금한 것에 대한 질문을 편하게 했으면 좋겠다고 하셨다. 나도 하나씩은 꼭 질문을 하도록 노력..

아이스브레이킹 오티 전 아이스브레이킹으로 퀴즈도 맞추고, 맞춘사람에게 배민 상품권 만원도 주셨다. 나는 손이 빠르지 않아 못받았지만 분위기가 좋아졌던 것 같다. 신청할 때 들었던 의문 이번 4기는 100명의 인원이 선발 됐다. 처음에 주제를 봤을 때 하면 좋을 것 같지만 어떤 방식으로 하신다는 건지?? 좀 의문이 들었던게 사실이다. 많은 인원들을 팀으로 나눠서 만들게 하는 방식인건지? 아니면 김민태 이사님이 직접 제작을 하시고 설명하시는 방식인건지?? OT에서 그 이야기를 당연히 해주셨다. 진행 방식 결론적으로는 주 단위로 목표를 두고 개인적으로 개발을 후 김민태님이 코드리뷰를 해주거나 피드백을 해주는 방식으로 진행하기로 했다. 근데 이제 활발한 소통을 곁들인... 기술 선택에 있어서도 그 과정 전체를 ..

1. responsible web 구현 - 현재 html 구조화와 css 실력이 부족하기 때문에 이 프로젝트르 하면서 실력을 늘리고 싶음 - 요즘 반응형 웹이 아닌 것이 없기 때문에 공부가 무조건 필요함 2. spa vanilla.js로 구현 - 프레임워크(react.js, vue.js)를 배워서 바로 써볼 수도 있지만 근본인 vanilla.js를 이용해서 spa를 먼저 만들어 보는 것이 javascript를 좀 더 깊게 이해할 수 있을 것이라고 생각함 3. class의 필요성 깨닫기 - 글로 이해하는 것과 실제로 해보면서 이해하는 것에는 큰 차이가 있다고 생각하기 때문에 직접 구현하면서 차이를 느끼는 것이 목표 - 함수로 처음에 프로젝트를 만들고 이후에 spa를 구현하면서 class로 변경할 예정 3...