회고/주간 회고

7월 넷째주 회고 거리

7월 넷째주 회고거리 UI/UX 프로젝트 회사에서 UI/UX 프로젝트가 진행 중이다. 사실 이 프로젝트의 이름은 UI/UX 프로젝트이지만, 뜯어보면 웹사이트 내의 모든 코드 베이스를 바꾸는 작업이며 나는 여기서 Frontend 와 Backend 코드를 분리해보려 한다. 그 이유는 여러가지가 있다. 장애가 발생했을 때 장애가 퍼지는 영역을 최소화하고 싶다. 서버쪽의 코드가 제대로 작동하지 않거나 느리더라도 프론트쪽에서 서버 통신이 없는 간단한 부분을 먼저 보여주고 싶다. 언젠가는 프레임워크의 분리를 통해 전문화를 이뤄내고 싶다. 요즘은 프론트 생태계에 프론트에 특화된 많은 개발도구가 존재하는데, 현재의 상황에선 이러한 도구를 활용하기 어려운 실정이다. 레거시 코드베이스를 걷어내고 싶다. JSTL 과 같은 ..

블랙커피 JS 코드리뷰 스터디 step2 까지 회고

개요 바닐라 자바스크립트로 상태를 관리하여 UI 를 보여줘야 한다면 어떻게 하는 것이 좋을까? 그 해답에 대해 이번에 블랙커피 JS 코드리뷰 스터디를 진행하며 생각해보았다. 블랙커피 JS 코드리뷰 스터디 는 NEXTSTEP 에서 제공하는 교육이지만 UDEMY 에도 강의 영상이 있다. 이 스터디에서 만드는 것은 '문벅스 메뉴 관리' 라는 것인데, 이는 여러 프론트엔드 프레임워크를 처음 연습할 때 만드는 투두 리스트와 거의 동일하다. 다만 차이점은 카테고리별로 투두가 별도로 관리되며, 진화하는 투두리스트라는 것이다. 강의 영상 직접 만든 데모 관심사 나눠보기 이 과제는 크게 보면 자바스크립트에서 상태를 관리하고 이를 DOM 으로 렌더링하는 과제이다. 이를 개발하며 나는 아래와 같은 관심사를 발..

7월 3째주 주간 회고

7월 셋째주 회고거리 무엇이 기술블로그를 계속 운영하게 만드는가? 직장 후배에게 들은 질문이다. 이에 대한 내 대답은 동문서답일 수 있지만, 일할 때의 감정이 중요하다는 것이다. 일을 할 때 일로 받는 고통을 줄이는 최고의 방법은 일을 하면서 좋은 감정을 느끼는 것이다. 일례로 매일 정화조에 있는 사람들의 오물을 치우더라도, 다른 사람들이 봐줄 때 대의를 위해 희생하는 멋진 사람정도로 봐주면서 보상도 좋다면, 나는 일을 할 때마다 적어도 뿌듯한 감정을 느낄 수 있고, 그 일을 지속할 수 있다. 그러나 보상도 그저 별볼일 없는 데다가 냄새나는 역겨운 사람정도로 볼 뿐이라면 금방 다른 직업을 알아보게 될 것이다. 좋은 감정에는 여러가지 종류가 있다. 나는 블로그를 하며 성장, 인정, 지적 유희, 성취감 등…..

7월 2주차 주간회고

공식문서를 봐야하는 이유 강의 1강씩 정리하다보면, 결국에 마지막에 지식들이 카테고리화가 잘 안돼서 Merge 가 되지 않는다. 공식문서는 카테고리를 잘 나눠뒀기 때문에 지식이 Merge 되기도 쉬운 구조이다. 반드시 공식문서 목차라도 간단히 읽고 내용이라도 간단히 읽어보자. 지식은 Merge 되었을 때에 가장 장기기억으로 넘어가기 쉽다고 생각한다. 프로그램 작성에서의 재미 요소 GUI 가 뛰어난 프로그램을 작성하면, 마치 그래픽이 뛰어난 게임을 하는 것처럼 시각적 재미를 느꼈다. 뒷쪽에서 재미있는 데이터 연산이 일어나는 프로그램을 작성하면, 마치 보드게임을 하는 것처럼 지적 유희를 느꼈다. 회사에서 하는것들 중 특이한 것은 메모를 잘해놓자 스프링 지식과 같이 범용적인 지식은 분명 인터넷에 있다. 그러나..

