분류 전체보기
-
Liner(라이너 클론코딩) 3일차클론/라이너 2021. 3. 16. 22:05
1. Detail 페이지 구현! 먼저 이런식으로 FakeList를 변경해주었다. 원래 list에서만 쓰려고 만들었는데 detail에서도 쓰는 항목들이 거의 비슷해서 directUrl, description, authors을 추가했다. 그리고 p태그로 해두었던 title을 누르면 해당 detail페이지로 넘어갈 수 있게 Link태그로 변경해주었다. app.js도 이렇게 변경! 파라미터를 받아 구현할 수 있도록 해주었다. 그 다음에는 Detail 페이지를 나타내는 컴포넌트를 만들었다. match로 파라미터를 받아왔고, FakeList에서 id가 일치하는 데이터를 뽑아서 리턴값에 지정해주었다. 아마 for문 작업은 fakedata를 썼기 때문에 사용한 것 같다. 만약 서버와 통신한다면 id를 보내주고 서버에서..
-
Liner(라이너 클론 코딩) 2일차클론/라이너 2021. 3. 15. 21:27
먼저 필요한 항목들이 담긴 fakedata 를 만들었다. 너무 길어서 한 항목만 발췌.. 먼저 한 항목을 구현해주는 Entry컴포넌트를 만들었다. - 이따 나오겠지만 props로 받아온 content를 구조분해할당 해주었다. - 각자 맞는 자리에 넣어주기.. - rightMenu 구현할 때 처럼 태그가 있는 항목과 없는 항목이 있어서 조건부 렌더링으로 태그를 매핑해주었다. Entry를 매핑해주고, For you, Highlight를 담당하는 List컴포넌트를 만들었다. - 흠..지금보니 굳이 foryou를 선언할 필요는 없어보인다. 수정 해놔야지 - FakeList의 foryou를 ContentsListEntry에 프롭스로 내려주면서 매핑한다 - 나머지 리턴값은 아직 라우팅을 안해서 고정값으로 해두었는데..
-
Liner(라이너 클론 코딩) 1일차클론/라이너 2021. 3. 12. 19:33
완전 혼자만의 클론코딩은 처음이라 떨렸다.. 1. 레포지토리 생성 우선 깃허브 레포지토리를 만들고 create-react-app을 한 뒤 master branch에 push! 처음 하는거다보니 이리저리 산만하게 진행이 될 것 같아 깃허브의 이슈와 프로젝트 기능을 이용해서 관리하기로 했다. 대망의 첫 이슈 Header만들기! basic한 이슈는 요구되는 기능을 적어뒀고 + 이슈에는 css할 때 신경써야 할 부분이나 advanced한 부분을 넣어두었다. 2. Header 모든 컴포넌트는 공통적으로 css를 나중에 하기로 했다. (className 지정안하고 로 씌워놨다는 뜻) react와 react-router-dom을 import해준 뒤 왼쪽부터 보이는 대로 코드를 짜봤다. - 로고는 누르면 메인으로 돌아..
-
타입스크립트 3일차공부 1/T S 2021. 3. 4. 21:51
Generic의 사전적 정의 : 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 나는 지금 타입스크립트 공부를 react.vlpt.us/using-typescript/01-practice.html 이 웹페이지에서 공부하는데, 이 곳에서의 generic설명이 뭔가 긴가민가해서(내가 몰라서..) hyunseob.github.io/2017/01/14/typescript-generic/ 이곳의 설명을 참고하고 이해했다. 함수에서의 generic - any 타입 사용시 function merge(a: any, b: any): any { return { ...a, ...b };..
-
타입스크립트 2일차공부 1/T S 2021. 3. 3. 23:38
class를 interface로 타입 지정해주기 용어 interface : 클래스 또는 객체에 타입을 지정 할 때 사용 implements : interface로 지정해 놓은 타입을 따르겠다는 뜻 number타입을 리턴하는 getArea라는 함수가 필수로 포함해야 하는 Shape를 interface로 만들어두고 implements를 통해 Shape 규칙을 따르는 Class 두개 (Circle, Rectangle)를 만들었다. 각 클래스에서는 먼저 변수를 만들어 타입을 지정해 준 뒤 constructor에서 또 하나하나 지정해 주었다. 밑줄 친 부분을 굳이 할 필요 없게 만들어 주는 accessor이 있는데 바로 public과 private이다. 이렇게 constructor에서 인풋 값 앞에 public ..