🖥️ Frontend20 🌏 RealWorld 프로젝트 - react/recoil 신촌프관팀에서 사부가 내려준 숙제를 한다 뚠뚠 🌏 RealWorld란~ GitHub - gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more - gothinkster/realworld github.com Home - Conduit conduit.realworld.how front CodebaseShow codebase.show To.. 2024. 4. 2. 🟦 Typescript 공부하기 🟦 사부님 숙제. 오늘 10시 회의인데 3시간 남았다. TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 아~ 몰라몰라 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발 if ("" == 0) { // 참입니다! 근데 왜죠?? } if (1 < x < 3) { // *어떤* x 값이던 참입니다! } 존재하지 않는 프로퍼티의 접근을 허용 const obj = { width: 10, height: 15 }; // 왜 이게 NaN이죠? 철자가 어렵네요! const area = obj.width * obj.heigth; 정적 검사 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것 TypeScript == .. 2024. 3. 20. ⚛️ 모던 리액트 - 3장 투두리스트 만들기 보호되어 있는 글 입니다. 2024. 3. 12. ⚛️ 모던 리액트 - 1장 내 터진 출석프로그램..흑흑슨 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us ⚛️ 1. 리액트는 어쩌다 만들어졌을까? dom을 전부 날려버리고 다시 만들어서 보여주기 => 메모리에 가상 DOM을 만들 업데이트가 필요한 부분만 가상 DOM으로 수정 그 후 리액트의 알고리즘을 통해 다른 부분을 감지하여 실제 DOM에 패치 ⚛️ 2. 작업환경 준비 Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있습니다. 그렇기에 해당 도구들.. 2024. 2. 25. 🟦 TypeScript 🟦 - 신촌알고리즘출석프로그램 Documentation - The Basics Step one in learning TypeScript: The basic types. www.typescriptlang.org 🟦 TypeScript 🟦 - Microsoft에 의해 개발된 오픈 소스 프로그래밍 언어 - JavaScript의 상위 집합(superset)으로, JavaScript에 타입 시스템을 추가하여 개발한 언어 - TypeScript는 크로스 플랫폼 및 크로스 브라우저 호환성을 갖춘 JavaScript 코드를 생성 - 웹, 서버, 모바일 애플리케이션 개발 등 다양한 분야에서 사용 🟦 TypeScript의 주요 특징 - 정적 타입 검사: TypeScript는 변수, 매개변수, 객체 속성 등에 대한 타입 정보를 명시적으로 선언할 수 있음.. 2024. 2. 11. 💟프론트💟 - 모던 웹을 위한 상세한 CSS background 이해 CSS Reference CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. cssreference.io 참고 💟 CSS background 관련 프로퍼티 background-repeat 프로퍼티!!! 배경 이미지가 요소 사이즈보다 작을 때 반복해서 해당 사이즈를 채울 것인지를 설정 repeat,space,round,no-repeat 반복 세부 설정 가능 여러 개 이미지 덮기 가능 여러 개 이미지 각자 세부 설정 가능 background-size 프로퍼티 background-attachment 프로퍼티.. 2023. 10. 1. 💟프론트💟 - 모던 웹을 위한 CSS 박스모델 이해 잔재미코딩 - 풀스택을 위한 탄탄한 프런트엔드 부트캠프 CSS 박스 모델 box 형태의 세부 사항 수정 가능 대표적 박스 요소 컨텐트는 항상 안 보이는 보더가 있고 그 사이에 패딩 존재 마진도 지정 가능 width / height 프로퍼티 box-sizing 프로퍼티: content-box로 지정 => width/height : content 영역의 너비 높이 됨 box-sizing 프로퍼티: border-box로 지정 => width/height : content+padding+border 영역의 너비 높이 됨 컨텐츠가 지정된 width height를 넘치면 영역 밖으로 나감 => overflow 프로퍼티를 hidden으로 설정하여 넘친 컨텐츠 감추기 + max-width / max-height 프로퍼.. 2023. 9. 28. 💟프론트💟 - 모던 웹의 핵심 상세한 CSS 기본 잔재미코딩 강의 -풀스택을 위한 탄탄한 프런트엔드 부트캠프 CSS Cascading Style Sheets HTML로 구조화된 문서를 어떻게 브라우저 상에 렌더링할지 표현 기법 정의하는 언어 화면 렌더링 표현 방법 정의 HTML 과 연동하는 방법 1. 적용할 태그에 style 속성으로 넣기 2. HTML 문서 head 안에 style 태그로 넣기 3. HTML 문서 head 안에 css 파일로 링크하기 3번을 제일 많이 사용~ Reset CSS 웹브라우저마다 다른 default 스타일 설정 -> 초기화하여 다양한 웹브라우저에서도 동일한 스타일로 표시하기! 실무에서 필요에 의해 임의로 만든 설정 normalize.css 사용 ( 기본 스타일은 남기고 / 브라우저별로 다를 부분만 초기화 ) head에 링크시.. 2023. 9. 26. 💟프론트💟 - 모던 웹 기본 기술 이해 그래.. 리액트 하겠다고 나댓는데.. js 옛날에 공부한 거 다 까먹은 거 음 박치기하면 될줄 대학생 되면 정해진 길이 없다! 공부할 거 자기가 정하는 거다! 우와~ 가 아니었어요 길을 못찾겠어요 여기가 어디죠 어디로 가야 하는거 난 프론트 스터디원 아니지만~ 몰래 썌비지 해서 강의 나두 들어야지 20시간? 세미나도 끝냈겠다 중간고사 본격 공부 전에 부숴버리겠어 0강 0-1강 0-2강 0-3강 0-4강 챗지피티 잘 사용하자\ 4유료결제해야 하나 1-1강 html 태그와 속성 사이 , 속성과 속성 사이에는 한 칸 띄어야 함 css 프로퍼티와 값 사이 띄어쓰기 없어도 됨 css Selecter ES6 : ECMAScript 의 약자 / 숫자 6은 여섯번째 ES (프로그래밍 언어가 아닌 스크립트 언어들에 대한.. 2023. 9. 25. ⚛️ React ⚛️ - 2.리액트 프로젝트 만들기 내일 아침에 이어서.. CPA (create-react-app) : 리액트 프로젝트 제작 npx (node pakage program) 리액트 웹 애플리케이션은 CRA라는 프로그램으로 node.js 프로젝트를 생성하여 제작 npx create-react-app fir_react --template typescript package.json CRA로 생성한 프로젝트에는 항상 이 파일 존재 터미널에서 npm start 명령을 실행하면 이 파일 내에서의 react-scripts start 명령 실행 npm run start - start 명령 : 프로젝트를 개발 모드로 실행 npm run build - build 명령 : 프로젝트를 빌드 모드로 실행 웹팩 webpack : 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러 다양.. 2023. 9. 11. 이전 1 2 다음