6월 4주차 회고

자신만의 단권화 학습할 때, 자신만의 단권화가 필요하다. 모든 지식을 단편적으로 생각해선 안된다. 계속 합치고 잘못된 부분을 수정해나가야 한다. ex) Next.js 공식문서의 Layout 가이드를 단순하게 통번역하여 Next.js 공식문서로서 정리하지 말고 Next.js 의 Layout 이라는 단권화된 주제로 만들자 장인정신과 몰입 반 클라이번 콩쿠르를 우승한 임윤찬의 수상 후 인터뷰를 보고 느낀 점이 있었다. 심플하게 본인이 하고 싶으며 잘하는 것 하나를 계속 해나가는 것도 행복의 비결이라고 느꼈다. 나도 방해받지 않고 코딩할 수 있는 지금의 환경에 감사하며 더욱 더 좋은 결과물을 내도록 노력해야겠다. 하기 싫은데도 해야 하는 이유 결국엔 해야 내가 원하는 미래에 다다를 수 있기 때문이다. 편안한 상..

6월 4주차 기술회고

정리한 것들 HTML Element 에 바인딩된 이벤트 가져오기 window.location 이란? 바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들 자바스크립트 Promise 알아보기 자바스크립트 FormData 란? 자바스크립트 URLSearchParams 란? MSSQL 날짜와 날짜 사이 모든 날짜 구하기 자바스크립트 Proxy 란? 자바스크립트를 이용해 쿠키 값 구하기 기타 생각해본것들 append() vs innerHTML JS에서 append() 는 신중히 쓰자. 웬만하면 innerHTML 이 낫다. append() 는 문자열을 {HTMLElement} 로 파싱하는 과정도 거쳐야 하고, 만일 매번 초기화된다면 계속 초기화를 시켜주어야 한다. 반면에 innerHTML 은 자동으..

6월 3주차 기술 회고

자바스크립트 typeof 의 남용 나는 typeof 를 보통 undefined 를 확인하기 위해서 사용하는 버릇이 있다. 그런데, 다음과 같은 경우에는 typeof 보다 더 좋은 방법이 존재했다. Object 에 해당 프로퍼티가 존재하는지 확인할 때 함수의 Optional 한 파라미터가 들어왔는지 확인할 때 Object 에 해당 프로퍼티가 존재하는지 확인할 때 const obj = { a: 10, }; object.hasOwnProperty("a"); // true object.hasOwnProperty("b"); // false 함수의 Optional 한 파라미터가 들어왔는지 확인할 때 function foo(bar) { if (typeof bar === "undefined") { console.log..

6월 3주차 주간 회고

회고에 대해서 게임에서 계속 똑같은 전략에 당하면, '넌 왜 이렇게 학습능력이 없냐' 라는 소리를 듣는다. 회사에서도 계속 같은 실수를 하면 마찬가지일 것이다. 회고를 작성하는 것은 같은 실수를 반복하지 않도록 도와준다. 물론 회고를 작성하고 내 실수에 대해 인지했다고 해서 또 다시 같은 실수를 하지 않으리란 보장은 없지만 그래도 한번 더 생각해볼 수 있고 다짐을 통해 바뀔 기회를 얻을 수 있다고 생각한다. 다시 한번 생각해보는 일은 내 단기 기억이 장기 기억으로 넘어가는 일을 도와줄 것이다. 운영 환경에서의 코드 운영환경에서의 코드는 지속적으로 관리되어야 할 관리대상이며, 살아있는 유기체처럼 계속 변화한다. 이러한 특성을 고려하여 어떻게 해야 가장 효과적으로 작성할 수 있을지 한줄한줄 고..

