반응형 전체 글15 의지박약 극복을 위해 만든 나의 첫 사이드 프로젝트 💁♂️ 잠깐 자기소개 현재 저는 경제/금융 콘텐츠 스타트업에서 일한 지 1년 조금 안 된 프론트엔드 개발자에요. 개발자로 깊은 이해의 필요성을 알지만 다양한 서비스를 만들고 싶다는 욕구가 강했습니다. 그래서 뭔가 만들어봐야지 했지만 매번 상상과 망상 속에서만 빠졌어요(INFP특) 그렇게 시도도 해보지 못하고 금방 포기를 반복했습니다🥲 🧠 사이드 프로젝트 기획! 그렇게 시간이 지나서 2023년이 새해가 되니까 의욕이 생기더라고요. 벌써 4개월이나 지나고 있지만;; 그래서 뭘 만들까 고민하다가 마침 그때 자기계발서를 읽고 있었는데 '환경설계'에 대한 이야기가 나오더라고요. 역행자라는 책에서 환경설계는 본인이 행동할 수 있도록 하는 환경을 만드는 것이고 그 중에서 '선언하기'가 .. 2023. 4. 24. 리액트 커스텀 훅(custom Hook) 모음 4가지 리액트의 훅을 커스텀해서 몇 가지 만들어보게 됐다. useInput import { ChangeEvent, ChangeEventHandler, useCallback, useState } from "react"; type InputValidator = (value: string) => string; const useInput = (validator: InputValidator?, defaultValue?: string): [string, ChangeEventHandler, string] => { const [value, setValue] = useState(defaultValue || ""); const [error, setError] = useState(""); const onChange = useCal.. 2022. 12. 5. HTML 텍스트 태그 종류 제목 태그 h1 ~ h6 heading level1 heading level2 heading level3 heading level4 heading level5 heading level6 숫자가 작을 수록 중요도가 높다. 글씨 크기를 위해서 제목 태그를 사용하지 않고 font-size CSS 속성을 사용하기를 바란다. 본문 태그 p 블록 요소이다. p 태그 내에는 블록 요소를 사용하면 안 된다. 문단 단위로 활용한다. 스크린 리더가 문단 단위로 인식한다. 줄 바꿈 태그 br 빈 요소이다. 개행을 해준다. 여백을 길게 주기 위해서 br을 중복하여 사용하는 건 좋지 못하다. css 속성으로 해결하자. 인용 태그 blockqute, q blockqute : 블록 요소이다. 기본적으로 앞에 여백이 있다. q : .. 2022. 12. 5. Styled Components 특징과 장점, 사용법 Styled Components 디지니, 코인베이스 등 많은 회사들이 css Styled Components를 사용하고 있다. styled components 이전에는 css 모듈을 활용하여 스타일링을 입혔다. className을 객체 형태로 사용했다. 하지만 className을 복사 붙여넣기를 해줘야하는 번거로움과 className을 중첩하여 사용하다보면 복잡함이 생긴다. Styled Components는 이런 문제를 해결해준다. 먼저 CRA로 프로젝트를 만들어주고 styled-components를 설치해주자. npm i styled-components Styled Components 특징 Automatic critical CSS : 렌더링되는 구성 요소를 추적하고 해당 스타일만 완전히 자동으로 주입한.. 2022. 12. 4. HTML 각 잡고 공부하기 HTML 각 잡고 공부하게 된 동기 비전공자에서 프론트엔드 공부를 한 지 거의 1년, 실무는 6개월이 됐는데 스타트업에서 빠르게 작업한다고 매일 쓰던 HTML 태그만 썼었다. 특히 div 태그만 쓰다가는 안 되겠다 싶어서 더 늦기 전에 html을 제대로 숙지해야겠다 싶어 공부를 하고 기록을 하려 한다. HTML, CSS, Javascript HTML(HyperText Markup Language)은 웹 페이지를 위한 마크업 언어다. 웹 문서의 기본적인 골격이라 할 수 있다. CSS는 각 요소들의 레이아웃과 스타일링을 맡고 있다. 마지막으로 Javascript는 동적인 요소를 담당한다. 웹 표준과 접근성 그리고 호환성 내가 HTML을 각 잡고 공부하게 된 이유, 내가 웹페이지를 만들지만 표준과 접근성 그리.. 2022. 12. 3. 리액트 JSX문법과 컴포넌트, props와 state JSX문법 JSX문법을 사용한 코드와 아닌 코드를 비교해보자. 리액트에서는 JSX를 함께 사용할 것을 권장한다. 대부분의 사람들이 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각하기에 JSX를 권장한다. JSX 문법 사용 O return ( setFollowing(!following)} style={following ? followingBtnStyle : followBtnStyle} > {following ? "following" : "Follow"} ); JSX 문법 사용 X return React.createElement( "div", { onClick: () => setFollwing(!follwing), style: following ? followingBtnS.. 2022. 8. 17. 이전 1 2 3 다음 반응형
