프롤로그 비동기로 바꿔보자 1. 비동기 옵션

디렉터리를 만들고 적당하게 분산시키고 적절하게 배치함으로써 코드의 구조를 깔끔하게 개선시켜보자 src : 많이 쓰는 소스코드를 배치하는 용도로 많이 사용한다. core : 공통 코드들 (구조가 커져도 공통으로 사용될 코드) page : UI 관련types : inter

앞서 배웠던 class 를 view 클래스로 공통으로 빼야 한다. 공통된 목적을 추출 하는게 우선이다. NewsFeed 나 NewsDetail 의 함수는 UI 를 업데이트 하는 함수이고 그 외에 makeFeed, updateView 등의 함수들은 UI를 업데이트 함에

타입과 인터페이스의 차이는 아주 ~ 조금 ~ 차이가 난다고 한다. 코드는 일관성이 중요하기 때문에 어떤 미세한 기능 때문에 그것을 써야 하는 경우가 있다면 그 코드로 써야 겠지만 대부분은 취향의 차이라고 한다.타입을 인터페이스로 바꿔보려고 한다.타입을 결합시키거나 조합

이때까지 js 만들었던 hacker news 를 typescript 로 변환하고자 한다.어떤 부분들이 바뀌는 지 어떻게 바뀌는지 흐름을 따라 가 보면 좋을 듯 하다. 타입 추론 : 누가 봐도 당연한 값들은 typescript 에서 알아서 타입 추론을 해 준다. 따로 타

기능요구사항 ) 사용자가 피드를 읽었다가 돌아왔을 때 읽었는지 안 읽었는지 확인이 필요하다. 이때 상태 관리를 어떻게 할지 생각해 보고 구현해 보자피드를 읽었는지 안 읽었는지 확인 하는 방법에는 두가지가 있다. 피드의 마다 고유의 Id 값을 가지고 읽음 표시 데이터를

상세페이지에서 댓글과 대댓글 부분의 데이터를 가져와서 구현해 보도록 하자.상세페이지 부분의 {{\_\_comment\_\_}} 부분을 대체 할 함수를 만들어 보자.comment를 만들기에 앞서 데이터의 구조가 어떻게 되어있는지를 살펴 보자.comments 밑에 comm

마크업을 그릴 때 js 로 하다보니 DOM 을 많이 건드리는 방식을 사용했다. id=root 를 잡아서 createElement를 하고 appendChild 를 하고.. 그런데 이 방식의 단점은 직관적으로 마크업의 구조를 볼 수 없다는 것이다. (개발자 입장에서) 그래

지난 포스팅까지 두개의 화면을 만들었다.데이터를 불러오게 되면 많은 게시글이 있어 페이지네이션이 생기게 되는데 이번에는 페이징을 구현하고자 한다. 게시글 상세에서 목록보기를 클릭할 때 전에 보고 있던 페이지가 예를들어 2페이지라면 그대로 2페이지로 목록을 보여줘야 사용

이번에는 한 화면 내에서 페이지가 전환 되는 것 처럼 보이게 만들어보려고 한다. (SPA) 이전까지의 코드에서는 appendChild 로 삽입하는 코드만 있었는데 한 화면 내에서 화면전환이 일어나게 보이려면 원래 있던 콘텐츠를 새로운 콘텐츠로 overWrite 해줘야한

지난 12줄의 코드에서 점점 더 개선을 하는 작업을 하게 된다. 기본으로 나타났던 목록에서 해당 게시물을 누르면 상세 페이지에 대한 정보를 불러오는 작업까지 작성 해 보자.나아가서 중복되는 코드는 함수로 묶어주면서 점점 더 반복되는 코드를 없앤다.(지난 포스팅에 더해져

이번에는 김민태의 프론트엔드 아카데미를 들으며 프로그래밍을 익히고 있다. 제 1강 JavaScript & TypeScript Essential 은 HackerNews 라는 사이트를 만들어보면서 코드의 퀄리티를 점차적으로 개선해 나가는 작업을 보여준다. 한번 따라 해봤는

프롤로그 cra 와 typescript을 사용하여 갤러리를 구현하는 작업을 진행하였다. 패키지 매니저로는 yarn 을 사용했고, 두가지 방식으로 갤러리에 파일을 추가하는 방식을 정리해 보고자 한다. CRA 개발환경 세팅 🗣 next.js 를 설치 한 상태에서 진행하

프롤로그 이미지 슬라이드를 사용할 때에 실무에서는 주로 라이브러리를 사용하곤 했었다. 이번 강의에서는 자바스크립트 클래스문법으로 구현을 다시 해보는 작업을 가졌다. 역시 라이브러리는 편하지만 직접 작동 방식을 생각하면서 하는게 도움이 훨씬 더 많이 된다. webpac

회원가입 입력 폼 구현과 디자인 입히기를 마무리 했다. 그리고 이제 데이터를 주고 받을 수 있도록 api 를 붙여보기로 했다. api 를 붙이기 전 REST API 에 대해서 먼저 이론을 익히고 기능을 구현해 보고자 한다. Representational State Tr

프롤로그 패스트캠퍼스에 [30개 프로젝트로 배우는 프론트엔드] 라는 강의가 있어서 듣기 시작했다. 클론코딩인데 듣고 끝! 하게 되면 사실상 나중에 기억이 하나도 남게 되지 않으니까 1프로젝트 1글 정리를 하고자 한다. 첫번째는 가상 키보드 구현하기이다. webpac

본격 날것의 디자인에서 css 를 입히는 중이다. emotion 을 사용하고 material icon 을이용해 회원가입 폼을 꾸미려고 한다. material icon 또한 npm 을 이용해 설치를 해주었다. 아이콘은 컴포넌트 형태로 가져 올 수 있어 편했다. (따로 이

프롤로그 progresive웹 앱으로 기록 앱을 만들기로 한 [그리디브] 팀원들. 약 3주차에 걸쳐 나는 회원가입 폼을 완성해 내었다. 그리고 부여 받은 할일은 style 을 입히는 작업이다. 에이전시에서 퍼블리싱 작업을 하고 있는 나는 html, css, js, jq

react 만으로는 해결하지 못했던 상태관리 공유 + 리랜더링 최적화 를 고민했지만 사실 답을 찾기 어려웠다. (답을 찾으면 다시 글로 정리하겠다) 리액트를 쓰며 똑같은 고민을 한 사람들이 조금 더 편하게 쓰기위해 라이브러리를 만들어 놓지 않았을까? 라이브러리의 작동방

그리디브 스터디를 하며 회원가입 폼을 만들어 보기로 했었다. 리액트를 공부하며 회원가입 폼을 완성 했으나 비효율 적이라고 생각이 들었다. 기능은 잘 작동 하지만 반복되는 코드가 많았다. 팀원들이 코드리뷰를 해주었는데 같은 의견이었다. 반복되는 코드는 최대한 줄이고 하나