본문 바로가기

분류 전체보기89

맥북 초기 세팅 기록 맥북 세팅 1.홈브루 설치 홈브루 홈페이지 들어가서 커맨드 붙여넣기 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" (설치할 때 Xcode command Line 설치하냐고 물어보면 엔터눌러서 설치하고 터미널에 echo ~~ 이런거 복붙함) 2.필요한 패키지 및 어플리케이션 설치 Brew install —cask 하면 맥용 어플리케이션을 설치할 수 있음 brew install —cask visual-studio-code google-chrome slack iterm2 Brew install 하면 패키지 설치 가능 Brew install node 로 node 설치 brew instal.. 2023. 8. 15.
Next 13에서 Markdown 다루기(next-mdx) 현재 쓰고 있는 블로그를 이전 하려고 준비 중이다. 사실 Next 13 써보면서 뭘 만들어 보면 좋을 것 같아서 생각 하다가 RSC 컨셉 자체가 블로그 같은 정적 페이지를 만드는데 적합하다고 생각했고(fs 도 컴포넌트 단에서 접근 가능하고..), 마침 블로그 갈아 엎고 싶었어서 블로그의 가장 핵심기능인 마크다운 다루는 방법을 정리해 보려고 한다! 쉬울 줄 알았는데 생각보다 어려운 점이 많았고 다행히 레퍼런스가 많아서 일단은 마크다운 다루는 건 어느정도 파악한 것 같다. 놀랍게도 개발 전에 나는 '이거 그냥 마크다운을 브라우저에서 렌더링 해주는 라이브러리 쓰면 끝 아니야?' 이렇게 쉽게 생각함 사실 틀린말은 아닌데 생각 보다 고민할 지점이 많음 블로그 구조를 잡으면서 내가 했던 고민들은 대충 요론게 있다... 2023. 8. 3.
[JS] 프로그래머스 점찍기 https://school.programmers.co.kr/learn/courses/30/lessons/140107?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 문제를 조금 풀어서 설명 하자만 x,y 축에 k의 배수 씩 점을 찍을 건데 원점과 거리가 d를 넘으면 점을 찍지 않는 것! 문제 풀이의 핵심은 원점과의 거리를 구하는 것입니다. d^2 = x^2 + y^2 위 공식을 기반으로 점을 찍을 좌표가 원점과의 거리가 d 보다 크지 않으면 answer를 올려주면 됩니다. 주의 해야할 점은 d,k의 인풋이 최대.. 2023. 7. 30.
Tailwind CSS 알아보기 예전에 스타일링 방식에 관에서 글을 쓴적이 있는데 2022.09.02 - [react] - CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 리액트 기반의 프론트엔드를 공부하다 보면 다양한 스타일링 방식을 알게됩니다. 프로젝트를 진행하며 다양한 방식의 스타일링을 사용해보려 했고 CSS-in-JS 방식과 CSS-Module 방식을 주로 사용하 hoime.tistory.com utility first 방식의 스타일링에 관심이 생겨서 공부해 보려고 한다. 최근 진행 했던 프로젝트들을 대부분 CSS-in-JS 방식을 사용했고 개인적으로 개발 경험이 굉장히 좋다고 생각한다. 특히 컴포넌트를 만들다 보면 pr.. 2023. 7. 21.
JS로 BFS, DFS 구현 위 와 같은 그래프를 탐색하는 알고리즘은 크게 DFS(깊이 우선 탐색), BFS(너비 우선 탐색)으로 나뉩 니다. 위 그림과 같은 그래프를 탐색하는 알고리즘을 js로 구현해 보려 합니다. BFS 위 그림과 같이 너비를 우선으로 탐색 => 현재 정점에가 같은 deps에 있는 노드들은 먼저 방문한다는 뜻 탐색 중인 현재 노드에서 인접한 노드를 먼저 방문 최단 거리를 찾을 때 주로 사용 자료구조 queue를 사용하여 구현 DFS 방문할 수 있는 최대 deps를 우선적으로 방문 루트 노드에서 시작해서 해당 그래프의 최대 deps 까지 탐색, 더이상 탐색할 수 없다면 되돌아가 다시 최대 deps로 방문 stack 혹은 재귀 함수로 구현 가능 code const graph = { A: ["B", "D"], B: [.. 2023. 7. 19.
[react, express , socket.io] 채팅방 구현해보기 지난번에 socket.io의 개념에 대해서 알아보았습니다. 2023.06.29 - [CS] - socket.io 딥다이브 - 개념 과 이해 socket.io 딥다이브 - 개념 과 이해 최근 이직을 위해 면접을 보러 다니는 중에 웹소켓에 관한 질문을 받은 적이 있다. socket.io를 이용해서 실시간 채팅 서비스를 만들었고 그 과정에서 웹소켓에 관한 공부를 진행한적이 있는데, 막 hoime.tistory.com 개념을 알고있으면 공식문서에 example이 워낙 잘 되어있어서 구현은 어렵지 않습니다. socket.io 는 채팅에 최적화된 라이브러리로 사용하는 사람들은 대부분 실시간 채팅방을 구현하기위해 사용할 것입니다. 나도 이전에 프로젝트 했을때 여러 채팅방 마다 소켓 연결을 관리해야해서 라이브러리에서 .. 2023. 7. 14.