전체 글 (29) 썸네일형 리스트형 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 4일차 과제( 로그인/회원가입 컴포넌트 ) 2024.08.22(목) - 4일차 과제 위와 같은 UI를, 오늘 만들었던 Button, Input, Checkbox 컴포넌트를 재사용하여 만드는 것이 오늘의 과제였습니다. css는 tailwind를 이용하여 작업하였는데 익숙치 않은 라이브러리라 속성 하나하나를 모두 검색해서 해야한다는 번거로움이 있었지만 하루빨리 적응해서 tailwind를 자유자재로 쓸 수 있는 프론트엔드 개발자가 되었으면 좋겠습니다. App.tsx(tailwind css 부분은 지웠습니다)import Button from './html/Button'import Input from './html/Input'import CheckBox from './html/CheckBox'const App = () => { return ( .. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 3일차 과제(props 복습 + 연습 문제) 2024.08.21(수) - 과제 이번 과제는 제출에 용이함을 위해 웹컴파일러 StackBlitz를 이용했습니다. 오늘 배운 컴포넌트 데이터 전달(props) 파트 복습을 진행하는 것이 첫 번째 과제였습니다. 기본 사용법, 표현식 사용법, 구조 분해 할당 사용법(비구조화), 여러 개의 props 전달,마지막으로 이벤트(함수) 전달까지의 내용이 있습니다. 아래 링크를 참고하시면 감사하겠습니다.https://stackblitz.com/edit/vitejs-vite-dd8sk1?file=src%2FExample.tsx Vitejs - Vite (forked) - StackBlitzNext generation frontend tooling. It's fast!stackblitz.com 두 번째 과제는 P.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 2일차 학습 회고 ( 인터페이스, 타입 별칭, 열거형, 제네릭 ) 2024.08.20(화) - 2일 차 오늘은 어제에 이어 인터페이스로 시작했습니다. 인터페이스란?개체 타입을 지정할 때 사용하는 문법입니다. 쉽게 말하자면 우리만의 타입을 만들고 싶을 때 쓰는 기능입니다.(무작정 객체 타입이라고 해서 인터페이스를 쓰는 건 아님) 인터페이스 작성 방법 ↓// 관례상 타입명 앞에 I를 붙임interface 타입명 { 속성: 타입; ...} 인터페이스의 몇 가지 성질을 예시 코드를 통해 알아보겠습니다.1. 병합2. readonly3. optional 프로퍼티4. 상속// interface 키워드 작성 후 변수명 { ... }interface IUser{ readonly name: string; //readonly 속성으로 하면 값이 바뀌지 못하게 읽기전용으로 설정.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1일차 과제( 가장 긴 단어 반환하는 함수, 암스트롱 수 구하기 ) 2024.08.19(월) - 1일 차 과제 1일 차 첫 번째 과제는 다음 두 가지였습니다. 첫 번째 문제는 아래 예시와 같이 "Hello, wor" 을 매개변수로 받으면 Hello, 와 Wor 중 더 긴 Hello, 를 반환하고"ab cde" 를 매개변수로 받으면 ab 와 cde 중 더 긴 cde 를 반환하는 함수를 만들어보는 것입니다 위 문제를 보고 "Hello," 를 반환하는 것으로 보아 우선 입력string(=매개변수 string)을공백으로 분리해야겠구나 생각이 들었습니다. 자바스크립트에서 split이 그러한 분리를해주는 역할이기에 split을 사용해야겠다고 생각했습니다. 먼저 함수를 저장할 변수를 printLongestWord라 이름 짓고오늘 배운 화살표 함수로 함수를 작성하겠습니다. 찾고자하는 .. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1일차 학습 회고( ES6 최신 문법, 타입스크립트 타입 지정 ) 2024.08.19(월) - 1일 차 ES6의 주요 개념과 문법을 다루고 각 예제들을 다루어 보았습니다. (ES6란 ECMAScript 6라고 하는 것으로 2015년에 도입된 최신 버전의 JavaScript 표준입니다.)1. let 과 const이전의 자바스크립트 문법에서는 var 라는 키워드를 사용했지만다음과 같은 문제점들로 인해 ES6 제정 이후로는 사용되지 않습니다.● var의 문제점- 중복 선언 가능- scope 범위가 전역 / 함수로 제한됨- 호이스팅이 가능하다 따라서 ES6(2015년) 이후에는 let과 const를 사용합니다.let과 const는 변수를 선언할 때 사용하는 키워드입니다 ● let : 재할당 필요할 때● const : 재할당이 필요 없을 때let num = 10;num = .. 이전 1 2 3 4 다음
