남남이루의 고군분투 🌳

HTML 왜 해? 처음 HTML을 접한 건 경영학부 수업인 MIS 경영정보시스템이었다. 다짜고짜 HTML문법 알려주고 브라우저에 띄우라는데, 머리 속에 물음표만 가득했다. PowerPoint로 10초면 그릴 수 있는 걸 굳이 타이핑을 친다? 신기하긴 한데 내 컴퓨터에서 밖에 안 보인다고? 이렇게 하찮아 보이기만 했던 HTML이 어떤 역사를 거쳐 지금처럼 발전해왔는지, 웹 프로그래밍에 있어 얼마나 중요한 기반이 되는 지 꿈에도 몰랐다. 개발자로서 처음 화면을 구성할 때, 화면에 대시보드 JavaScript....를 검색해서 나오는 여러 코드들을 망라해서 읽었다. 도무지 패턴을 알 수 없었고, 자동완성 되게 할 거면 meta랑 head는 왜 쓰는 것이며.. 같은 의문이 있었다. Frontend 프로젝트를 두..

mutation ⚡ mutation, 객체 변이 JavaScript의 객체나 배열을 수정하거나 할당할 때, 예상치 못한 변이가 생기는 것. 참조 잘못 하거나, 메서드 잘못 사용하게 되면서 예상치 못한 버그 양산하게 된다. (관련 학습 - 깊은 복사, 얕은 복사, 상태관리) 추가된 메서드 1 : to어쩌구 메서드 JS는 메서드마다 mutation에 대한 일관성이 매우 떨어짐 arr.sort() 는 원본의 순서를 바꿔버리고, arr.filter() 는 원본에는 변화가 없음. reverse() 는 원본을 변화시킴..ㅎㅎㅎ 위 세가지 메서드에 대해 Mutation 방지할 수 있게 새로 나옴 : toSorted, toSpliced, toReversed 새로 생긴 toSorted 메서드는 원본에 변화가 없다! to..

작성일 2023. 5. 15 자료 제목 2023-05 소식 본 머리글 'Naver-FE-News'는 Naver FE 엔지니어들이 발행하는 뉴스레터에 대한 개인적인 기록입니다. 인상깊었던 기술 한글 자동완성을 위한 정규식 라이브러리 소개글, bluewings님의 블로그 구현 코드 레포 검색창에 한글을 입력하다보면, 자음이 새로 추가될 때마다 자동완성 창이 끊기는 현상이 있었다. 불편함을 느끼긴 했는데, 원인이 한글이 조합으로 구성되는 특징에 의한 것이라고 생각해보지는 않았던 거 같다. 위 라이브러리는 이런 불편을 해소하기 위해 등장했다. (뚜둥) npm install로 설치가 가능하다. npm install korean-regexp import { getRegExp } from 'korean-regexp'..

작성일 2023. 3. 2 범위 Clean Code 도서, Chaper 6. 객체와 자료구조 참고 자료 : groom의 CLEAN CODE JAVASCRIPT clean-code-typescript 🚿 타입스크립트를 위한 클린코드 - 한글 번역판 [Clean Code] 6. 객체와 자료구조 👌 객체 : 동작을 공개하고, 자료를 숨김. 동작변경없이 새객체 타입 추가에 용이 다만 기존 객체에 새 동작 추가하기가 어려움 👌 자료구조 : 자료 노출 ⇒ 새 동작 추가하기 쉬움. 다만 기존 함수에 새 자료 추가하기 어려움 📍 새로운 자료 타입을 추가하는 유연성이 필요하면 객체가 더 적합 다른 경우로 새로운 동작을 추가하는 유연성이 필요하변 자료 구조와 절차적인 코드가 더 적합 자료추상화 이미지 변수 사이에 함수라는..

테스트 도구 사용 동기 혈당당 Frontend 개발을 맡으며, ESlint를 사용해도, API요청이 컨텍스트에 있을 경우, 실제 배포 후에야 확인하게 되는 오류가 많았다. 또한, 한 개의 컴포넌트를 페이지 단위로 작성해버리니 모듈화도 잘 안 되고, 오류 파악도 어려웠다. 이것은 클린코드에서 지향하는 코드와 거리가 멀다고 생각했다! 따라서 단위 테스트에 대해 더 공부해볼 필요를 느꼈다. 자료는 Udemy의 React 완벽 가이드를 참고했다. 테스트 도구의 종류 Jest : 브라우저 (특히 렌더링)를 시뮬레이션 하는 도구, 흔하게 사용함, CRA에 이미 설치 되어 있음 React Testing Library : CRA에 이미 설치 되어 있음 기타 라이브러리 Jest 사용해보기 세팅하기 CRA는 별도의 세팅이..

