기록하고 싶은 것들

오늘은 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을 기록하고, 오류를 기록하려했던 시..

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

오늘은 express를 배운 내용을 바탕으로 서버를 구성해보는 과제를 진행하였다. router로 경로를 구분하여서, 해당하는 url에 맞는 응답을 구현하는 과제였고, 주로 query와 param을 사용하여, 데이터를 필터링하는 예제를 구현하였다. 라우터로 url을 구분하여서 그에 맞는 함수들을 불러오게 한다. req.query를 이용하여 쿼리문 안의 해당 값들을 받아오고, 이와 동일한 데이터를 조회하는 코드이다. req.params를 이용하여 파라미터 값들을 받아오고, 이와 동일한 데이터를 조회하는 코드이다 간단하게 백엔드 서버의 구현방식을 알아볼 수 있는 시간이었다. 클라이언트에서 일일히 값을 조정해주면서 적용했던 것들을 서버를 통해서 바로 받아올 수 있다는 것이 신기하였고, 서버 구현에 대해 알게되었..

오늘은 express에 대해서 배우고, 관련 실습을 진행하였다. express란, NodeJS를 사용하여 서버를 개발하고자 하는 개발자들을 위해 서버를 쉽게 구성할 수 있게 만든 프레임워크이다. npm install express 명령어를 통해 설치 후, https://expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 간단한 웹 서버를 만들어보았다. const express = require(..

오늘은 CORS,SOP에 대해서 공부한 뒤 node.js를 통해서 간단하게 서버를 구현해 보는 실습을 하였다. api와 연결하거나, 서버와의 연결을 할 때 종종 아래 이미지를 본 적이 있을 것이다. 이 에러는 CORS policy만을 보고 CORS라는 것 때문에 발생하는 것 같지만, SOP(Same-Origin Policy) 때문에 발생한다. 그렇다면 SOP와 CORS는 무엇일까? SOP(Same-Origin Policy)는 동일 출처 정책을 뜻한다. 여기서 출처란 (프로토콜+호스트+포트)이며, 같은 출처의 리소스끼리만 공유가 가능하다는 뜻이다. 하지만, 다른 출처의 리소스를 사용할 때는 CORS(Cross-Origin Resource Sharing)를 사용한다. CORS는 추가적인 HTTP 헤더를 적용..

오늘은 Effect Hook에 대해서 공부했다. useEffect 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다, side effect란? 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 존재 ex) side effect 함수 예시 - fetch api를 사용한 함수 → API 응답이 실패할 가능성도 있고, 입력따라서 출력이 달라질 가능성이 있음 - Math.random() → 매번 동일한 값을 기대할 수 없기 때문이다 useEffect의 첫 번째 인자는 함수, 함수 안에 side effect를 실행 컴포넌트가 렌더링될 때 Effect Hook이 실행 두 번째 인자는 조건의 의미를 담은 배열 조건은 어떤 값의 변경이 일어날 때를 의미..