[포스코x코딩온] 웹개발자 풀스택 과정 3차 개인프로젝트 - 회고록

배포링크 : https://www.mymovieapp.store 깃허브 : https://github.com/7jjin/My-Movie 🔥JinCha 리액트를 배운지 2주가 지나고 1주일 간의 짧은 개인 프로젝트 시간을 가졌다. 리액트를 처음 배웠고, 소규모 프로젝트인 만큼 어떤 새로운 아이디어를 도출해 개발하는 것 보단 클론 코딩을 통해 지금 까지 배운 리액트를 적용해보자는 마인드가 강했다. 여러 사이트가 있었지만 최근 취미를 두고 있는 영화와 관련된 사이트를 찾아봤다. 그 중 왓챠가 디자인이 맘에 들었고, 전체 적인 틀은 그대로 따라 하되, 내가 원하는 기능을 몇개 넣어봤다. ⚒️ 추가한 기능 (리액트X) 기능1 : 일별(주간) 박스오피스 정보 가져오기 + 포스터 처음 영화 사이트를 만드려고 할 때 ..

• format_list_bulleted 프로젝트
• · 2023. 10. 23.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React useEffect

🤔 useEffect 란? 모든 컴포넌트에는 생성되고 업데이트 되고 사라지는 생명주기를 가지고 있다. 이를 각각 Mount, Update,UnMount로 부른다. Mount : DOM이 생성되고 웹 브라우저 상에 나타남. Update : Props or State가 바뀌었을 때 업데이트 함. Unmount : 컴포넌트가 화면에 사라질 때. 이 처럼 컴포넌트의 생명주기를 역할을 하는 것을 useEffect()함수를 사용해서 조절할 수 있다. ✏️ 사용 방법 1. 기본 형태 useEffect(function,deps) ● function : 랜더링 이후 실행할 함수를 써준다. ● deps : function을 실행 시켜줄 조건을 써준다. 배열 형태로 사용한다. 이 값의 따라 useEffect가 실행될지 안될..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 28.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React useState

🤔 React Hooks? 앞으로 나올 useState,useEffect 같은 hook들은 함수형 컴포넌트에서도 state와 생명주기 기능을 연동 할 수 있게 하기 위해 만들어졌다. 쉽게 말해 이전까지는 클래스형 컴포넌트에서만 가능했던 기능들을 이제는 함수형에서도 사용할 수 있게 된 것이다. (원래는 React에서 없던 기능인데 불편함을 고치고자 다른 개발자들이 모여 직접 개발했다고 한다. -> 실제 개발에 참여한 모든 개발자들은 React측에서 모두 채용을 했다고 한다. 대단한 분들..👍) 이렇듯 이제는 불편한 클래스형 컴포넌트를 굳이 사용안해도 된다. 나도 두가지 모두 사용을 해봤지만 확실히 함수형이 편하다는 것을 느꼈다. 그래서 나는 함수형 컴포넌트 위주로 블로깅을 할 것이다.4 🤔 useState..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 26.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React Props

🤔 Props란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단반향의 데이터 흐름을 갖기 때문에 부모에서 자식으로한테만 전달 가능) props에서 가장 중요한 것은 상위 컴포넌트에서 하위 컴포넌트로 밖에 전달이 되지 않는다는 것이다. 또한 이렇게 보내진 props는 수정할 수 없다. (자식 입장에서는 읽기 전용인 데이터다) 🤓 사용 방법 props를 넘길때에는 2가지 경우가 있다. 문자열로 보내는 방식과 문자열 외의 값을 전달할 경우다. ⚫ 문자열로 보내는 방식 프로퍼티 타입이 문자열이 경우, 큰 따옴표("")를 사용한다. ⚫ 그 외의 방식 { alert('알림창'); }} //함수 /> 문자열 타입 이외의 프로퍼티 ..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 24.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React JSX

🤔 리액트란? 현재 많은 프론트엔드의 프레임워크들이 생겨나고 있지만 당연 가장 많이 쓰는 것은 리액트다. (하지만 리액트는 JavaScript 라이브러리라는 점..) 나에게 부트캠프에서 가장 배우고 싶은 것을 고르라고 하면 리액트를 고를 것이다. 프론트엔드가 목표인 나에게는 가장 써보고 싶은 스택(?)중 하나였기 때문이다. 그리고 이전에 완성된 리액트 프로젝트를 사용한 적이 있는데 VanillaJS를 사용한 것 보다 로딩 시간이 휠씬 빨라서 신세계를 경험한 듯한 느낌을 받았었다.😮 😮 JSX란? 리액트를 사용하기 위해서는 JSX문법을 알아야 한다. "그럼 리액트를 배우기 위해서는 또 다시 새로운 언어를 배워야 하나??" 이렇게 생각할 수도 있겠지만 다행이도 내가 써본 결과 크게 다르지 않았다. 이름도 비..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 22.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 회고록(feat. 최우수상)

이번 회고록은 내가 팀 적으로 성장한 점과 아쉬웠던 점에 대해 써볼려고 한다. 내가 혼자 기능 구현 하며 성장한 것과 아쉬웠던 점은 아래 블로그를 참고 하면 좋을 것 같다.😊 2023.07.27 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) 1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, jin99.tistory.com 2023.07.29 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2..

• format_list_bulleted 프로젝트
• · 2023. 7. 30.
• textsms