Mo's Develog

퇴근 후 조금씩 문제푸는 습관을 들이는게 역시 생각보다 쉽지않네. 하지만 고작 Lv.0으로 가타부타 하면 안되지. 근데 왜 자꾸 1페이지에 풀지 않은 문제가 계속 생기는거지? 이것도 무슨 알고리즘 같이 비슷한 문제 계속 추천해주는건가?? 무튼 빨리 입문 뿌시고 Lv.1 부터 가보즈아!

앞으로 알고리즘과 코딩테스트를 준비하기 위해 0부터 시작해보자고 결심했다. 처음에는 백준에서 단계별 문제로 시작하려고 했는데, 백준은 뭔가 IDE와 가깝지 않아서 그런지 거부감(?)같은게 들었다. 그리고 문제를 확인하는 공간과 정답을 입력하는 공간이 나누어져 있어 보기가 탭으로 전환해야하는 불편함 때문에 UX가 좀 떨어지는 맛이 있어서 아쉬웠다. 그래서 바로 프로그래머스로 넘어갔는데 이게 왠걸?! 프로그래머스는 기업들의 실제 코딩테스트가 진행되는 사이트 답게 문제풀이와 제출 등이 정말 잘 되어있었다. 오히려 문제 푸는 맛이 난다랄까? 다시한번 UX의 중요성을 느낀거 같다. 같은 서비스를 제공해도 UX가 좋지 않다면 사용자를 놓칠 수 밖에 없는 것이 지금 시대의 흐름이니까. 무튼 프로그래머스에서 제공해주는..

하드디스크 클라우드 서비스로 유명한 AWS S3 사용방법을 알아보자 AWS S3에서 버킷만들기 AWS가입하고 로그인 하면 콘솔홈으로 접속될 것이다. 여기서 우측 상단 아이디 왼쪽에 region, 그러니까 지역을 선택하는 dropdown이 있을텐데 클릭 후 자신이 위치하는 곳에서 가장 가까운 곳으로 선택하자. 본인은 서울이므로 서울로 선택함 자 그리고 검색창에 s3라고 입력 후 나오는거 클릭하자 그리고 새 버킷, 즉 저장소를 만들기 위해 노랑버튼을 누르자 자 그러면 다음과 같은 창으로 넘어갈텐데 위에서 보듯이 버킷이름은 유니크한 이름으로 적어주자. 그리고 다른건 특별히 건드릴 것 없고 퍼블릭 엑세스 차단을 해제해주고 경고창의 체크박스에 체크를 해서 위험은 내가 감수하겠다는걸 얘기해준 후 최하단에 버킷만들기..

요즘은 소셜로그인이 대세다. 왠만한 곳들은 회원가입하기를 들어가보면 카카오톡, 페이스북, 구글 등의 소셜회원가입이 가능하다. 그중에서 오늘은 가장 쉽게 붙여볼 수 있는 github 로그인을 nextjs에 붙여보자 소셜로그인이라는건 예를 들면 철수가 내가 만든사이트(A.com)에 회원가입 페이지에 있는 '카카오톡으로 회원가입하기' 버튼을 누르면 카카오톡 아이디랑 비번을 넣어서 로그인 하라는 페이지를 보여주고, 거기서 철수가 카카오톡 아이디랑 비번을 입력하고 '카카오톡 로그인하기' 버튼을 누르면 카카오톡은 철수에게 '야 A.com에 님 정보 주는거 동의함?' 이라고 물어 볼 것이다. 거기서 동의를 하면 이제 철수의 카카오톡은 A.com에 철수의 이메일, 이름, access token 등의 정보를 넘겨주게 된..

