전체 글260

• 

  2022년 회고 시작부터 끝까지 SSAFY와 취업으로 가득 찬 2022년이었지만, 겨우 정신을 차리고 개인적인 회고도 늦게나마 몇 자 적어 본다. 이제야 회고를 적는 것은 회사 수습 기간을 마치고 정직원이 되었기 때문이기도 하다. 누구나 수습의 위치에서는 과거를 돌아볼 여유는 잘 나오지 않기 마련이라 생각한다 ㅎㅎ 2022년은 정말 코딩 외에는 별 것을 하지 않았다. 남은 시간에는 게임과 운동을 주로 했다. 생각해보면 좀 더 건강한 취미를 가질 수 있었을 것 같은데, 되돌아보면 스스로에 대한 확신과 자신감이 지금의 나보다 훨씬 부족했기에 다른 것을 할 만한 정신적인 힘이 없었던 것 같다. 그래서 개발자가 된 것에 대한 기쁨 만큼의 아쉬움도 남는다. 하지만 이런 경험으로부터 점점 하루하루에 충실하고 삶을 사랑하는 내가 되.. My/Riverlog 2023. 1. 17.

• 

  [혼공학습단 9기] 혼.공.컴.운. - 5. CPU 성능 향상 기법 (미션 포함) # 선택 미션 CH. 05(05-1) 코어와 스레드, 멀티 코어와 멀티 스레드의 개념을 정리하기 05-1 빠른 CPU를 위한 설계 기법 클럭, 멀티코어, 멀티 스레드가 각각 무엇인지 알아보고, 이들이 CPU 속도와 어떤 관계가 있는지 학습한다. 클럭 컴퓨터 부품들은 '클럭 신호'에 맞춰 일사불란하게 움직인다. CPU는 '명령어 사이클'이라는 정해진 흐름에 맞춰 명령어들을 실행한다. 즉, 클럭 속도가 높아지면 CPU는 명령어 사이클을 더 빠르게 반복할 것이고, 이는 곧 성능이 좋다는 것을 의미한다. 그래서 클럭 속도는 CPU 속도 단위로 간주되기도 한다. 클럭 속도 헤르츠(Hz) 단위로 측정. 1초에 클럭이 몇 번 반복되는지를 나타냄. 예: 2.5GHz의 경우, 1초에 클럭이 25억(2.5 X 10^9)번.. Programming/Computer Science 2023. 1. 15.

• 

  [혼공학습단 9기] 혼.공.컴.운. - 4. CPU의 작동 원리(미션 포함) # 기본 미션p. 125의 확인 문제 2번, p. 155의 확인 문제 4번 풀고 인증하기p. 125 확인 문제 2번문제: 설명에 맞는 레지스터를 보기에서 찾아 빈칸을 채워 보세요.(1): 연산 결과 혹은 CPU 상태에 대한 부가 정보를 저장하는 레지스터(2): 메모리에서 가져올 명령어의 주소를 저장하는 레지스터(3): 데이터와 주소를 모두 저장할 수 있는 레지스터(4): 해석할 명령어를 저장하는 레지스터답:1. 플래그 레지스터: 2. 프로그램 카운터3. 범용 레지스터5. 명령어 레지스터 p. 155의 확인 문제 4번문제: 다음 그림은 멀티코어 CPU를 간략하게 도식화한 그림입니다. 빈칸에 알맞은 용어를 써 넣으세요.* 답: 코어해설: 코어는 CPU 내에서 명령어를 처리하는 부품으로, 이전에 배운 CPU의.. Programming/Computer Science 2023. 1. 15.

• 

  DBeaver란? + PostgreSQL과 연결하기 업무 중 DBeaver를 사용해 PostgreSQL로 관리되는 DB에 접속할 일이 생겼다! 단톡에서 들어본 이름이긴 한데, 플젝 진행하면서 MySQL Workbench밖에 써보지 않아서 조금 조사해봤당. 공식 웹사이트 https://dbeaver.io/ DBeaver Community | Free Universal Database Tool DBeaver Universal Database Tool Free multi-platform database tool for developers, database administrators, analysts and all people who need to work with databases. Supports all popular databases: MySQL, Post.. Programming/Database 2023. 1. 9.

• 

  [혼공학습단 9기] 혼.공.컴.운. - 2. 데이터, 3. 명령어 02-1 0과 1로 숫자를 표현하는 방법정보 단위비트(bit): 0과 1을 나타내는 가장 작은 정보 단위. n비트는 2^n가지 정보를 표현할 수 있다. 바이트(byte): 비트 X 8 킬로바이트(KB): 바이트 X 1000 메가바이트(MB): 킬로바이트 X 1000 기가바이트(GB): 메가바이트 X 1000 테라바이트(TB): 기가바이트 X 1000 이보다 큰 단위도 존재하지만, 우리가 다룰 데이터의 크기는 최대 테라바이트까지인 경우가 많다.이진법수학에서 0과 1만으로 모든 숫자를 표현하는 방법을 이진법이라고 한다. 숫자가 1을 넘어가는 시점에 자리 올림을 하여 0과 1. 두 개의 숫자만으로 모든 수를 표현한다. 10과 같이 십진수와 혼동되는 경우를 막기 위해 이진수 끝에 아래첨자 (2.. Programming/Computer Science 2023. 1. 9.

• 

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

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

• 새줄 문자(newline) Carrige Return, Line Feed, CRLF https://ko.wikipedia.org/wiki/%EC%83%88%EC%A4%84_%EB%AC%B8%EC%9E%90 새줄 문자 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. "Hello"와 "world" 단어 사이에 추가된 새 줄 새줄 문자(newline)는 텍스트의 한 줄이 끝남을 표시하는 문자 또는 문자열이다. 개행 문자, 줄바꿈 문자(line break), EOL(end- ko.wikipedia.org Programming/ETC 2022. 12. 27.

• 

  [Javascript] constructor 싸피에서 잠시 OOP에 대해 배웠지만 초반에 매우 짧게 배우고 지나가 class 관련 개념이 부족함을 느낀다. Nest.js 역시 OOP를 도입하고 있어 모르는 용어들이 나오고 있는 것 같다. constructor란 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드 constructor를 사용하면 다른 모든 메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화할 때 수행할 초기화 코드를 정의할 수 있다. class Polygon { constructor() { this.name = 'Polygon'; } } const poly1 = new Polygon(); console.log(poly1.name); // expected output: "Polygon" Programming/Javascript, Typescript 2022. 12. 23.