본문 바로가기

전체 글80

[세미나] 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.
[TIL] Redux-Toolkit, Redux-Persist 에러 A non-serializable value was detected in an action, in the path: `register`. 프로젝트 테스트 중 Redux-Toolkit과 Redux-Persist를 함께 사용하니 콘솔창에 계속 에러가 났다.chatGPT에게 물어보니 아래와 같은 답을 주었고 이해는 안 됐지만 에러는 해결함...const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { // 직렬화 확인을 무시할 액션 타입들을 설정합니다. ignoredActions: ["persist/PERSIST"], }, }),}); 2024. 6. 16.
[TIL] Vite-React-Eslint Prop-Types 검사 에러 없애기 프로젝트 프론트 테스트 중 Vite로 구축한 React 환경에서 컴포넌트에 props를 넘기는데'error' is missing in props validationeslintreact/prop-types위 에러가 계속 나서 내가 처음에 타입스크립트로 잘못 선택했나 싶었는데 에러창을 잘 살펴보니 eslint 에서 문제가 있는 것 같아 찾아봤다. 이유는 vite로 프로젝트 구축할 때 자동으로 생성되는 .eslintrc.cjs 파일의 extemds 부분에 있는 "plugin:react/recommended" 가 문제였다. 이 설정은 React 컴포넌트에서 PropTypes를 사용하여 props의 타입을 검사하도록 권장해서 PropTypes를 정의하지 않았을 때 경고 또는 오류를 발생시킨다고 한다. (출처 Ch.. 2024. 6. 14.
[백준] 1934번: 최소공배수 (JavaScript, node.js) [백준] 1934번: 최소공배수 (JavaScript, node.js)https://www.acmicpc.net/problem/1934https://github.com/jwc406/algorithm_Solving/tree/main/%EB%B0%B1%EC%A4%80/%EC%B5%9C%EC%86%8C%EA%B3%B5%EB%B0%B0%EC%88%98 algorithm_Solving/백준/최소공배수 at main · jwc406/algorithm_Solving알고리즘 풀이 저장소입니다. Contribute to jwc406/algorithm_Solving development by creating an account on GitHub.github.com let input = require("fs").readFi.. 2024. 5. 27.
[뉴딜IT인턴] 10일차 - 데이터 분석을 위한 파이썬 1 파이썬 기초서비스인프라 ⇒ 서버,네트워크,데이터베이스어플리케이션 ⇒ 3tier(쓰리티어)-Architecture프론트 : html, css, react, vue …백엔드 : java, python, spring, django, flask데이터베이스 : RDB(정형화된 데이터), NoSQL(정형화 X)파이썬 기본 기능package : 미리 만들어놓은 코드모음 (numpy, pandas …)# 변수 (Variable)소문자, 단어 연결은 _ ex) today_lunch숫자로 시작하면 안 됨예약어(id, range, str, sum, type) 사용 X실습 1# 제곱근 구하기# 방식 1. n**(1/2)# 방식 2. matH 라이브러리의 matH.sqrt() 사용import mathC = 50H = 30D =.. 2024. 5. 22.
[뉴딜IT인턴] 9일차 - 자바스크립트 서버 프레임워크(NodeJS) 실습 1. Node.js란?웹 브라우저 바깥에서(윈도우, 리눅스, macOS 등) 자바스크립트 코드를 실행할 수 있는 자바스크립트 런타임 환경자바스크립트 런타임 환경웹 브라우저 환경에서는 웹 페이지에 대한 사용자 인터페이스를 만들고, 사용자와의 상호작용을 관리하며, 웹 서버와의 통신을 처리하는데 사용됩니다. 브라우저의 자바스크립트 런타임 환경은 DOM(Document Object Model), 웹 API (예: Fetch API, Web Storage API 등), 이벤트 루프 및 콜 스택과 같은 요소를 포함합니다.따라서 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 특정 컨텍스트를 제공하며, 코드가 어떻게 실행되고, 어떤 API가 사용 가능한지, 코드가 어떻게 스케줄링되고 관리되는지 등을 결정합니다.. 2024. 5. 20.
[프로그래머스] 삼각형의 완성조건(2) (Python3) https://school.programmers.co.kr/learn/courses/30/lessons/120868?language=python3 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.krdef solution(sides): answer = 0 biggest = max(sides) lowerst = min(sides) case1 = biggest+lowerst - 1 #다른 변 길때 case2 = biggest-lowerst + 1 #있는 변 길때 return case1-case2+1 2024. 5. 14.
[프로그래머스] 바탕화면 정리 (JavaScript) https://school.programmers.co.kr/learn/courses/30/lessons/161990?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.krfunction solution(wallpaper) { let fileLocation = []; // 파일 위치 배열 for(i=0; i{ xValues.push(coord[0]); yValues.push(coord[1]); }) const minX = Math.min(...xValues); const minY =.. 2024. 5. 14.
[노개북] IT 5분 잡학사전 - 4일차 TIL 240213 오늘 읽은 범위-> 에피소드 11 - 15 책에서 기억하고 싶은 내용-> 라이브러리와 프레임워크는 모두 누군가 미리 작성해 놓은 코드이고, 개발 속도를 빠르게 만들어 주는 도구라는 공통점이 있고, 이를 구분하는 가장 큰 차이점은 ‘누가 제어를 하는지‘이다. 도구를 어떻게 사용할지 내가 결정을 내리고 있다면 라이브러리, 누군가 정한 규칙에 따라 도구를 사용해야 한다면 프레임워크이다. 또한 다른 라이브러리로 교체하여도 큰 문제가 없다면 라이브러리, 교체하기 어렵다면 프레임워크이다. 하지만 어떤 기술에 대해 라이브러리인지, 프레임워크인지 판단하는 것은 중요치 않다. -> API 작동 방식의 특징은 사용하는 사람이 알 수 없다는 것 -> 도메인을 만드는 것은 레지스트리이며, 도메인 관리 비영리기구인.. 2024. 2. 14.

티스토리툴바