전체보기250

• 

  [혼공학습단 9기] 혼.공.컴.운. - 1. 컴퓨터 구조 시작하기(미션 포함) # 기본 미션 p. 51의 확인 문제 3번, p. 65의 확인 문제 3번 풀고 인증하기 3. 다음 설명의 빈칸에 들어갈 알맞은 내용을 써 보세요. 프로그램이 실행되려면 반드시 ()에 저장되어 있어야 합니다. 답: 메모리 해설: 메모리는 현재 실행되는 프로그램의 명령어와 데이터를 저장하는 부품이다. 저장된 값에 빠르고 효율적으로 접근하기 위해 주소라는 개념이 사용된다. 3. 1101(2)의 음수를 2의 보수 표현법으로 구해 보세요. 답: 0011(2) 해설: 컴퓨터는 이진수만 이해할 수 있기 때문에, 마이너스 부호를 사용하지 않고 0과 1만으로 음수를 표현해야 한다. 그래서 사용하는 것이 '보수'를 사용하는 것이다. 2의 보수는 어떤 수를 그보다 큰 2의 제곱수에서 뺀 값을 의미한다. 쉬운 풀이법은 모든 .. Programming/Computer Science 2023. 1. 8.

• 

  [혼공학습단 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.