Youngble_개발스토리

운영 서비스의 SEO, head 설정 등의 문제로 기존 CSR 방식을 SSR 방식으로 바꾸기로 결정하게 되었다. 기존 리액트로 된 것을 NextJs로 마이그레이션 하기전에 일단 기본적인 NextJs 동작방식을 튜토리얼 식으로 해봐야겠다고 생각했다. 다행히 그전에 사놨떤 udemy 강의 리액트 코스중에 NextJs를 사용해보는 튜토리얼+응용배포 까지 있어서 쭉 따라해보았다. 30개 가량의 리스트의 약 3시간 30분 짜리 동영상 코스를 약 3일정도 걸쳐서 다보게 되었는데 해보니깐 참 흥미로운 점이 많았던거 같다. 일단 useEffect을 통한 API요청을 안하고 getStaticProps, getServerSideProps, getStaticPath에서 해당 값들을 객체형식을 return 하는 방식으로 사용..

오늘 branch flow 관련하여 CTO님께서 설명 가이드를 해주셨다. 기존의 단순한 main, develop, sub branch 이외에도 상황에 따라 flow 전략이 달라질수있고 어떻게 활용해야 해당 branch 가 꼬이지 않고 유지할 수 있는지 알게 된거 같다. 이러한 발단은 다음과 같다. 운영서비스 중인 운영 사이트와 개발 테스트를 위한 개발 dev 사이트 두개가 있는데, 작업 테스트는 develop 브랜지를 통해 CI/CD 배포를 하고 이러한 모든 작업을 마치고 정식 운영 서비스로 main 브랜치를 통해 배포가 되어있는 상태였다. 그러던 중 two issues 가 발생하였다. 첫번째는 대표님께서 급하게 다른 관련 업체사람들과 미팅과정에서 사용하고있는 데이터가 잘 활용한것인지 필요했기때문에 개발..

너무 바빴다.. 진심 지난주 주말부터 요번주 주말까지 새벽까지 풀로 달렸다. 스케쥴이 바쁜거였을까 타이트한 일정을 만들어서 바쁜거였을까 아직도 헷갈린다(이하생략...) 개인공부도 못하고 휴가계획도 제대로 못짜서 지금 상태는 멍하다. 요번주에 진행하면서 오 새로운거다! 좀더 보는 시야가 넓어졌다 라고 느낀점은 크롤링 관련인데, 직접적으로 내가 크롤링을 했다는게 아니라 robots.txt라는 것과 sitemap.xml이라는 것이였다. robots.txt SEO 부분 영역에서 구글이나 다른 검색엔진에서 웹사이트에 대한 검색엔진 로봇들의 접근을 조절하여 해당 서비스를 크롤링해서 해당 자료를 다른사람이 본다거나, 보면 안되는 라우팅 부분을 설정해줘서 이를 disallow 하는 부분이였다. 왜냐하면 크롤링 할경우 ..

요새 어떻게 기존 코드의 class 명을 유지하고 지을까.. css는 어떻게 작성해야할까.. 디자이너와의 협업시 디자인시스템이라는게 있는데 무엇일까.. 핸드오프로 같이 할때 최적은 무엇일까 등등 고민하다 css관련 class명에 대한 보물을 찾아서 이거다! 싶은게 있어서 간단하게 왜 선택하였는지 어떤 특징이 있는지 간단하게 이야기 하려고 한다. 그 이름은 바로 Tailwind CSS !! 사용 목적, 결정한 이유 기존 프로젝트의 css 사용 방식이 순수 css로써 클래스명을 정의하고 사용 하였다. 다른 사람이 만들었기 때문에 유지보수도 힘들다고 판단하였고 해당 클래스명 명명 방법론도 BEM, SMACSS, OOCSS 등 충분한 이해가 필요하여야 추가적인 작업이 가능하기 때문에 런닝커브(?)와 CSS이해하..

지금까지 그리고 앞으로도 기초, 기본이 되는 관련 지식 공부, 써보지않은 프레임워크, 라이브러리를 사용 해나가겠지만 이거 외에 요새 실무적인 효율성, 협업, 유지보수, 현재 트랜드로 사용되는 이유와 필요성을 고려하고 생각하는 시간을 가지게 되었다. 그전에 어떤건지 대충은 알았지만 공부나 사용 우선순위가 아니라 미루었거나 해보고 싶었지만 체감상 그전에 혼자 경험할 수없고 찍먹하기에는 껍데기만 핥을거 같아 미루었던 부분에 대해서 생각하고 정리하여 리스트를 만들면 좋겠다고 생각했다. 어떠한 고충이 있었고 느꼈는지, 그래서 앞으로 어떤걸 배우고 접목시킬지 서술하려고 한다. 결국 '왜' 라는게 생기기 마련인것 같다. 이러한 생각과 결정을 한 이유는 현재 자사의 서비스에서 jQuery, JSP 로 사용된 레거시 코..

