Youngble_개발스토리

조건부 컨텐츠 conditional content {}중괄호에 삼항연산자를 써서 반영-> 이게 컨텐츠를 조건부로 렌더링하는것이다. 또한 && And operator를 사용할수도있다. 만약에 rutrn 부분에 이렇게 길어지는 조건부를 넣고 싶지 않다면 JSX태그를 변수에 담아서 쓸수있고 return 위에 JS를 쓸수있는 거기 때문에 if문도 사용하여 snippet 코드로 쓸수있다. 예를들어 {Filter.length===0 && no Content} {filter.length>0&&filter.map((expense)=> { })} return에 이러한 JSX코드가 있다면 다음과 같이 return 바깥 부분에 다음과 같이 바꿔 사용할수있다. let expenseContent=no Content if(fil..

기존에 return 부분에서 JSX 문법 태그들을 map 하여 프로젝트를 여러번 진행하였다. 이때는 정신없이 결과를 만들기위해서 깊게 다뤄보지 못한 return에서 렌더링하는 map함수와 그안에있는 태그들을 다뤄보겠다. 여기서 무의식중에 '아 soundTrack이라는 배열안에 정리되어있는 객체들을 map함수로 맵핑해서 그 객체에 접근해서 각각의 키값을 원하는 컴포넌트 안에 값을 넣어줘서 출력하게 해줘야겠다' 까지 생각하고 썼다. 그런데 좀더 디테일하게 들어가보면 배열안에 객체에 접근해서 사용한다는건 알겠는데 그위로 , , 들도 똑같이 맵핑된다는건데 이는결국 {[, , ] } 이런식으로 배열안에 태그들이 들어가게된다는거다. 좀더 심플한 예제로 이와같이 JSX 문법안에서 JS를 사용하기위해 중괄호를 쓰고{}..

부모컴포넌트에서 함수를 만들고 함수를 props로 넘겨준다. 함수의 pointer를 onSaveExpenseData변수 prop으로 넘겨주었기때문에 자식컴포넌트에서 해당 함수를 쓰게되면 부모에 있는 함수로 돌아가서 실행하게된다. 주의사항: 1. 무한루프 넘겨주는 데이터가 부모에서 바뀌고 그것이 다시 자식컴포넌트로 물려주는 state값이라면 또 업데이트 될경우 무한루프 빠지게 되므로 이를 숙지할것. 2. 코드수정, 유지보수 힘듬 부모-> 자식 또는 자식-> 부모로 이어지는 하위/상위 컴포넌트가 많은 구조라면 코드수정, 유지보수 힘들수있다는거 숙지할것, 특히 다른사람과 협업이라면 더더욱 3. 불필요한 렌더링,state 처리 한번의 변경으로 수많은 상태 변경 과정이 이뤄져야 하며, 이 과정에서 불필요한 렌더링..

리액트 상태변화 기존 변수의 값이 onClick 이건 다른 이벤트 발생해서 내용이 바뀌더래도 화면상에서는 변경된 변수로 보이지 않는다 이유는 초기 렌더링 이후에 data가 바뀌었다는걸 리액트가 평가하여 재 평가하거나 렌더링 하지 않기 때문이다. 예를들어 let changingIt = 'a'; const onChangeSpelling => ()=>{ changingIt = 'b' } 이렇게 변수가 있고 어떤 특정 리스너(클릭)을 하여 'a' 문자에서 'b' 라는 문자로 만든다고 했을때 return 부분에 changingIt의 데이터를 화면에 출력되는거라고 할때, 리액트는 그런걸 신경쓰지않는다고한다. 당연히 코드는 리스너(클릭이벤트)가 발생했으니 해당함수는 실행하지만 화면변화를 위한 리액트는 이것을 무시하기..

이전 JSX에 관해 작성한 포트스글: [TIL] XML, JSX, Babel(바벨) 리액트를 사용하면 JSX 문법을 자연스럽게 접하게 된다. 막상 쓰는법은 알지만 이것이 정확히 무슨뜻이고 무슨 원리이고 어떤 배경이 있는지는 자세히 알지못했다. 풀어쓰면 Javascript XML 인데 이 youngble.tistory.com 이전에도 JSX가 무엇인지 다뤘는데 뭔가 더 정확히하고싶었고 지금 리액트를 복습중인데 JSX를 반복적으로 언급하고 설명하기때문에 다시한번 간단하게 정리하기로했다. 리액트: https://www.udemy.com/course/best-react/#instructor-2 타입스크립트 : https://www.udemy.com/course/best-typescript-21/ 현재 Udemy..

“strict” 이 옵션을 true 로 하면 아래 사진처럼 strict 아래 다른 옵션들을 하나하나 true로 한설정과 같은 결과이다. 아래를 일일이 설정하는경우는 분명히 false를 설정할때가 있기때문이다. 그러면 이 옵션은 무엇을 설정 하는것인가? “noImplicitAny” noImplicitAny는 더나은 코드를 작성하는데 도움을 주는 흥미로운 옵션이다. 다음과 같이 data를 인자로 받고 콘솔로그로 출력하는 함수를 만들었고 ‘The data’ 라는 string 문자열을 인수로 넘겨주었다. 하지만 다음과 같이 any type으로 에러가 뜨는걸 알수있는데 이게 noImplicitAny 옵션이다. 매개변수로 넘겨주는 값이 어떤 타입인지 명확히 알리지 않았기 때문에 타입스크립트가 어떤 정보인지 알수없어..

“allowJs” allowJs는 checkJs와 함께 타입스크립트가 자바스크립트 파일을 컴파일할수 있도록 해준다. 파일이 ts로 끝나지 않더래도 타입스크립트는 컴파일할수있다. “checkJs” checkJs는 타입스크립트가 컴파일을 수행하지 않더래도 구문을 검사하고 잠재적인 에러를 보고해준다. ts파일을 비롯된 js파일에 대해 컴파일을 두번 중복해서 수행할 필요가 없도록 한다. 그런데 만약 프로젝트가 타입스크립트를 전혀 사용하지않거나 바닐라자바스크립트 파일과 타입스크립트파일 병행해서 함께 검사하고 싶은 경우 사용하면 된다. “declaration” .d.ts 파일은 프로젝트를 라이브러리로 배포할때 중요한 고급 개념이다. 프로젝트의 모든 타입을 설명하는 manifest 파일이 필요한데 이것이 d.ts 파..

매번 해당 ts 파일을 tsc ~~.ts 한다면 큰 프로젝트일 경우 여러 업데이트된 ts 파일을 일일이 하기 번거롭다 따라서 편의성을 위한 컴파일 기능을 설명하고자한다. npm start 을 통해 자동으로 변경된 사항을 로컬3000에 불러온다지만 여전히 tsc 로 커맨드를 입력해야한다. 이럴때 사용하는것이 관찰(watch)모드이다. 관찰모드(Watch) 타입스크립트가 파일을 관찰하고 파일에 변경된 사항이 있을때마다 다시 컴파일하게 된다. 처음 커맨드 입력 방법은 tsc ~~.ts --watch 또는 tsc ~~.ts -w 입력하여 해당 ts파일을 관찰모드로 진입한다. 이때 끄는 방법은 기존과 똑같이 control+C 를 눌르면된다. 하지만 이러한 관찰모드역시 파일을 직접적으로 지정해야 한다는것이다. 따라..

타입스크립트는 컴파일 과정에서 에러를 잡아내기 때문에, 기존에 런타임에서 발생하던 에러를 개발단계에서 핸들링 할 수 있게 된다. (자바스크립트 사용시에는 런타임 환경에서 실행전까지는 에러 확인할 수 없는데..) 또한 생각해보면 새로운 개발자가 합류하거나 기존의 팀에서 코드수정을 하기위해서 코드를 볼때 타입이 결정되어있어서 코드리뷰를 할때 좀더 직관적으로 어떤 변수,함수 인지 정확히 알수있다는것이다. 만약 다른사람이 잘못쓰더래도 바로 컴파일에러로 보여주기때문에 코드 수정이나 fix 하기가 자바스크립트보다 훨씬 좋다는것이다. 사용자정의 타입 사용자가 임의로 타입을 변수에 담아 만들어놀수있다. type Combinable = number | string; type num = number; type str = ..

요새 캡스톤디자인+ 학교수업때문에 개인공부할시간이 없다 취업준비도해야하는데.. 그래서 따로 블로그에 글을 올리지 못했는데, 일기식으로라도 쓰고 기록해야할거같아서 온라인강의 틀어놓고 이렇게 쓰고있다. 요번에 캡스톤디자인에서 다시 웹개발을 진행하는데 기존 리액트+타입스크립트로 진행할려고 하고있다 새로운걸 적용하면서 기존에 썼던 리액트도 다듬고 싶었다. 디자이너 1명 백엔드인원 3명 프론트 1명(나), 백엔드의 경우 아직 경험이없고 공부하면서 진행해야하기때문에 백엔드에 많은 인원을 구했고, 경험이 있던 내가 팀을꾸려서 팀장으로써 진행해야하기때문에 (사실 프로젝트 혼자할수있으면 혼자할려고했는데 2인이상이라고해서 웹개발 프로젝트로 구하다보니 팀장을 맡았다) 전반적이 이해가 필요할거같다고 생각하여 요새 프론트 백엔..