prefer2 Log

https://prefer2-dev.vercel.app/ prefer2의 블로그 prefer2의 개발 블로그입니다 prefer2-dev.vercel.app 기술 블로그를 tistory를 통해 운영하고 있지만, 학습을 위해 가장 좋은 방법이라고 생각이 되어 나만의 블로그 만들기를 시작했다. 블로그를 만들게 된 이유는 아래와 같다. SSR, SEO 학습 백엔드 없이 정적으로 진행 가능 나만의 커스터마이징이 가능 간지 기술 스택은 아래와 같이 선택했다. Next.js Typescript Tailwind Vercel 스타일링의 경우 기존에 사용하던 css-in-js가 아닌 tailwind를 선택했다. 스타일을 위한 불필요한 컴포넌트가 줄어들었고, 일관성 있는 디자인으로 개발할 수 있는 것 같다. 옛날 옛적에 접..

API 키 발급받기 1️⃣ https://developers.kakao.com/ 접속 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2️⃣ 로그인 ➡ 내 애플리케이션 ➡ 애플리케이션 추가하기 3️⃣ 플랫폼 ➡ Web 플랫폼 등록 ➡ 사이트 도메인 등록 4️⃣ 앱 키 ➡ Javascript 키를 API 키로 사용 지도 그리기 https://apis.map.kakao.com/web/guide/ API Sample https://apis.map.kakao.com/web/sample/ 엄청나게 친절한 API 설명서이다. 샘플들이 많아서 사실상 잘 짜집..

제로초님의 Node.js교과서 9장을 공부하며 express로 최대 140글자의 글과 사진을 올릴 수 있는 SNS를 만들어 보았다. express와 sequelize를 주로 사용하여 구현하였다. 책에서 주어진 기능 로그인 (로컬 로그인, 카카오 로그인), 로그아웃 - passport모듈 글 올리기 (사진 첨가, 해시태그) - multer 모듈 팔로우 스스로 추가한 기능 글 삭제 (사진 있을 시 사진까지) 닉네임 변경 언팔로우 기존 SNS들과 유사하게 로그인을 하면 글을 작성할 수 있으며, 다른 사용자를 팔로우/언팔로우 할 수 있고 다른 사용자들이 작성한 글을 읽을 수 있는 서비스이다. 데이터베이스 세팅부터 라우터 설정까지 직접 해 보았다. 데이터베이스를 이론으로만 공부하다 보니 익숙하지는 않았지만 seq..

간단한 토이 프로젝트로 바닐라js와 css만 사용하여 CRUD한 게시판을 만들어 보았다. figma도 더 익혀볼겸 figma로 생각한 바를 대략적으로 만들어봤다. WRITE과 EDIT창은 모달로 구현하기로 했다. 제목을 누르면 모달창이 띄워져서 글을 읽을 수 있게 하였다. 모달창은 x아이콘이나 바깥부분을 누르면 닫히도록 했다. edit은 기존 write의 모달창을 그대로 사용하되, 저장되어있는 제목, 작성자, 글이 창에서 보이도록 해주었다. write와 동일한 모달창을 사용하기 때문에 게시판에 올릴때 새로운 값인지 아닌지를 확인했다. edit에서 저장한 것이라면 기존 값을 지워주고 수정된 값을 저장하였다. 게시판은 리스트보다 테이블로 만드는게 더 편한 것 같다. 다음에는 node.js에 db 연결해서 진..

기능 상, 하, 좌, 우 키를 사용하면 2048 게임처럼 작동 같은 숫자들끼리 더해짐 움직일때마다 랜덤한 빈 자리에 2 또는 4 생성 움직이지 못하면 게임 종료( 잘못된 방향으로 움직여도 종료되게 함 ) 뒤로가기 버튼 버튼 클릭 시 이전 값으로 돌아감( 점수도 이전 점수로 변경 ) score board 종료시 모달창 vanilla js + css 사용 restart 버튼 board 초기화 점수 초기화 score board에 점수 기입 공부한 내용 javascript DOM 조작 키보드 event 프레임워크 사용하지 않고 모달창 만들기(css 공부)