eunji

리스트 예시: 게시물이 존재할 경우 3건을 노출합니다.

• Rest RespresentationalStateTransfer 컴퓨터 시스템 간의 상호교환성 방법 WEB어떻게 인터넷에서 정보를 공유할 것인가 표현방식 html식별자 url전송 방법 http API xml-rpc (1998)by microsoft->soft 개명 salesforce API (2000)-> 짱 복잡... flickr API (2004)SOAPREST 2010 에는 salesforce 도 rest 씀 CMIScms 를 위한 표준rest 바인딩 지원 -> rest를 만든 사람(로이필딩)은 cmis 에 rest가 없다고 이야기함 microsoft Rest Api guidelines (2016)https://{service}/{collection}/{id}GET / PUT / DELETE / POST.. 2026.03.04
• 도커 이미지 - 컨테이너 🐳 DockerfileFROM node:20.18RUN npm install -g pnpmWORKDIR /appCOPY package.json pnpm-lock.yaml* ./RUN pnpm installCOPY . .EXPOSE 3010# 서버 실행CMD ["pnpm", "run", "start"] 이건 그때그때 알아서...이 프로젝트는 pnpm 이었음 이미지 = 변하지 않는 설치 파일/도장컨테이너 = 그 도장으로 찍어낸 실행물 (여러 개 가능)Docker Desktop에서 →Images = 템플릿 창고Containers/Apps = 실제 돌고 있는 서버 목록[ Image ] (읽기 전용, 실행 템플릿) │ │ docker run ▼[ Container 1 ] (실행 인스턴.. 2025.09.18
• observer 패턴 class Subject { constructor(){ this.observerList = new Set([]) } subscribe(observer){ this.observerList.add(observer) } unSubscribe(observer){ this.observerList.delete(observer) } notify(data){ this.observerList.forEach((e)=>e.update(data)) }}class Observer { constructor(key){ this.key = key; } update(data){ console.log(this.key,": ",data) }}const book = new Subjec.. 2025.04.27
• react SEO 관련 https://joeunji0119.github.io/ dev-eunji프론트엔드 개발자 조은지 홈페이지joeunji0119.github.io dev-eunji 스펙 1. react - gh-pages 로 배포 2. html 한장 (서브 페이지는 seo 안됨..... 서브 페이지 seo는 아래에 있습니다.)   step1. 깃으로 배포 1. 내 이름으로 레포파기 -  꼭  내 이름으로 파야함, 안 그러면 내 깃 주소 뒤에 /레포지토리 이름 으로 서브 url 줌 -  서브 url로 페이지 만들면 seo 체크가 안 됨  2. react 프로젝트 만들기2-1. 깃이랑 연결하기 전에 하면 좋을 설정  - gh-pages 설정 npm install -D gh-pages  "scripts": { "dev":.. 2025.04.07
• useState const React = (() => { let state; const useState = (init) => { state = state ?? init let setState = (newValue) => { state = newValue return state } return [state, setState] } return {useState} })()const [state, setState] = React.useState("hi");setState("no")statesetState("2222")state 리액트 useState대강 이렇게 생기지 않았을까  아쉬운 건  state.name = "eunji" 하는 순간 값은 들어가지 않지만 오류 자체.. 2025.01.06
• 2024.11.05, weekly memoirs weekly memoirs           1. 정말 오랜만의 회고록....!!!!!!8월에 남겼으니 벌써 2달하고 3달만의 회고록이다그 동안 정말 바쁘게 지냈는데, 지금 생각해보면 힘들었지만 재밌게 보낸 거 같다 프로젝트는 아주 잘 마무리가 되어 지금은 다른 프로젝트 진행중에 있다운 좋게 또 리액트를 사용하게 되어 기쁜 요즘이다    2.위 사진에 올려놨듯이 요즘엔 저 코어 자바스크립트 책을 공부하고 있다프론트엔드 근본의 자바스크립트......예전에는 유툽 강의나 다른 사람들 코드를 따라치면서 공부했다면 요즘엔 책으로 공부하는 게 좀 더 좋은 것 같다 정말 백배천배 나은 느낌...강의에서는 강의 하시는 분이 시간 문제로 말하지 못했던 점들이 책엔 상세히 잘 적혀져 있어서..?이유는 아직 잘 모르겠으나.. 2024.11.05
• for문 안에 setTimeout 걸면 어떻게 동작할까 for (let i=0; i{ console.log(i) },2000)} 반복문이 한번 돌 때마다 let i는 블록 스코프를 가짐각 반복마다 i는 새로 선언된 것처럼 동작함 풀어서 쓰면 이런식으로 동작하는 듯function num(n) { setTimeout(() => { console.log(n); }, 2000);}function timer() { num(0); // 첫 번째 호출 num(1); // 두 번째 호출 num(2); // 세 번째 호출}timer();  1. for 루프는 동기이기 때문에 setTimeout을 빠르게 3번 설정하고 종료됨2. 2초후 각 콜백 함수는 캡처된 고유의 값을 가지고 순서대로 실행함3. 0 1 2 순서대로 출력됨. 이 코드는 순서 보장이 됨4... 2024.11.04
• 실행 컨텍스트와 호이스팅 실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체임 클로저를 지원하는 대부분의 언어에서는 동일한 개념이 있긴 함 스택 : 선입 후출큐 : 선입 선출  1. 동일한 환경에 있는 코드들을 실행2. 필요한 환경 정보들을 모아서 컨텍스트를 구성함3. 이걸 콜 스택에 쌓음4. 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행함5. 이런식으로 전체 코드의 환경과 순서를 보장함  작동 순서 예시var a = 1;function outer(){ function inner(){ console.log("inner",a,b) a = 3; } inner(); console.log(a)}outer();var b = 3; 1. js코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담김 (최상단.. 2024.11.03
• 소프트웨어 장인 1장~4장 서문 일을 어떻게 했느냐는 일을 해낸 것만큼이나 중요하다최선을 지향하는 습관이 중요함팀원들도 함께 볼 수 있는 코드를 짜셈  1장 21세기의 소프트웨어 개발 아키텍쳐팀에 있다가 개발팀으로 돌아감. 이유는 개발이 좋았기 때문임뭐든 다 중요함. 하지만 정말 중요한 건 내가 즐겁게 할 수 있는 걸 따라야함 1-1. 고참 개발자 / 새로운 현실 고참이란 건 일시적이고 상대적임과거에는 소프트웨어 프로젝트를 실행할 때 각 담당자가 해야할 일이 구체적이었음개발자는 진짜 개발만 함이제 바뀌는 중임자기 전문 분야 + 비즈니스 관련 조예 필요 고객은 많고 빠른 걸 원함소프트웨어를 빠르게 바꾸면서 품질 유지 가능하다면 짱임=> 프로페셔널한 개발자를 원함=> 소프트웨어 개발 방식이 프로페셔널하게 바뀌도록 압력을 받고 있음 애.. 2024.10.07
• icon svg 컴포넌트 스타일 props 넘기기 import React, { useState, Suspense, lazy } from 'react';import './styles.css';const iconMap = { icon1: lazy(() => import('./icons/icon1.svg')), icon2: lazy(() => import('./icons/icon2.svg')),};const LazySvgLoader = ({ name, style, onClick }) => { const LazySvgIcon = iconMap[name] || null; return ( Loading Icon...}> {LazySvgIcon ? ( ) : ( Icon not.. 2024.10.04
• react - Suspense 이해 정리 리액트 파다가 헷갈려서 다시 정리함   1. 원래 리액트는 자바스크립트 싱글 스레드 위에서 돌아가기 때문에 병렬적인 작업이 안됨2. 게다가 비동기 아님 동기임 3. 그럼 컴포넌트를 세세하게 쪼개서 동시성이 있는 것처럼 작동하게 하자(비동기)4. 이게 리액트가 말하는 동시성임. 그렇게 나온 코드 스플리팅과 suspense.   *** 리얼 돔이 아니라 가상돔에서 일어나는 일 *** 1. 가상 DOM은 실제 DOM과 달리, 컴포넌트를 하나씩 순차적으로 처리하고 렌더링함2. 그러다보니 어떤 페이지가 있을 때, 컴포넌트 하나 그리고 -> 다음 거 그리고 -> 그 다음 거 그리고... 이렇게 동기적으로 하다보니   예시의 코드를 그릴 때 느린 컴포넌트가 모두 그려진 후에 안 느린 컴포넌트를 그.. 2024.08.19
• 2024.08.18, weekly memoirs 1.오랜만의 주간 회고록!그 동안 쓰지 않은 이유는.... 느낀 게 아무 것도 없기 때문.........이다부랴부랴 일 + 동료 팀원분들 퇴사로 인한 송별회로 다른 걸 생각할 여유가 없었다 동료 분들이 한둘 나가기 시작하면 나도 이직해야하나... 하는 생각이 자연스럽게 드는 거 같긴 하다더군다나 입사 동기분이 이직하셔서 크게 휘청이는 나의 마음... 그래도 아직은.... 레거시가 되어가는 나의 이력서 + 요즘 기업에서 요구하는 리액트 스펙 생각하면 아직 애매한 거 같다    2.회사에서 계속 리액트 쓰고 있다초반에 컴포넌트 나누느라 고생했는데 요즘 그 덕 잘 보고 있다 한번 유용하게 짠 내 컴포넌트 열자식 안 부러움 요 근래는 프린트 미리보기 + 엑셀 다운로드 작업을 계속 했는데처음에 컴포넌트 틀 만드는.. 2024.08.18
• 타입스크립트 - infer 타입스크립트가 추론한 타입을 사용할 때 컨디셔널 타입과 함께 사용함  Q : 그럼 이미 추론한 걸 그대로 두지 왜 infer로 끄집어내서 사용하려고 할까? A : 복잡한 기능에선 쓰일 데가 있음  복잡한 타입 추론:TypeScript가 자동으로 추론하지 못하는 복잡한 상황에서 infer를 사용하여 원하는 부분만 추출하거나 변형할 수 있습니다.예를 들어, 특정 함수의 반환 타입을 추출하거나, 제네릭 타입 내의 특정 부분만 추출할 때 유용합니다.유틸리티 타입 작성:TypeScript에는 ReturnType이나 Parameters와 같은 유틸리티 타입이 있습니다. 이러한 유틸리티 타입은 infer를 사용하여 다양한 타입 정보를 추출합니다. 유틸리티 타입을 직접 정의하거나, 기존 유틸리티 타입을 변형할 때 in.. 2024.08.18
• 타입스크립트 - enum 열거형 타입 enum 전에도 한번 봤던 적 있는데https://0119eunji.tistory.com/231 책에 나오길래 다시 정리  enum(열거형) 타입은말 그대로 여러 상수를 나열하는 목적으로 쓰임 enum Status { New, InProgress, Completed, Cancelled} 이런 enum이 있다면var status = { "0" : 'New', "1" :'InProgress', "2" :'Completed', "3" :'Cancelled' New : 0, InProgress : 1, Completed : 2, Cancelled: 3} 런타임시 이런 자바스크립트 코드가 됨  enum Status { New, .. 2024.08.18
• 타입스크립트 - class 클래스는 값이면서 타입임 const Person = class { name; age; married; constructor(name:string,age:number,married:boolean){ this.name = name; this.age = age; this.married = married; }} 이렇게 씀 constructor에 멤버를 넣기 전에 한번 써줘야됨멤버의 타입은 생략 가능함 멤버와 constructor는 짝이 맞아야 함=> 그러니까 이 짝이 맞는 걸 타입체킹하는 거임. 더 엄격한 타입 검사를 원하면 implements 예약어를 쓰면 됨 interface Human { name: string; age : number; married : boolean; s.. 2024.08.18
• 타입스크립트 공변성, 반공변성 공변성 :A -> B 일 때, T -> T반공변성 : A -> B 일 때 T -> T 이변성 : A -> B 일 때 T -> T 됨 T -> T 됨무변성 : A -> B 일 때 T -> T 도 안되고 T -> T 도 안됨 기본적으로 타입스크립트는 공변성의 갖고 있음근데 함수의 매개변수는 반공변성을 갖고 있음  이때 ts.config에서 strictFunctionTypes 체크 되어 있어아함체크 안되어 있으면 타입스크립트는 매개변수에 대해 이변성을 띔   반환값에서의 공변성 사례  1. a -> b 인 상황number | string => number function a (x:string):number {return Number(x)}type B = (x:string) => number | string;l.. 2024.08.11
• 타입스크립트 오버로딩 타입스크립트 오버로딩   함수 자체를 오버로딩하는 경우* 오버로딩된 함수의 시그니처를 선언한 후, 바로 뒤에 실제 함수 구현을 제공해야함 function add(x: number, y: number): number (+1 overload)    *** 오버로딩 순서 중요함 *** function test(a:string): string;function test(a:string | null): number;function test(a:string | null): string | number { if(a){return "string"} else {return 123}}const result = test("hi")  인자를 string으로 넘겼을 때 result는 가장 첫번째에 있는 리턴값 string이 .. 2024.08.11
• 싱글톤 정말 많이 쓰는 패턴 싱글톤특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하는 디자인 패턴임  클래스 형class Singleton { constructor() { if (Singleton.instance) { return Singleton.instance; } this.value = Math.random(); Singleton.instance = this; } getValue() { return this.value; }}const singleton1 = new Singleton();const singleton2 = new Singleton();console.log(singleton1 === singleton2); // trueconsole.log(sing.. 2024.08.04
• 클로저 - hof - 리액트 - hoc - class 프론트엔드 개발자라면 중요한 클로저 개념...클로저 예시 찾아보면 모두 class 형밖에 없다 Q: 그럼 함수형에는 클로저 개념이 없는 걸까?A :아님  함수형 클로저function out (a:string){ let outV = "밖"; function inner(){ console.log("inner", outV) console.log("props",a) } return inner}const instance1 = out("인스턴스단 변수1");const instance2 = out("인스턴스단 변수2");const instance3 = out("인스턴스단 변수3");instance1()instance2()instance3()/**'inner' '밖''props' '인스턴스단 변수.. 2024.08.04
• es5은 어떻게 브라우저에서 동작했을까 & UMD 파면 팔수록 넘 헷갈려서 다시 정리함   commonJS는 2009년에 만들어짐가져올 때const {name} = require("../name.js");내보낼 때exports.name = "something"; es5표준을 기반으로node의 모듈 시스템을 위해 만들어짐(require문 자체는 commonJS에서 만듦) 아무튼 commonjs는 node"서버"를 위한 모듈 시스템임동기적으로 동작함모든 모듈이 순서대로 로드, 실행됨 // counter.jslet count = 0; // 모듈의 비공개 변수module.exports = { increment: function() { count += 1; return count; }, decrement: function() { count .. 2024.07.28