포스팅 동기 : npm은 node package manager 인 건 알겠으나, 언제 패키지를 설치하고, 또 언제 초기화해야 하는 지 잘 몰랐다. 따라서 의존성 문제로 에러가 나면 기계적으로 npm init, npm i, -g 옵션 붙였다 뗐다를 했었다. 이 김에 정리해보자. npm 명령어 사용 위치 보통 프로젝트 단위(어플리케이션 단위)에서 써왔다. 아마 실무에서는 멀티레포지토리를 쓰는 경우 의존성을 다르게 관리할 것이므로, 레포 범위에서 사용할 것이다. (node_modules를 폴더로 가지고 있는 레포의 최상위 경로) 패키지 관련 명령어 • npm init npm init 명령어는 보통 npm을 처음 프로젝트를 만들거나 패키지를 만들 때 사용한다. 프로젝트 폴더 최상단에 package.json을 만..

작성일 2023. 2. 6 범위 Clean Code 도서, Chaper 5. 형식맞추기 [Clean Code] 5. 형식맞추기 형식을 맞추는 목적 👌 코드 형식은 의사소통의 일환이다. 의사소통은 전문 개발자의 일차적인 의무다. 적절한 행 길이를 유지하라 세로 위치가 조금만 차이나도(코드 길이) 실제 크기는 크게 달라진다. 신문 기사처럼 작성하라 개요 → 구체화 내용을 정확하게 요약하고 있는 제목(함수명, 변수명) 의 형식을 갖추고 있는 신문기사 처럼 코드를 작성하라 개념은 빈 행으로 분리하라 빈 행 다음에는 집중도가 올라간다. 빈 행은 새로운 개념을 시작한다는 시각적 단서이다. 세로 밀집도 서로 밀접한 코드행은 세로로 가까이 놓아야 한다. 수직거리 같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 ..

작성일 2023. 1. 23 범위 Clean Code 도서, Chaper 3. 함수 [Clean Code] 3. 함수 함수를 만드는 규칙들 1. 작게 만들어라 함수는 작을 수록 좋다. (중첩 구조 X, 들여쓰기 수준은 2개 이하) 2. 한 가지만 해라 함수가 여러 일을 할 수록 이해하기 어려워진다. 3. 함수당 추상화 수준은 하나로 4. 서술적인 이름을 사용하라 함수의 이름은 함수의 일을 잘 표현하는 이름일 수록 좋다. 5. 이상적인 인수의 개수 : 0개 인수가 많아질 수록 읽는 사람에게 혼동을 준다. 따라서 인수는 적을 수록 좋다, 0개에서 1개를 유지하라. 6. 부수 효과를 일으키지 마라 7. 명령과 조회를 분리하라 함수는 뭔가를 수행하거나 답하는 하나의 일만 해야한다. 8. 오류코드보다 예외처리하라..

작성일 2023. 1. 16 범위 Clean Code 책, Chapter 2. 의미있는 이름 Clean Code 2. 의미있는 이름 1. 의도를 분명히 밝혀라 좋은 변수의 예시 : elapsedTimeInDays daysSinceCreation daysSinceModification fileAgeInDays 코드의 맥락이 코드 자체에 명시적으로 드러나도록 한다 코드에 함축성을 부여한다, 의미를 명확하게 담고 있는 명명이 필요하다. 2. 그릇된 정보를 피하라 일관성이 떨어지지 않도록 한다 ex. add를 리스트에 추가하는 메서드에 넣었다면 append 등의 단어와 혼용하지 않도록 한다 3. 의미있게 구분하라 list에 추가하는 메서드와 data 포맷에 특정 용도로 추가하는 메서드가 있다고 가정했을 때 굳이..

구분 테크 커리어 강의 목적 테크 업계의 생생한 커리어 이야기를 듣고, 내 커리어 방향 잡기, 동기부여 하기, 롤모델 찾기 날짜 2023. 4. 28 금요일 (PM 6:30 ~ 9:30) 후기: 나를 알고, 전략적으로 성장하자! 발표 제목 : 성장이 아닌 확장을 꿈꾸기 발표자 : 네이버웹툰 개발자 황선영님 목차 1. 성장에 대한 의문 2. 도전하는 삶 3. 결국은 확장하기 Problem - Solution 식으로 정리 성장이란 뭘까? Problem - 성장에 대한 편견 1. 성장엔 정도가 있다. 2. 성장은 객관적으로 평가할 수 있다. 3. 모두에게 동일하게 적용된다. IOS 개발자의 Go언어 배우기? => ?, 누가 기다 아니다 정의할 수 있을까 의료기기 개발자의 트렌드 쫓아가기 => 성장인가 아닌가 ..