Frontend/Projects
-
[Toy Project 기록하기 3] React Hook Form 활용하기Frontend/Projects 2023. 3. 4. 22:36
프로젝트에 form을 사용하는 일이 많아지면서 폼 관리 라이브러리인 React Hook Form을 도입하게 되었습니다. 이번에는 React Hook Form을 활용하는 방법을 알아보겠습니다. feed를 업로드하는 과정에서 form을 사용해 개발했습니다. 이 과정을 라이브러리 없이 form을 제어하는 방법과 React Hook Form을 써서 form을 제어하는 방법으로 모두 구현해 보겠습니다. 라이브러리 없이 Form 다루기 feed를 업로드할 때 받는 form으로부터 제목, 내용, 사진을 받겠습니다. 입력받은 값의 상태를 담을 state를 선언하고 마크업을 작성했습니다. handleChange, handlePhoto를 통해 input의 state를 갱신하고, handleSubmit을 통해 form의 ..
-
[Toy Project 기록하기 2] axios로 HTTP 요청 보내기Frontend/Projects 2023. 2. 19. 21:55
axios는 JavaScript를 사용하여 HTTP 요청을 보내는 비동기 통신 라이브러리입니다. axios를 사용하여 HTTP GET, POST, PUT, DELETE 등의 요청을 보내 백엔드로부터 필요한 데이터를 받아올 수 있습니다. axios의 사용법을 알아보고 프로젝트에서 axios를 어떻게 적용했는지 알아보겠습니다. axios 사용법 axios 설치하기 npm install axios GET 상황 주로 서버로부터 데이터를 가져올 때 사용합니다. 사용법 단순 데이터를 요청할 경우 axios.get('/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(erro..
-
[Toy Project 기록하기 1] 커뮤니티 사이트 기획하기Frontend/Projects 2023. 2. 5. 21:28
프론트엔드와 백엔드를 모두 스터디했으니 토이 프로젝트를 통해 점검해 보는 시간을 가져야겠죠! 많은 분들이 쉽게 접근할 수 있으면서, 오래 머무를 수 있는 사이트는 어떤 종류의 사이트가 있을까 생각을 하다가 단연코 커뮤니티 사이트를 떠올리게 되었습니다. 그중에서도 전문 관심 분야를 가진 사이트로 세분화하는 것이 좋을 것 같아 제가 관심 있는 클라이밍을 주제로 하여 클라이밍 커뮤니티 사이트를 기획하게 되었습니다. 본격적으로 사이트를 만들기 전에 전체적으로 필요한 기술 스택과 기능에 대해서 조망해 보고 앞으로 어떤 과정을 통해 프로젝트를 구축해 나갈지 기획하는 시간을 갖겠습니다. 사이트 개요 클라이밍에 관심이 있는 사람들이 클라이밍에 관련된 글과 사진을 올리고 이를 공유할 수 있는 게시판 만들기 사용할 기술 ..
-
20일동안 한 프로젝트에 매달린 썰Frontend/Projects 2022. 7. 23. 16:05
안다는 것은 아는 것을 안다고 하고 모르는 것을 모른다고 하는 것이다. - 공자 내가 이 프로젝트를 시작하게 된 계기는 바로 나를 위해서였다. 성장을 위해 꾸준히 프론트엔드 공부를 해온 나였지만, 누군가 갑자기 "이게 뭐야?"라고 물어봤을 때 제대로 설명해주기가 쉽지 않았다. 과연 이 상태를 알고 있다고 할 수 있을까? 모르는 것을 알고 있다고 착각했던 건 아닐까? 제대로 설명하고 싶다. 프로젝트를 시작하면서 가장 중요하게 생각했던 포인트는 제대로 된 정보를 전달하는 것이었다. 하지만 제대로 된 정보라는 것은 어떻게 확신할 수 있을까? 이 문제를 해결하기 위해 오랜 고민을 했지만 답은 하나였다. 나 스스로 열심히 공부해서 정보에 대한 확신이 있어야 했다. 그래서 다른 부분 못지않게 컨텐츠를 모으는 데 ..
-
[프로젝트 셋팅] CRA에 Prettier + ESLint 설정하기Frontend/Projects 2022. 4. 24. 19:29
ESLint 설정하기 ESLint란 ESLint는 JavaScript 코드의 문제를 찾고 수정하는 데 도움이 되는 오픈 소스 프로젝트이다. ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾는다. ESLint는 대부분의 텍스트 편집기에 내장되어 있으며 지속적 통합 파이프라인의 일부로 ESLint를 실행할 수 있다. ESLint가 발견한 많은 문제는 자동으로 수정될 수 있다. ESLint 수정은 구문을 인식하므로 기존 찾기 및 바꾸기 알고리즘에서 발생하는 오류가 발생하지 않는다. 코드를 사전 처리하고, 사용자 정의 파서를 사용하고, ESLint의 기본 제공 규칙과 함께 작동하는 고유한 규칙을 작성한다. 프로젝트에 필요한 방식으로 정확히 작동하도록 ESLint를 사용자 정의해야 한다. ESLint 설정..
-
나의 Toy Project 이야기 : What I Ate TodayFrontend/Projects 2022. 2. 9. 03:30
나의 첫 번째 토이 프로젝트라 할 수 있는 아주 아주 소박한 What I Ate Today 대해 느낀 점을 적어보려 한다. 여러 강의를 통해 클론 코딩으로 배우면서 스스로의 실력을 파악해보기 위해 만들어 본 첫 사이트다. 만드는데 10일 정도 걸렸고, 불과 2달 전에 진행했던 프로젝트 임에도 불구하고 지금 다시 꺼내보니 코드가 부끄럽고 부족한 부분이 많다. 먼저 내가 만들고 싶었던 서비스는 오늘 먹은 음식을 기록하는 블로그 사이트다. 나같은 경우 음식 사진을 자주 찍어두고 다시 보진 않아서 음식 사진을 한 곳에 모아두고 약간의 메모를 곁들여 기록할 수 있는 블로그 사이트가 있으면 재밌겠다고 생각했다. 사용한 기술 React js, firebase, styled-component, react-router,..
-
[JavaScript] To Do List 만들기 - 간단편Frontend/Projects 2020. 11. 21. 16:42
자바스크립트 실력향상을 위해 심플한 투두리스트를 만들어 보기로 했다. 이 리스트에 구현할 기능은 다음과 같다. 내용을 입력하고 입력버튼을 누르면 리스트에 내용이 추가될 것 리스트 삭제 버튼을 누르면 목록에서 사라질 것 내용을 입력 후 엔터키를 누르면 목록에 추가될 것 내용이 공백이거나 스페이스만 입력된 경우 입력 버튼을 눌러도 목록에 추가되지 않을 것 HTML 작성하기, CSS 부트스트랩 사용하기 TO DO LIST Stone-dev To do List 입력 html로 심플하게 작성하기. 제목을 넣어주고 투두리스트를 입력할 창을 만들어준다. 간단하고 빠르게 구현하기 위해 css는 최소화해서 넣어주고 부트스트랩으로 대신했다. 감사합니다. getbootstrap.com/ JS 작성하기 let contentI..