300x250 프론트엔드4 1년 회고록 - 2022년 2021년 12월 20일, 회사에 프론트엔드 개발자로 입사했고 벌써 1년이 지났다. 처음에는 선임의 제안으로 쓰게 되었지만 한 해 동안 내가 무슨 일 했고 어떤 일을 배웠는지 그리고 무엇을 느꼈는지 돌아보기 좋은 타이밍이라는 생각이 든다. 그래서 월마다 무슨 작업을 했고, 그 과정에서 느낀 것들에 대해 얘기해보려고 한다. [ 1월 - 2월 ] 온보딩, 그리고 첫 작업에서 얻은 것 개발팀 첫 온보딩 당첨자였다. 다들 신경을 많이 써주셔서 잘 적응할 수 있었다. 온보딩 기간에는 크게 💻 작업 내용 도메인 이해 랜딩 페이지, 알림센터 업데이트 디자인 시스템 구축 (스토리북 + component common.v2) 회원 상세 페이지 작업을 했다. 입사 당시 개발팀은 효율성 증대라는 목표를 가지고 있었고 그중에 .. 2023. 1. 9. SASS(Syntactically Awesome StyleSheet) 개념 + Sass와 CSSS 차이 SASS(Syntactically Awesome StyleSheet) css는 연산도 안되고, 조건도 반복도 안된다. 프라퍼티만 선언하고, 선언형으로만 되었다. 결론은 SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 ( CSS를 확장하는 스크립팅언어 ) 정도로 생각하면 좋을 것 같다. (css preprocessor 전처리기) 우리가 흔히 CSS 문서 작성할 때는 많은 반복적인 작업을 요구하고 Color 값을 찾는 일, tag를 닫는 일 등 번거로운 작업 역시 포함되어있다. 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 이로 인해서 이후 유지관리에 많은 영향을 준다. 이런 CSS의 문제점들을 Programmatically 한 방식.. 2021. 10. 29. [CSS] FLEX -컨테이너에 적용하는 속성 컨테이너에 적용하는 속성 1) flex vs inline-flex .container { display: flex; //한줄을 차지 /* display: inline-flex; */ //인라인 속성처럼 플렉스아이템의 너비의 합까지만 차지 } 2)) flex-direction - 배치방향설정 .container { flex-direction: row; 가로(행 방향) 왼->오 // flex-direction: column; 세로(열 방향) 위->아래 // flex-direction: row-reverse; 반대 가로 왼 위 } 3) flex-wrap -줄넘김 처리 .container { flex-wrap: nowrap; //기본값 줄넘김x // flex-wrap: wrap; // flex-wrap: wra.. 2021. 8. 2. [react] CSS-in-JS 관련 라이브러리 Styled Component Styled Component 정의 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어졌다. styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다. styled Component 1. Automatic critical CSS : 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입된다. 2. No class name bugs : 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다. 3.Easier deletion of CSS : 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴.. 2021. 6. 1. 이전 1 다음 반응형