오늘 새벽으로 약 1달의 걸쳐 읽었던 코어자바스크립트를 다 읽었다. 앞부분부터 this 바인딩, 콜백함수 관련해서까지 정말 설명도 잘하고 쉽게 알지 못하는 걸 잘 설명했다고 느꼈는데 클로저, 프로토타입, 클래스 부분은 그전에 공부를 안해봐서 그런지 몰라도 난해하기도하고 설명을 뭔가 중간을 뛰어넘고 바로 예제를 주고 그거에 대한 설명이 조금 부족하지 않나 싶었는데 솔직히 코어자바스크립트 책이 기본적인 지식을 하나하나 알려주는 책은 아니고 이미 어느정도 알고 핵심내용을 좀더 깊게 다루는 내용이라 이부분은 내가 더 공부해야겠다고 느꼈다. 또한 이 클로저 같은경우 리액트의 useState도 클로저를 이용하여 만든것이라고 리액트 프로젝트의 react/cjs/react.development.js 경로로가면 볼수있..

프로젝트 진행하면서 useRef를 사용해야하는지에 대해서 검토하기위해서 여러 정보를 얻을때 꼭 useState와 useRef의 비교를 하고 그에 대한 글만 있다. 많이 써봤기때문에 당연히 차이는 리랜더링 되고 안되고 차이, input 값을 참조할수있다는 점 등에 대해서는 알고 있었지만 나는 궁금했던게 useRef를 쓰면 ref의 current 값이 변하더래도 리렌더링 되지않는다는면에서 useState와 차이를 가지고 쓸데없는 렌더링이 없는 경우를 생각해서 쓴다 라고했는데 그러면 useRef와 일반적인 변수선언할당으로 관리하는 state차이는 무엇이지? 라고 생각했다. 어차피 리랜더링이 필요없다면 useRef를 쓰던 일반 변수에 값을 사용하면 되지않을까? 굳이 useRef를 쓸필요가 있냐가 나의 관점이였다..

현재 재택근무할때 나의 작업장비 셋팅 상황이다. 왼쪽에 요번에 새로산 DELL P2722H 모니터로 피벗 새로 모니터를 사용하고싶어서 사게되었다. 좀더 싼걸로 사거나 24인치로 살까 하다가 모니터는 거거익선 이라는 말도 있고 어차피 새로사는거 후회하지않게 사자 해서 모니터하면 DELL이라해서 27인치로 고르게 되었다. 나중에는 모니터암도 사서 모니터위치들도 좀 바꾸고 하고싶다. 셋팅하고 코드를 잠까 보면서 어떤가 봤는데 처음에는 세로다보니깐 쳐다봐야하는 위치가 위로 가면서 뭔가 목이나 눈에 피로감이 더생길거 같다고 생각했는데, 위치도 바꾸고 의자 각도도 변경하면서 나름 괜찮은거 같다. 이제 코드볼때나 진행된 화면을 테스트할때 보다 쾌적한! 환경에서 할수있어서 좋다고생각한다.

다음과 같이 useEffect를 사용하여 jQuery메서드 on 으로 해당 요소를 이벤트 등록을 해주었다. 그런데 해당 태그를 눌러 이벤트가 발생하면 2번이 실행돼서 왜이러지? 찾아보니깐 useEffect부분에서 두번 실행돼서 등록이 2번 되니 한번 클릭해도 두번의 이벤트가 발생하는 것이였다. 처음엔 랜더링이후 state값이 변하는게 있기때문에 한번더 했다라고 생각했는데, 해당 컴포넌트에서는 상태값을 쓰지도 않기때문에 이에 해당해서는 안되었다. 그래서 useEffect이 한번만 실행해야하는데 2번이 되는 이유를 찾아보니 index.js에서 strictMode가 존재하면 두번 랜더링된다고하는데 이 strictMode는 검사 도구라고 생각하면되고 개발 모드에서는 오류를 잘잡기위해 두번씩 렌더링을 한다고 한..

코어자바스크립트를 보다가 변수이름앞에 $을 붙이거나 _ 가 있는것을 보고 이게 무슨의미인가 찾아보았는데 단순히 식별자 로써 사용할수있다고한다. 다른 특수문자나 숫자 등은 맨앞에 붙일수없지만 $(Dollar Sign)와 _(Underscore)는 사용할수있다고 한다. 그런데 관례(?)적으로 변수앞에 $을 쓸때 보통 document.getElemetById 를 쓸때 사용한다고도 하고 jQuery 객체를 담을때 사용한다고 하는데 이렇게 들으면 애매하지만 예시를 보면 언제 쓰이면 좋은지 알수있다. 보통 변수안에 값을 할당해줄때 string, number, function, object 형식으로 이루워진다. 일반적인 변수명과 할당 const a = 1; let b = 'a'; const c = function (..