목록Code개발일지 (103)

Daily Front_Minhhk

[React] Custom Component

CDD, styled-Component , storybook, useRef 📌 Component Driven Development (CDD) 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발 → 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 을 진행 (컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발) 📌 CSS 전처리기(CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 → CSS 전처리기 로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환 Sass(Syntactically Awes..
Code개발일지 2022. 12. 22. 16:23
[Figma] 단축키,, 당근마켓 앱 lo-fi clone

자주 사용하는 기능 & 단축키 모음 기본 단축키 복사하기 : Command + C 붙여넣기 : Command + V 잘라내기 : Command + X 복제하기 : Command + D 혹은 Option 누른 상태로 드래그 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭 그룹으로 묶기 : Command + G 프레임으로 묶기 : Command + Option + G 그룹, 프레임 해제하기 : Command + Shift + G 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기 오토 레이아웃 오토 레이아웃 추가하기 오토 레이아웃 적용할 요소 선택 → Shift + A 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택..
Code개발일지 2022. 12. 21. 21:32
UI UX

UI (User Interface) 사람들이 컴퓨터와 상호 작용하는 시스템 을 의미 그래픽 요소, 키보드, 마우스 등 물리적 요소도 UI UX (User Experience) 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI UX UI 레이아웃 그리드 시스템 (Grid System) 웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 **컬럼 그리드 시스템(Column Grid System)**을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성됩니다. 1. Margin Margin은 화면 양쪽의 여백을 의미합니다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상..
Code개발일지 2022. 12. 19. 17:27
JSON.stringify() // JSON.parse() // Tree UI

💡 JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON.stringify JSON.stringify : 객체를 JSON으로 변환한다. JSON으로 변환된 객체의 타입은 문자열이다. → JSON.stringify하는 이 과정을 **직렬화(serialize)**한다고 합니다. JSON.parse JSON.parse : JSON을 객체로 변환한다. → JSON.parse를 적용하는 이 과정을 **역직렬화(deserialize)**한다고 합니다. JSON의 기본 규칙 JSON은 얼핏 보기에 자바스크립트의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙이 있습니다. 자바스크립트 객체 JSON 키 키는 따옴..
Code개발일지 2022. 12. 16. 22:36
[자료구조/알고리즘] 재귀 + 연습문제,,

재귀란 무엇일까요? 표준국어대사전에서는 다음과 같이 정의하고 있습니다. 재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴. 재귀 ⇒ 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 2. 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우 배열 [1, 2, 3, 4, 5 ]의 합을 구하는 과정을 재귀 function arrSum (arr) { // 빈 배열을 받았을 때 0을 리턴하는 조건문 // --> 가장 작은 문제를 해결하는 코드 & 재귀를 멈추는 코드 if (arr.length === 0) { return 0 } // 배열의 첫 요소 + 나머지 요소가 담긴 배열을 받는 arrSum 함수 // --> 재귀(자기 자신을 호출)를 통해 문제를 작게 쪼개나가는 코드 re..
Code개발일지 2022. 12. 15. 22:23
my-agora-states Server

자 테스트 통과 해봅시다!!! 지금 껏 배워온 것들을 활용하여 가이드에 따라 작성~~~ app.js const express = require("express"); const app = express(); const cors = require("cors"); const morgan = require("morgan"); // morgan 미들웨어가 세팅되어 있습니다. // HTTP 요청 logger를 편리하게 사용할 수 있는 미들웨어 입니다. app.use(morgan("tiny")); // TODO: cors를 적용합니다. app.use(cors()); // TODO: Express 내장 미들웨어인 express.json()을 적용합니다. app.use(express.json({ strict: false..
Code개발일지 2022. 12. 14. 17:03
이전 Prev 1 ··· 6 7 8 9 10 11 12 ··· 18 Next 다음