전체 글 검색 결과

해당 글 143건

[팁] 구글링을 통해 공부할 때 반드시 주의할 것

정확하지 않다!! TIL 블로그들이 많이 생겨나면서 발생하는 문제점 react rendering과정을 구글링하다 10여개의 블로그 글을 아무리 읽어봐도, 당췌 이해가 안됐다. 한국어는 맞는데 뭔가 이상하다. 갑자기 나의 개발 실력에 의심을 하게 되었다. 이래서 너무 과한 내향성(문제의 원인을 자기 탓으로 돌림)은 문제가 되는 듯하다. 영문으로 쳐서 검색해보았다. 이런? 내가 의아하게 생각한 것들이 영문으로 검색하니, 정확히 가려운 부분을 논리적으로 설명하고 있었고, 내가 틀린부분이라 수정한 부분도 정확히 나왔다. 내가 심리학을 공부할 때 적용했던 process를 생각해서 개발 공부를 하면서도 적용하자. 3차, 4차 가공의 컨텐츠는 가독성과 재미가 있어야 가치가 있다. 가독성과 재미도 없는 3,4차 컨텐츠..
🧠 FeedBack 2021. 9. 8. 12:01

[JSX]: JS와 JSX 확장자는 무엇이 다를까?

JSX: Javascript XML 1) Javascript에서 HTML을 사용할 수 있게 하는 리액트만의 문법(syntax)을 말한다. 2) html안에 변수를 넣으려면 { }로 감싼다. 3) html의 attribute를 다르게 쓴다. class대신 className, onclick대신 onClick 등 JSX는 react 파일의 확장자로써의 상징적인 의미를 갖는다. ECMAScript가 Javascript의 표준과 규격등 문법에 관해 사용할 때 쓰는 것처럼, JSX도 JS의 파일에 React 라이브러의 표준을 따른다는 의미로써 사용되는 확장자다. 다만, 둘을 구분지으면서 얻는 이익이 딱히 없고, JS파일에 JSX로 코드를 작성하면, CRA와 같은 툴체인에 의해 JS 코드로 변환해주기 때문에 실제로 ..
🌕 Front/⚛️ React JS 2021. 9. 7. 09:37

[React+Typescript] React.FC를 굳이 사용하지 않아도 되는 이유

1. 코드 가독성 const Greeting:FC = function({ name }) { return Hello {name} } function Greeting({ name }: GreetingProps) { return Hello {name} } 굳이 FC type을 명시해줘서 코드 가독성이 떨어진다. 2. FC always imply children export const Greeting:FC = ({ name }) => { // name is string! return Hello {name} }; // use it in the app const App = () => {"I can set this element but it doesn't do anything"} React.FC는 암묵적으로 chil..
🌕 Front/🎫 Typescript 2021. 9. 6. 17:05

[Typescript]: type, interface, generics 사용하기

1. type type PeopleType = { name: string age: number } type WindowStates = "open" | "closed" | "minimized"; type LockStates = "locked" | "unlocked"; type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9; type Dog = { name: string; tail?: { shakeTail?: () => string; }; hasMaster?: boolean; }; function sayHi(dog: Dog): string { return dog.tail?.shakeTail?.(); } Type의 property를 optional하게 지정할 수 있다. 2..
🌕 Front/🎫 Typescript 2021. 9. 6. 16:09

Typescript 생성자, public, private

[생성자] 1. 모든 class는 constructor를 가짐 2. constructor는 class로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당 클래스안에 컨스트럭터를 만들고 오브젝트를 생성할 때는 파라메터로 넣기만 하면 되는 장점이 있음 이거 자바랑 똑같은데 [access modifiers 접근제한자] 클라스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드 클라스 외부로부터의 접근을 통제 public: class선언할 때 디폴트임 private: 클라스내에서만 접근 가능 protcted: 클라스내부, 상속받은 자식 클라스에서 접근 가능 클래스내 프로퍼티에서도 접근제한자를 사용할 수 있음 private fullname: string 하면 1) 외부클래스에서 읽기/수정 불가능 2) 그..
🌕 Front/🎫 Typescript 2021. 9. 6. 16:06

[Typescript] 추가 제공 타입 (tuple, enum, any, void, never)

TypeScript 에서는 기본형 자료형, 참조형 자료형외에도 추가로 타입을 제공한다. 1. tuple 길이와 각 요소의 타입이 정해진 배열을 저장하는 타입 let arr:[string, number] = ["Hi",6]; arr[1].concat("!"); //Error, 'number'does not have'concat’ //정의하지않은 index 호출 시 오류 arr[3]="hello"; //Error, Property '3'does not exist on type'[string,number] 2. enum 특정 값들의 집합을 저장하는 타입 enumerable, 즉 열거 가능한 데이터 타입을 말한다. 데이터에 순서가 있는데, 그 순서에 맞게 값을 주고 싶을 때 사용한다. 순서는 상수로 매기며, 1..
🌕 Front/🎫 Typescript 2021. 9. 6. 11:32

