본문 바로가기

Category153

나에게 헬스라는 운동은 말이지 헬스를 생각하면 자연스럽게 기억나는 친구가 하나 있다. 지금도 간간이 소식을 묻곤 하는 가까운 친구다. 중학교 3년을 친하게 지냈던 친구였는데 방학이 되면 가장 먼저 헬스장을 등록했던 몸이 좋은 친구였다. 그 친구는 항상 나한테 같이 헬스장을 끊어 보지 않겠냐고 제안 했지만 나는 늘 그 제안을 거절했다. 작년부터 내가 러닝을 하는 기록을 SNS에 올리면서 그 친구는 운동 하는 모습이 보기 좋다며 긍정적인 피드백을 주고는 했다. 그랬다. 나는 예나 지금이나 정말 헬스를 좋아하지 않는다. 적어도 지금까지는 그랬다. 그나마 꾸준히 웨이트 운동을 한 게 작년 12월부터 지금까지 약 6개월간 홈트를 한 게 다다. 아니 어쩌면 6개월 동안 매일 빼먹지 않고 홈트를 했다는 건 이미 웨이트를 좋아하는 자세로 바뀐 게 .. 2022. 5. 12.
Next.js 환경에서 workflows, .dockerfile을 이용해 docker build 시 Env 적용하기(NEXT_PUBLIC) Next.js는 외부에서 환경변수를 주입할 때 NEXT_PUBLIC_으로 시작하는 변수명을 사용할 수 있다. (공식문서 참조) 작업중인 애플리케이션에 NEXT_PUBLIC_를 이용해 개발모드를 셋팅하고 있다. next dev 또는 next build 시에 NEXT_PUBLIC_ENV_MODE를 development, stage, main으로 설정하고 있고 CI/CD는 github workflows를 이용해 docker 이미지를 rancher에 올리는 방식이다. docker build --build-arg NEXT_PUBLIC_ENV_MODE="stage" -t ${IMAGE} -t ${IMAGE_LATEST} -f .dockerfile . action yml 에서는 위의 코드로 docker 이미지를 생성.. 2022. 4. 28.
23년산 브로맨스 17살때 만나 꽤 오래 동안 함께 하고 있는 친구들이다. 아마 이대로라면 그냥 평생 가는 우정이지 않을까 싶다. 그 중 옥상이 있는 집으로 이사를 간 녀석이 있는데 집들이가 꽤 늦어졌다. 날씨 좋은 토요일에 만나 바베큐와 소주 한잔 하면서 이런저런 얘기 하니 힐링도 되고 에너지도 얻는다. 모두 각자 가정을 꾸리고 먹고 살기 바쁜 40대를 보내고 있는 우리 인생 다 안녕했으면 좋겠다. 힘내자 마이 브로들 2022. 4. 25.
바쁘게 살려다 보니 바쁘게 살아보려고 나름 빡세게 살다 보니 블로그 관리가 우선순위에서 뒤로 밀려난다. 적어도 이틀에 한 개씩은 포스팅을 하겠다고 다짐했지만 정말로 쉽지 않다. 매일 5K 달리는게 훨씬 더 쉬운 것 같다. 항상 생각만하고 포스팅 한 개도 못하고 있어서 일단 이런 상태라는 어설픈 글로 한 개를 작성해본다. 내일 이렇게라도 하나 더 쓸 수 있었으면 좋겠네 2022. 4. 14.
[매일 5K] 새 러닝화, 나이키 알파플라이 개시 작년 11월 인피니티런2 로 죽을 것 처럼 뛰어서 만든 기록이 23분10초다. 그런데 4개월 만에 알파플라이로 조금 빡세게 뛰어서 만든 기록이 22분09초로 무려 1분1초를 단축시켰다. 이래서 템빨을 무시 못하는거다. 마치 내가 달리기 빠른 사람인 것 같은 착각을 하게 만드는 능력을 가지고 있다. 2022. 3. 25.
패스트캠퍼스 챌린지 최종 후기 (레거시 프론트엔드 개발자의 회고) 나는 Node 환경의 프런트 개발이 아직도 헷갈린다. Node 도 어렵고 Webpack이며 React 며 어려운 것투성이다. 서론을 풀자면 많이 길어지지만, 굳이 핑계를 대자면 개인 신변상의 여러 가지 이유로 Node 기반의 웹 프런트엔드 환경에 발을 늦게 담갔다. 처음 홈페이지를 만들었던 건 2000년도이었으니 입에 담기 민망할 정도로 오래전이다. 당시에 유행하던 화려했던 플래시 모션 기반의 액션 스크립터로 꽤 오랜 시간 코딩을 했고, 플래시 시장이 소멸하면서 2014년 정도부터 jQuery를 하면서 단순한 화면 UI 처리를 담당하던 스크립트 일을 주 업무 꽤 오랜 시간 해왔다. 플래시 경력이 베이스가 되다 보니 주로 jQuery를 활용해 애니메이션을 처리하는 업무를 많이 했다. 당시에는 나처럼 애니메.. 2022. 3. 22.
패스트캠퍼스 스터디 챌린지를 마무리 하며 스터디 챌린지 데일리 미션 끝 ! 패스트캠퍼스에서 진행한 50일 동안 매일 스터디를 진행하고 포스팅 하는 미션이 어제부로 끝났기 때문에 마침표를 찍는 의미의 포스팅을 작성해본다. 챌린지에 대한 진짜 회고는 차주에 최종 미션으로 진행할 예정이라 오늘은 50일동안 매일매일 빠지지 않고 작성한 카테고리에 뭐라도 써야 할 것 같은 느낌이 들어서 앞으로의 스터디 계획에 대한 짧은 계획을 생각해본 결과를 풀어본다. 1월 패스트캠퍼스의 스터디 챌린지 미션을 우연히 접해 평소 관심 가지고 있던 "초격차 패키지 - React의 모든 것" 강의를 수강하며 나름대로 진지하게 챌린지 자세에 임했다. 챌린지의 취지에 맞게끔 매일 공부하는 습관을 들이고 싶었고 챌린지 기간이 끝나더라도 스터디 습관이 오랫동안 유지되기를 바랐기 때.. 2022. 3. 15.
패스트캠퍼스 챌린지 50일차 (Hooks의 제약 조건과 구현 방식의 연관성) 22.3.14 (월) +50days Re-Introduction of React Hooks 3. Hooks의 제약 조건과 구현 방식의 연관성 다시 보기 컴포넌트 밖에서 실행하거나, 실행되는 Hook의 갯수가 일정하지 않다면….. Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. Invariant Violation: Hooks can only be called inside the body of a function component. 👉 https://ko.reactjs.org/docs/hooks-rules.html Hooks, 어떻게 생겼을까 구현 방법 예상.. 2022. 3. 14.
패스트캠퍼스 챌린지 49일차 (Hooks 를 통한 해결) 22.3.13 (일) +49days 2. Hooks 를 통한 해결 Too many hooks useState Component.state / setState 함수형 컴포넌트 내에서 상태 관리가 가능해짐 useEffect Component.componentDidMount / componentDidUpdate / componentWillUnmount Lifecycle Method 대체 가능 useRef React.createRef DOM Element 등, 렌더링 시점에 상관 없이 참조되는 값 저장하기 useContext Context.Consumer / Component.contextType 여러 컴포넌트에서 공유할 수 있는 상태 만들기 (Scoped state?) useCallback / useMemo .. 2022. 3. 13.
패스트캠퍼스 챌린지 48일차 (함수형 컴포넌트의 한계) 22.3.12 (토) +48days 함수형 컴포넌트의 구조 컴포넌트는 결국 React Element 를 만드는 여러 방법 중 하나 function SimplifiedGreetring(props) { const showName = () => alert(props.name); const handleShowName = () => setTimeout(showName, 3000); **console.log(this); // undefined - 인스턴스를 생성하지 않는다.** return ( Hello, {props.name} show name ); } export default SimplifiedGreetring; 함수형 컴포넌트는 상태를 가질 수 없었다. Hooks, Closure 매번 실행될 뿐인 함수가 상.. 2022. 3. 12.
패스트캠퍼스 챌린지 47일차 (함수형 컴포넌트의 해결 방식) 22.3.11 (금) +47days 함수형 컴포넌트의 해결 방식 (물론,) 클래스 컴포넌트에서도 해결할 수 있다 비동기 콜백 내 값 변조, this 바인딩 등... import React from "react"; import "./styles.css"; class Greeting extends React.Component { constructor(props) { super(props); this.state = { name: "students!" }; **// [1] this에 직접 바인딩** // this.changeNameAndNotify = this.changeNameAndNotify.bind(this); } **// [2] this lexical binding(선언한 곳의 this 바인딩) // 3.. 2022. 3. 11.
패스트캠퍼스 챌린지 46일차 (자바스크립트의 this 바인딩 방식) this is hard 실행 환경에 따라 바뀌는 this JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 [함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는]() [bind]() 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다). this = … 전역 호출시 window 함수에서 호출 시 window, strict mode 일 경우 u.. 2022. 3. 10.