본문 바로가기

분류 전체보기

 (101)
[SEAYA] Vite + React + TS (Yarn 패키지 매니저) yarn create vite [프로젝트명]React. TypeScript + SWC. cd nftyarnyarn dev yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-react-refresh필요한 패키지 설치// eslint.config.js..
[FE:SEAYA] React, JavaScript의 이해 React 애플리케이션을 JSX로 구현한 후, 애플리케이션이 브라우저에 나타나는 과정. 중요 키워드: 트랜스파일,Babel, 번들링,Webpack,로더, 빌드 1. 애플리케이션 작성 및 트랜스파일(Transfile)도구: Babel (자바스크립트 컴파일러)JSX는 브라우저가 이해할 수 없다. 따라서 Babel을 사용하여 순수한 JavaScript로 변환한다.이 때, 최신 자바스크립트 문법도 구형 브라우저에서 동작할 수 있도록 변환된다. 2. 모듈 번들링 (묶음)도구: Webpack (자바스크립트 모듈 번들러) 여러 모듈들을 하나로 묶는 과정을 번들링이라 한다.여러 개의 자바스크립트 모듈과 기타 자산(CSS, 이미지, 폰트 등)을 하나 또는 여러 개의 번들 파일로 묶는다. 다양한 파일 유형(CSS, 이미..
[ICT멘토링 레벨업패스] TypeScript 컴파일 언어: 코드 전체를 한번에 해석해서, 실행할 수 있는 파일로 변환시켜주는 방식인터프리터 언어: 코드를 한 라인씩 해석하면서, 실행하는 방식 TypeScript는 컴파일 과정을 통해 JavaScript로 변환되어 사용된다. 1. 구상2. 설계: 머리속으로 구상한 것을 문서로 기록하는 것.3. 구현 컴파일과 링크를 합쳐서 "빌드" 과정이라고 부름. /* Date: 2024. 07. 17 author: dekoms remark: hello world*/함수 위에 간단하게 설명 적어주는 느낌.  자바스크립트 엔진: 콜스택, 메모리힙이 존재한다. 콜스택: 원시 타입메모리힙: 배열, 객체, 함수포인터 💯💯💯 렉시컬 환경??? 포인터 변수: 주소값을 저장하는 변수.  if문을 여러 번 작..
[poompoom] 트러블슈팅 header 여러개 사용가능하다. headermainfooter 내부에 section잡고div로 양옆 마진 잡고그 다음 콘텐츠 딱맞게 크기 조율. axios Instance 생성 후 AT 확인일반적으로는 헤더 설정에 Authorization 속성에 `Bearer ${accessToken}`을 값으로 넣음.근데 종설할 때는 왠지 모르게 헤더 속성에 접근이 안돼서 사설 속성 access를 사용함.access 속성에 직접 accessToken을 넣었음.// 요청 인터셉터axios.interceptors.request.use( (config) => { const accessToken = localStorage.getItem('accessToken'); if (accessToken) { ..
[Infra] AWS ✅EC2: 하나의 컴퓨터?(CPU)에 하나의 운영체제를 가진 서버.-> 그래서 클라우드 서비스를 사용하지 않고, 라즈베리파이를 사용해 리눅스 서버로 활용할 수도 있다. ✅SSH: 원격 Secure 프로토콜 ✅ClientServer1동작하는 프로그램(Application): React ServerServer2동작하는 프로그램(Application): Spring(WAS) DBServer3동작하는 프로그램(Application): MySQL ✅하나의 프로그램에는 하나의 포트가 필요하다. ✅S3에 .jpg .png .mp3 등 정적 파일을 저장함.그 후 S3에 저장된 정적 파일의 URL을 DB에 저장함. ✅ 아키텍처 동작과정 Web Hosting Service에서 빌드된 JS를 읽음.Client Server(..
[poompoom] 개발 순서 중간에 느낀 점 피그마 통해 디자인 기획->그에 따라 바로 via.placeholder 사용해서 이미지로 견적 짜기 거의 무적인 레이아웃 설정width: 80%;margin: 0 auto;border: 3px solid #ccc;background: #ccc; return ( 로고 {/** 추후에 컴포넌트 사용 */} 메뉴바 {/** 추후에 컴포넌트 사용 */} ); const Container = styled.div` width: 80%; margin: 0 auto;`;const ProfileHeader = styled.div` background-color: #e6e6e6; bo..
[Git] Git 명령어 심화 ✅ diffgit diff 커밋1 커밋2commit 간의 소스코드 차이를 보여줌. ✅ reset vs revert# 마지막 커밋 이전으로 Soft Reset을 수행합니다.git reset --soft HEAD^# 인덱스까지 이전 커밋으로 Mixed Reset을 수행합니다.git reset HEAD^# 이전 커밋으로 Hard Reset을 수행합니다. 모든 변경 사항이 삭제됩니다.git reset --hard HEAD^# HEAD^ 커밋을 취소하는 새로운 커밋을 생성합니다.git revert HEAD^ ✅ 리눅스 명령어# README 파일을 생성합니다.touch README.md# README 파일에 내용을 추가합니다. 여기서는 간단한 예시로 "Hello, World!"를 추가합니다.echo "Hello, ..
[WEB] 웹 개발 입문: Node.js, 브라우저, 그리고 웹서비스 개념 정리 보호되어 있는 글입니다.

티스토리툴바