사이드 프로젝트 하나 하고잡은데 백엔드 구하기 귀찮거나 아싸라서 그런거 못하는 프론트엔드를 위해 mongodb를 사용해서 간단하게 db구축해보자 mongodb는 본인기준 비관계형 db중에 가장(?) hot한데 관계형 db보면 갑자기 속 울렁거리는 프론트들을 위해 아주 친숙한 object형으로 db가 만들어져있으니까 속 편하게 해볼 수 있을 듯하다. (관계형 비관계형이 뭔지는 핑프아니면 검색해보자) 자 그럼 바로 레쓰기릿해보자 최초에 mongodb사이트에 가입을 하자. 1. ??? : 설치와 가입은 항상 긍정적인 마음으로 하거라 처음 가입하는 과정에 막 설문조사 같은거 물어볼텐데 친절하고 긍정적으로 답변 해도되고 안해도 나중에 바꿀 수 있으니까 하자. 그리고 혹시 님 돈 좀 있는지를 물어보는데 우린 항상..

package화 하게 된 계기 회사에는 그 회사만의 컬러나 디자인 시스템이 있을 것이다. 때문에 클라이언트에게 서비스하는 다양한 도메인에서 고작 버튼이라도 동일하거나 비슷한 버튼을 사용할 것이다. 그럴 때마다 동일한 코드를 계속해서 작성해서 동일한 컴포넌트를 만드는 것은 재사용성이나 유지보수 측면에서 절대 좋지 않을 것이다. 때문에 디자인 시스템이 정해진 곳이라면 모든 도메인에서 공통적으로 사용하는 컴포넌트들은 라이브러리화하여 가져다 쓸 수 있다면 정말 좋지 않을까? 그러기 위해서 아주아주 유명한 npm에 publish하여 npm install로 사용할 수도 있겠지만... 보통 회사에서는 private repo로 서비스를 관리하는데 이런 private repo를 npm에 registry하려면 돈을 내야한..

NextJS가 뭐죠? 👉 https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org The React Framework for the Web NextJS는 React 프레임워크(Framework)이다. 프레임워크 vs 라이브러리 React는 라이브러리이고, NextJS는 그 React의 프레임워크라고 한다. 프레임워크와 라이브러리의 차이는 뭐지? 프레임워크 ..

HTML, CSS, JS => 리액트화 시 어려웠던 점 useEffect안에서 closures 뷰 포트의 스크롤에 따른 섹션인덱스 값을 관리하기 위해 addEventListener scroll을 useEffect에서 걸었는데 eventListener의 callback 함수안에서 section index값이 변하지 않는 문제를 맞이했다. ⚠️scroll Event처럼 정말 예민한(?), 변화가 엄청 많은 이벤트 콜백함수안에서 setState를 사용한다는 것은 솔직히 좋지 못한 것이라고 생각한다. 내부에서 state가 변경될 때마다 리렌더링이 일어나기때문이다. 하지만 다행히도(?) 위 콜백함수 안에서는 뷰포트에 따른 섹션이 변경될 때만 setState가 작동하므로 사용하는 것이 무리없다고 생각하였다. 자, ..

보호되어 있는 글입니다.

HTTP가 뭥미? HTTP란 개발자라면 한번 쯤은 들어봤을 겁니다. HyperText Transfer Protocol의 약자로, 직역하자면 HyperText(링크를 통해 다른문서로 연결될 수 있는 문서)를 Transfer(전송하는) Protocol(규격이 정해진 규칙 체계)입니다. 쉽게 얘기해보자면 인터넷 브라우저와 서버간에 이런 저런 정보를 주고 받으면서 우리가 여러 사이트들을 이용하는 건데 여기서 브라우저와 서버사이에 이런 저런 정보를 주고받을 때 다 자기스타일대로 주거니 받거니 하면 주는 쪽과 받는 쪽이 달라질 때마다 매번 서로의 방식을 물어보고 맞춰야 하는 아주 비효율적인 일이 발생할 겁니다. 때문에 정보를 주고 받을 때 국제적으로 이런 방법으로 주고 받자~ 라고 약속을 한 것이 HTTP라고 생각..