안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 유라파의 생성형 AI에 대한 이야기인데요, ChatGPT를 비롯한 생성형 AI에 대한 특징에 대해 알아봅시다!

Corner 코너 2024. 1. 19. 18:16

16장 리덕스 라이브러리 이해하기 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능하다. 코드의 유지 보수성을 높여 주고 작업 효율도 극대화 해준다. 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리할 수 있다. 16.1 개념 미리 정리하기 16.1.1 액션 상태에 변화가 있으면 액션이 발생한 것이다. 액션의 하나의 객체로, 액션 객체로 불린다. 액션 객체는 type 필드를 반드시 가지고 있어야함. 외의 값들은 작성자가 원하면 설정. //액션 객체의 예시 { type: 'TOGGLE_VALUE' data: { id: 1, text: '리덕스 배우기' } } 16.1.2 액션 생성 함수 액션 생성 함수(action creator) : 액..

23-24/React.js 3 2024. 1. 19. 10:00

익스프레스 미들웨어 배포용으로 수정 if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); } else { app.use(morgan('dev')); } - process.env.NODE_ENV는 배포 환경인지 개발 환경인지를 판단할 수 있는 환경 변수이다 - 배포 환경일 때는 morgan을 combined 모드로 사용하고, 개발 환경일 때는 dev 모드로 사용한다. .env 파일은 정적 파일이기 때문에 NODE_ENV를 동적으로 바꾸는 방법이 필요하다. (뒤에 cross-env 설명 참고) const sessionOption = { resave: false, saveUninitialized: false, secret: proc..

23-24/Node.js 1 2024. 1. 19. 10:00

🌟17장 키워드🌟 pm2 redis AWS Lightsail 1. 타입스크립트 기본 문법 타입스크립트는 자바스크립트에 타입이 명시적으로 추가된 언어 (문자열, 숫자, 불 값, 객체 등의 자료형) 타입스크립트 -> tsc(컴파일러) -> 자바스크립트 -> 노드 실행 디노(deno): 타입스크립트를 실행할 수 있는 런타임. 그러나 이것 대신 위 방법을 더 많이 사용함 typescript 패키지, tsc 명령어를 통해 컴파일러 작동, tsc --init 명령어를 통해 tsconfig.json 설정파일 만들기 tsconfig.json 내용: 옵션이 굉장히 다양하다 (주석처리 되어있음) 더 많은 설명: https://aka.ms/tsconfig TSConfig Reference - Docs on every TSC..

23-24/Node.js 2 2024. 1. 19. 10:00

1. 리덕스 라이브러리 이해하기리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. [액션] 상태에 어떤 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현된다. 액션 객체는 다음과 같은 형식으로 이루어져 있다.{ type: 'TOGGLE_VALUE' }액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣..

23-24/React.js 2 2024. 1. 19. 10:00

16장 리덕스 라이브러리 이해하기 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하나의 객체로 표현되는데요. 액션 객체는 다음과 같은 형식으로 이루어져 있습니다. { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 됩니다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참..

23-24/React.js 1 2024. 1. 19. 10:00

안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 냥냥펀치의 표준 코딩 규칙에 대한 이야기인데요, 코드를 간결하고 명확하게 쓰기 위한 규칙에 대해 알아봅시다!

Corner 코너 2024. 1. 12. 15:28

프로젝트 준비하기 [감정 일기장] 앱을 만들기 위한 순서는 다음과 같다. 요구사항 분석하기 리액트 앱 만들기 폰트 설정하기 이미지 준비하기 요구사항 분석하기 [감정 일기장]은 일기를 작성하면서 그날의 자기감정을 표현하는 서비스이다. 총 4페이지로 구성되어 있다. Home 페이지 인덱스 페이지: 사용자가 앱에 접속하면 처음으로 만나는 페이지이며, 경로는 '/'이다. 상단 헤더 섹션과 일기 리스트로 구성되어 있다. 상단 헤더 섹션: 월 단위로 일기를 조회하는 기능, 좌우 버튼을 클릭하면 월 단위로 날짜를 이동한다. 일기 리스트 섹션: '최신순', '오래된 순'으로 일기 리스트를 정렬하는 기능, 새로운 일기를 추가하는 기능이 있다. 버튼을 누르면 새로운 일기를 작성하는 New 페이지로 이동한다. New 페이지..

23-24/React.js 2 2024. 1. 12. 10:00

🌟15장 키워드🌟 pm2 redis AWS Lightsail 11장의 NodeBird 앱에 여러 패키지를 적용해 배포해 보겠습니다. 15.1 서비스 운영을 위한 패키지 📌 morgan과 express-session app.js에서 개발용 미들웨어를 배포용으로 변경 if (process.env.NODE_ENV === 'production') { app.enable('trust proxy'); app.use(morgan('combined')); app.use( helmet({ contentSecurityPolicy: false, crossOriginEmbedderPolicy: false, crossOriginResourcePolicy: false, }), ); app.use(hpp()); } else { a..

23-24/Node.js 2 2024. 1. 12. 10:00

웹 소켓 이해하기 - 웹 소켓은 실시간 양방향 데이터 전송을 위한 기술로, WS라는 프로토콜을 사용한다. - Socket.IO는 웹 소켓을 편리하게 사용할 수 있도록 도와주는 라이브러리이다. ws 모듈로 웹 소켓 사용하기 "dependencies": { "cookie-parser": "^1.4.6", "dotenv": "^16.0.1", "express": "^4.18.1", "express-session": "^1.17.0", "morgan": "^1.9.1", "nunjucks": "^3.2.1", "ws": "^8.2.3" }, - 위 코드를 참고하여 package.json 파일을 작성하고, 패키지를 설치한다. - https://github.com/zerocho/nodejs-book의 소스코드를 참..

23-24/Node.js 1 2024. 1. 12. 10:00

프로젝트 준비하기 요구사항 분석하기 → 리액트 앱 만들기 → 폰트 설정하기 → 이미지 준비하기 1. 요구사항 분석하기 Home 페이지 사용자가 앱에 접속하면 처음으로 만나는 페이지다. 인덱스 페이지라고도 부르며 경로는 ‘/’ 입니다. 대문 역할을 합니다. 헤더: 월 단위 일기 조회, 좌우버튼으로 날짜 이동 일기 리스트: 일기 정렬, 버튼으로 New 페이지로 이동해 일기 추가 New 페이지 새로운 일기를 추가하는 페이지이며 경로는 ‘/new’입니다. 헤더: 버튼 날짜 입력, 감정 이미지 선태그 일기 작성 폼 하단: , 버튼, 버튼은 Home 페이지로 돌아감 Diary 페이지 작성한 일기를 상세히 조회하는 페이지며 경로는 ‘/diary/id’이다. Home에서 일기 리스트를 조회한 다음, 특정 일기를 클릭하..

23-24/React.js 1 2024. 1. 12. 10:00

프로젝트 준비하기 요구사항 분석하기 → 리액트 앱 만들기 → 폰트 설정하기 → 이미지 준비하기 순으로 진행한다. 1. 요구사항 분석하기 어떤 페이지가 있고 무슨 기능이 있는지 알아보도록 하자. Home 페이지 사용자가 앱에 접속하면 처음으로 만나는 페이지다. 인덱스 페이지라고도 부르며 경로는 ‘/’다. 헤더: 월 단위 일기 조회, 좌우버튼으로 날짜 이동 일기 리스트: 일기 정렬, 버튼으로 New 페이지로 이동해 일기 추가 New 페이지 새로운 일기를 추가하는 페이지이며 경로는 ‘/new’이다. 헤더: 버튼 날짜 입력, 감정 이미지 선태그 일기 작성 폼 하단: , 버튼, 버튼은 Home 페이지로 돌아감 Diary 페이지 작성한 일기를 상세히 조회하는 페이지며 경로는 ‘/diary/id’이다. Home에서 ..

23-24/React.js 3 2024. 1. 12. 10:00