기록하고 싶은 것들

오늘은 SEO에 영향을 미치는 요소인 오픈그래프 요소에 대해서 공부해보고, 실습을 진행해 보았다. 오픈 그래프(Open Graph)란? 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여, 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 프로토콜의 한 종류이다. property 속성값 설명 og:url 페이지의 표준 URL입니다. og:site_name 사이트의 이름입니다. og:title 콘텐츠의 제목입니다. og:description 콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다. og:image 미리보기로 표시될 이미지입니다. og:type 콘텐츠 ..

오늘은 Autocomplete, ClickToEdit UI를 구현해 보는 시간을 가졌다. Autocomplete 코드 import { useState, useEffect } from "react"; import styled from "styled-components"; const deselectedOptions = [ "rustic", "antique", "vinyl", "vintage", "refurbished", "신품", "빈티지", "중고A급", "중고B급", "골동품", ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = "0 4px 6px rgb(32 33 36 / 28%)"; const activeBorderRadius = "1rem 1rem 0 ..

오늘은 CDD와 CDD개발도구, useRef에 대하여 공부하였다. CDD Component Driven Development를 뜻하며, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발, 재사용할 수 있는 UI 컴포넌트를 제작해 놓는 방식을 뜻한다. Styled-Component CSS의 일관적이지 않은 패턴 문제와 CSS를 컴포넌트 영역으로 불러오기 위한 CSS-in-JS의 대표적인 예시이며, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 가능 Styled-Component의 기능 1. 컴포넌트 만들기 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 3. Props 활용하기 4. 전역 스타일 설정하기 Storybook Storybook은 UI 개발 즉, Compon..

storybook으로 실습을 진행하기 위해, 아래와 같이 React 프로젝트를 만들어준 뒤 storybook을 설치하여 실행해 주었다. npx create-react-app storybook-practice npx storybook init npm run storybook 실행을 하니 99%에서 멈추고, 99% done plugins webpack-hot-middlewarewebpack built preview 4451975daa4b1645ed13 in 447ms 오류가 발생하였다. 처음에는 단순히, 설치오류라고 생각해서 2-3회 정도 삭제하고 다시설치하였지만 똑같은 오류가 계속나타났다. 구글링을 통해서 동일한 오류가 나타난 사람들의 글을 보면서, npm의 버전도 높여보고 storybook을 upgrad..

오늘은 Figma를 통해서 UI를 제작해보는 실습을 하였다. Nav 우선 버튼을 컴포넌트로 제작한 뒤, hover상태일 때의 poperty를 생성해준다. 그 뒤 버튼 여러개를 인스턴스로 제작하여 이어 붙인뒤 이름을 수정하고, 하나의 컴포넌트로 만들어 Nav를 제작하였다. 모달 모달은 모달 버튼을 누르면 모달이 나오게 open overay을 주고, 모달닫기를 누르면 close overay를 주어 구현하였다. 토글 토글은 on 상태를 컴포넌트로 만든 뒤, off일 때의 property를 추가하여 제작하였다. 탭 구현한 UI중에 탭 창의 구현이 제일 까다로웠다. 어떤 곳에 어떤 interactions을 주어야 되는지 헷갈려서, 의도치 않게 탭 창이 중복되고, 버튼의 색만 변하는 실수를 겪었다. 최종적으로는 선..

오늘은 UI,UX에 대해서 공부를 하며 Figma의 사용법을 익히고, High Fidelity 프로토타입 예제를 만들어보았다. 초기에 주어진 와이어프레임은 아래와 같다 와이어프레임만 구성된 상황에서, 실제 서비스에서 구현되는 듯하게, UI를 구현하며 인터렉션도 구현해 보려고 한다. 헤더 생성 및 인터렉션 생성 우선 헤더를 실제 서비스에서 제공하는 것 처럼 제작한 뒤, 컴포넌트로 바꾸어준다. 그 후 동그란 프로필 창에 클릭하면, 프레임이 나타나게 인터렉션을 추가해준다. 이제 이 컴포넌트를 구현하고자 하는 위치에 (shirt+option)을 이용하여 인스턴스로 생성한 뒤, 메뉴 창을 누르면 오버레이를 켜고, 끌수 있는 인터렉션을 추가해준다. 좌우 스크롤 기능 우선 보여주고 싶은 사진들을 하나의 프레임으로 생..

오늘은 재귀 내용을 바탕으로 한, 과제를 풀었다. Tree UI를 구현한 과제였는데, 아래의 예시처럼 자식이 없다면 li태그에 이름을 넣어주고, 자식이 있다면 li 태그에 checkbox, span, ul 태그를 넣어주는 ui를 구현하는 것이 목표였다. 아래코드로, 위의 내용을 구현하였는데 동일한 구조로 나왔지만, 왜인지 모르게 과제를 통과할 수 없었다. // TODO: createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여 테스트케이스를 통과하세요. // GOAL: 최종 결과가 resut.html와 같은 모습으로 나와야 합니다. const root = document.getElementById("root"); function createTreeView(menu, currentNod..

오늘은 재귀에 대하여 배웠고, 재귀를 이용한 문제들을 푸는 시간을 가졌다. 문제를 푸는 도중에 가장 단순한 실수로 시간을 허비한 문제가 있어서 기록으로 남겨보려 한다. 선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아, 조건에 맞는 선물이 있는지 여부를 리턴하는 코드였다. function unpackGiftbox(giftBox, wish) { // TODO: 여기에 코드를 작성합니다. let n = giftBox.length if(n===0 || wish.length===0) return false //giftBox 순회 for(i=0;i

1. 목표 상기하기 저는 12월 15일 지금으로 부터 2달전 쯤 목표를 세웠었습니다. 연봉 4000이상 (지난 날의 나 반성합니다) 웰컴키트 증정 복지 포인트 제공 서울 내 or 판교 위치 자유로운 분위기의 it회사 목표를 상기하기 위한 질문 Q. 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가? 학습을 통해 부족한 JS 지식을 채우고, 이를 활용해 배포 가능한 웹서비스를 직접 제작한 뒤 제작한 웹서비스를 포트폴리오 삼아서 목표한 회사에 입사하는것, 다양한 문제를 겪어보고, 문제 해결 능력을 기르는 것 2. Keep, Problem 작성하기 Keep(만족스러운 부분) Q . 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인지? 꾸준히, TIL을 기록하고, 오류를 기록하려했던 시..

Same-Origin Policy와 CORS에 대해서 설명해주세요. SOP(Same-Origin Policy)는 동일 출처 원칙을 뜻합니다, 여기서 출처는 프로토콜, 호스트, 포트가 동일한 것을 의미하고, 다른 출처와의 리소스의 상호작용을 제한하고, 동일한 출처에서는 리소스에 접근이 가능한 정책입니다. CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 뜻합니다. 추가적인 HTTP 헤더를 통해 웹어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있게 브라우저에 알려주는 체제를 의미합니다. 브라우저는 기본적으로 SOP에 의해 다른 출처의 리소스 접근을 막지만, CORS를 사용 시 접근 권한을 얻을 수 있습니다. 아래 에러 예시도 CORS 때문이 아니라, SOP때문에..