FE

[keyword] UI, UX, UI/UX 분석 ➡️ 칼럼 그리드 시스템은 아직 적용해보지 못해서 다음 figma프로토타입은 칼럼 그리드도 넣어보자 UI와 UX의 차이점에 대해 알게된 유닛이었다. 그리고 figma를 연습해보는 과제가 있었는데 figma가 단순 도형 그리기 외에 프로토타입 만드는 기능이 있다는 점이 너무 신기하고 재밌었다. 웹페이지를 빨리 만드는 느낌이라ㅋㅋㅋ 너무 재밌었다. 실제로도 이렇게 웹페이지가 만들어 진다면 정말 재밌겠지만 그러면 나는 직장을 얻기 힘들겠지??ㅋㅋㅋ 코딩하는게 재미없는건 아닌데 속도가 남달라서 그리고 아직 완전한 프로젝트를 해보지 않은 상태에서 figma는 중독성 있었다.

[keyword] UI 분석, UI 디자인 패턴, UX 분석, 피터 모빌의 UX 7요소, User flow, 사용성 평가, 제이콥 닐슨 10가지 사용성 평가 이번 과제는 클론을 진행했던 사이트의 UI/UX 분석이다. 클론을 진행한 사이트는 네모건축이다. 네모건축 네모건축, 주택공사, 근린생활시설, 전원주택리모델링, 목조주택, 스틸하우스, 펜션, 시공업체, 설계 및 견적문의 4mo.co.kr 📍UI 분석 사용중인 UI 디자인 패턴 탭(Tap) ➡️ Portfolio 주택 | 근린생활시설 부분, 네비게이션바에 적용되었다. 드롭다운(Drop down) ➡️ 온라인 문의 연락 가능한 시간을 선택할 때 사용되었다. 캐러셀(Carousel) ➡️ 메인페이지의 메인이 되는 부분에 자동으로 넘어가고, 정지 기능이 있는..

[keyword] UI, UX, UI와 UX의 차이점 🔮 UI : User Interface - 사용자 인터페이스 🔮 UX : User Experience - 사용자 경험 UI UI는 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 크게 CLI와 GUI로 나뉘며 CLI(Command Line Interface, 명령 줄 인터페이스) : 터미널 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) : 운영체제 화면, 애플리케이션 화면 마우스와 키보드 등도 컴퓨터와 상호작용을 하기 위해 필요한 시스템이므로 UI이다. UX UX는 사용자 경험이다 즉 사용자가 어떤 서비스를 경험하고 느끼고 생각하는 총체적 경험을 뜻한다. UX에는 여러 요소가 있겠지만 그 중 하나가 UI이다. 특히 ..

[keyword] 재귀, base case, recursive case, JSON 구조, Tree UI 재귀함수란 자기 자신을 호출하는 함수이다 //num >= 0 //0부터 num까지의 합을 구하는 재귀함수 function recursive(num){ if(num === 0){ return 0 // base case } return num + recursive(num-1) //recursive case } base case는 예외가 되는 즉 재귀함수를 멈추는 식을 의미하며 recursive case는 반복하려는 식을 의미한다. 재귀를 사용하는 이유는 1. 반복문을 사용할 때보다 간결할 때 2. 배열이나 객체등 반복문이 얼마나 중첩되어야 하는지 알지 못할 때 3. 주어진 문제를 비슷한 구조의 더 작은 문..

SSR : Server Side Randering CSR : Client Side Randering 🔮 SSR 웹페이지를 서버에서 랜더링 초기 랜더링 속도가 빠름 동적 웹사이트 SEO(Serch Engine Optimization) 즉 검색 엔진 최적화에 적합 사용자가 페이지를 이동할 때마다 서버에서 html문서를 랜더링 해서 보여줌(서버 과부화 주의) SEO가 최우선인 경우에 사용 (블로그) 🔮 CSR 웹페이지를 클라이언트에서 랜더링 초기 랜더링 속도가 걸림( 기본 골격이 될 html문서와 js문서를 보내기 때문) 정적 웹사이트 SEO에 적합하지 않음 (기본 골격이 될 html문서에는 내용이 거의 없기 때문) 사용자가 페이지 이동할 때 필요한 정보만 가져와서 랜더링 최근 많이 쓰이는 방법 사용자와의 상..

Section 2 회고 벌써 section2가 끝났다는게 믿겨지지 않는다ㅜㅜ section1보다 훨씬 빠르게 느껴졌고, 난 아직 많이 부족하구나를 매일 깨닫고 있다. section2를 하면서 좋은 페어분들도 많이 만날 수 있었고, React와 서버의 일부분을 배울 수 있어서 즐거웠다. 물론 과제는 쉽지 않았지만ㅎㅎ 복습이 매우 중요하게 느껴졌던 시간이 많았다. section3에서도 학습이 끝나면 꼭 복습을 해야겠다. 그리고 section3에서는 생활패턴이 정리가 됐으면 좋겠다. 1. 목표 📍 코드스테이츠 수료 후 3개월 이내에 복지 좋은 회사에 들어가기 📍 내가 만들어 보고 싶은 웹사이트 만들어서 배포해보기 2. Keep & Problem Keep 👍 6시에 일어나서 한 시간씩 꾸준히 공부하고 기록한 것..

한/영 키 한글일 때 - ₩ 영어일 때 - ` 지금까지 어쩔때는 백틱(`)이 되고 어쩔때는 (₩)원화 모양이 나오는지 궁금했지만 딱히 쳐보지 않았는데 검색해보니 이유가 매우 간단했다;;

[Keyword] node.js, express,미들웨어, req.params, req.query, res.json() node.js로 만든 서버를 express를 사용하여 리팩토리해봤다. 확실히 express를 사용하면 간결해지고 특히 express 미들웨어로 코드를 짜면 cors요청, 바디를 받아오는 법등이 간결해졌다. 미들웨어는 공장에서 제조의 한 부분이라 비유하면 이해가 쉽다. 찹쌀떡 만드는 공장에서 1. 반죽 뜯어서 밀고 2. 속 넣고 3. 모양만드는 공정이 미들웨어이다. next()를 꼭 넣어줘야 공정이 끝나면 다음 공정으로 넘어갈 수 있다는 점을 주의하자!! req.params vs req.query req.params ➡️ path parameter > 유일한 값 예를 들면 uuid req..