분류 전체보기
-
[코드잇] 코드잇 후기!개발일기 2024. 5. 28. 16:21
SOPT 활동 진행 중 아주 좋은 기회가 왔습니다. 바로 코드잇과 관련된 것인데요. 많은 강의를 두 달 정도 무료로 들을 수 있는 기회였습니다. 저는 평소 자바스크립트에 관심이 많아, 전체 로드맵 중 자바스크립트 중급과정이 굉장히 끌리더라구요! 자바스크립트 중급 전체 커리큘럼은 아래와 같아요.(사진이 짤림;;) 저는 이중에서도 비동기 자바스크립트가 부족하다고 느껴 저 강의를 중점적으로 들었습니다. 제가 생각한 코드잇의 장점은 바로 '저렴한가격' & 질 높고 세세한 커리큘럼 이라고 생각합니다. 왜냐, 바로 멤버십이 2만원대에서 시작하기 때문이죠. 여러분들도 저렴한 가격으로 아주 좋은 커리큘럼을 경험해보시길 강력 추천드립니다.
-
[회고] NOW SOPT 솝커톤 회고넋두리 2024. 5. 23. 02:50
그토록 하고 싶었던 솝커톤.YB때 그토록 하고 싶었던 솝커톤을 드디어 OB로써 참여하게 되었다.해커톤 자체의 경험도 없었고, YB때에는 사정이 있어 참여하지 못하여 이번에는 꼭 참여하고 싶었다. 신청에 성공한 후 솝커톤을 위해 포터블 모니터까지 구매하였다. 솝커톤에서 무엇을 얻을 수 있을까?사실 개발시간이 6시간도 채 되지 않기 때문에, 코드적으로 질높은 코드를 짤 수는 없다. 그렇기에 포트폴리오에 제출할 수도 없다.그렇다면 얻어갈게 뭐가 있을까?바로 위기 대처 능력과 극한으로 몰렸을 때의 타 파트와의 커뮤니케이션 능력이라고 생각했다. 해커톤 자체가 처음이기에 리드는 아니길 바랬다.합동세미나와 웹잼은 좋은 리드들을 만났기에 이 사람들을 레퍼런스 삼으면 되지만,해커톤 자체가 처음인 나는 레퍼런스로 삼을 ..
-
NOW SOPT 자바스크립트 과제 중 타입이 string이었던 이슈Javascript 2024. 5. 12. 12:55
안녕하세요 여러분. 이번 주제는 string입니다! 자바스크립트 deep dive에 string 편을 읽던 중, 지난 자바스크립트 과제(쇼핑몰과 장바구니)에서 상품의 id의 값을 비교하여해당 상품을 localStorage에 저장하거나 삭제하는 기능을 구현할 때 product의 id와 로컬스토리지에서 가져온 product의 id의 타입이 달라 꽤 오랜 시간 고생했는데요. 초기에 작성한 코드를 같이 보시죠.//초기 코드removeProduct(productId) { this.cartList = this.cartList.filter( (item) => item.id !== productId ); } 아무 로직이 동작하지 않아서 멘붕했습니다. 아무리 봐도 로직상 문제가 없었거든요... 같이..
-
이미지 최적화 후 Lighthouse로 성능 검사하기React 2024. 5. 10. 13:44
먼저 Lighthouse는 무엇이며, 뭐하는 친구인지 알아보자. Lighthouse란 구글에서 개발한 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. Lighthouse에서 확인할 수 있는 지표는 아래와 같다.First Contentful PaintFCP사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간First Meaningful PaintFMP사용자가 페이지를 불러오기 시작하면서 스크롤을 내리지 않은 채 제일 먼저 볼 수 있는 영역에 존재하는 주요한 콘텐츠를 렌더링하는 데 걸리는 시간Speed Index웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간First CPU Idle웹 페이지가 최소한으로 상호..
-
[JS] 배열 메서드들의 올바른 역할Javascript 2024. 5. 5. 17:04
forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다.filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다.map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map은 "변환" 하는 의미를 갖고 있기 때문에, 각 요소를 변환하는 경우(a * N 등)에 적합하다.reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(redu..
-
상수 분리 중요성개발일기 2024. 4. 28. 19:36
이번 솝트 34기 웹파트에서 2주차 자바스크립트 과제(쇼핑몰 및 장바구니)에 대해약 15명 정도 코드리뷰를 돌며 공통적으로 느낀 부분이라,같이 한 번 살펴보면 좋을 것 같아 작성하였습니다. '상수화' -> 변수를 변하지 않게 만든다.왜?-> 유지보수를 쉽게 하기 위해서. 예를 들어보자. 많은 사람들이, 홈페이지와 장바구니 페이지를 이동하는 함수를 아래와 같이 구현하였다.navigateHome() { location.href = "index.html"; } 과제에 요구된 기능을 구현하는데에 초점을 맞춘다면, 이렇게 구현해도, 나쁠 것은 없다. 다만, 우리가 목표로 두고 있는 점은 웹잼이고,이 웹잼도 단순히 2주만 진행하고 끝나는 팀 보다는 꾸준하게 가지고 갈 서비스를 목표로 두고 있는데,솝트 과..
-
컴포넌트 설계의 진짜 의미React 2024. 4. 23. 17:59
우리는 귀에 딱지가 앉도록 듣는 말이 있습니다.‘컴포넌트를 잘 설계해야 한다.’ 컴포넌트 설계…?설계의 뜻이 뭘까요? 음..컴포넌트를 ‘만든다’로 쉽게 생각해도 될 것 같아요. 컴포넌트 설계를 ‘잘’ 설계한다 = 컴포넌트를 ‘잘’ 만든다. ‘잘’ 그럼 컴포넌트를 잘 만든다는건 어떤 의미일까요? 컴포넌트를 잘 나누는 것일까요?그렇다면 컴포넌트를 나누는 이유는 뭘까요?재사용 가능하게 나눠야한다는 뜻일까요? 컴포넌트의 뜻부터 같이 알아보죠. 좀 더 개발적인 의미로 들어가볼까요? 리액트 공식문서를 살펴보니, UI를 구성하는 요소라고 하네요. 우리가 흔히 말하는 컴포넌트를 재사용한다는 의미가, 결국 UI를 재사용하기 위해 ..
-
[JS]함수 선언문 vs 표현식Javascript 2024. 4. 21. 22:05
**함수 선언문 function 선언문() { 로직 } **함수 표현식 const 표현식 = function () { 로직 } 함수 선언문은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않음. => 함수 선언문은 어디서든 호출이 가능하고, 표현식은 함수를 만든 후 그 아래에서만 호출이 가능하다. 그럼 함수 선언문이 더 자유롭고 좋은거 아닌가? 그러나, 선언문의 우선순위가 가장 높기 때문에 선언문이 너무 많다면 선언문을 모으는 데에 많은 시간을 소비하게 되어 실행코드의 순위가 뒤로 밀리게 되고 실행 시간이 길어질 수 있기 때문에 적당히 사용하는 것이 중요하다고 한다. 그래서 어떤게 더 좋다는건데? 정답은..... 그런거 없다! 그러나! 함수 표현식을 지향하는 곳들이 있다 ! 예를들어 에..