Make a Wish- 8 - 멘토링 4

kyoungyeon·2022년 5월 29일
0

MAW- IT CONCERT

목록 보기
8/17

4회차 멘토링

1.개발문화의 꽃 = 강의
인터넷 강의가 짱이다
모르는 것을 배울때 러닝커브가 짧아지려면? 역시 인강..

  • 개념 및 코드 plus :

  • data-address

  • 새로운 tech : 옵셔널체이닝 ?.? = 삼항연산자 대체, and and와 같은 느낌이라고 한다.

    - 기본문법	
    const adventurer = {
      name: 'Alice',
      cat: {
        name: 'Dinah'
      }
    };
    
    const dogName = adventurer.dog?.name; // 옵체
    console.log(dogName);

    옵셔널 체이닝 정리

    • 기존 문법 -> 옵셔널 비교
      1 obj.first의 값이 obj.first.second의 값에 접근하기 전에 null (그리고 undefined)가 아니라는 점을 검증한다.
      2 obj.first를 테스트 없이 obj.first.second 에 직접 접근할 때 일어날 수 있는 에러를 방지한다.
      기존 : let nestedProp = obj.first && obj.first.second;


      3 옵셔널 체인지를 사용하는 경우 명시적으로 테스트하거나 단락시키지 않아도 된다
      옵셔널 : let nestedProp = obj.first?.second;


      해석: first가 null /undefined 인 경우 undefined 리턴 , first가 null/undefined가 아닌걸 확인후 second로 넘어간다.
      how : . 대신에 ?. 연산자를 사용해서 js에서 암묵적으로 null 또는 undefined가 아니라는 것을 확인해야하는 것을 인식함.
  • FE 기술면접 주제 및 팁 :

    • es6
    • 스프레드 컴포넌트
    • 스타일드 커포넌트
    • 이미지랑 글 겹치는 방법 (position: absolute)
      • 어디에 선언하고 설정할 것인지?
      • 누구를 기준으로 설정할 것인지
    • flex랑 grid 차이..
    • 디자인 패턴 - vuejs ...
    • 리액트 / 상태관리
    • 사이드 프로젝트 팁:
      • 추천 css : css.reset
      • 도전해 볼 tech : redux/recoil
      • 기획도 이력서에 어필이 된다!
        체계 - > 체계일정관리 -> 포트폴리오
      • 업무리스트 : 제플린 & 지라 어려우면 노션.
        • 기획시 주의사항
          • 체크포인트 잘게 쪼개기
          • 전체 프로젝트 기간을 주단위로 한번 더
          • 주단위를 일단위로 더 끊기
          • 목표는 조금씩 꾸준히
          • 한 페이지 안에서 어느 컴포넌트 할건지
          • 요약 : 초기 설정이 매우 중요하다
          • 핵심 : 반드시 새로운 스택 사용하기
  • nest.js 와 next.js 차이

    • next.js는 리엑트 상위호환
    • try: ssr 공부
    • error: 카카오 api 같이 사용시 오류 처리해야함, 호환에 있어서 번거로운 점(단점)
  • 호환성

    • 공통컴포넌트 인 (ui tools) material -ui 인터넷 익스프롤러에서 지원안해
    • "크롬 브라우저 환경에서 최적화 되어있습니다" 알림창 왜?
      material ui를 썼기 때문일수도..
  • 색깔도 , 쉼표 의미 아시나요? 첫번째 폰트가 적용/실행이 안되면 다음 폰트 실행해주세요 = or 의미

  • 새로운 react:
    {suspense, lazy} =react

  • 프론트에서 해야할 일

    • 404 경로 = 디폴트 빈 페이지 설정
    • 주소창 잘 못치면 = 리다이렉트
    • 팀 프로젝트때는 서버 백엔드가 ㅠ 다해버렸네..
  • FE 에서 보는 이미지

    • 고 -> 저 화질순 으로 : avif / webp/ png/ jpg

    • 정말 여러가지를 쓸 줄 알아야 진정한 FE !

    • html 5 에 지원해주는 section, label, 기타 등등

    • 어필! : ui 최적화와 클린코드를 신경쓰고있다.

    • devops 면접 팁!

      • 1 대체불가능한 개발자가되고싶다
      • 개발팀장 하고싶다/해봄
      • 프로젝트의 a-z 완성해보고 싶다등등..

😞 다음주 마지막 회차

  • goals: 지각하지말자.. 일요일 1시..

  • 현재 status & schedule:

    • 내일 출근. 근데 반명함사진이 하나밖에 없다.
    • 다음주 sqld 시험..공부.
    • 근데.. 사이드 프로젝트 조만간 사라질... 거 같은데?

-try code

import { Global, css } from "@emotion/react";
const reset = css
  @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
  @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
      monospace;
  }

  [class] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none; // ol,ul
    border: 0; // button, table, fieldset, input, textarea, select, iframe
    background-color: transparent; // button, dialog, input, mark, meter, prograss
    border-collapse: collapse; // table/
    border-spacing: 0; //table
    -webkit-appearence: none;
    appearance: none; //button, input, textarea, select, meter, progress
    color: #4b4b4b;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  body {
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    font-family: Spoqa Han Sans Neo, --apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif, Roboto, "Segoe UI", Oxygen, Ubuntu,
      Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    text-decoration: none;
  }
  :lang(ko) {
    word-break: keep-all;
  }
;

export const GlobalStyles = () => {
  return <Global styles={reset}></Global>;
};

너무 아쉽습니다. 정말 감사한 시간이였습니다.

profile
🏠TECH & GOSSIP

0개의 댓글