해커뉴스 클론코딩

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

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

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

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

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

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

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

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

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

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

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

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