분류 전체보기77 [TIL 2023.08.01] 자바스크립트로 만든 투두리스트 타입스크립트로 바꾸기 ❓발생한 이슈/고민 지난번에 만든 투두리스트를 타입스크립트로 고쳐보았다. 고려해야할 사항은 타입 스크립트 환경에서 정적 이미지 파일 사용하기 react-router-dom 사용하기 redux 사용하기 💡해결과정 정적 이미지 파일 사용하기 원래 자바스크립트 환경에서는 export { default as all } from "./all.png"; export { default as culture } from "./culture.png"; export { default as game } from "./game.png"; 이미지 폴더 안에 index.js 파일을 하나 생성해서 export해서 사용할 수 있었다. 그런데 이걸 타입스크립트로 하려하니 빨간줄이 쫙쫙 그이면서 난리가 난 것. 이럴때에는 /src/@ty.. 2023. 8. 1. [TIL 2023.07.31] 타입스크립트 generic 💻오늘 배운 내용 Generic 타입을 함수의 파라미터처럼 사용한다. (선언 시에는 타입 파라미터만 적어주고, 생성하는 시점에 사용하는 타입을 결정) 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없을 때 유용하다. 예시코드 function getSize(arr:number):number{ return arr.length; }; const arr = [1, 2, 3]; getSize(arr); //3 getSize라는 함수가 있고, 호출 시 인자로 숫자배열을 넣어준다고 치자. 파라미터의 타입은 넘버, 함수의 타입도 배열의 길이를 반환하기 때문에 넘버가 된다 하지만 여러 형태의 배열에서 쓰인다면 어떨까? function getSize(arr : number[]): number { ret.. 2023. 7. 31. [WIL 2023.07.30] 내배캠 11주차 📝 Situation(상황): 이번주 목표 TypeScript가 개발자에게 어떤 이점을 제공하는지 파악한다. 컴파일러의 개념에 대해서 공부하고 tsc를 어떻게 사용하는지 파악한다. 기본 타입의 종류와 사용법을 익힌다. enum, object literal의 차이점과 언제 사용하면 좋을지 파악한다. 주요 유틸리티 타입을 학습한다. S.O.L.I.D 원칙을 기반으로 좋은 객체 지향 설계 방법을 이해한다 👀 Task(임무): situation 중 문제들 1] 용어의 정립이 안됨. 강의를 듣는데 무슨 뜻인지 못알아듣는 문제가 생겼다. 절차적 프로그래밍(PP) vs 객체지향 프로그래밍(OOP) 정적언어 vs 동적언어 함수 vs 메서드 Parameter vs Property vs 인자 vs 생성자 2] 후발대 수업.. 2023. 7. 31. [TIL 2023.07.28] 타입스크립트 객체 지향 프로그래밍 💻오늘 배운 내용 클래스 객체를 만들기 위한 틀(template) 객체들이 공통으로 가지는 속성(attribute)과 메서드(method)를 정의 - 속성: 객체의 성질 - 메서드: 객체의 성질을 변화시키거나 객체에서 제공하는 기능들을 사용하는 창구 ❓객체: 클래스를 기반으로 생성. 클래스의 인스턴스(instance) 사용예시 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요! 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`); } } const person.. 2023. 7. 31. [TIL 2023.07.27] 헷갈리는 용어들 개념 정리 (절차적 프로그래밍 vs 객체지향 프로그래밍 / 정적언어 vs 동적언어 / 함수 vs 메서드 / Parameter vs Property vs 인자 vs 생성자) 🧐궁금점과 부족한 내용 오늘따라 공부하다가 유독 용어가 헷갈리는 게 많았다. 요것들은 나중에 따로 포스팅 해둘 필요가 있을 듯 절차적 프로그래밍(PP) vs 객체지향 프로그래밍(OOP) 절차적 프로그래밍(Procedural Programming) 객체지향 프로그래밍(Object-Oriented Programming) 정적언어 vs 동적언어 정적언어 = TypeScript 작성자가 소스 코드를 보고 변수 타입을 직접 작성하는 언어이다. 정적타입 언어에는 C, C#, C++, Java 등의 언어가 있고, 이들 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 한다. 컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생한다 동적언어 = JavaScript 코드를 실행할 때 알아서 변수.. 2023. 7. 27. [TIL 2023.07.26] 타입스크립트 enum과 object literal의 차이점 / 주요 유틸리티 타입 💻오늘 배운 내용 enum, object literal의 차이점과 언제 사용하면 좋을지 파악할수 있다. 주요 유틸리티 타입 학습 두 번째 TypeScript 프로그램 코드를 이해하고 발전시킬 수 있다. enum과 object literal의 차이점 enum enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } 열거형 데이터 타입. 상수의 그룹화를 할 때 적절하게 쓰인다. 코드의 가독성을 높이고 명확한 상수 값을 정의할 수 있다. 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다. object literal const o.. 2023. 7. 26. [TIL 2023.07.25] 타입스크립트 입문 / 기본 타입 💻오늘 배운 내용 기존 순수 JavaScript로만 개발했을 때의 한계점과 TypeScript의 등장배경에 대해 설명할 수 있다. TypeScript 컴파일러와 tsc의 개념에 대해 이야기 할 수 있다. .d.ts 파일의 역할과 사용 방법에 대해 설명할 수 있다. TypeScript에서 지원하는 기본 타입(boolean, number, string, 배열, 튜플, enum)을 활용하여 코드를 작성할 수 있다. 타입 안정성이 코드 품질에 어떻게 기여할 수 있는지를 설명할 수 있다. any, unknown, union을 이용하여 가변적 데이터 타입을 정의할 수 있다. 가변적 데이터 타입을 남발할 때 생기는 문제에 대해 설명할 수 있다. JavaScript의 약점 ☑️ 실행 시간에 결정되는 변수 타입 ☑️ 약.. 2023. 7. 25. [TIL 2023.07.24] 아웃소싱 프로젝트 마무리 ❓발생한 이슈/고민 일주일 간 열심히 작업한 작업물의 발표날이다. 프로젝트를 정리하며 깃헙 레포에 올릴 리드미와 발표자료를 작성했다. 💡해결과정 리드미의 구성은 이러하다 적다보니 리드미가 좀 길어져서 앵커를 추가했다. 목차를 클릭하면 해당 목록으로 슉 이동 프로젝트 구조를 어떻게 하면 간단하고 알기쉽게 구성할지 고민하다가 사용한 방식. 이렇게 쓰는게 맞는건지는 모르겠으나.... 구조의 흐름(?)을 보여주고싶었다. 발표자료는 피그마로 작성을 했다. 팀원 중 한 분이 만들어 주셨는데 PPT 짬이 어마어마하다. 간단히 프로젝트를 소개-프로젝트 진행하면서 만난 문제와 해결과정-회고 순으로 구성되어 있다. 열심히 만든 우리 페이지. 잘 정리해서 알차게 소개하려다보니 소개/발표 자료에도 정성이 많이 들어간 것 같다.. 2023. 7. 24. [WIL 2023.07.23] 내배캠 10주차 📝 Situation(상황): 이번주 목표 외부API를 활용해 서비스를 만드는 아웃소싱 프로젝트 우리팀의 경우에는 지도 서비스(카카오map)를 지원하는 웹사이트를 만들기로 결정 위치기반 시스템으로 우리 동네 소모임을 검색, 생성 및 참여할 수 있다. 커밋 COME IT (community meeting service) "다양한 취미를 함께 즐기며 새로운 친구들과 만날 수 있는 친목 모임, 함께해요!” 👀 Task(임무): situation 중 문제들 여러 문제들 중에서도 메인페이지와 소개페이지에서 쓰는 Slider 컴포넌트를 공용 컴포넌트로 사용 중이었는데 슬라이더의 내용이 될 아이템이나 크기, 한번 이동 시 움직이는 거리, 슬라이더 너비, 구조 등등 모두 다 다르다 보니까 처음 설계해놓은 슬라이더로는 .. 2023. 7. 24. [TIL 2023.07.17] 아웃소싱 프로젝트 - 커밋(COME IT) 💻오늘 배운 내용 React] 만능 컴포넌트/재활용성이 높은 컴포넌트를 만드는 방법 mixins 폴더와 utils 폴더 활용하기 ❓발생한 이슈/고민 아웃소싱 프로젝트 기획 -지도 서비스를 지원하는 웹사이트를 만들기- 💡해결과정 프로젝트 Starting Assignments 문서 작성 프로젝트 주제: 커밋 COME IT (community meeting service) "다양한 취미를 함께 즐기며 새로운 친구들과 만날 수 있는 친목 모임, 함께해요!” 와이어프레임 구성 필요한 기능회의 사용하는 기술 Redux Toolkit styled-component firebase 실제로 사용 가능한 서버, auth, storage등 다양한 서비스 제공 react-query caching, infiniteScroll .. 2023. 7. 17. [TIL 2023.07.05] json-server와 HTTP 💻오늘 배운 내용 json-server 아주 간단한 DB와 API 서버를 생성해주는 패키지 Backend(BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(FE) 개발에 임시적으로 사용할 mock data를 생성. FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업할 수 있다. json-server 설치 yarn add json-server json-server 실행하기 (root 경로에 db.json 파일이 자동으로 생성된다.) yarn json-server --watch db.json --port 4000 만들어진 파일에는 기본적인 예시 값들이 생성되어 있다. { "posts": [ { "id": 1, "title": ".. 2023. 7. 5. [TIL 2023.07.04] Redux Toolkit / 옵셔널 체이닝? 💻오늘 배운 내용 Redux Toolkit 리덕스를 개량한 것 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 (a.k.a RTK) 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다 =>Slice 라는 API를 사용 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlic.. 2023. 7. 4. 이전 1 2 3 4 5 ··· 7 다음