토이 프로젝트 및 업무 일부 회고 (엑셀, 스프링 등)

토이 프로젝트 (모여봐) 회고 이번주에 프로젝트에서 어떤 것을 했는지 되돌아보자. 이번주에 한 것 thymeleaf 로 프론트 페이지를 띄웠다. html form 을 이용해 기존에 작성해둔 REST API 와 통신하여 데이터의 추가 및 리스트 조회를 구현했다. 느낀것 간단하게라도 화면을 그리면 프로젝트 진행률이 착착 올라가는 느낌이다. 이 앱에서 무엇을 할 수 있을지도 조금 더 구체화되는 느낌이다. MVP (Minimum Viable Product) 에 대한 중요성을 느꼈다. HTML Form 이 구형이 된 느낌을 받았다. 요즘 대세는 REST API 이다. HTTP Form 의 기본 전송 Content-Type은 application/x-www-form-urlencoded 이다. REST API 에서 ..

6월 2주차 기술 회고

토이 프로젝트 (모여봐) 회고 이번주에 프로젝트에서 어떤 것을 했는지 되돌아보자. 이번주에 한 것 thymeleaf 로 프론트 페이지를 띄웠다. html form 을 이용해 기존에 작성해둔 REST API 와 통신하여 데이터의 추가 및 리스트 조회를 구현했다. 느낀것 간단하게라도 화면을 그리면 프로젝트 진행률이 착착 올라가는 느낌이다. 이 앱에서 무엇을 할 수 있을지도 조금 더 구체화되는 느낌이다. MVP (Minimum Viable Product) 에 대한 중요성을 느꼈다. HTML Form 이 구형이 된 느낌을 받았다. 요즘 대세는 REST API 이다. HTTP Form 의 기본 전송 Content-Type은 application/x-www-form-urlencoded 이다. REST API 에서 ..

6월 2주차 주간 회고

개발 학습 방법 회고: 학습의 가성비 2 5월 4주차 회고 에서도 학습의 가성비를 생각했었는데, 여기에 연계된 생각이 또 났다. 예전에 김영한님 강의를 듣다가 요즘 잘하는 친구들은 야생형이라는 이야기를 하셨는데, 생각해보면 야생형 학습이라는 학습법이 학습의 가성비를 최대로 가져가는 학습법이란 생각이 든다. 일단 활용해보고, 차차 필요한 이론을 익힌다. 이 과정에서 쓸데없이 토끼굴로 빠지는 것을 막고 알아봤자 활용하기 힘든 것들이 배제된다. 만일 알아봤자 활용하기 힘든 것이라고 가정했는데 추후에 아니란 것이 밝혀진다면 그때 학습한다. 구슬이 서 말이라도 꿰어야 보배라 세상의 모든 진리를 알고 있더라도 이로운 무언가를 만들어내지 못하면 아무런 의미가 없다. 계속 개발 공부만 하는 것이 아니라 그 공부로 회사..

6월 1주차 회고

토이 프로젝트 회고 토이 프로젝트를 진행하며 프로토타이핑 UI 를 그렸다. 프로토타이핑을 하는데는 피그마를 사용했다. 프로젝트에 작성한 엔티티 중 Meetup 의 이름을 StudyGroup 로 리팩토링하게 되었다. UI 프로토타이핑을 하며 깨달은 점 어떤 기능을 만들 것이라고 글자로 생각하기보다 그림을 그리는 것이 훨씬 효율적이라는 것을 깨달았다. 그림을 그리면 자연스레 어떤 추가적인 화면이 필요할지에 대한 생각이 여러 앱을 사용했던 경험적에 기반하여 생각이 난다. 글자만으로 생각하는 것은 좋지 않다. 구체적인 그림을 그려보자. 그림을 그리면, 자연스럽게 유즈 케이스와 엔티티도 뽑혀 자연스러운 설계가 이루어지게 된다. 자연스럽게 상위 개념에서 하위 개념으로 자연스러운 설계가 가능하게 된다. TOP DOW..