분류 전체보기 (138) 썸네일형 리스트형 유저 정보 저장하기: JWT, 토큰, 로컬스토리지 JWT(JSON web token)모바일이나 웹에서 클라이언트와 서버 간 통신 시 사용자의 인증을 위해 사용된다.암호화된 토큰이다.클라이언트에서 주로 헤더에 담아 전송되면 서버에서 사용자의 정보 열람, 권한 부여 등을 수행한다. 우아한테크코스 학습로그 저장소우아한테크코스 크루들이 배운 내용을 기록하는 학습로그 저장소입니다.prolog.techcourse.co.kr JWT가 탈취될 때의 문제점- XSS 공격 : 해커(공격자)가 상대방(피해자)의 브라우저에 스크립트가 실행되도록 한다.- CSRF 공격 : 상대방(피해자)가 스스로 의도하지 않은 행위를 웹사이트에 요청하게 한다. JWT의 저장 장소세션 스토리지 : 모든 자바스크립트 코드를 통해 엑세스 할 수 있다.XSS 공격에 취약하다. CSRF 공격에는 .. 프론트앤드 빌드 에러 추적: vercel, Cannot find module Vite로 React 프로젝트를 진행하고, npm run build까지 무리없이 완료했다.그러나 depoly에서 계속 오류가 발생했다. error TS2307: Cannot find module이 오류에 대한 해결 방법은 여러가지 제시되고 있었다.그래서 하나씩 적용하며 해결책을 찾으려 했다. 1) 폴더 대소문자 오류대문자로 잘못 작성해서 소문자로 수정할 경우 캐시가 남아 반영되지 않을 수 있다.이 경우 캐시를 삭제해 해결할 수 있다.삭제 후 다시 add, push 하면 된다.그러나 오류는 사라지지 않았다.git rm -r --cached .2) ModuleResolution타입스크립트는 모듈 해석 전략에 해당하는 ModuleResolution는 모듈을 어디서 가져오게 할건지 설정한다.node와 class.. 리엑트 프론트앤드 테스트 프론트엔드의 테스트를 jest로 작성해 봤다. 리엑트에서 jest를 사용하기 위해서는 mock를 해주어야 한다.라우터의 Link 기능은 라우터 선언한 내에서만 사용할 수 있기 때문에 test 파일에서는 사용할 수 없다는 오류가 발생한다.따라서 mock로 기능을 사용할 수 있게 선언해야 한다. describe는 test들을 한군데 묶어서 관리할 수 있게 한다.describe에 두개의 test를 작성한 뒤 로그인 화면에 대한 테스트를 진행했다.위쪽에는 첫번째 test를 나타낸 것이다. render를 사용하고 BrowserRouter를 설정해 라우터에 접근할 수 있게 한다.screen에서 텍스트가 보여질 때 "Log in" 텍스트를 getByText가 접근하여 감지할 수 있게 하였다.결과로서 기대하는 것에 .. 프론트앤드 테스트 프론트앤드에서의 테스트 의미작성한 프로그램이 의도한대로 작동하는지 확인하기 위한 작업이다.프론트엔드 특성상 직접 시도해서 확인할 수 있으나, 휴먼 에러를 방지하기 위해 코드로 작성하여 확인한다. 테스트 종류1. 정적 테스트- Typescript, eslint- 구문 오류와 타입 오류를 감지해 런타임 에러를 방지한다.- 변수를 string 타입으로 지정하면 number 타입으로 접근할 때 에러를 발생시킨다. 2. 단위테스트- jest, mocha, react-testing-library- 하나의 함수, 메소드, 클래스, 모듈의 작동을 테스트한다.- Input에 대해 올바른 output을 줄 수 있는지 확인한다. 3. 통합테스트- react-testing-library, enzyme- 여러개의 모듈, 컴포넌.. [Javascript] 프로그래머스: 진수로 변환(toString, parseInt) 프로그래머스 내가 작성한 해결 방법이다. 1. 10진법 수를 3진법의 문자열로 바꾼다.2. 문자열을 나누어 반대로 적용된 열로 바꾼다.3.3진법 문자열을 3진법 문자열로 바꾼다. 공식문서의 주의사항.소수점 아래를 없애기 위해 parseInt값을 사용하는 것은 적절하지 않으며 Math.floor()을 사용하는 것을 권장한다.parseInt는 부호를 인식할 수 있다. 부호를 제거한 뒤 문자열에 대해 숫자 파싱을 진행한다.문자열을 입력할 때 0으로 시작한다면 8진수로 해석하는 오류를 발생할 수 있다.정규표현식을 이용하여 이같은 오류를 방지할 수 있다. 추천 수가 가장 많은 해결 방법이다. 공식문서https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/G.. 리액트를 다루는 기술[5]: ref. DOM에 이름 달기 ref는 DOM을 직접적으로 건드려야 할 때 사용합니다.특정 input에 포커스 주기스크롤 박스 조작하기Canvas 요소에 그림 그리기 등ref 설정1. 콜백 함수로 ref 설정2. createRef 설정class 내에서 선언하고, 내부 변수에 props로 넣어 사용합니다.this.input.current로 조회하여 사용합니다. 예시버튼을 눌렀을 때 맨 위나 맨 아래로 내리는 경우 DOM 노드의 값을 사용합니다.scrollTop: 세로 스크롤바 위치scrollHeight: 스크롤이 있는 박스 안쪽의 박스 높이clientHeigth: 스크롤이 있는 박스의 높이*scrollHeight > clientHeigth 의 경우 스크롤이 생깁니다. 리액트를 다루는 기술[3]: 컴포넌트 클래스형 컴포넌트state 기능 및 라이프사이클 기능을 사용할 수 있는 것이 함수형 컴포넌트와의 차이점입니다. 함수형 컴포넌트선언하기 편하고, 메모리 자원을 덜 사용한다는 장점이 있습니다.선언된 this가 종속된 객체를 가르킵니다. 화살표 함수함수형 컴포넌트의 한 종류로, 함수를 파라미터로 전달할 때 유용합니다.선언된 this가 종속된 인스턴스를 가르킵니다. 공식 메뉴얼에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장합니다. 상태(state)리엑트에서 상태는 변화할 수 있는 값을 나타냅니다. 클래스형 컴포넌트의 상태1. constructor로 매서드를 작성합니다.1-1. constructor을 사용할 때는 꼭 super(props)를 호출해야 합니다.1-2. this.state에 초기값을 선언합니다... 리액트를 다루는 기술[2]: JSX JSX : 자바스크립트의 확장 문법. 코드의 번들링 과정에서 바벨을 사용하여 자바스크립트 코드로 변환됩니다. JSX 특징1. 부모요소가 하나 있어야 합니다.컴포넌트를 하나의 DOM tree로 만들어서 Virtual DOM으로 컴포넌트 변화를 감지하기 위해서입니다.2. JSX 내부에서 {}을 사용하여 자바스크립트 표현식을 사용할 수 있습니다.3. JSX 내부에서 조건부 연산자를 사용할 수 있습니다.4. 컴포넌트는 undefined를 반환할 수 없습니다.return 문에 undefined만 있으면 안됩니다.5. 스타일을 적용할 때는 객체 형태로, 카멜 케이스로 작성하여 넣습니다.6. class가 아니라 className을 설정하여 css class를 사용하여야 합니다. 기타용어디렉토리(directory): .. 리액트를 다루는 기술[1] : 왜 리엑트인가? 리엑트를 다루는 기술[1] : 왜 리엑트인가?자바스크립트가 발전을 거듭하면서 자바스크립트만으로 규모가 큰 애플리케이션을 만들 수 있게 되었습니다.애플리케이션을 자바스크립트 만으로는 관리하기 어려우니 프레임워크를 사용하여 더 잘 다루려 하였습니다. 프레임워크는 모델과 뷰를 사용하는 아키텍쳐를 사용하여 구현하였습니다.model: 애플리케이션의 데이터를 관리하는 영역입니다.view: 사용자에게 보이는 부분입니다. 사용자가 데이터의 변경을 요청하면 변경한 부분을 반영하여 view로 보여줘야 합니다.리엑트는 라이브러리로 개발되었으며, 기존 뷰를 날려버리고 다시 랜더링하는 방법으로 이 부분을 구현했습니다.애플리케이션 구조가 단순해지고, 작성하는 코드 양이 줄어드는 장점이 있습니다. 또한 리엑트는 컴포넌트의 개념을 .. [SNS서비스 만들기] 게시물 작성, 타임라인 기능 만든 서비스의 목표에 좀 더 다가간 모습이다. 구현기능- 로그인기능- 소셜로그인 기능- 로그아웃 기능- 게시물 생성- 게시물에 이미지 넣기- 수정시 텍스트, 이미지 한번에 수정하기- 유저 정보 확인하여 프로필 나타내기- 유저가 생성한 게시물만 모아서 보기 구현중인 기능- 이미지 수정 후 바로 반영되게 하기: 현재는 새로고침을 해야 반영이 된다.- 무한스크롤- 상단으로 이동 기능- 검색기능- 북마크 기능- 좋아요 기능 이전 1 2 3 4 5 ··· 14 다음
