분류 전체보기

[함께자라기] action point

함께 자라기 애자일로 가는 길(김창준)1. 자라기멘토 혹은 사수가 서로 상반된 의견을 준다면 이러한 상반된 의견과 정보 속에서 스스로 생각하는 훈련을 해야 한다.1만 시간의 법칙에서 1만 시간은 ‘자신의 기량을 향상시킬 목적으로 반복적으로 하는 수련’을 한 시간이다.애자일 철학을 활용하여 일하는 도중에도 의도적 수련을 할 수 있다.자기가 습득한 지식이나 능력은 복리로 이자가 붙는다 -> 자기계발이 중요하다.어떻게하면 더하기보다 곱하기를 더 많이 할 수 있을까?(가용시간을 늘리고 쓸데없이 낭비되는 시간을 줄이고, 잠자는 시간을 줄이는 것은 더하기적 사고이며, 집단의 지능을 높이는 것이 곱하기적 사고이다) (39-40p)1. 자신이 이미 갖고 있는 것들을 잘 활용해야 한다. 새로운 것을 유입시키는 데에만 집..

[리팩토링 2판] action point(ch3)

Ch3. 코드에서 나는 악취리팩터링이 필요한, 때로는 아주 절실한 코드들에 일정한 패턴이 있다1. 기이한 이름(Mysterious Name)- 마땅한 이름이 떠오르지 않으면 설계에 더 근본적인 문제가 숨어있을 수 있다2. 중복 코드(Duplicated Code)3. 긴 함수(Long Function)- 간접 호출의 효과, 코드를 이해하고, 공유하고, 선택하기 쉬워진다는 장점은 함수를 짧게 구성할 때 나온다- 주석을 달아야 할 만한 부분은 무조건 함수로 만든다. 함수 이름은 동작 방식이 아닌 의도가 드러나게 짓는다- 조건문이나 반복문도 추출 대상의 실마리를 제공한다4. 긴 매개변수 목록(Long Parameter List)5. 전역 데이터(Global Data)- 전역 데이터는 코드베이스 어디에서든 건드릴..

[리팩터링 2판] action point(ch2)

리팩터링 정의명사 : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법동사 : 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다.1. 리팩터링 하는 동안에는 코드가 항상 정상 작동해야한다 -> 전체 작업이 끝나지 않았더라도 언제든 멈출 수 있다이 부분을 잘 수행하기 위해선 리팩터링 단계를 잘게 쪼개고 항상 정상 작동한다는 것을 매번 테스트를 수행하며 보장해야 한다는 말과 같다고 생각한다. Ch1에서도 강조한 부분이지만 그래서 잘짜여진 테스트가 대단히 중요하다.2. 기능 추가, 리팩터링를 명확히 구분하여 자주 번갈아 작업하더라도 두 개의 모자 중 하나의 모자를 써야 한다. 항상 내가 쓰고 있는 모..

[리팩터링 2판] action point(ch1)

조금 변경한 refactoring이더라도 매번 테스트 할 것자주하는 실수이다. 오류를 수정하거나 리팩터링을 할 때, 기존에 작성한 테스트를 실행하지 못해서 코드의 오류를 나중에 발견할 때가 많아 디버깅이 어려웠다. 작은 변경이더라도 매번 테스트를 통과하는 지 확인하는 과정을 습관화 해야겠다.리팩터링을 통한 성능문제 -> 특별한 경우가 아니라면 일단 무시하고 이후 성능이 떨어진다면, 리팩터링을 마무리하고 성능을 개선모듈화를 통해 코드가 길어질 수 있지만 전체 로직을 구성하는 요소 각각이 더 뚜렷이 부각된다. 이렇게 모듈화를 하면 각 부분이 하는 일과 그 부분들이 맞물려 돌아가는 과정을 파악하기 쉬워진다.'항시 코드베이스를 작업하기 전보다 더 건강하게 고친다.'조건부 로직을 명확한 구조로 보완하는 방법에는 ..

[Next.js] reactStrictMode

https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictModeGood to know: Since Next.js 13.5.1, Strict Mode is true by default with app router, so the above configuration is only necessary for pages. You can still disable Strict Mode by setting reactStrictMode: false.출처 | https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictModeNext.js에서는 next.config.js에 ..

프론트엔드 면접 모아보기1

1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다. 2. 자바스크립트의 동작 원리에 대해 설명해주세요.자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립..

프론트엔드 면접(배열)

1. 자바스크립트 배열에 대해서 설명해주세요.자바스크립트의 배열은 순서가 있는 리스트 형태의 배열입니다. 따라서 여러 값을 하나의 자료구조에 저장할 수 있습니다. 자바스크립트 배열은 동적 배열이기 때문에 크기를 미리 지정해 놓지 않아도 되며, 요소를 자유롭게 추가하거나 제거할 수 있습니다. 요소를 추가할 때마다 배열의 크기가 자동으로 조절되는 방식으로 동작합니다. 또한 배열은 자바스크립트의 객체와 유사한 방식으로 관리됩니다. 해시 테이블과 같은 형태로 구현되어 있어, 배열 요소들은 메모리 상에서 연속적이지 않아도 되고, 배열 크기를 미리 지정하지 않아도 사용할 수 있습니다.마지막으로 내장된 메소드를 사용하여 배열을 쉽게 조작할 수 있습니다. 예를 들어 reduce, map 등의 메소드가 존재합니다.정리하..

프론트엔드 면접(의존성배열)

1. useEffect 사용 시 의존성 배열에 빈 배열을 넣는 것을 지양해야 하는 이유는 무엇일까요?useEffect는 의존성 배열로 전달한 값의 변경에 의해 실행되야 하는 훅입니다. 그러나 의존성 배열에 값을 전달하지 않고 단순히 최초 렌더링 때 한 번 실행하도록 한다면 이 콜백 함수로 인해 발생하는 부수 효과가 실제로 관찰해서 실행돼야 하는 값과는 별개로 작동한다는 것을 의미하기 때문에 빈 배열을 넣는 것은 useEffect 훅의 취지와 맞지 않습니다.

프론트엔드 기술 면접(heap, CI/CD)

1. 힙에 대해 설명해주세요.힙은 동적 메모리 할당에 사용되며, 프로그램 실행 중에 메모리 크기가 결정됩니다. 힙에 할당된 메모리는 개발자가 직접 관리해야 하며, 사용이 끝난 메모리는 명시적으로 해제해야 합니다.2. CI/CD에 대해 설명해주세요."지속적인 통합/지속적인 서비스 제공 또는 배포 CI(Continuous Integration)/CD(Continuous Delivery, Continuous Deployment)"의 약자입니다.`지속적인 통합(CI)`은 코드 변경사항을 정기적으로 빌드 및 테스트를 거쳐 공유 레포지토리에 통합하는 것을 의미합니다. 협업에서 발생할 수 있는 conflict를 수시로 확인하고 해결이 가능하며, 새로운 업데이트의 테스트와 출시 시간을 단축시킬 수 있습니다.`지속적인 ..