[styled-components] 타입스크립트에서 사용하기

테마 정의 //styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { colors: { '--color-gray': string; '--color-gray800': string; '--color-gray700': string; }; } } //theme.ts import { DefaultTheme } from 'styled-components'; export const theme: DefaultTheme = { colors: { '--color-gray': 'rgba(58,58,58,1)', '--color-gray800': 'rgba(58,58,58,0.8)', '..
🌕 Front/⚛️ React JS 2021. 9. 2. 17:20

여행경로: DFD풀이

문제 설명 주어진 항공권을 모두 이용하여 여행경로를 짜려고 합니다. 항상 "ICN" 공항에서 출발합니다. 항공권 정보가 담긴 2차원 배열 tickets가 매개변수로 주어질 때, 방문하는 공항 경로를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 모든 공항은 알파벳 대문자 3글자로 이루어집니다. 주어진 공항 수는 3개 이상 10,000개 이하입니다. tickets의 각 행 [a, b]는 a 공항에서 b 공항으로 가는 항공권이 있다는 의미입니다. 주어진 항공권은 모두 사용해야 합니다. 만일 가능한 경로가 2개 이상일 경우 알파벳 순서가 앞서는 경로를 return 합니다. 모든 도시를 방문할 수 없는 경우는 주어지지 않습니다. from collections import defaultdi..
🐍 Python/🤔 Algorithm 2021. 8. 27. 18:00

단어변환: DFS, BFS 풀이

문제 설명 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거쳐 begin을 target으로..
🐍 Python/🤔 Algorithm 2021. 8. 26. 21:40

네트워크 DFS, BFS풀이

문제 설명 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오. 풀이1 - DFS def DFS(n, computers, visited, i): visited[i] = True for j in range(n): if computers[i][j..
🐍 Python/🤔 Algorithm 2021. 8. 25. 21:33

타겟넘버: DFD풀이

타겟 넘버 문제 설명 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 풀이1 answer = 0 def calc(index, numbers, target, value): global answer; if(index==len(numbers)): if(value==target): answer += 1 return return calc(index+1, numbers, target, value+numbers[index]) calc(inde..
🐍 Python/🤔 Algorithm 2021. 8. 25. 12:41

[npm] Node의 패키지 관리 도구, 자주 쓰는 명령어 모음

npm 이란? NPM은 Node.js를 위한 패키지 매니저와 설치 관리자로, 수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소입니다. NPM CLI를 사용하여 필요한 라이브러리나 도구를 쉽게 설치할 수 있으며, 프로젝트 관리를 위한 다양한 명령어를 제공합니다. Node.js를 설치하면 자동으로 NPM도 설치되며, 이는 패키지를 서로 공유하기 위함입니다. NPM은 세계에서 가장 큰 소프트웨어 라이브러리이며, 800,000개 이상의 코드 패키지를 보유하고 있습니다. 오픈소스 개발자들은 NPM을 사용하여 소프트웨어를 공유하며, 많은 기업들도 NPM을 이용하여 개인적인 개발을 관리합니다. NPM은 무료로 사용할 수 있습니다. npm을 이용해 패키지 설치하기 1. package.json 프로젝트의 정보와 ..
🌚 Back/🧩 Node.js 2021. 8. 21. 11:08

Firebase Cloud Function Deploy

파이어베이스 Cloud Function 사용법 1. funcions 폴더 생성(코딩 컨벤션) 2. Local 환경 내 firebase cli 설치 $ npm install -g firebase-tools $ firebase login --no-localhost $ firebase init //구성 파일을 모두 구비했으면 생략 가능 $ firebase deploy firebase deploy 오류 발생 구글 클라우드 플랫폼 함수 세부정보 로그에서 다음과 같은 오류가 계속 발생하고 있는 것을 발견했다. internal/modules/cjs/loader.js:1085:14) 세 가지 가설이 있다. 첫째. npm 꼬여서 문제가 발생했다? 1) npm 캐시삭제와 npm과 관련된 파일과 폴더를 모두 삭제하고 다시 ..
🌚 Back/✨ Firebase 2021. 8. 20. 14:33

[AWS] EC2 배포할 때 팁과 유의사항

EC2 배포 팁 1. 인스턴스 생성 후 running되기까지 5분, 아파치 display보이기까지 10분 정도 걸림 2. 502 Bad Gateway: 80번 포트로 접속, 3000으로 포워딩해줬는데, 3000이 아무것도 반환하지 않고 있었음; Nginx를 이용한 React 배포시 index.html을 랜더링 하고, static에 있는 bundling 되어있는 js와 css를 import하지 못하는 404 오류가 발생했다. nginx conf 값 두 군데 모두 바꿔주자. /etc/nginx/sites-available/default server { listen 80; location / { root /home/{user}/myapp/build; # root는 React build로 만든 build파일들의..
🚛 DevOps/📙 AWS 2021. 8. 19. 21:50

[CSS: flex box] flex item의 정렬과 간격 / justify-content /align-items/ align-content

사용예시 .container { display: flex; justify-content: center; align-items: flex-start; align-contents: center; } 1. justify-content : 메인 축 정렬과 아이템 사이의 간격을 제어한다. justify-content: 1) flex-start [default] 2) flex-end 3) center 4) space-between 5) space-around 6) space-evenly flex-direction(메인축 설정): row | row-reverse | column | column-reverse 2. align-items : flex item의 ‘교차 축’ 정렬을 제어한다. align-items: 1) ..
🌕 Front/✨ CSS 2021. 8. 10. 19:18

