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

13. 서비스의 인증과 권한 부여 이번 장에서는 서비스와 보안에 관련하여 정리를 진행하려고 한다. 스프링에서 보안을 적용하고 싶을 때는 스프링 시큐리티(Spring Security)를 사용한다. 스프링 시큐리티를 통해서 토큰을 활용하여 요청을 처리하는 보안 기법에 대해서 공부해 보겠다. 13.1 보안 용어 이해 스프링 시큐리티를 이해하기 위해서는 먼저 보안에 관련된 용어들에 대해서 공부할 필요가 있다. 먼저 용어들에 대해서 정리해 보고 시작하겠다. 13.1.1 인증 인증은 사용자가 누구인지 확인하는 단계를 말한다. 인증의 대표적인 예시로는 아이디와 비밀번호를 이용하는 로그인이 있다. 로그인에 성공하면 애플리케이션의 서버는 응답으로 사용자에게 토큰(Token)을 전달한다. 이 토큰을 통해서 사용자는 원하는..

23-24/Spring 1 2024. 1. 5. 10:00

Context : 같은 문맥( 목적 ) 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 사용 이유 리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생하는 Props Drilling 문제를 해결하기 위해 사용됩니다. → Context 이용 시 단계마다 일일이 Props를 전달하지 않고도 컴포넌트 트리 전역에 데이터를 공급할 수 있어 Props Drilling 문제를 간단하게 해결할 수 있습니다. ContextAPI : Context를 만들고 다루는 리액트 기능으로 createContext, Context.Provider 등이 있습니다. Context 만들기 import React from "react"; const MyContext = React.createContext(defaultVa..

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

9장 컴포넌트 트리에 데이터 공급하기 Context 상태 변화 코드를 쉽게 분리할 수 있다. Context를 사용하는 이유 'Props Drilling' 문제를 해결하기 위해 Props Drilling : Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되어야 하는데, 때로는 중간에 있는 여러 컴포넌트를 통해 전달되어야 하는 경우가 있다. 이때 발생하는 것이 Props Drilling 문제이다. Context란? 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 ex) project2의 Body, Sidebar, Main은 모두 "할 일을 관리한다"라는 문맥 아래에서 동작하는 컴포넌트 ContextAPI Context를 만들고 다루는 리액트 기능 Context 만들기 import React..

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

이번장에서는 보안과 관련된 용어와 개념을 알아보고 스프링에 보안을 적용할 때 사용하는 스프링 스큐리티(Spring Security)에 대해 알아보겠습니다. 먼저 보안과 관련된 용어를 간단하게 설명하겠습니다. 인증(authentication) : 사용자가 누구인지 확인하는 단계를 의미합니다. 대표적으로 '로그인'이 있습니다. 로그인이 성공하면 애플리케이션 서버는 응답으로 사용자에게 토큰(token)을 전달합니다. 로그인에 실패한 사용자는 토큰을 전달받지 못해 원하는 리소스에 접근할 수 없게 됩니다. 인가(authorization) : 앞서 설명한 인증을 통해 검증된 사용자가 애플리케이션 내부의 리소스에 접근할 때 사용자가 해당 리소스에 접근할 권리가 있는지를 확인하는 과정을 의미합니다. 일반적으로 인증 단..

23-24/Spring 2 2024. 1. 5. 10:00

13.1 보안 용어 이해 13.1.1 인증 인증(authentication): 사용자가 누구인지를 확인하는 단계 가장 대표적인 인증의예가 "로그인" 데이터베이스에 등록된 아이디와 패스워드를 사용자가 입력한 아이디와 비밀번호와 비교해 일치 여부 확인 로그인에 성공하면 애플리케이션 서버는 응답으로 사용자에게 토큰(token)을 전달 로그인에 실패한 사용자는 토큰을 전달받지 못해 원하는 리소 스에 접근할 수 없음 13.1.2 인가 인가(authorization): 인증을 통해 검증된 사용자가 애플리케이션 내부의 리소스에 접 근할 때 사용자가 해당 리소스에 접근할 권리가 있는지를 확인하는 과정 예) 로그 인한 사용자가 특정 게시판에 접근해서 글을 보려고 하는 경우 게시판 접근 등급을 확인해 접근을 허가 하거나 ..

23-24/Spring 3 2024. 1. 5. 10:00