본문 바로가기

분류 전체보기

비트맵과 벡터 및 레이어 피그마는 벡터 기반의 소프트웨어 이다. 부분적 수정에 아주 용이하다. 더보기
피그마 점유율 비교 Figma Where teams design together Figrma helps teams create, test, and ship better designs from start to finish. invisoin은 프로토타이밍 전문 툴이다. 한마디로 Figma 는 All-In-One ! 더보기
디자인 씽킹과 프로토 타입 피그마는 그저 프로토타입을 만들기위한 툴 그 이상 그 이하도 아니다. 목표 설정 =>회원가입률 높이기, 구매율 높이기 공감하기 => 사용자에 대해서 최대한 배운다. 무엇이 문제이고 어떤 니즈가 있는지 남성신발 플랫폼예시 : 사용자들이 어떻게 신발을 검색하고 구매하는지. 어려움이 없는지. 파악 정의하기(문제점 도출) => 어떤 문제에 대해서 해결해야하는지에 대한 정의(너무 많은 해결해야할것중 제일 필요한게 무엇인지 최소화) 아이-데이션 => 해결할 수 있는 아이디어에 대해 좋은 아이디어를 뽑는다. ex) 브래인 스토밍 프로-토타입 => 모든 아이디어를 출시까지 가져갈 순 없다. 최종적으로나온 1,2개의 아이디어를 테스트 및 시뮬레이션을 하기 위해 만듬 테스트 => 프로토 타입을 사용자에게 사용해 보도록 하.. 더보기
UX/UI 디자인 전체 프로세스 (+왜 피그마 일까 ?) https://www.inflearn.com/course/%ED%94%BC%EA%B7%B8%EB%A7%88-ui%EB%94%94%EC%9E%90%EC%9D%B8/ 위 강의를 토대로 공부한 내용을 기록하는 포스팅 입니다~ UI 디자인이 능력을 갖추는 비결 1. UX,UI 디자인의 원칙 및 원리가 있다. 2. 잘된 디자인 따라해보기 3. 평준화 되고 있는 UI 디자인 공감하기 : 사용자에 대해서 파악하고 이해하기 정의하기 : 사용자가 가지고 있는 문제점 정의 및 정리 아이데이션 : 문제를 해결하기 위해 솔루션을 탐색하고 브레인스토밍 프로토타입 : 아이데이션 단계에서 나온 아이디어를 시각화 테스트 : 사용자에게 테스트 후 피드백 받기 출시 UI 디자인이 가장 많이 관여 하는 단계 : 아이데이션 과 프로토 타입.. 더보기
테스트 커버리지 유닛 테스트를 작성하다 보면, 전체 코드 중에서 어떤 부분이 테스트되고 어떤 부분이 테스트되지 않는지 궁금해집니다. 어떤 부분이 테스트되지 않는지를 알아내어 해당 부분의 테스트 코드를 작성할 수 있습니다. 전체 코드 중에서 테스트되고 있는 코드의 비율과 테스트되고 있지 않은 코드의 위치를 알려주는 Jest의 기능이 있습니다. 이 기능은 커버리지(coverage) 기능입니다. 테스트 결과가 출력되고, 추가적으로 표가 하나 더 출력됩니다. 표의 열을 살펴보면, 각각 File (파일과 폴더 이름), % Stmts (구문 비율), % Branches (if문 등의 분기점 비율), % Funcs (함수 비율), % Lines (코드 줄 수 비율), Uncovered Line #s (커버되지 않은 줄 위치)입니다... 더보기
유닛 테스트 middlewares.js에 있는 isLoggedIn과 isNotLoggedIn 함수를 테스트해보겠습니다. isLoggedIn 함수와 isNotLoggedIn 함수를 불러와 네 개의 테스트를 작성했습니다. 아직 내용은 입력하지 않았습니다. describe 함수는 처음 보는 것일텐데요. 이 함수는 테스트를 그룹화해주는 역할을 합니다. test 함수와 마찬가지로 첫 번째 인수는 그룹에 대한 설명이고, 두 번째 인수인 함수는 그룹에 대한 내용입니다. 테스트 내용을 작성하기에 앞서 middlewares.is를 다시 보고 오겠습니다 실제 코드에서는 익스프레스가 req, res 객체와 next 함수를 인수로 넣었기에 사용할 수 있었지만, 테스트 환경에서는 어떻게 넣어야 할지 고민됩니다. req 객체에는 isAuth.. 더보기
테스트 준비하기 이번 장에서는 NodeBird 서비스에 테스팅을 적용해보겠습니다. 실제 서비스를 개발 완료한 후, 개발자나 QA들은 자신이 만든 서비스가 제대로 동작하는지 테스트해봅니다. 이 때 기능이 많다면 일일이 수작업으로 테스트하기에는 작업량이 너무 많을 수 있습니다. 이런 경우 테스트를 자동화하여 프로그램이 프로그램을 테스트하도록 만들기도 합니다. 또한, 테스트 환경과 실제 서비스 환경은 다르므로 테스트하는 데 제약이 따를 수도 있고, 테스트 결과와 실제 동작 결과가 다를 수도 있습니다. 이럴 때는 테스트 환경에서 실제 환경을 최대한 흉내내서 작업합니다. 단, 테스트를 아무리 철저하게 해도 모든 에러를 완전히 막을 수는 없습니다. 보통 에러는 개발자가 예상하지 못 한 케이스에서 발생하므로, 예상하지 못한다면 그에.. 더보기
CORS 이해하기 이전 절에서 NodeCat이 nodebird-api를 호출하는 것은 서버에서 서버로 API를 호출한 것입니다. 만약 NodeCat의 프론트에서 nodebird-api의 서버 API를 호출하면 어떻게 될까요? routes/index.js에 프론트 화면을 렌더링하는 라우터를 추가합니다. 프론트 화면도 추가 clientSecret의 {{key}} 부분이 Nunjucks에 의해 실제 키로 치환되어 렌더링됩니다. 단, 실제 서비스에서는 서버에서 사용하는 비밀 키와 프론트에서 사용하는 비밀 키를 따로 두는 것이 좋습니다. 보통 서버에서 사용하는 비밀 키가 더 강력하기 때문입니다. 프론트에서 사용하는 비밀 키는 모든 사람에게 노출된다는 단점도 따릅니다. 데이터베이스에서 clientSecret 외에 frontSecre.. 더보기

티스토리툴바