Front end Conceitos II

Nível Júnior

1. Pergunta: O que é o CSS Grid? Resposta: CSS Grid é um sistema de layout que permite criar layouts bidimensionais na web. Ele divide a página em linhas e colunas, facilitando o posicionamento de elementos. Por exemplo:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Pergunta: O que é o evento "DOMContentLoaded"? Resposta: O evento DOMContentLoaded é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar. É útil para executar scripts assim que o DOM estiver pronto:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Pergunta: O que é a propriedade "z-index" em CSS? Resposta: A propriedade z-index controla a ordem de empilhamento dos elementos. Elementos com um z-index maior são exibidos na frente de elementos com um z-index menor. Por exemplo:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. Pergunta: O que é o "this" em JavaScript? Resposta: O this em JavaScript refere-se ao contexto de execução atual. O valor de this pode mudar dependendo de como uma função é chamada. Por exemplo:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Pergunta: O que são seletores CSS? Resposta: Seletores CSS são padrões usados para selecionar os elementos que você deseja estilizar. Existem vários tipos de seletores, como seletores de classe, ID e tipo. Por exemplo:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Pergunta: O que é o "localStorage" em JavaScript? Resposta: localStorage é uma API que permite armazenar dados no navegador do usuário de forma persistente. Os dados armazenados no localStorage não expiram e permanecem mesmo após o fechamento do navegador. Por exemplo:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Pergunta: O que é o "event bubbling"?
   
   Resposta: O "event bubbling" é um mecanismo de propagação de eventos em que um evento começa no elemento mais interno e se propaga para os elementos externos. Por exemplo, se um botão dentro de um <div> for clicado, o evento de clique será disparado primeiro no botão e, em seguida, no <div>.

2. Pergunta: O que é uma "callback function"?
   
   Resposta: Uma "callback function" é uma função passada como argumento para outra função, que pode ser chamada em um momento posterior. Por exemplo:
   

   function fetchData(callback) {
       // Simulação de operação assíncrona
       setTimeout(() => {
           callback("Dados recebidos");
       }, 1000);
   }

   fetchData(data => console.log(data)); // "Dados recebidos"

1. Pergunta: O que é o "responsive design"? Resposta: O "responsive design" é uma abordagem de design web que visa criar páginas que se adaptam a diferentes tamanhos de tela e dispositivos. Isso é frequentemente alcançado usando media queries em CSS. Por exemplo:

   @media (max-width: 600px) {
       body {
           background-color: lightblue;
       }
   }

1. Pergunta: O que é o "fetch API"?
   
   Resposta: A fetch API é uma interface moderna para fazer requisições HTTP em JavaScript. Ela retorna uma Promise que resolve a resposta da requisição. Por exemplo:
   

   fetch("https://api.example.com/data")
       .then(response => response.json())
       .then(data => console.log(data));
   

Nível Pleno

1. Pergunta: O que é o "CORS"?
   
   Resposta: CORS (Cross-Origin Resource Sharing) é um mecanismo de segurança que permite que recursos restritos em uma página da web sejam solicitados de um domínio diferente daquele que serviu a página. Isso é importante para proteger os dados do usuário.

2. Pergunta: O que é o "virtual DOM" em React?
   
   Resposta: O "virtual DOM" é uma representação leve do DOM real. O React usa o virtual DOM para otimizar a atualização do DOM, permitindo que ele faça alterações de forma mais eficiente, comparando o virtual DOM com o DOM real e aplicando apenas as mudanças necessárias.

3. Pergunta: O que são "props" em React?
   
   Resposta: "Props" (propriedades) são um mecanismo de passagem de dados entre componentes em React. Elas permitem que você passe dados de um componente pai para um componente filho. Por exemplo:
   

   function Greeting(props) {
       return <h1>Hello, {props.name}!</h1>;
   }
   
   <Greeting name="John" /> // "Hello, John!"
   

4. Pergunta: O que é o "state" em React?
   
   Resposta: O "state" é um objeto que representa a parte da aplicação que pode mudar. Ele é usado para armazenar dados que afetam a renderização do componente. Por exemplo:
   

   class Counter extends React.Component {
       constructor(props) {
           super(props);
           this.state = { count: 0 };
       }
   
       increment = () => {
           this.setState({ count: this.state.count + 1 });
       };
   
       render() {
           return (
               <div>
                   <p>{this.state.count}</p>
                   <button onClick={this.increment}>Increment</button>
               </div>
           );
       }
   }
   

5. Pergunta: O que é o "React Router"?
   
   Resposta: O React Router é uma biblioteca que permite a navegação entre diferentes componentes em uma aplicação React, facilitando a criação de aplicações de página única (SPA). Ele permite definir rotas e renderizar componentes com base na URL.

6. Pergunta: O que são "hooks" em React?
   
   Resposta: Hooks são funções que permitem que você use o estado e outros recursos do React em componentes funcionais. O useState e o useEffect são exemplos de hooks. Por exemplo:
   

   import React, { useState, useEffect } from 'react';
   
   function Example() {
       const [count, setCount] = useState(0);
   
       useEffect(() => {
           document.title = `Você clicou ${count} vezes`;
       });
   
       return (
           <div>
               <p>Você clicou {count} vezes</p>
               <button onClick={() => setCount(count + 1)}>Clique aqui</button>
           </div>
       );
   }
   

