본문 바로가기

분류 전체보기164

[React] vite, Cra(Create React App) 없이 Developement Environment 구성하기. 1. 개요토스 커리어즈에 토스 채용 공고 중 토스가 사용하는 기술 칸이다. 빌드 툴을 보면 4가지나 빌드 하는 과정에 빌드 툴을 사용하고 있는데, 각 회사의 프로젝트마다, 회사의 특성 마다 이러한 기술사용 스택은 얼마든지 변화하고, 변경되거나, 또한 내가 몰랐던 빌드, 기술을 사용할 가능성이 크기 때문에 이를 위해서는 vite나 cra같이 간편하게 설정을 해주고, 템플릿을 지정해주고 커스터마이징이 제약된 환경보다는 커스터마이징이 자유롭고  , 엄청 큰 프로젝트나, 여러가지 환경이 필요한 상황일 때는 vite, cra없이 개발 환경을 구성하는 것이 필요하다고 생각이 되어 포스팅을 작성하게 되었다. 2. Example2-1. React 환경 생성 및 테스트 https://ko.legacy.reactjs.or.. 2024. 8. 20.
[React] Cross Browsing 를 해결하기 위한 몇가지 방법 feat.CSS Reset 1. Cross Browsing Chrome, safari , whale (네이버) , edge 등 오늘날 존재하는 여러 웹 브라우저들은 내부적으로 각 동작하는 엔진과, 속성, 기술요소 등이 다 다를 것입니다. 동일한 웹사이트에 접속하더라도 어떤 웹 브라우저로 접속하느냐에 따라 충분히 다르게 보일 수 있습니다. Cross browsing은 이 다르게 보일 수 있음에 대하여 모든 브라우저에서 화면이 모두 동일하게 표시되어야한다는 것을 의미하는 것이 아니라, 동등한 수준의 정보, 동일한 기능 제공이 우선적이어야 한다에 대해 얘기하는 것입니다.  크로스 브라우징을 맞춰주기 위해서는 우선 어플리케이션이 가장 우선해서 고려해야할 웹 브라우저는 어떤 브라우저인가를 고려해야합니다. ex) 점유율이 높은 것이 우선이니.. 2024. 8. 20.
[React] GlobalStyles(전역 스타일링) 1. 개요 import styled from "styled-components";function TestPage(props) {    return (        Wrapper>            Title>{props.Title}Title>            Contents>{props.Contents}Contents>        Wrapper>    );}const Wrapper = styled.div`    border : 1px solid black;    border-radius: 15px;    padding : 20px;    margin : 16px auto;    max-width: 400px;`;const Title = styled.h1`    font-family: 'Courie.. 2024. 8. 20.
[React] Styled-Components 개요1. className 을 지정하여 , 별도의 css파일에서 Styled를 지정하는 방법.  div>'        a href="https://vitejs.dev" target="_blank">          img src={viteLogo} className="logo" alt="Vite logo" />        a>      div>하나의 예시로 className은 logo로 지정되어 있기에 상단에서import './App.css'App.css 파일을 import 하고 있기에, .logo {  height: 6em;  padding: 1.5em;  will-change: filter;  transition: filter 300ms;} App.css에서는 이러한 className에 대한 st.. 2024. 8. 20.
[Javascript]Javascript 자바스크립트의 변수(var,const,let) 과 scope // 전역 스코프 global scope , 블록 스코프 block scope , 함수 스코프(function scope)let blockScopeVariable = "Available only in this block";if(true) {    // var blockScope = "Visible inside this block";    let blockScope = "Visible inside this block";    console.log(blockScope);} // console.log(blockScope);console.log(blockScopeVariable);// console.log(blockScope); // for (let i =0;i//     console.log(i);// }fo.. 2024. 8. 11.
[KPT 회고] JavaScript Project KPT 회고 KPT 회고Keep - 현재 만족하고 있는 부분서로 기한 내에 정해진 기일에 맞추어, 프로젝트를 완성해내었다.적극적으로 모든 팀원이 문제를 해결해나가기 위해 노력하였다.여러 가지 기능들을 구현하려고 시도했다.코드 컨벤션은 너무 잘 지켰다고 생각한다.코드 컨벤션과 , 깃허브 룰에 대해 어느정도 숙지하고 프로젝트에 진입해서, 서로 깃에 의한 시행착오, 오류가 생각보다 적었다. 초반에는 거의 없었다.각자 기능구현을 하려고 책임감을 가지고, PM 9시 이후에도 기능 구현을 하기 위해 노력하였다.스크럼 횟수, 시간 너~무 잘 지켜졌다.Problem - 불편하게 느끼는 부분프로젝트 일정을 촉박하게 잡아서 , 프로젝트 각 기능에 대한 시간분배가 아쉬움기능을 구현하는 과정에서, 개발 지식 부재로 인해 해결이 미흡한, .. 2024. 8. 7.

티스토리툴바