기록하고 싶은 것들

오늘은 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 ..

오늘은 React로 자주 사용하는 UI 컴포넌트의 기능 구현을 해보는 시간을 가졌다. Modal, Toggle, Tab, Tag 의 각각의 코드와 설명을 적어보려고 한다. Modal 코드 import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. width: 100%; height: 100%; position: relative; `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니..

오늘은 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..

오늘은 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때문에..

오늘은 기존에 만들었던 agrostates와 서버를 연결하는 작업을 하였다. 분명 시간을 들여가면서 했는데, 못했다....! 원래는 react로 리팩토링까지 진행하려했는데, 시간이 부족해서 진행하지 못했다. 그래서 구현한 부분과 어떤 부분에서 어려움을 겪었는지 기록하려고 한다. 우선 아래 코드와 같이, CRUD에 요청에 대한 응답을 만들어주었다. postman을 이용하여, 잘 작동하는 것을 확인하며 구현하였다. 클라이언트와 서버의 연결까지도 원할하였다. dataAPI에 요청에 대한 응답을 받아오는 함수를 작성하고, 그 함수를 이용하여, 받아온 결과를 출력했다. 정보를 잘 받는 것을 보아 클라이언트-서버 연결이 잘 이루어지고 있는 것을 볼 수 있었다. 문제는 클라이언트단 이었다. 기존의 코드에서는 아래와 ..