차마시는 개발자

TypeScript에서 왜 import * as $ from '' 을 사용할까? TypeScript로 개발을 해보면 import * as $ from ''을 많이 사용하는 것을 볼 수 있습니다. 보통 그냥 CommonJS를 ESModule 같이 보이게 하기 위해 사용한다.라고 간단하게만 알고 있으며 다른 import를 사용할 때 해당 구문을 이해하지 못하고 사용하고 있습니다. 👣 설명 Module은 왜 만들어졌을까요? Module을 정의하면 다른 파일에서 호출하고 사용할 수 있는 파일의 코드 조각입니다. 이 Module은 큰 프로젝트에 매우 유용합니다. 프로젝트가 커지면 커질수록 여러 기능, 공통된 변수등을 쉽게 파악하기 어렵습니다. 이런 문제를 해결하기 위해 생겨난 것입니다. 즉, 코드 관리를 잘하기 ..

Redux 전역 상태 값은 전역 변수처럼 동작하나?Vanilla JavaScript, React, Redux등으로 프론트엔드 개발을 진행하면서 전역(Global), 지역(Local) 상태 관리에 대한 이해가 부족하였습니다.Vanilla JavaScript일 때 상태를 변화 시 DOM -> CSSOM -> Render Tree -> Layout -> Painting,React일 때 상태 변화 시 Virtual DOM 생성 -> 비교 -> 실제 DOM에 적용 (테스크 큐 비어있을 때 실행),전역 / 지역 상태 변화할 때 적절한 위치에서 상태 변화를 주지 않아 다음과 같은 과정을 겪지 않아도 될 곳에서도 다음과 같은 과정을 겪어 비효율적인 프로그램이 되고 있었습니다.또한 면접을 보면서 관련 내용에 대해 정확히..

프론트엔드 아키텍처 & 디자인 잠시 쉬어가며 기초를 다시 한번 정리하면 좋겠다고 생각하는 도중, 초반 프로젝트 구조 잡기에 대해 생각을 했었습니다. 예전, 프로젝트를 개발할 때 뭔가 있어보이는 아토믹 디자인 패턴, Presentational and Container Component 패턴등을 그냥 선택하여 사용하였습니다. 초반에 아키텍처 & 디자인 패턴의 중요성을 모르고 확실히 정하지 않아 개발을 하여 여러번의 회의, 개개인이 이해한 패턴대로 프로젝트를 진행하고 있었습니다. 그래서 코드를 다시 고치려고 할 때 엉망이었습니다. (프로젝트 할 때마다 조금씩 나아지기는 했지만...) 정리 시작합니다.!! 👣 설명 우선, 아키텍처와 디자인의 차이부터 확실히 하고 갑시다. 아키텍처와 디자인은 구조를 만드는 데 필..

STU-TI STUDY + MBTI MBTI 와 개발자 스터디를 결합하여 성격이 맞는 사람끼리 스터디를 진행 하도록 하는 서비스 입니다. 배포: https://stu-ti.netlify.app/ Github: https://github.com/prgrms-web-devcourse/Team_KPPL_STUTI_FE YouTube: https://www.youtube.com/watch?v=MlLwIza06fw 많이 사용을 해주시고 문제점을 알려주시면 계속해서 리팩토링을 해보도록 하겠습니다.!!! 할 것이 여러개 보이긴 합니다. : ) FE 팀 팀장으로 프로젝트를 하면서 많은 경험을 했지만 가장 기억에 남는 것들 위주로 회고를 작성하겠습니다. 😶‍🌫️ 프로젝트 순서 팀 Commit, Code Conventio..

개발에 관해서 멘토링을 받았는데 뭔가 잘보여야 한다는 약간의 걱정과 친구집 이슈로 인해 아주 깊은 이야기를 꺼내지는 못했습니다. 그러나 이번 멘토링을 하면서 크게 3가지를 여쭤보고 생각하는 시간을 가지게 되어 좋았습니다. 1. 팀장의 역할 이번 프로젝트를 진행하는데 팀장을 맡게 되었습니다. 그런데... 실력이 부족한 것 같아 고민이 되었습니다. 실력도 중요하지만 프로젝트를 성공적으로 이끄는 역할 2. 생활 패턴 계획을 정하고 이것을 꼭 마무리해야한다는 고집? 때문에 최근 생활패턴이 무너져 버렸습니다. 그래서 이에관한 조언을 얻고 싶습니다. 여러 팁들이 있었지만 3가지를 지켜보도록 합니다. - 취칩시간을 정하자 - 식습관을 관리하자 - 시간을 관리하자(꼬모도모 or 하루의 생활에 대한 일기) 3. 취업 취..

토론 커뮤니티 Web 만들기 정말 오랜만에 회고를 작성하는 데 어떻게 작성을 해야 할 지 감이 잘 잡히지 않아 그냥 생각의 순서에 따라 작성을 해보겠습니다. 3주 정도의 시간으로 4명의 프론트 엔드 개발자님들(저 포함 ^^)과 함께 토론 커뮤니티 Web을 제작하였습니다. 시작에 앞서 프로젝트에 대해 간단하게 소개를 하자면 엄마가 좋아? vs 아빠가 좋아? SNS, 방송을 중심으로 깻잎, 새우 논쟁 등 다양한 의견이 있는 간단한 논쟁들을 쉽게 투표하고 의견을 나누는 토론 커뮤니티 서비스 입니다. Github: https://github.com/prgrms-fe-devcourse/FEDC2_ToronTo_Nayoung 배포: https://melodic-fenglisu-afc3b8.netlify.app 정말..

Storybook 시작하기!!! React에서 UI를 관리하기 위해 StoryBook을 사용하게 되었습니다. 간단하게 예시를 통해서 제작을 해보도록 하겠습니다. :) 해당 사이트를 보고 잘 파악을 하면 됩니다. Web: https://storybook.js.org/ GitHub: https://github.com/storybookjs/storybook/ 🐣 기본 환경 Mac VSCode React(create-react-app) 🐣 1. Storybook 설치 create-react-app을 설치한 곳에서 > npx storybook init 🐣 2. Component 제작 사각형을 만드는 Component제작 const Squares = ({width = 100, height = 100, backgro..

😸 Vue TIL 😽 Done it 😼 코드리뷰 회고 1 ~ 7: https://gwpaeng.tistory.com/418 Vue: https://gwpaeng.tistory.com/419 😼 React JSX 보통 {}를 이용하여 실행합니다. 😼 값 default 함수.defaultProps 함수.defaultProps = { size: 200, }; 인자에 지정 function 함수({ size = 200 }) {} 😼 값 type check import PropTypes from 'prop-types'; 함수.propTypes = { size: PropTypes.number, }; 😼 useState useState: 지역상태 관리하기 위한 것(Hook) 값이 변경되면 다시 렌더링 한..