ChatGPT 선생님과 성장하는 독학 개발자의 기록

2023년 10월, 원티드 프리온보딩 프론트엔드 챌린지 요약 로그인은 무엇일까?로그인은 사용자가 시스템(컴퓨터 or 웹 사이트)에 액세스하기 위해 시스템에 식별자 정보를 입력하는 것이다. 이 때, 컴퓨터 보안 절차는 필수적인 부분이다. 해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 액세스할 수 있다. 로그인은 액세스를 제한할 뿐만 아니라 시스템 로그 파일에 자동으로 입력되는 데이터 형식의 감사 추적도 제공한다. 즉, 쉽게 말해 "사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차"를 말한다.주문, 리뷰, 쿠폰, 기타 등 회원정보가 필요한 서비스에는 로그인이 필요하다.또한, 특정 서비스마다 접근 가능한 회원도 나눌 수 있다. 로그인 구현을 위한 개념 - 백..

2023년 9월, 원티드 프리온보딩 프론트엔드 챌린지 요약 이제는 데스크탑 기준으로 웹 사이트를 개발해본다고 해보자. 데스크탑 기준으로 다양한 브라우저가 존재하며, 현재 기준으로 크롬, 엣지, 웨일, 사파리, IE 순으로 점유율이 높다.모바일&태블릿 기준으로 본다면, 크롬, 사파리, 삼성인터넷, 웨일, 기타 순으로 점유율이 높다. 우리가 웹 사이트를 개발할 때, 고려해야 할 것은 바로 '브라우저 호환성'이다.보통 'WebKit'을 떠올릴 수 있는데, 이는 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크다.쉽게 말해, 브라우저마다 각기 다른 대응을 할 수 있다는 것이다. 우리가 브라우저의 호환성을 알아야 하며 중요하게 생각해야 할 필요가 있을까?당연히 있다. 이는 사이트 최적화..

2023년 9월, 원티드 프리온보딩 프론트엔드 챌린지 요약 미디어쿼리기본적으로 'HTML link 태그'로 사용한다.그리고, CSS에서 '@media' 키워드로 사용하여 처리한다.// link 태그// @media zldnjem@media all and (조건) and (조건) { }  미디어쿼리 → 기본@media only all and (조건) and (조건) { }all, 미디어 설정, 생략 시 기본값 'all', 'screen' | 'print'를 주로 사용only, 특정 미디어에만 적용하는 경우, 'screen' | 'print'를 지정하는 경우and, 미디어 쿼리의 조건은 모두 'and' 키워드로 연결조건반드시 괄호 () 안에 조건 입력min → 최소값이 일치할 때, 입력한 사이즈 이상부터 적..

2023년 9월, 원티드 프리온보딩 프론트엔드 챌린지 요약 기본Mobile모바일웹이 시작될 당시, 모바일 기기였음에도 미디어쿼리 지원 기기가 많지 않았다.데스크톱부터 작업을 진행할 시, 오버라이딩이 많이 발생하는 문제가 있었다.복잡한 구조를 줄이기 보다 단순한 구조를 늘리는 것이 쉽다. viewportviewport, 모바일 브라우저가 웹 페이지를 어떻게 렌더링해야 하는지 설정width, 렌더링 영역의 크기를 설정하며, 보통 'device-width'로 설정initial-scale, 웹 페이지가 처음 로딩될 때 줌 레벨 제어 일반적으로 VS Code에서 Emmet(html:6)를 통해 자동으로 생성되는 HTML 기본 코드이다. 웹표준(Web standards)월드와이드웹과 관련된 기술의 표준 문법을 지키..

2023년 9월, 원티드 프리온보딩 프론트엔드 챌린지 요약 우리는 개발하면서 기본 코드에 집중하고 있을까?우선, 웹에서의 기본적인 지식인 HTML, CSS, JavaScript를 배우게 됐을 때, 우리는 HTML과 CSS를 너무 간단하게 생각하고 지나가는 것이 아닐까? 부트캠프나 학원의 커리큘럼만 봐도 대략 일주일 정도만 배울 것이다.과연, HTML과 CSS를 단 일주일 만에 우리가 제대로 구현할 수 있을까? 아마 아닐 것이다.우리는 기본적인 코드와 반응형 개발을 위해서 HTML과 CSS를 더 많은 시간동안 제대로 배울 필요가 있다. 신입이 가장 어려워하는 부분은 '웹표준', '웹접근성', '반응형웹', '검색엔진최적화'이다. 이번 시간에는 반응형웹에 대해 배울 수 있을 것이다. 반응형 웹사이트이는 하나..

2023년 8월, 원티드 프리온보딩 프론트엔드 챌린지 요약 복습LighthouseProduction Build에서 확인이 가능하며, Production Build 시 나름 최적화가 진행되어 Web Vital이 상당 부분 개선된다.MinificationTree Shaking PerformanceRuntime 성능 측정렌더링 성능자바스크립트 성능메모리 관리반응성 (First Input Delay)네트워크 성능주요 정보LoadingScriptingRenderingPainting ProfilerProvider부터 렌더링을 하는가?변화가 감지된 페이지만 렌더링하는가? 최적화, Code SplittingBundle Size 줄이는 방법전체 용량이 줄어드는 것이 아닌 하나의 번들을 여러 개로 잘게 쪼개는 방법이다.R..

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약 프로젝트를 구성할 때 생각해봐야 할 것들서비스 분석시장 환경유저 사용 패턴(UX Research)어떤 상황에서 유저가 서비스를 사용하고 떠올릴까?어떤 플로우로 서비스를 경험할까?문제 정의 - 사용자의 니즈에 집중!상황은 명확하지만, 서비스가 없을 때는 신규 서비스로 구성하기기존 서비스가 있지만, 유저의 니즈와 맞지 않거나 유저의 니즈를 충분하게 해결하지 못한다면, 서비스 개선으로 구성하기문제 해결 방안유저의 니즈를 피처로 만들어가는 과정으로 니즈에 따른 유저 액션 중심으로 핵심기능 구체화하기유저의 니즈에 맞게 피처를 개선하는 과정으로 사용자 여정 지도로 유저 스토리와 매칭되는 화면/플로우 확인하기정보 구조 & 와이어프레임 & 플로우 구성U..

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약 UI 디자인을 위한 Color System색상구체적인 사물의 빛, 추상적인 개념이나 감정을 표현할 수 있다.색상으로 정보를 직관적으로 전달할 수 있고, 그래픽/공간에서의 색상 연출이 가능해진다.또한, 브랜드 정체성을 표현할 수 있다. 기능을 위한 색상정보 위계 표현이 가능하다. (Elevation)해동 유도가 가능하다. (Affordance)피드백을 줄 수 있다. (Feedback) 서비스 정체성을 위한 색상브랜드 컬러를 가질 수 있다.예. 라인, 인스타그램, 스포티파이, 카카오택시 디자인 시스템에서 색상 정의Color Palette다양한 색상을 명도별로 나열한 색상 목록을 말한다.목적에 따라 정의되기 보다는 색상 자체의 이름과 명도를 가..