리액트 공부와 함께 하는 일상/2주차5 [TIL] 2주차 - 4. TypeScript - 이걸 쓰면 더 안전하다 TypeScript? (JavaScript Superset) JavaScript의 타입을 강제시키는 언어 TypeScript는 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어입니다. TypeScript = JavaScript + Type 문법 JavaScript와 완전히 다른 언어는 아니고 JavaScript의 문법을 이용하는데 자바스크립트의 타입을 강제 시켜 줍니다. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력합니다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 됩니다. let aaa = "안녕하세요" aaa = 123 JavaScript는 위와 같은 코드에서 에러가 발생하지 않습니다. 하지만 Ty.. 2022. 1. 20. [TIL] 2주차 - 3. 컴포넌트 재사용성 (feat.게시물 수정하기) 컴포넌트 재사용성 입사하게 되면 회사에서는 1.컴포넌트 분리 2.로그인 인증(회사에서 주는 과제) 3.배포 이렇게 3가지를 봅니다. 특히 컴포넌트 분리에서 컴포넌트 재사용성이 중요한 부분인데요. 협업하기 좋은 코드이기 때문입니다. 흔히 좋은 코드라 함은 중복되는 코드 수를 줄이고 재사용성을 높여 코드 간의 결합도를 낮추고 생산성을 높인 것이라고 합니다. 유사하거나 똑같은 코드들이 여러개 있다면 클라이언트가 방대해져서 로딩 속도가 느려집니다. 나중에 수정해야 될 때도 시간 소모가 크겠죠. 그래서 중복되는 코드수를 줄이고 코드의 재사용성을 높이는 것이 실무에서 좋은 코드라고 할 수 있겠습니다. 컴포넌트 역시 마찬가지입니다. 공통적으로 사용되는 기능은 따로 한 컴포넌트로 빼두어 기능이 필요한 곳(페이지)에서 .. 2022. 1. 19. [TIL] 2주차 - 2. 실무 전용 반복문 - map/filter 1. 배열 함수 Map() 1-1. 문자열 배열 const classmates = ["철수","영희","훈이"] classmates의 각 요소마다 뒤에 "어린이"를 붙이고 싶다. 배열 함수 map()을 사용하면 classmaates의 모든 요소 하나하나에 동일한 로직을 실행할 수 있다. classmates.map((el) => (el+"어린이")) 기존 배열 classmates에서 map()함수를 사용해 순서대로 하나씩 요소에 접근해 가져온다. 가져온 값을 el에 넣은 후 (el + "어린이")를 통해 원하던 대로 "누구누구어린이" 가 되게 수정해준뒤 값을 반환하여 다시 원래 자리로 요소를 넣어준다. 원하던 대로 요소마다 뒤에 "어린이"가 잘 붙었다. 이 때, 소괄호 생략 가능하다. 1-2. 객체 배열 .. 2022. 1. 18. [TIL] 2주차 - 1. 실무적인 폴더구조 Container/ Presenter 폴더구조 체계화 Container / Presenter 패턴 : js(JSX)와 html을 나누는 방식 (-> 기존에 가장 많이 사용되는 방식) 파일은 두개로 나누지만 하나로 실행시키는 것입니다. Presenter는 화면에 보여지는 부분입니다. container 측에서 presenter를 import 받아와서 사용합니다. container/presenter 패턴 외에도 파일과 폴더를 잘게 쪼개는 방식의 atomic 패턴이 있습니다. presenter 인 BoardWriteUI를 container로 import 받아왔습니다. return() 안에 태그로 presenter를 표현합니다. 그런데 container와 presenter 두개의 파일은 합쳐지지만 writer 변수와 handleChangeWriter.. 2022. 1. 17. 이전 1 2 다음
