전체보기261

• 

  [혼공학습단 9기] 혼자 공부하는 컴퓨터 구조와 운영체제 혼공학습단은 한빛에서 운영하는 시리즈를 6주 동안 나눠 공부하고 블로그에 정리해 페북 페이지에 함께 공유하는 모임이다. 작년 하반기 동안 컴퓨터 구조, 운영체제, 네트워크 스터디를 진행했고 이번 주로 모두 끝났지만, 복습을 꼭 해야 겠다고 생각했던 중 컨님이 책을 선물해주셔서 참여해보기로 했다! 교재 혼공학습단 소개 링크 https://hongong.hanbit.co.kr/%ed%98%bc%ea%b3%b5-%ea%b2%8c%ec%8b%9c%ed%8c%90/?uid=75&mod=document&pageid=1 [혼공학습단 9기] 모집 안내(2022.12.15 ~ 25) hongong.hanbit.co.kr 주차별 커리큘럼 일과 병행하기 적은 양은 아니지만, 미션은 가벼워서 충분히 참여할 수 있는 정도다. .. Programming/Computer Science 2023. 1. 7.

• 

  [Javscript] window.scrollTo() 메서드 scrollTo는 document의 특정 좌표로 이동시켜주는 메서드다. 좌표의 숫자 단위는 픽셀이다. 숫자를 지정하면 직접 DOM 조작을 하지 않고 스크롤을 컨트롤할 수 있어 좋다. 내가 실제로 사용해 본 아래 예시처럼 behavior: smooth와 같이 움직임에 대한 옵션을 줄 수도 있다. 주의할 건 IE에서는 작동하지 않는다는 점이다. IE가 공식 지원 종료되면서 고려해야 하는 경우가 많이 줄어들기는 했겠지만, 만약 IE에서도 같은 동작을 하고 싶다면 우선 사용자의 브라우저 정보를 읽어 조건문 처리한 뒤, 비슷하지만 조금 다른 메서드를 사용해야 한다. const handleClick = () => { if (!window.scrollY) return window.scrollTo({ top: 0, b.. Programming/Javascript, Typescript 2023. 1. 3.

• <클린 코드> 4강. 주석 일 하면서 코드를 짜다가 올바르게 주석을 다는 법에 대해 문득 궁금해졌다. 싸피에서 프로젝트를 하면서 시간 없다는 핑계로 주석을 달지 못할 때도 있었지만, 코드를 다시 보면서 공부하는 편인 나 스스로를 위해서라도 주석을 충분히 다는 편이었다. breadcrumbs를 수정하면서 코드를 대폭 수정하면서도 주석을 거의 코드 단위로 달고 있었는데, 회색 주석이 빽빽하게 있는 화면을 보면서 주석이 많은 게 꼭 좋지는 않을 것 같다는 생각을 했다. 하지만 내 뇌피셜만 믿고 넘어갈 수 없었기에 '주석 잘 다는 법'을 구글링해보니 그 유명한 클린코드에 한 장을 할애해서 적혀 있었다. 아직 클린코드를 읽어 보지 못헀지만 잘 정리한 글이 있어서 북마크! [클린코드] 4강. 주석 4장. 주석 주석이 나쁜 이유 나쁜 코드에 .. Programming/ETC 2023. 1. 3.

• 

  [Javascript] reduce() 함수 회사에서 개발하던 중 리스트의 요소들을 누적하여 다시 return하고 싶은 경우가 있었다. 이를 테면 조각조각 떨어져 있는 URL 안의 요소들을 합치고 싶을 때다. 이럴 때는 map 함수가 아니라 reduce 함수를 쓰면 가장 효율적으로 구현할 수 있다.정의reduce() 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 예시const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4const initialValue = 0;const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue);.. Programming/Javascript, Typescript 2023. 1. 2.

• 

  react-router-dom의 Outlet, Routes, Route 알고 있다시피 React는 Single Page Application 방식의 프레임워크다. react-router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 렌더링 해주는 라이브러리다. 컴포넌트 여러 Route들을 감싸서 그 중 규칙이 일치하는 Route 하나만을 렌더링 시켜주는 역할 컴포넌트 path 속성 경로 element 속성 컴포넌트(여러 Route를 매칭하고 싶은 경우 URL 뒤에 * 사용)\ 예시 const App = () => { return ( {/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */} ); }; export default App; 태그 Outlet 태그는 중첩 라우팅을 가능하게 해주는 태그.. Programming/React 2023. 1. 2.

• 

  MUI Breadcrumbs 빈 Breadcrumb 하나가 중간에 삽입되는 오류를 고치고 있다. Breadcrumbs가 무엇인지는 알고 있었지만 프로젝트에서 써 본 적이 없어서 개념부터 정리해 봤다! Breadcrumbs의 정의 Breadcrumbs는 웹사이트의 계층적 구조 안에서 유저가 페이지의 위치를 시각적으로 파악하는 것을 돕는 링크들의 리스트다. 또, 해당 페이지의 모든 조상으로의 이동을 가능하게 한다. 내가 블로그 글을 쓰는 경로를 예로 들자면(현재 티스토리에서 제공되는 기능은 아니지만) 상단에 티스토리 홈 > 블로그 설정 > 글쓰기와 같은 링크들의 연결고리가 적혀 있다면 breadcrumbs다. 헨젤과 그레텔이 빵가루를 떨어뜨려 길을 찾으려고 했던 것이 생각나는 귀여운 작명이다 ㅎㅎ 기본 형태 import * as Rea.. Programming/HTML, CSS 2022. 12. 28.

• 나만의 포트폴리오 웹사이트...가 아니고 홈페이지를 만들어 가는 여정 싸피 당시에 자율 마지막 주에 포트폴리오를 만들 수 있는 시간을 마련해 주셨는데, 완성을 못해서 많은 아쉬움이 남는다. 아무래도 채용 과정에서 한 눈에 쭉 스크롤을 내려 볼 수 있는 예쁜 포트폴리오가 좋다고 생각해서, 지금 내 이력서는 아무래도 너무 못나서 첫 토이 프로젝트로 정했다 ㅎㅎ 매일매일 조금씩 만들어 가면서 여기에 정리해 보기로! 2023.01.17. 트위터 타임라인 한 개발자 분이 Vercel에 배포하면 무료 플랜으로 개인 홈페이지 트래픽은 전부 커버된다고. Next.js or Svelte 둘 중 하나로 개발하고 Vercel에 배포해봐야겠다. 벌써 다른 분들 웹사이트 예시 보면서 두근두근 2023.02.03 사내 스터디에서 코드리뷰를 하면서 진행하는 프로젝트로 이 홈페이지 만들기를 선정하고 .. My/Riverlog 2022. 12. 28.