코딩일기

APP.js import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; // TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다. import Sidebar from './Sidebar'; import Tweets from './Pages/Tweets'; import MyPage from './Pages/MyPage'; import About from './Pages/About'; // TODO : MyPage, About 컴포넌트를 import 합니다. import './App.css'; imp..

2023-06-16(금) CDD(Component Driven Development) 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구인 Component Explorer(컴포넌트 탐색기)가 등장했습니다. 컴포넌트 탐색기에는 많은 UI 개발 도구가 있는데 이중 하나가 Storybook입니다. Storybook이 무엇인가요? = Storybook은 UI 개발, CDD를 하기 위한 도구입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제로 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있습니다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서..

2023-06-16(금) CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있으신가요? class, id 이름을 짓느라 고민한 적이 있다. CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다. CSS 파일이 너무 길어져서 파일을 쪼개서 관리해 본 적이 있다. 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다. 이 외에도 여러 가지 어려움이 있을 수 있는데요. 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리가 있습니다. 바로 React 환경에서 사용 가능한 Styled Components라는 라이브러리입니다. CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 ..

2023-06-16(금) Component-Driven Development (CDD) 기획자로부터 하나의 기획이 들어온 상황에서, 디자이너와 개발자가 협력하여 개발진행이 된 후 페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획이, 이전에 요청받았던 버튼을 똑같이 사용하도록 요청하는 기획자에 요청에 디자이너와 개발자는 이 부분을 새로 만들어야 할까요? 이러한 상황에선, 여러 프로젝트 혹은 여러 팀 간에 같은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 됩니다. 하지만 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있습니다. 이러한 고민을 해결하기 위한 개발 방법이 Component-Driven Develop..

2023-06-13(화) UI( User Interface ) 사용자 인터페이스 즉, 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽뿐만 아니라, 마우스 키보드 등의 물리적인 요소들도 UI시스템이라 볼 수 있습니다. 요즘에는 스마트폰과 컴퓨터뿐만 아니라, 스마트워치, 키오스크 등 화면과의 상호 작용을 통해 사용하는 기기들이 많은데 이처럼 현대 사회에서는 그래픽 UI, 즉 GUI가 굉장히 중요한 역할을 하게 되었습니다. GUI ( Graphical User Interface ) 그래픽 사용자 인터페이스 즉, 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말합니다. GUI는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리..

2023-06-09(금) 학습 전 - 자바스크립트 기초 문법 활용할 수 있어야 합니다. - 조건문, 반복문을 숙지하고 있어야 합니다. Chapter 1 . 재귀의 이해 - 재귀란 무엇일까요? 바로 원래 있던 곳으로 다시 돌아온다는 의미를 가지고 있습니다. 우리 컴퓨터 프로그래밍 측면에서 보면 자기 자신을 호출하는 것이라고 볼 수 있습니다. 재귀 함수는 그렇다면 자기 자신을 호출하는 함수를 뜻하는 것입니다. 그런데 왜 재귀가 무엇인지, 알았다면 어떻게 사용해야 하는 것인지, 언제 사용하면 좋은지를 알아봅시다. function recursion () { console.log("This is") console.log("recursion!") recursion() } 이런 코드가 있습니다. 해당 코드를 실행해보..

2023-06-08(목) 가장 인상 깊거나 도움이 될 레포지토리는 어떤 레포지토리 였나요? =https://brunch.co.kr/@hyoi0303/22 동기, 비동기, 블로킹, 논블로킹 디자이너가 개발자와 일 하다 보니 (6) | 실무에서 개발자와 협업 시 개발에 대한 전문적인 지식을 가지고 있는 것이 아니기 때문에 개발자분들이 최대한 쉽게 설명해주지만, 많이 언급되는 부 brunch.co.kr 어떤 인사이트(통찰)를(을) 얻으셨나요? = 비동기 와 동기의 대한 복습을 할 수 있는 좋은 자료였고, 해당 차이를 이해하는데 편리했다. 기초와 관련된 지식이라 이후 다른 비동기 관련 지식을 참조할때 좀 더 좋을 것 같다. 동기와 비동기 # 데이터 처리 방식 동기와 비동기로 작성한 코드의 가장 큰 차이점은 런타..

2023-06-02(금) const express = require('express') // 모듈을 불러온다. const cors = require('cors') // cors 미들웨어를 불러온다. const app = express(); // 서버를 만든다. app.use(cors()); // 모든 요청에 대해 CORS 를 허용한다. app.use(express.json({strict: false})); // primitive data type 도 parsing 해주도록 설정 const port = 5000; //app.js에서 포트번호 확인 const ip = 'localhost'; app.use(express.static('client')) // GET app.get('/', (req, res)=>..