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

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를 더 많은 시간동안 제대로 배울 필요가 있다. 신입이 가장 어려워하는 부분은 '웹표준', '웹접근성', '반응형웹', '검색엔진최적화'이다. 이번 시간에는 반응형웹에 대해 배울 수 있을 것이다. 반응형 웹사이트이는 하나..

API 호출에 필요한 상태, 한 눈에 관리하기 const [registerData, setRegisterData] = useState() const [step, setStep] = useState("가입방식") return ( {step === "가입방식" && { setRegisterData(prev => ({ ...prev, 가입방식: data })) setStep("주민번호") }} />} {step === "주민번호" && setStep("집주소")} />} {step === "집주소" && { await fetch("/api/register", { data }) // API 호출 장소변경 setStep("가입성공") }} />} {step === "가입성공" && } ) 위의 코드를 "Step"..

프론트엔드에서 성능은 무엇일까? 웹 화면을 구현하고 서버로부터 데이터를 받아오는 과정에서 리소스들을 사용자들에게 빠르게 보여줄 수 있기 때문이다. 즉, "성능 == 속도"이다. 그렇다면, 성능이 왜 중요할까? 사용자 유지, 웹 사이트의 성능이 더욱 좋아질수록 사용자 참여도와 충성도 증가 사용자 경험, 웹 사이트 성능은 사용자 경험의 중요한 요소이며 느린 웹 사이트는 "사용자의 스트레스 증가"의 원인이고, 그로 잉ㄴ해 사용자가 웹 사이트를 "이탈할 가능성"이 상승 전환율 향상, 웹 사이트와 로딩 속도는 직접적으로 전환율에 영향 비용 절감, 성능이 좋지 않은 웹 사이트는 사용자에게 실질적인 비용을 초래하며, 데이터 요금제를 사용하는 모바일 사용자는 "페이지 크기가 커질수록 추가 비용"이 발생 실제로 비즈니스..

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..

componentDidMount와 useEffect useEffect로 componentDidMount를 비슷하게 흉내낼 수 있는 방법은 "useEffect(function, [])"을 사용하는 것이다. 이는, prop와 state를 잡아두기 때문에 초기 prop과 state를 확인할 수 있다는 것이 차이점이다. 즉, 비슷하지만, componentDidMount를 포함한 다른 라이프사이클 모델과는 다르다. useEffect 기본 두 번째 인자의 배열은 빈 의존성 배열로, 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않겠다는 뜻이다. 즉, 다른 props와 state에 영향을 받지 않고 처음 컴포넌트가 새로 생성되는 시점에 한 번 실행된다. 만약, 잘못된 방식으로 의존성 체크를 생략하는 것보다 의존..