분류 전체보기
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 조건부 렌더링과 반복 렌더링프로젝트 캠프: Next.js 과정 2기 2024. 7. 25. 13:00
조건부 렌더링조건부 렌더링을 사용하면 특정 조건에 따라 컴포넌트나 요소를 렌더링할 수 있다. 자바스크립트의 조건문을 사용하여, 특정 조건이 참일 때만 컴포넌트를 렌더링하거나, 조건에 따라 다른 컴포넌트를 렌더링할 수 있어 효율적인 UI관리가 가능하다.if문import { useState } from "react";const App = () => { const [isLogin, setIsLogin] = useState(true); if (isLogin) { return ( Hello, Login! ); } return ( Hello, Not Login! );};export default App;삼항 연산자const App = ()..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - tailwind카테고리 없음 2024. 7. 25. 09:44
tailwind 적용하기tailwind는 bootstrap과 비슷하게 태그에 class 속성을 부여해 디자인을 적용하는 라이브러리다.그래서 처음에는 익숙해지는 데까지 오래걸리지 않을까라는 걱정이 들었지만 막상 사용하다보니 부트스트랩을 사용하는 것과 매우 유사하다고 느껴져서 생각보다 빠르게 익힐 수 있었던 것 같다.설치https://tailwindcss.com/docs/guides/vite위의 링크를 타고 들어가서 Install Tailwind CSS 부터 적용해줬다.공식문서에서 css 속성을 검색하면서 특정 속성을 className에 추가해주면 쉽게 스타일을 적용할 수 있다.같이 사용하면 좋은 라이브러리twMerge앞과 뒤를 합쳐주는데 뒤에 있는 중복되는 속성이 있다면 앞의 속성을 뒤의 속성으로 덮어쓴다..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 데이터 전달프로젝트 캠프: Next.js 과정 2기 2024. 7. 24. 15:11
학습 목표| 리액트에서 데이터를 전달하는 방법을 학습합니다.Props컴포넌트 간에 데이터를 전달하는 방법으로 컴포넌트의 확장성을 높여 재사용성을 향상시킨다. 컴포넌트를 정의할 때 함수와 동일하게 정의하기 때문에 데이터를 전달할 때에도 함수에서 매개변수를 사용하듯이 작성하면 된다.props 받기// src/learn/props/Greeting.tsxconst Greeting = (props: { uname: string; age: string }) => { // props가 객체 형태로 전달됨 // 타입을 지정해줘야 함 return ( Hello, {props.uname}({props.age}) {/* 표현식을 사용해서 태그 안에서 props 데이터 ..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 시작하기프로젝트 캠프: Next.js 과정 2기 2024. 7. 23. 15:32
왜 React를 사용하는가가장 인기있는 프레임워크일단 사용량이 많음. 리액트가 뷰의 4배정도의 사용량을 보임성능적 장점기본적인 렌더링 방식Critical Rendering PathDOM 트리 생성CSSOM 트리 생성JS 실행Reder Tree 생성레이아웃 생성페인팅🔥 작성한 html 코드를 기반으로 DOM 트리를 생성하고 CSS파일을 토대로 CSSOM트리를 생성한다. DOM과 CSSOM으로 Render Tree를 생성하고 Layout으로 화면에 어떻게 그릴지 설계한다. 그 결과를 화면에 Paint하는 과정을 Critical Rendering Path라고 한다.이때 화면을 조작할 때마다 dom이나 cssom이 변하고 그로인해 render tree, layout, paint 과정을 매회 반복하게 되는데 이..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1주차프로젝트 캠프: Next.js 과정 2기 2024. 7. 21. 02:35
학습 목표javascript의 역사와 전반적인 내용을 익히고 타입스크립트의 대표적인 개념을 배웁니다.이번주 수업에서 좋았던 점사실 첫날의 수업을 들을 때 javascript의 기초부터 시작하는 것을 보고 조금 당황했었다. 왜냐면 나는 이미 javascript를 할 줄 알고 Next.js 과정이었기에 바로 Next.js를 시작할 줄 알았었기 때문이다. 그래서 기초를 배우는 동안 내가 수업에 집중을 하지 못하고 다른 공부를 하려고 하면 어떡하지 라는 걱정이 들었는데 그건 쓸데 없는 걱정이었다는 것을 오전 수업이 끝나기도 전에 깨달았다.내가 javascript를 사용할 줄 알기에 기초도 매우 잘 알고 있었다고 자만했었는데 사실은 아니었다는 것을 첫날부터 알게 되었다. 생각해보면 나는 개발하기 급급해서 처음 공..
-
교육 준비: Node.js 및 Visual Studio Code 설치프로젝트 캠프: Next.js 과정 2기 2024. 7. 14. 22:56
1. Node.js 설치https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98 Nodejs 다운로드 및 설치1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크yoolabong.tistory.com 2. Visual Studio Code 설치1. VS Code 사이트 접..
-
[핀더펜] Cloudfront 대체 도메인개발 프로젝트: 핀더펜 2024. 7. 11. 23:57
CloudFront에서 자동으로 부여해주는 도메인 주소 대신 별도로 구매한 도메인을 사용할 수 있도록 대체 도메인을 설정했다.( Route53에 도메인 호스팅이 등록되어 있으며, S3와 CloudFront로 정적 페이지 배포가 완료된 후 상황부터 작성함) 1. ACM 인증서특정 도메인을 적용하고 싶은 CloudFront 베포 프로덕트에서 일반-설정-편집 을 선택한다. 도메인 네임 항목 추가 선택사용할 도메인 입력SSL 인증서 요청사용할 도메인을 작성하고 나머지는 기본 옵션으로 설정한 후 인증서를 요청했다.2. CloudFront 대체 도메인 설정 완료인증서 요청이 완료되면 생성한 인증서를 선택하고 설정을 완료하면 된다.그럼 이렇게 대체 도메인 설정이 완료되고 도메인이 추가된 것을 확인할 수 있다.3. R..
-
Webstorm 다운로드 및 설치IT 2024. 7. 2. 20:18
Node.js 설치https://yoolabong.tistory.com/entry/Nodejs-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98 Nodejs 다운로드 및 설치1. Nodejs 사이트 접속https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. Installer 설치아래 좀 더 최신 버전을 다운로드할 수 있는 링크yoolabong.tistory.com사이트 접근https://www.jetbrains.com/webstorm/ We..