Jaeilit

인스타그램 클론코딩 1. 유투브 데모 영상 https://youtu.be/ip5CI4AHH9Y 2. 간단한 회고 저번주에 이어 이번주도 백엔드와 작업을 하게 됬습니다. 이번주에도 멋진팀원들을 만나서 정말 기대이상의 결과물을 만들었습니다. 백엔드와 작업하면서 api 설계 이런 부분에서 잘 알지 못했던 부분에서 점점 이해가 됬고 프론트에서 서버와 통신을 하면서 에러코드에 대해서도 좀 익숙해지면서 에러코드를 보면 대충 어디부분이 잘못이구나 라는 감도 조금씩 생겼습니다. 또, api 통신에 대해서도 메인페이지에서 게시글마다 댓글을 뿌릴 때 서버에 댓글따로 게시글따로 요청하는게 아니라 게시글 api에 댓글을 심어서 리스폰을 줌으로써 1번 1번하던 통신도 1번으로 줄고 프론트의 작업이 좀 더 수월해질수있다는 걸 경..

소개 프론트/백 주특기를 기초/심화 각각 1주일씩 총 2주를 배운 후 실제로 협업을 체험해보고 배운 주특기도 써보는 시간을 가졌다. 프로젝트 내용 제목 : 종원이의 냉장고 내용 : 냉장고를 부탁해를 모티브로 본인 냉장고에 썩고있는? 재료를 검색하면 그 재료로 만들 수 있는 음식리스트를 제공해주고 그 리스트들 중 마음에 드는 음식이 있다면 레시피까지 제공해주는 내용입니다. 프로젝트 상세정보(와이어프레임, api 설계 등) https://foregoing-ursinia-218.notion.site/16-ab85549ccb3d452ba6267dde8448d993 배포 사이트 http://eternalclash.shop.s3-website.ap-northeast-2.amazonaws.com/ 깃 repo htt..

리액트의 상태관리 리액트는 컴포넌트 마다 state 로 자신의 상태를 관리함. (useState) 자기 자신의 상태를 props로 전달해서 하위컴포넌트도 사용할 수 있지만(props.드릴링) 전역으로 관리하지는 못한다. 전역상태관리(Global State) 현재 나의 상태를 전역으로 관리하는 방법에는 2가지가 있음. 1. 리액트의 훅 (Context API) https://ko.reactjs.org/docs/context.html 2. 리덕스 https://ko.redux.js.org/introduction/getting-started/ 알면 좋은 리액트 CSS 라이브러리 참고 사이트 https://ichi.pro/ko/2021nyeon-nae-sang-wi-10gae-pilsu-react-laibeul..

리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요? 1. 메타태그 중 오픈그래프 태그를 페이지에 맞게 조절해준다. 2. SEO 검색봇이 해당 메타태그를 읽어 갈 수 있도록 SSR 혹은 pre-rendering 처리를 해준다. 리덕스에서 미들웨어 청크의 역할은 뭘까요? 액션 객체를 dispatch 하는 대신 함수를 dispatch 할 수 있도록 해준다. dispatch 한 함수는 dispatch, getState, 그외의 직접 설정한 값을 받아 사용 할 수있다. 비동기 처리 등에 사용 할 수 있다. 비동기란 "나 이거 할 동안 시간 좀 걸리는데 다른거부터 하고있어" 라는 거라고 생각하면 될듯하다. (나만의 해석) 프로미스는 정확히 말하면 비동기가 ..

SSR 방식은 HTML 파일이 각 페이지마다 있으므로 걱정하지 않아도 되지만, ("/", "/a/", "/b") CSR 방식은 HTML 이 1개이므로 각 페이지별로 미리보기 보여줄 때 문제가 된다. ("/") Hi!

DOM 이란? HTML 문서나 XML에 접근하기 위한 인터페이스 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다. - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다. - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다. 서버리스란 ? 서버리스(serverl..

미니 프로젝트 소개 미니프로젝트 사진 https://jaeilit.tistory.com/23 TIL_2(미니프로젝트 완성) 프로젝트 기획 정리 https://jaeilit.tistory.com/20 베포 도메인 http://gmkim.shop 감수성 영화관 | 로그인 닉네임은 2-8자의 한글만 입력 가능합니다. gmkim.shop 뿌듯하다 좋다,,,, jaeilit.tistory.com 미니프로젝트 유튜브 영상 https://youtu.be/zkXj2Xym_aY 회고록 1. jwt 로그인 / 메인 페이지 # 메인페이지 @app.route('/main', methods=['GET']) def main(): # 토큰 가져오기 token_receive = request.cookies.get('my_info')..

예전에 정규식 표현 강의를 들은 적이 있는데, 이걸 어디에 쓸까 라는 생각을 하면서 봤던 기억이 있습니다. 언젠가 한번 다른분께 정규식표현의 사용처? 쓰임새?를 한번 물어본적이 있었는데 유효성 검사에 쓰인다고 했습니다. 유효성 검사란? 더보기 값이 유효한지, 타당한지 확인 하는 것 가장 쉬운 예를 들면 이메일 주소 양식을 받아야하는데 이메일 양식에 어긋나면 안되니까 이메일 양식에 어긋나는지 아닌지 유효성 검사를 해야합니다. 사용예시 var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/; // 아이디는 2-10자의 영문과 숫자와 일부 특수문자(._-)만 입력 가능합니다.// var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%..

감수성 영화관 설명 영화 리뷰 작성시 영화를 보고 느낀 감정에 대해 태그를 달아놓는 형식으로 하여 나중에 태그에 달린 감수성에 따라서 영화를 분류해서 볼 수 있는 사이트 와이어프레임 1. 첫 화면(로그인) 2. 회원가입 3. 메인화면 4. 영화 상세페이지 & 리뷰 작성하기 기능 필수 포함 기능 JWT 인증 방식 로그인 구현 / jinja2 템플릿 엔진 사용 git 주소 : https://github.com/jaeilnet/hh99-3-_32_miniproject.git

* 미니프로젝트는 순수 HTML, CSS, 간단한 JS 로 제작하였습니다. * 항해99_3기 본 과정에 앞서 사전스터디 그룹에서 미니프로젝트를 시작하게 되었습니다. 미니프로젝트의 내용은 사전강의를 통해 배운 내용으로 간단한 커피리뷰 사이트를 제작해서 배포까지가 목표입니다. 제가 맡은 부분은 커피에 대한 상세 페이지 부분입니다. 1. 홈 화면 홈 화면은 다른분이 작업 해주셨습니다. 최종컨셉때 헤더의 해당 체인점을 클릭하면 그 체인점의 인기메뉴 / 추천메뉴를 출력하는게 목표였습니다. 본 과정을 앞둔 시점에서 시간적 여유도 없고, 무엇보다 저희 실력이 아직은 너무 부족해서 여기서 마무리하게 되었습니다. 홈 화면의 상품들은 크롤링해서 만든 API 를 사용하지 않았더라구요.... 그냥 다 하나하나 img와 nam..