전체 글 118

SEB Full 37기 63일 차

✍ 오늘 공부에 대해 - 리액트 컴포넌트(모달, 탭, 태그 등)을 스스로 만들어 보고 페어랑 이야기를 나눠보는 시간을 가졌다. 처음에는 내가 뭘하고 있는건지 헷갈렸는데 이 스프린트에서 원하는게 뭔지는 조금은 찾은 것 같다. 내부를 직접구현하는데 결국엔 리액트에서 기본으로 주어진것을 직접구현하면서 알고리즘이 이렇게 돌아가는구나를 파악할 수 있었던 좋은 시간이었던것같다. 그러나 페어분이 뭔가 어디서 베낀듯한 코드를 가지고 와서 이야기를 나누는 통에 소통이 제대로 되지않았다. 예를 들어 내가 이 코드는 왜 이렇게 짰냐고 여쭈어 보면 나중에 알아보겠다고 하고 사부작대는 모습이 보기 좋지 않았다... 음... 베끼더라도 성공한 과제가 좋은걸까 아니면 베끼지 않지만 미완성된 과제가 좋은걸까? 지금의 나는 후자가 좋..

Flex에 대해

flex flexible-box를 사용할 수 있는 display 속성이다. 각각의 요소들을 item으로 보고 item들을 효과적으로 정렬하고 배치할 수 있도록 도와주기 때문에 flex를 잘 이해하고 습득하면아주 효과적인 웹 페이지를 만들 수 있다. flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고, 두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다. 먼저 container 입장에서 사용할 수 있는 속성을 알아보자. Container 1. flex-direction flex-direction은 안에 있는 item들을 정렬할 때 가로로 정렬할지 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다. .container { ..

2022-02-14 DOM reference를 잘 활용할 수 있는 useRef

intro 지금까지 React를 공부하면서 익히셨던 내용을 돌이켜보면 React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었음. DOM 지식이 필요 없다고 생각하실지도 모르겠지만 React로 모든 개발 요구 사항을 충족할 수는 없음 아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 있음. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있음. 아래 예시 코드처럼 작성하시면 주소값을 활용할 수 있음. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제..

코딩공부/T.I.L 2022.02.14

2022-02-14 컴포넌트 기반 CSS 작성에 적합한 Styled-Component

Motivation - Styled Component Styled Component(이하 SC)는 React 라이브러리임. CSS의 성능 향상을 위해 탄생함 이를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있음 예를 들어 SC를 이용하면 애플리케이션 내에 다른 웹페이지로 이동하는 기능을 가진 Button 을 하나 만들때 아마도 아래 코드와 같을거임. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; `; 이는 기존의 학습했던 것과 거의 같음. - SC의 특징은 아래와 같음 Automatic crit..

코딩공부/T.I.L 2022.02.14

2022-02-14 구조적인 CSS 작성 방법의 발전

구조화된 CSS가 필요하게 된 이유 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야 할 팀원 수도 많아짐에 따라 CSS를 작성하는 일관된 패턴이 없다는 것은 개발자들에게 가장 큰 걸림돌이 되었음 또한 모바일이나 태블릿을 비롯한 다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었음. 따라서 CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었고, CSS를 구조화하는 방법에 대한 연구가 필요해졌음. CSS 구조화를 위한 다양한 시도 - CSS 전처리기의 등장 CSS Preprocessor가 등장함 이는 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 우리가 흔히 CSS 문서를 작성할 때는 많은 반복적인 작업을 요구하고 C..

코딩공부/T.I.L 2022.02.14

2022-02-14 컴포넌트 UI 개발을 위한 Storybook

Storybook UI 개발 도구 Storybook은 컴포넌트 탐색기(Component Explorer) 중 하나이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있음. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있음. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있음. 이를 통해 버그를 사전에 방지할 수 있도록 도와줌. 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드 할 수 있음. 아니 그래서 왜..

카테고리 없음 2022.02.14

2022-02-14 Component Driven Development

CDD에 대해 기획자로부터 하나의 페이지 기혹이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었다. 페이지가 모두 완성되었는데, 다른 페이지에 저용되는 버튼에 대한 추가적인 기획안이 도착했다...(하..) 그런데 기확자가 요청한 사항에서 버튼에 대한 기획이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했다. 이때, 같은 UI 컴포넌트를 공유했다면 그냥 복붙하면 됨! 따라서 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 됨! => 이게 바로 CDD다! - 링크1 : BBC - 링크2 : UN

코딩공부/T.I.L 2022.02.14

2022-02-14 컴포넌트 디자인 방법론 성취목표

Read Me 소요시간 : 1 min 이전 유닛들에서 React Twittler 등 여러가지 React App을 만들어보며 프론트엔드 개발에 익숙해지셨나요? 이번 유닛에서는 React로 프론트엔드를 구축할 때, 보다 구조적으로 코드를 작성하는 방법에 대해 배워보겠습니다. 아래 Achievement Goals를 기준으로 삼아 학습하시기 바랍니다. Before You Learn JSX 문법의 개념에 대해 이해하고 활용할 수 있다. Component의 개념에 대해 이해하고 작성할 수 있다. State & Props의 개념과 차이에 대해 이해하고 상황에 맞게 적용할 수 있다. React Effect Hook에 대해 이해하고 활용할 수 있다. Lifting State up의 개념을 이해하고 있다. Achievem..

코딩공부/T.I.L 2022.02.14

SEB Full 37기 59일 차

✍ 오늘 공부에 대해 진이 빠졌다.. 서버 구축 스프린트를 통과했지만 이게 제대로 된건지 내가 뭘 아는건지 모르는건지를 거의 모르겠다. 주말에 계속 연습을 해서 서버 연습을 확실히 다져야겠다. 그리고 거의 90% 찰랑찰랑하는 한계에 오고 있다. ... 힘들지만...내가 선택한 길.. 할수있을것이다!! 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 서버 해냈다!! 💦 부족했던 것(Lacked) : 페어분과 소통이 뭔가 원활하지 않았던것같다..ㅠ 🕯 바라는 것(Longed for) : 조금 더 겸손하고 조금 더 사랑하자... 📄오늘의 띵언 사람들은 옳은 말을 하는 사람보다 자신을 이해해주는 사람을 더 좋아한다.

2022-02-10 Node.js Express

Express.js 소개 MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB. Express, React, Node를 지칭하는 말임. 이 중에서 Express.js는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크. 프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 라이브러리의 상위호환 by 갓무위키 - 이번에는 http 모듈로 작성했던 서버를, 프레임워크 Express를 이용하는 방식으로 리팩토링하자. Express로 구현한 서버가 http 모듈로 작성한 서버와 다른점은 1. 미들웨어 추가가 편리하다. ( 이 미들웨어는 밑에서 ..

코딩공부/T.I.L 2022.02.10