오늘은 리팩터링 2판 3단원의 코드스멜 단원을 읽으며 드는 생각을 나눠보려해요~ 그리고 내용을 읽어보면서 팀문화에 녹여낼 수 있다면 좋겠다는 점도 써보고싶어요! 기이한 이름 기이한 이름 단원에서 설명하고자하는 바는 N년차 개발자들의 최대 고민인 변수(함수)명 짓기에 해당해요. 해당 파일을 작성하고 있는 본인은 당연하다고 생각한 "이름 짓기"도 처음보는 사람 입장에선 전혀 이해가 안가는 경우가 있을거에요. 저는 최대한 코드의 맥락을 통해 어떤 역할을 담당하는지 나타내고자 스스로 "리팩터링"을 진행하며, “코드리뷰”를 통해 다시 한번 체크하고 넘어가고 있어요! 대표적으로 아래와 같은 함수를 리팩터링을 통해 효과를 얻을 수 있어요! {getDurationTimeBy(distance)} // 결과값 : 00분 ..

6월 중순부터 사내 개발팀 스터디를 진행하고 있어요. 저는 첫번째 책으로 리팩터링 2판을 읽고 있고, 이 책을 읽으며 드는 생각과 앞으로 개발팀 내에서 어떻게 발전해나가면 좋을지 공유하고자 스터디 내용을 정리하여 공유하고자 해요! 저자의 내용을 토대로 지극히 저의 주관적인 생각을 담고 있음을 알려드립니다. 리팩터링 2판 서론.서론 내용은 다음과 같이 정리할 수 있어요. 1. 그냥 리팩터링하면 되지 않을까요? → 리팩터링엔 위험이 따라와요.동작하는 코드 수정에 미묘한 버그 생길 가능성잘못 수행시에 오류로 시간과 노력이 수포로 돌아갈 가능성그렇다면 어떻게 리팩터링 하면 좋을까요? 계획적이고 체계적이도록 실행하자!(목표를 설정?!) 2. 리팩터링이란? 겉으로 드러나는 코드의 기능(동작)은 바꾸지 않지만 내부 ..

드디어! 마무리 할 시간이 왔습니다! 오늘은 마지막으로 selected 상태를 다루는 과정을 알아보려해요! selected상태일 땐, 아래 사진과 같이 글씨 상단에 노란 점을 찍어보려하는데요! 지난 시간에 after before를 사용해봤는데 이거.. 안해봤겠죠?? ​ 그래서! 오늘은 '어떤식으로 만들기 위해 접근할까'라는 생각을 갖고, 접근 방식을 보려해요! ​ 글씨위에 점이 생기네?? (새로운 tag를 만들고, selected일 때만 tag를 보이게 해야하나..?) 이렇게 생각할 수 있지만 오늘은 가상 요소 선택자의 before 사용하여 다뤄보려해요! ​ 1. before를 만들어, absolute로 top:0에 left : 50% 를 주면 가운데에 생기겠지??? 먼저 위와 같이 만약 selected..

오늘은 정말 간단하게 절대경로를 뚝딱 설정하는 법을 알아보도록 하자! 기억상으로...는 React에서 절대경로를 사용하려면 좀 복잡하게 설정해야했던 기억이 있다...?! 물론 내가 엄청 돌아갔을지도 모르겠지만 react-app-rewired와 customize-cra를 설치해서 config 파일도 만들고해서 귀찮았던 기억이 있지만, Next에선 정말 간편하게 할 수 있다! 후후 저번 시간에 만들어졌던 tsconfig.json 파일에서만 수정하면 되는데요! 아래처럼 기존에 있던 compilerOptions 에다가 추가로 baseUrl을 "."으로 현재경로로 설정한 후! paths를 통해 설정해주면 끝~!!! { "compilerOptions": { "baseUrl": ".", "paths": { "@lib..

프로젝트를 시작하기위해선 어떤 환경에서 개발을 할지 생각을 해봐야한다! ​ 그 중에 NextJs로 개발환경을 구축하는 과정에 대해 알아보고자 한다. ​ 일단 한가지는 보안 전문회사라 개발pc의 보호를 위해 외부망도 쓰지 않고 인터넷도 차단된 공간에서의 오프라인 설치..... 과정이다 ​ 아 물론! 패키지설치를 위한 npm은 작동된다! ​ 일단, 확실한건 create-next-app이 불가능하기에 다음과 과정으로 next를 수동설치하게 되었다. ** 수동설치 필요없는 분은 npx create-next-app 한 방이면 끝!!!!!! ​ 1. Next / React 설치! ​ 먼저 아래와 같이 터미널에 입력하여 package.json과 react next typescript 기반으로 설치를 할 수 있다! 사..