👍 잉끼글
- [react-chatbot-kit] 챗봇 구현하기 - 3 이전 글 : 2022.06.09 - [react-chatbot-kit] 챗봇 구현하기 - 2 챗봇 스타일링하기 🌮 기본 구조 파악하기 초기 상태의 챗봇은 요렇게 생겼다. 스타일해줄 부분을 정리해보면 다음과 같다. 챗봇 화면 자체 위치 헤더 챗봇 프로필 아이콘 챗봇 메세지 사용자 프로필 아이콘 사용자 메세지 메세지 입력 창 보내기 버튼 처음부터 뜯어보면서 차근차근 스타일링해보자! 🌮 챗봇 화면 자체 위치 조정 챗봇 화면 위치의 경우 거의 화면 오른쪽 하단에 고정된 것을 많이 볼 수 있다. 나도 그렇게 해 줄 예정이다! 공식문서의 Customizing CSS 파트를 참고하면 스타일링할 클래스들의 이름을 쉽게 찾을 수 있다. styles 폴더에 chatbot.css 파일을 추가해 복사 붙여 넣기 해주자. /*.. 2022.06.09
- HTML 코드를 React 코드로 변환해보기 🧇 HTML 코드 작성하기 public이라는 디렉토리는 create-react-app에서 npm을 실행시켰을 때, 파일을 찾는 document root를 의미한다. public디렉토리 안에 간단한 pure.html을 추가한다. MEOW The cat rules the world! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 터미널에서 npm을 실행시키고 localhost:3000/pure.html에 들어가보면 다음과 같은 화면을 볼 수 있다. 🧇 React로 Component 만들기 pure.html과 App.js를 함께 보며 진행한다. 우선 미리 말하자면 Component를 만드는 부분은 이렇게 구성된다. class App extends C.. 2021.01.08
✨ 최신글
- 효과적인 코드 리뷰를 위해서 https://engineering.linecorp.com/ko/blog/effective-codereview#enhance-skill 효과적인 코드 리뷰를 위해서종종 팀 내에서 코드 품질이 이슈가 됩니다. 그리고 유닛 테스트와 코드 커버리지를 향상시키는 방법에 대해 모두가 한 마디씩 던집니다. 하지만 그리 오래가진 못합니다. 모두들 다시 바빠지면engineering.linecorp.com 코드 리뷰 프로세스를 효율적으로 하기 위해서리뷰어를 희귀한 자원으로 다루는 것이 중요하다코드 리뷰 목표변화를 작게 유지하자리뷰는 자주 짧은 세션으로 진행하자리뷰를 위해 최대한 빨리 PR을 보내자의미 있는 PR을 만들기에 충분한 정보를 제공하자코드 분석툴을 활용하고 코드 스타일을 확인하자1시간에 300줄 정도 리뷰하는 .. 2024.08.08
- 인증과 인가 우아한 테크코스 2기내용인증과 인가란인증의 방법목표인증과 인가에 대한 지식 습득 및 복습프로젝트에서 선택한 인증 방식에 대한 근거인증이란식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정인가란인증된 사용자에 대한 자원 접근 권한 확인인증과 인가란자원을 적절한/유효한 사용자에게 전달/공개하기 위한 방법인증 단계1. 인증하기 (Request Header)무상태성(Stateless): 서버는 클라이언트에서 오는 요청이 각각 연관관계가 없다고 생각하고 처리한다Request Header 활용하기사용자가 http://www.cocktailpick.com/login 에 로그인 요청을 보내기 위해 직접 타이핑해http://user:1q2w3e!@www.cocktailpick.com/login 요청 시 브라.. 2024.06.04
- 리라우팅vs리다이렉션 리라우팅 vs 리다이렉션: 핵심 차이와 활용법 비교리라우팅과 리다이렉션은 웹 개발에서 자주 사용되는 용어이지만, 종종 혼동되기도 합니다. 두 가지 개념은 유사하지만, 중요한 차이점이 있으며, 상황에 따라 적절하게 사용해야 합니다. 1. 정의:리라우팅: 서버 측에서 사용자 요청을 다른 URL로 변경하는 프로세스입니다. 실제로 사용자 페이지 이동이 일어나지 않고, 서버에서 조용히 처리됩니다.리다이렉션: 사용자를 다른 URL로 보내는 프로세스입니다. 브라우저에서 새로운 요청을 발생시켜 실제 페이지 이동이 일어납니다.2. 주요 차이점:구분리라우팅리다이렉션작동 방식서버 측에서 처리클라이언트 측(브라우저)에서 처리사용자 인식사용자가 인지하지 못함사용자가 새로운 URL을 확인 가능주소 표시줄 변화새로운 URL 반영되.. 2024.06.04
- 1.6.1 구조 분해 할당 일반적인 자바스크립트나 Node.js 기반으로 한 코드와 리액트 코드를 비교하면 리액트 코드가 상대적으로 독특한 모습을 띰. 이러한 독특함은 JSX 구문 내부에서 객체를 조작하거나 객체의 얕은 동등 비교 문제를 피하기 위해 객체 분해 할당을 하는 등 리액트의 몇 가지 독특한 특징에서 비롯됨. 또한 자바스크립트는 매년 새로운 버전과 함께 새로운 기능이 나옴. 이러한 자바스크립트 표준을 ECMAScript라고 하는데, 작성하고자 하는 자바스크립트 문법이 어느 ECMAScript 버전에서 만들어졌는지도 파악해야 함. 왜냐하면 모든 브라우저와 자바스크립트 런타임이 항상 새로운 자바스크립트 문법을 지원하는 것이 아니기 때문. 예를 들어, 인터넷 익스플로러 11은 ECMAScript 5(ES5)까지만 지원하기 때문.. 2024.05.14