분류 전체보기 345

2024 FECONF 다녀온 후기

블로그로 다녀온 후기를 바로 적지 않으면 작년 인프콘을 다녀오고도 아무런 흔적을 남기지 않게 될까 이번에는 바로 정리하게 되었습니다. ㅎㅎ 유튜브로 feconf 영상을 보며 팀원들과 공유하는 시간을 가졌던 때가 있었는데 이번에는 운 좋게 직접 그 현장에서 개발 열기를 느끼고 왔습니다.   세종대 광개토회관에서 진행되었는데, 후문으로 가서 좀 많이 헤맸습니다.. ㅎ   이번 세션의 타임테이블 입니다. A, B, C로 나뉘어서 시간대 별로 세션이 진행되었습니다. A와 B 세션은 나중에 유튭으로 편집본이 나오기 때문에 (유튭 실시간 영상으로도 나오는 걸로도 알고 있습니다...) Lightning Talk 위주로 듣기로 마음을 먹었습니다.  작년 인프콘의 경우에는 세션은 2개만 듣고 이벤트 부스에서 모든 굿즈를..

나를 지키는 심리학 by 조장원

나를 지킨다는 것은 나를 , 내 감정을, 내 삶을 제대로 바라볼 줄 알고 이해하는 것이다. 나를 이해하고 품어줄때, 어떤 상황이 와도 나 자신을 제대로 지키는 법을 스스로 찾아낼 수 있다. 이런 과정이 바탕이 되어야 우리는 비로소 자신을 둘러싼 상황을 객관적으로 바라보게 되고, 다른 사람을 이해하고 받아들이게 되며, 대처할 수 있는 여유가 생긴다.  사람들은  좋지 않은 상황이 닥치면 원인을 찾으려고 한다. 내부요인이라 하여 나에게서 원인을 찾기도 하고, 외부요인이라 하여 타인이나 환경에서 원인을 찾기도 한다. 자꾸 나에게서 원인을 찾다보면 분노의 화살이 나에게로 향하면서 우울감이 찾아온다. 굳이 원인을 찾으려 들지 않아도 된다. 내가 잘못된 게 아니다. 나는 지극히 정상이다. 자책하지 말자.  지금 상..

CampCON) 십수년째 고군분투, 프론트엔드 개발자 생존 매뉴얼

7월 30일, 패스트 캠퍼스에서 진행하는 CampCON에 참여하고 기록으로 남깁니다.  1부 십수년째 고군분투, 프론트엔드 개발자 생존 매뉴얼연사: Dable FE leader 김태곤2003~ 개발자, 2006~ 프론트엔드 개발자취업 1. 직군에 맞는 기술셋 강조직무 전환이라면 더 강조해야한다. 어떤 노력을 해왔는지. 2. 오타, 깨진 링크를 다시 보자 (이력서 링크) 3. 숫자는 다다익선무엇을 얼마나? 변화를 일으켰는지.그래서 비용은 얼마나 아꼈는지.테스트 작성해서 테스트 커버리지 얼마까지프로젝트 나열에서 나의 기여도와 나의 역할을 말해주자. 어떤 어떤 일 했고, 어떤 책임이 있었는지 4. 님아, 그 블로그는 쓰지 마오이력서의 레퍼런스는 꾸준히 관리되어야 한다. 깃헙이나 블로그를 기술적 성찰, 꾸준함을..

웹 성능 최적화를 위한 도구 추천

이미지 픽셀 변경 (보이는 픽셀의 2배로 설정하는 것이 좋다. ) 청크 파일의 구성을 상세히 보기 원한다면 webpack bundle analyzer (npm) cra-bundle-analyzer (cra 프로젝트에서 eject 없이 사용 가능) : https://www.npmjs.com/package/cra-bundle-analyzer cra-bundle-analyzerUse Webpack Bundle Analyzer on a create-react-app application without ejecting. Latest version: 0.1.1, last published: 3 years ago. Start using cra-bundle-analyzer in your project by runnin..

🖥FrontEnd 2024.07.27

TIL) git merge 제대로 알기 git merge fast-forward 방식

업무를 하면서 git merge에 대해 제대로 알지 못하고 있음을 깨닫고 정리를 하려고 한다.  상황을 설명하자면,Main 브랜치에서 딴 A 브랜치를 열심히 작업을 하고 작업이 멈춰진 상황이다. (Main 브랜치에 머지 되기 전)그리고 Main 브랜치에서 딴 B 브랜치를 작업하는데 A 브랜치의 작업을 이어받아서 해야하는 상황이다.  이때 나는 자연스럽게 'git merge A 브랜치' 명령어를 사용했고, 요상한 Git graph가 그려진 줄도 모르고 B 브랜치에서 작업을 해나간다... 이 상황에서 Git graph는 아래와 같다.    좌측의 git history를 보자면, A 브랜치, B 브랜치 모두 main 브랜치에서 따왔지만 git graph는 일직선이다! 내가 가진 의문!B 브랜치를 main 브랜..

🤼Git 2024.07.19

TIL) overflow-clip-margin 속성으로 정밀한 클리핑 제어하기

2중 border를 사용하는데 각도가 맞지 않아서 이리저리 찾아보다가 발견하게 된 CSS 입니다.  overflow-clip-margin overflow-clip-margin = overflow 속성 값이 clip인 경우에만 동작하며, 바깥쪽 범위를 지정합니다.  👀 눈으로 알아보기 기본 HTML 이 내용은 컨테이너를 넘어서지만, 클리핑 마진 덕분에 여유 공간이 있습니다.  .container { width: 300px; height: 200px; border: 2px solid #000;}.content { width: 350px; height: 250px; background-color: lightblue;} 를 적용하지 않았다면, .content의 너비인 350px로 넘어가버립니다.   ove..

리액트 좋은 코드 (리팩토링 할때 참고하기)

1. 불필요한 연산 줄이기1. 연산된 값을 props로 넘기기2. useMemo로 연산 최적화하기 2. 문자열이면 중괄호 쓰지 않는다.  3. Props에서 spread 연산자가 쓰이면, 관련있는 props, 관련없는 props, 나머지 props로 나눠보자! 4. 너무 많은 props를 넘기는 경우분리를 해보자. 5. props에 객체 전체를 내리지 말고, 꼭 필요한 값만 내리자. 6. React.Fragment의 shortcut: key 값을 위해서는 사용

🖥FrontEnd/React 2024.06.05

git push ssh: connect to host github.com port 22: Connection timed out 에러

✔️ 에러 코드git push ssh: connect to host github.com port 22: Connection timed out   ✔️ 해결 방법 1. 현재 git remote 연결 주소를 확인한다. git remote -v 아래처럼 나온다. origin git@gitlab.com:프로젝트 경로/test.git (fetch)origin git@gitlab.com:프로젝트 경로/test.git (push)  2. git remote url을 변경한다. git remote set-url origin https://gitlab.com/프로젝트 경로/test.git 3. git pushgit push origin   😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩..

❗️Error 2024.05.30
반응형