정리10 [세미나] Figma를 통한 design-to-code 도구 사용기와 실전 비교 사내에서 진행했던 세미나 발표 자료, 스크립트 정리 안녕하세요. 오늘의 주제는 피그마를 통한 design-to-code 도구 사용기와 실전 비교 입니다.첫번째로는 디자인 도구인 피그마에 대해 알아보고, 이 도구를 통해 어떻게 디자인을 코드로 변환시킬 수 있는지 먼저 알아보겠습니다.1. 디자인과 코드의 연결피그마란? Figma는 현재 가장 인기 있는 UI/UX 디자인 도구로, 클라우드 기반으로 동작하여 실시간 협업을 가능하게 해줍니다. 과거에는 디자이너가 디자인을 완료하면 개발자가 이를 일일이 코딩하던 방식이었지만, Figma와 같은 협업 도구의 등장과 발전으로 인해 디자이너와 개발자가 동시에 작업하고 실시간으로 피드백을 주고받을 수 있게 되었습니다.디자인 변환 과정의 어려움하지만 피그마가 등장했어도, .. 2024. 9. 13. [세미나] 타입스크립트로 더 나은 코드 작성하기 사내에서 진행했던 세미나 발표 자료, 스크립트 정리0. 도입안녕하세요. 오늘 발표의 주제는 타입스크립트로 더 나은 코드 작성하기 입니다.자바스크립트는 모두가 많이 애용하는 언어지만, 유연한 특징으로 인해 다양한 문제가 발생하기도 합니다. 이러한 문제들을 어떻게 해결할 수 있는지 알아보고, 타입스크립트를 통해서 더 좋은 코드를 작성하는 방법은 무엇일지 알아보겠습니다.1. 타입스크립트의 필요성자바스크립트의 한계자바스크립트는 동적 타입 언어입니다. 동적 타입 언어란, 자료 유형을 미리 정해주지 않아도 사용할 수 있고, 코드가 실행되는 경우에 정해지는 언어를 말합니다. 이런 특징으로 인해 자바스크립트는 빠르고 자유롭게 개발할 수 있지만, 그로 인해 여러 문제가 발생되기도 합니다. 정적 타입 언어인 자바와 비교.. 2024. 9. 6. [세미나] 왜 리액트인가? 사내에서 진행했던 세미나 발표 자료, 스크립트 정리0. 왜 리액트인가?오늘 주제는 "왜 리액트인가?"입니다. 리액트는 웹 개발에서 가장 인기 있는 기술 중 하나로, 전 세계의 수많은 개발자들과 기업들이 선택하고 있는 기술입니다. 2024년 스택오버플로우 개발자 조사에 따르면, 지난 1년 동안 어떤 웹 프레임워크와 웹 기술로 광범위한 개발 작업을 했으며, 내년에 어떤 작업을 하고 싶으신가요? 라는 설문에서 약 40%가 React를 선택했습니다. 2024년 뿐만 아니라, 리액트는 등장 이후로 꾸준히 순위가 증가하여, 현재까지도 높은 순위를 유지하고 있습니다.이런 통계는 리액트가 단순히 유행으로 많이 사용되었던 것이 아니라, 현재까지도 발전하며 많은 사람들에게 사용되고 있다는 것을 보여줍니다. 따라서 오늘 발.. 2024. 8. 29. [세미나] HTML, CSS, JavaScript개념 사내에서 진행했던 세미나 발표 자료, 스크립트 정리1. 웹의 역사와 세 가지 핵심 기술의 탄생1.1 웹의 탄생1990년: 팀 버너스-리가 최초의 웹 브라우저이자 편집기인 월드 와이드 웹을 개발.1991년: 팀 버너스-리는 첫 번째 웹사이트를 공개, HTML과 하이퍼링크 개념을 설명.1.2 웹의 발전과 세 가지 기술의 등장HTML: 1991년, 웹 페이지의 구조화와 정보 연결을 위한 마크업 언어로 등장.CSS: 1996년, 웹 페이지의 레이아웃과 디자인을 담당하는 기술로 도입.JavaScript: 1995년, 웹 페이지에 동적인 기능과 사용자 상호작용을 추가하는 언어로 도입.2. HTML2.1 HTML의 정의와 개념HTML: HyperText Markup Language의 약자, 웹 페이지의 구조와 내용을.. 2024. 8. 9. [React JS 마스터클래스] #3 TYPESCRIPT 정리 #3.0 Introduction - 타입 문법과 함꼐하는 자바스크립트 - 추가 : 타입 체크, 자동 완성, 인터페이스, JSX 문법 - 언어 작동 전에 타입 확인함 => stongly-type - 브라우저는 자바스크립트만 이해할 수 있음 => 타입스크립트는 이해 X - 컴파일 시 자바스클비트로 변경 -> 실행 전에 타입 체크 하고 오류 알려줌 #3.1 DefinitelyTyped CRA로 타입스크립트 프로젝트 생성 1. [npx or yarn] create-react-app [내 앱 이름] --template typescript 2. yarn add styled-components 로 스타일드 컴포넌트 먼저 설치 3. yarn add @types/styled-components -D 으로 타입스크립트 타.. 2024. 1. 23. [React JS 마스터클래스] #2 STYLED COMPONENTS 정리 #2.0 Why Styled Components 스타일드 컴포넌트를 사용하는 이유와 장점 스타일 적용하는 방법 : 직접 자바스크립트로 스타일 입혀주는 방식, 글로벌 css 파일 import, css 모듈 import #2.1 Our First Styled Component yarn add styled-components로 설치 import styled from " styled-components" 임포트 const Box = styled. ` (css 코드) ` 형식으로 사용 가능 실제 코드에서는 자동으로 클래스를 생성하여 스타일 삽입 #2.2 Adapting and Extending 스타일 컴포넌트와 props 사용하기 - 스타일 컴포넌트로 props를 보내고, css 내에서 표현식으로 값 사용 확장가.. 2024. 1. 21. [리액트 숙련주차] 2-21~23 비동기 프로그래밍 2-21 비동기 프로그래밍 입문 1. 동기 방식과 비동기 방식 동기적(synchronous) 방식 - 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 - 일반적 프로그래밍 세계에서 코드는 모두 동기적으로 실행됨 비동기적(not synchronous) 방식 - 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 - setTimemout, addEventListner 등 - 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 - 대표적으로 서버 통신과 관련된 로직들을 포함함 ex) 중식집에서 배달 후 배달원이 다먹을때까지 기다렸다가 그릇을 회수하지 않고, 다른 집도 갔다가 다시 찾으러 오는 것과 비슷함 2. 콜백지옥 - 콜백함수를 익명함수로 전달하는 과정이 반복.. 2023. 7. 11. [리액트 숙련주차] 2-10 Lifecycle 2-10 Lifecycle 1. 생명주기란? [Mount] -> [Update] -> [Unmount] - 컴포넌트 중심 라이브러리의 집합체 - 리액트 컴포넌트에는 각각 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 존재 - 클래스형 컴포넌트에서 적용했었던 메서드들을 많이 이야기하기 때문에 많이 시간 할애 X 2. 생명주기별 메서드 1. Mount : 컴포넌트가 생성될 때 constructor 생성자 함수 컴포넌트가 맨 처음 만들어질 때 호출 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 렌더링하는 메서드 컴포넌트를 D.. 2023. 6. 29. [리액트 입문주차] 1-12~13 State 1-12~13 State(1), (2) 1. State란? - 컴포넌트 내부에서 바뀔 수 있는 값 - 변경될 수 있는 값은 state로 선언 - UI로의 반영을 위해 필요! - 랜더링을 다시 하기 위해서 2. useState 훅 - useState("초기값")의 반환값은, 초깃값을 가지는 변수와 변수를 다룰 수 있는 메서드를 가진 배열을 리턴해 줌 => const [state, setState] = useState("초기값") - hook : 특정한 기능을 수행하는 함수! 3. State 변경하기 - setValue(바꾸고 싶은 값) 예제 1 - props로 변경하기 // src/App.js import React, { useState } from "react"; function Child(props) .. 2023. 6. 24. [리액트 입문주차] 1-5 React Component ~ 1-11 Props 추출 1-5 React Component 1. 리액트 컴포넌트란? - 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 개별적으로 살필 수 있음 - 개념적으로는 js 함수와 유사 - props 라는 입력을 받아 화면을 표시하는 React 엘리먼트를 반환 - input이 들어가면 output이 나오는 형태 - 즉 props를 입력하여 html(JSX)을 리턴하는 함수 2. 함수형 컴포넌트, 클래스형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () .. 2023. 6. 24. 이전 1 다음
