진주의 개발괴발

📌 웹 표준 웹 : 문서, 이미지, 영상 등 정도를 타인과 공유할 수 있는 공간 웹 표준 짧은 설명 : 브라우저 간 호환을 위해 웹 개발의 형식을 통일 시킨 것 정의 : W3C(World Wide Web Consrtium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 웹 개발에서 사용되는 언어인 HTML, CSS JavaScript 등의 기술을 다룬다. 웹 표준의 장점 1. 유지 보수의 용이성 HTML, CSS, JavaScript의 영역이 분리되며 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과가 생겼다. 2. 웹 호환성..

📌 useRef : 요소의 주소값을 담아 사용할 수 있게 돕는 함수 DOM 노트, 엘리먼트, React 컴포넌트 주소값 참조 가능 언제 사용할까? ref를 생성하는 방법에는 createRef도 있지만 이는 함수형 컴포넌트에서 작동하지 않음 따라서 함수형 컴포넌트일 때 useRef 사용 상태를 관리하며 리렌더링 되지 않게 하고 싶을 때 (동영상 재생 바를 리렌더링 하면 안 됨) 리렌더링 되어도 동일한 참조값 유지할 때 사용 사용방법 const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다. return ( {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/} {/* 주소값을_담는_그릇 변수에는..

📌 Component Driven Development (CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식 (상향식 개발) ◽ 구조화된 CSS의 필요성이 대두되며 생긴 CSS 전처리기 CSS 전처리기(CSS Prepocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 전처리기에 맞는 컴파일러를 사용하여 웹 서버가 인지할 수 있게 변환함 문제점 : 전처리기 내부 작업을 생각하지 않고, 스타일 겹치는 문제를 해결하기 위해 계층구조를 만들어 CSS 파일 용량 커짐 ◽ CSS 전처리기 문제 보완하는 방법론들 CSS 방법론들의 공통 지향점 코드의 재사용 코드의 간결화 (유지 보수 용이) 코드의 확장성 코드의 예측성 (클래스 명으로 의미 예측) 문제점 클래스명 선택자가 장황해졌음..

📌 와이어프레임 (Wireframe) : 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지의 구조를 잡기 위한 목적으로 만듭니다. 피델리티(fidelity) :와이어프레임, 프로토타입의 품질 수준을 전문용어로 표현한 것이며 3가지 레벨로 나뉩니다. 1. Low Fidelity Wireframe(Lo-Fi Wireframe) : 손으로 빠르게 그린 수준의 와이어프레임 작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉬움 아이디어 구체화, 큰 그림을 잡을 때 유리 2. Middle Fidelity Wireframe(Mid-Fi Wireframe) : Lo-Fi 와이어프레임을 그리며 아이디어 구체화하고 확정된 후에 보기 좋게 다듬은 와이어프레임 와이어프레임을 ..

크리스마스 전 주에는 마음이 어수선했다. 공부를 하려고 해도 하기 싫고 왠지 놀고만 싶어져서 너무 힘들었다. 하고 싶어서 하는 공부랑 하기 싫은데 해야만 하는 것의 차이가 정말 크구나 새삼 느꼈다. 그래도 한 주 푹 쉬어서인지 이번 주는 벌써 시작이 좋다. 전 주에 밀린 공부를 오늘 다 해두어야겠다. 이제 곧 한 해가 끝나고 또 새로운 해가 온다. 새로운 해를 맞이하며, 새로운 정신으로 다시 시작해야지! 파이티잉!! 🎄 이번 주 KPT Keep 필라테스 꾸준히 다니기 코딩 테스트 꾸준히 풀기 블로깅 전 제대로 내용 암기 건강한 음식 먹기 모던 자바스크립트 읽기 Problem 주말 공부 시간 부족 남자친구 너무 자주 만남 집 깨끗하게 유지하기 코딩 테스트 안 풀었음! 늦게 일어나기 시작했음 Try 일요일에..

📌 UI (User Interface, 사용자 인터페이스) 사용자가 컴퓨터와 상호작용하는 시스템 물리적 요소 : 마우스, 키보드, 폴더폰의 버튼 등 그래픽 요소 GUI (Graphic User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 주고 받는 환경 📌 UX (User Experience, 사용자 인터페이스) 사용자가 시스템, 제품, 또는 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UX에 영향을 미치는 요소에는 UI도 포함되어 있지만, 좋은 UI가 반드시 좋은 UX를 만들진 않는다. 반대로 좋은 UX가 좋은 UI를 갖는다는 보장 역시 없다. 하지만 UI를 발전시켜서 더 나은 UX를 만들 수 있다.

생각을 안하고 살다보니 쓸 게 별로 없다.그냥 바깥은 겨울이고, 겨울 냄새가 나고, 볼이 아릴만큼 춥다.겨울 냄새가 좋다.차가운 공기를 들이마시면 입 안부터 몸 속까지 차가운 공기가 느껴지는 게 좋다. 옹기종기 따뜻함을 나누는 것도 좋고 눈이 내리는 것도 좋다.벌써 겨울 한가운데에서 크리스마스를 기다리고 있다니. 지금은 섹션이 끝나게 될 2월이 까마득하지만 나중엔 또 빨리 지나갔다고 느끼겠지?그냥 나는 생각하지말고 열심히 해야겠다. ⛄ 저번 주 KPT Keep 필라테스 꾸준히 다니기 ⭕ 코딩 테스트 꾸준히 풀기 ⭕ 블로깅 전 제대로 내용 암기 ⭕ 마음 굳게 먹기 ⭕ Problem 주말 공부 시간 부족 남자친구 너무 자주 만남 집 깨끗하게 유지하기 몸무게 증가... Try 건강한 음식 먹기 ⭕ 음식량 줄이..

📌 JSON(Javascript Object Notation) : 자바스크립트 객체 표기법 데이터 교환을 위한 객체 형태의 포맷 자바스크립트를 포함한 많은 언어에서 범용적으로 사용한다. JSON 탄생 배경 데이터를 교환하려면? 같은 프로그램 사용할 것 또는 문자열처럼 범용적으로 읽을 수 있어야 함 Javascript의 문자열 변환 메서드 : 대상.toString() 형 변환 : String(대상) 하지만 객체를 문자열 변환하면 [object Object]가 반환된다. 📌 JSON.stringify : 객체를 JSON으로 변환 stringity 하는 과정을 직렬화(serialize)라고 부름 let message = { sender:"진주", receiver:"춘식이", message:"춘식이는 너무 귀여..

📌 재귀 함수 (recursive function) : 함수 내에서 스스로를 호출하는 함수 ❓ 재귀함수 언제 사용할까 1. 반복문의 중첩이 많거나, 반복문의 중첩이 예측 불가능할 때 2. 반복문을 간결하게 적고 싶을 때 3. 함수에서 해야할 일을 작게 나눌 수 있을 때 📝 재귀함수 만드는 순서 1. 함수의 인자와 리턴하는 값을 생각해본다. ex) 정수가 들어있는 배열을 받아서 배열의 요소를 다 더한 값을 반환해야 할 때 recursive([number]) => number 2. 문제를 쪼갠다. : 입력값과 실행 순서를 기반으로 반복되는 부분을 나누어 본다. ex) 정수가 들어있는 배열 받아서 배열의 요소를 다 더한 값 반환 => 배열[0] + 배열[1]부터 끝까지 더한 값 => 배열[0] + 배열[1] ..

Section 2를 돌아보며... 섹션 1 회고를 적을 때만 해도 섹션 2는 언제 끝나나 했는데, 벌써 섹션 2 회고를 적고 있다. 막상 회고를 적으려니까 뭘 적어야 할지, 어디서부터 이야기해야 할지 잘 모르겠다. 섹션 1에서는 정말 아무것도 모르던 나였기에 오히려 당당하게 모른다고 얘기할 수 있었다. 그런데 이번 섹션에 들어서면서 잘해야 할 것 같다는 압박감이 들었다. 나름 배웠는데도 기억 안나는 것들이 늘어가면서 회피를 했던 것 같다. 공부 시간도 제대로 안 지키고... 첫 지각도 했다. 레퍼런스도 살펴보지 않았다... ㅠㅠ 꼭 앞으로는 레퍼런스 확인하고 코드 읽어야지. 자꾸 스스로한테 ‘이 정도는 쉬어줘야 나중에 안 지쳐^^’ 라던지, ‘마라톤 완주하려면 페이스 조절해야지^^’ 같은 변명을 하며 주..