7. Pergunta: O que é o "Webpack"?
   
   Resposta: Webpack é um empacotador de módulos para aplicações JavaScript. Ele permite que você agrupe arquivos JavaScript, CSS e outros recursos em um único arquivo ou em vários arquivos otimizados para produção.

8. Pergunta: O que é o "Babel"?
   
   Resposta: Babel é um transpilador que permite que você escreva código JavaScript moderno (ES6+) e o converta em uma versão compatível com navegadores mais antigos. Ele é frequentemente usado em conjunto com o Webpack.

9. Pergunta: O que é o "SASS"?
   
   Resposta: SASS (Syntactically Awesome Style Sheets) é um pré-processador CSS que permite usar variáveis, aninhamento e funções, tornando o CSS mais dinâmico e fácil de manter. Por exemplo:
   

   $primary-color: blue;
   
   .button {
       background-color: $primary-color;
       &:hover {
           background-color: darken($primary-color, 10%);
       }
   }
   

10. Pergunta: O que é o "AJAX"?
    
    Resposta: AJAX (Asynchronous JavaScript and XML) é uma técnica que permite que você faça requisições assíncronas ao servidor sem recarregar a página. Isso é frequentemente usado para atualizar partes de uma página da web dinamicamente.

Nível Sênior

1. Pergunta: O que é a "arquitetura de microserviços"?
   
   Resposta: A arquitetura de microserviços é um estilo de arquitetura que estrutura uma aplicação como um conjunto de serviços pequenos e independentes, que se comunicam entre si. Isso permite que equipes diferentes trabalhem em diferentes partes da aplicação de forma mais eficiente.

2. Pergunta: O que é o "SSR" (Server-Side Rendering)?
   
   Resposta: SSR é uma técnica onde a renderização de uma aplicação web é feita no servidor, em vez de no cliente. Isso pode melhorar o desempenho e a SEO, pois o conteúdo é enviado ao cliente já renderizado.

3. Pergunta: O que é o "CSR" (Client-Side Rendering)?
   
   Resposta: CSR é uma técnica onde a renderização de uma aplicação web é feita no cliente, geralmente usando JavaScript. Isso permite uma experiência de usuário mais interativa, mas pode ter um impacto negativo na SEO se não for implementado corretamente.

4. Pergunta: O que é o "Redux Saga"?
   
   Resposta: Redux Saga é uma biblioteca que facilita o gerenciamento de efeitos colaterais em aplicações Redux. Ele usa geradores para lidar com operações assíncronas, como chamadas de API, de forma mais legível e organizada.

5. Pergunta: O que é o "Context API" em React?
   
   Resposta: A Context API é uma maneira de passar dados através da árvore de componentes sem precisar passar props manualmente em cada nível. Isso é útil para compartilhar dados globais, como temas ou informações do usuário.

6. Pergunta: O que é o "TypeScript"?
   
   Resposta: TypeScript é um superconjunto do JavaScript que adiciona tipagem estática ao código. Ele permite que você defina tipos para variáveis, funções e objetos, ajudando a evitar erros em tempo de execução.

7. Pergunta: O que é o "Progressive Web App" (PWA)?
   
   Resposta: PWAs são aplicações web que oferecem uma experiência semelhante a aplicativos nativos, incluindo suporte offline, notificações push e instalação na tela inicial. Elas são construídas usando tecnologias web padrão.

8. Pergunta: O que é o "GraphQL"?
   
   Resposta: GraphQL é uma linguagem de consulta para APIs que permite que os clientes solicitem exatamente os dados de que precisam. Isso contrasta com as APIs REST, onde os clientes podem receber mais dados do que o necessário.

9. Pergunta: O que é o "Web Accessibility" (Acessibilidade Web)?
   
   Resposta: Acessibilidade web refere-se à prática de tornar as aplicações web utilizáveis por pessoas com deficiências. Isso inclui o uso de tags semânticas, atributos ARIA e garantir que o conteúdo seja navegável por teclado.

10. Pergunta: O que é o "Service Worker"?
    
    Resposta: Um Service Worker é um script que o navegador executa em segundo plano, separado de uma página da web, permitindo funcionalidades como cache, notificações push e sincronização em segundo plano. Ele é fundamental para a construção de PWAs.

Bibliografia

As informações apresentadas foram extraídas e adaptadas de várias fontes confiáveis, incluindo:

1. Glassdoor - Um site onde pessoas compartilham suas experiências de entrevistas e perguntas comuns.

   • Glassdoor

2. MDN Web Docs - Documentação abrangente sobre HTML, CSS e JavaScript.

   • MDN Web Docs

3. JavaScript.info - Um guia moderno para JavaScript, cobrindo desde os fundamentos até tópicos avançados.

   • JavaScript.info

4. React Documentation - A documentação oficial do React, que fornece informações detalhadas sobre a biblioteca.

   • React Documentation

5. CSS-Tricks - Um site com dicas e tutoriais sobre CSS e desenvolvimento front-end.

   • CSS-Tricks

Essas fontes são amplamente reconhecidas na comunidade de desenvolvimento web e são ótimos recursos para aprofundar o conhecimento em front-end.