미성이랑

안녕하세요 !    오늘은 기나긴 6주의 프로젝트 교육 여정을 시작하는 첫 날입니다.오늘부터 6주동안 매일매일 학습일지를 쓰면서 끝까지 열심히 공부해 보겠습니다 아자아잣 ! !     우선 오늘 배운 학습 내용 복습하기에 앞서 1일차의 심적 후기를 먼저 작성해 보자면, 전반적으로 디자인 관련 전공이시거나 UI/UX 관련 부트캠프/인턴 경험이 있거나 그게 아니어도 뭐가 됐든 다들 열심히 사시는 분들이 모이셨구나.. 라는 생각이 들었다. 다들 조금씩 목표하는 바는 다르지만 일단 공통적인 건 모두 UI/UX 분야에 흥미와 열정을 가지신 분들 같다 !  나는 여러 웹사이트를 구현하며 특히 웹 화면 디자인을 하는 것에 가장 큰 흥미를 느꼈고, UI/UX를 더 전문적으로 배워보고 싶은 욕심이 생겨 해당 과정에 참여..

HWP 파일을 편집해야 하는데, 내 PC에서는 HWP 파일을 열어볼 수 없을 때 !WORD 형식으로 HWP파일을 변환하는 방법 !아래아 한글을 설치하지 않고도 간단하게 HWP 파일을 DOC 파일로 변환하는 방법 !      microsoft에서는 공식적으로 한글 문서 변환 도구를 제공하고 있습니다. microsoft word에서 hwp파일을 docx 파일처럼 변환하여 열 수 있도록 해 주는 도구입니다. 덕분에 저희는 아주 쉽게 HWP 파일을 DOC 파일로 변환하여 열람하고, 수정할 수 있답니다. 아래아 한글 문서 변환 도구라고 하는데요, 아래 링크를 타고 들어가 "다운로드" 클릭 후, 이어지는 화면에서는 자신의 컴퓨터 비트에 맞는 버전으로 다운로드 해 주시면 됩니다. https://www.microsof..

- pnpm node와 npm이 설치 된 상태에서 npm i -g pnpm   - react pnpm create next-app   그 후의 추가설정 :

오늘은 도메인이 무엇인지 개념부터 살펴본 후에 aws(Route 53)를 이용하여 vercel 속 나의 프로젝트에 도메인을 연결하는 방법(= 레코드를 생성하는 방법) 을 설명드리겠습니다.    일반적으로 위와 같은 구조를 두고 우리는 도메인이라고 합니다.  도메인 전체 이름은 차상위 도메인과 최상위 도메인을 합친 naver.com , soakadla.me 가 되겠습니다.  1. 최상위 도메인 (Top-Level Domain, TLD)**최상위 도메인(TLD)**은 도메인 이름의 가장 마지막 부분으로, 도메인 시스템의 최상위 계층을 말합니다.예를 들어, example.com에서는 .com이 최상위 도메인이에요.대표적인 최상위 도메인 종류:일반 TLD: .com, .org, .net 등국가 코드 TLD: ...

URL :  back-todo-flan.soakadla.me https://back-todo-flan.soakadla.me/ back-todo-flan.soakadla.me     GIT :  mimieee122/back-todo GitHub - mimieee122/back-todoContribute to mimieee122/back-todo development by creating an account on GitHub.github.com        실행 영상 :

저는 여태까지 vercel을 사용해 왔기에, 백엔드 쪽 핸들러 함수(/pages/api) 포함 백/프론트 앤드 코드를 작성 후 git에 저장만 하면, vercel이 알아서 해당 코드를 통해 서버를 구축하고, 프로젝트를 배포해 주었습니다.   /pages/api에 작성해 둔 코드 속 함수들을 "서버리스 함수"라고 일컫는데, 여기서  서버리스란 사용자가 직접 서버를 운영하지 않고, 클라우드 제공자가 서버를 필요할 때 자동으로 생성해서 코드 실행을 처리하는 방식을 의미합니다. ( 서버리스 함수는 요청이 들어왔을 때에만 실행되므로 유연성과 확장성 측면에서 유리하다. )  따라서 어쨌든  지금까지는 서버를 직접 구축하지 않았으나, 지난 수업시간에 AWS의 EC2를 이용하여 간편히 나만의 서버를 구축하여 배포하는 ..

URL :  first-backend-project.soakadla.me    GIT : mimieee122/new-app GitHub - mimieee122/new-appContribute to mimieee122/new-app development by creating an account on GitHub.github.com    실행 영상 :    처음으로 백엔드를 활용하여 완성한 결과물이라 더더욱 저에게 의미가 깊은 고양이 웹 사이트 입니다!  🐈‍⬛🐈🩵 앞으로도 틈 날 때마다 리펙토링하며 부족한 부분들을 수정해 나갈 예정입니다. 아쉬운 부분이 있다면 현재 저는 vercel을 활용하여 프론트/백을 통합하여 제작하였기에 로딩 속도가 다소 존재한다는 것 입니다 .. 🥹 앞으로도 정진하여 가까운..

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수.- useState : 컴포넌트 상태를 관리- useEffect : 컴포넌트 생명주기에 개입 *생명주기 기능: React 컴포넌트의 생성, 업데이트, 소멸 과정에서 발생하는 일련의 단계를 의미( 마운트, 업데이트, 언마운트 ) React Hooks는 이러한 생명주기 단계와 관련된 기능을 제공하여, 함수형 컴포넌트에서도 클래스형 컴포넌트와 같은 생명주기 관리가 가능하게 해 준다.컴포넌트 간의 계층을 바꾸지 않고 상태 로직을 재사용할 수 있다는 장점이 있다. - 컴포넌트 최상위에서만 호출할 수 있다.- Hook은 React 함수 내에서만 호출할 수 있다.( 함수형 컴포넌트나 custom hook에서만 호출 가능..

*참고자료 : 자습서: 틱택토 게임 – React  게임 방법:준비: 3x3 크기의 격자판을 준비합니다.플레이어: 두 명의 플레이어가 필요하며, 한 명은 X, 다른 한 명은 O를 선택합니다.번갈아 가며 놓기: 첫 번째 플레이어가 빈 칸에 자신의 기호를 놓습니다. 이후 두 번째 플레이어도 빈 칸에 자신의 기호를 놓습니다. 이렇게 번갈아 가며 진행합니다.승리 조건: 가로, 세로, 또는 대각선 중 아무 곳이든 자신의 기호를 세 개 연속으로 놓으면 승리합니다.무승부: 격자판이 모두 채워졌는데도 승자가 없으면 무승부입니다.      * type 정의type Player = 'X' | 'O' | nulltype BoardState = Player[]type GameHistory = BoardState[]  위 게임..

* 코드 리뷰 보러가기틱택토 게임 구현 코드 리뷰 (Tic-tac-toe) (tistory.com) 틱택토 게임 구현 코드 리뷰 (Tic-tac-toe)*참고자료 : 자습서: 틱택토 게임 – React  * 실제 구현한 웹사이트[project] 틱택토 게임 구현해보기 (tic-tac-toe) (tistory.com) [project] 틱택토 게임 구현해보기 (tic-tac-toe)tic-tac-toe-pied-six.vercel.app   httwith-mimi.tistory.com          * 실제 구현 웹사이트 보러가기tic-tac-toe-pied-six.vercel.app           * 참고자료 : 자습서: 틱택토 게임 – React