[React Hook 시리즈 3]: 10가지 Hook들 (useMemo, useRef 등)

1. useMemo() useMemo(() => value, deps), useMemo(fn, deps) const memoizedValue = useMemo(()=>computedExpensiveValue(a,b),[a,b]) - 랜더링 될 때마다 값을 계속 계산하지 않고, 이전에 계산된 값을 메모이제이션하여 불필요한 연산을 줄인다. - 새롭게 계산하는 기준은 두번째 인자, dependency에 적는다. import { useMemo, useState } from 'react'; const App = () => { console.log('리랜더링'); const [isOn, setIsOn] = useState(false); const [users, setUsers] = useState([ { activ..
🌕 Front/⚛️ React JS 2021. 8. 3. 17:28

key에 접근하는 2가지 방법. obj.key, obj['key']

1. 객체의 property에 접근하는 두 가지 방법cosnt obj = { name: 'junha'}obj.name obj['name']// 'junha' 2. object.key 방법의 문제점하이픈(-)이 들어간 property에 접근할 수 없다.obj.a-b// (obj.a) - bobj['b-c']// obj의 key 'a-b'에 접근  var a = { "a" : 1, "b-c": 2, "0d" : 3, // 선언 자체는 가능 "d0" : 4, 2: 5}console.log(a.a) // 1console.log(a.b-c) // ReferenceError: c is not definedconsole.log(a.0d) // SyntaxError: Invalid or unexpected..
🌕 Front/🌱 Vanilla JS 2021. 8. 3. 16:58

OAuth Dance

인터넷 서비스는 SaaS(Software as a Service)의 형태이다. 서비스 중에서 사용자가 필요한 일부만 사용할 수 있게 한다. Facebook이나 트위터가 세상에 널리 퍼지게된 이유 중에 하나가 외부 서비스에서도 Facebook가 트위터의 일부 기능을 사용할 수 있게 한 것이다. 외부 서비스와 연동되는 Facebook이나 트위터의 기능을 이용하기 위해 사용자가 반드시 Facebook이나 트위터에 로그인해야 하는 것이 아니라, 별도의 인증 절차를 거치면 다른 서비스에서 Facebook과 트위터의 기능을 이용할 수 있게 되는 것이다. 이런 방식은 Facebook이나 트위터 같은 서비스 제공자뿐만 아니라 사용자와 여러 인터넷 서비스 업체 모두에 이익이 되는 생태계를 구축하는데 기여하게 될 것이다...
🌕 Front/📑 Web Theory 2021. 8. 3. 08:38

[Firbase] 입문, 사용하는 이유

언제써? 1. 아이디어를 빠르게 테스트해야할 때 2. 서버, DB에 시간과 돈을 낭비하고 싶지 않을 때 백앤드 기능 포괄 기능 제공한다. = AWS amplify Firebase는 모든 플렛폼을 프로젝트 구축 시 자동적으로 만들어 준다. 또한 서버를 구축하기 위해서 리눅스 명령어를 알 필요도 없으며 도메인을 구입할 필요도 없고 개발하는 동안에는 서버를 구입할 필요 없다. 이를 통해 프론트엔드 개발자와 백엔드 개발의 경계가 모호해 질 것이며 적은 비용으로 매우 좋은 앱을 만들 수 있다. FireBase의 대표적인 기능 인증, 데이터베이스, 스토리지, 원격 구성, 푸시 알람이 있다 FireBase의 장점 1) 인증 시스템을 지원합니다. 인증은 Firebase 에서 로그인을 담당하는 부분입니다. 로그인을 담당..
🌚 Back/✨ Firebase 2021. 7. 23. 16:21