티스토리

IT_World

검색하기

블로그 홈

IT_World

niniit.tistory.com/m

하나씩 공부하는 study log

구독자: 2

방명록 방문하기

주요 글 목록

[React] React에 대해 정리2 ✔ 다국어 페이지는 제공방식 SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보냄 서버는 이 정보를 이용하여 해당 언어로 된 문서 버전을 반환 반환된 문서는 lang 속성을 선언합니다. CSR의 경우 클라이언트 사이드에서 해당 언어 팩(JSON 등)을 가져와 출력 ✔ 브라우저의 동작 원리 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석하여 표시하는 것 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를.. 공감수 0 댓글수 0 2022. 5. 19.
[React] React에 대해 정리 ✔ React의 개념과 장점, 그리고 컴포넌트란 React는 UI를 구축을 위한 자바스크립트 프론트엔드 라이브러 주로 Single Page Application를 만들 때 사용 React의 장점에는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능 또한 다른 프레임워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가 쉽다. 여기서 컴포넌트란, 레고 블록과 같이 작은 단위로 만들어서 그것을 조립하는 것처럼 개발하는 방법 컴포넌트를 사용한다면 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있다. [정리] 개념: UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리 장점: virtual DOM을 사용해서 어플리케이션의 성능을 향상시킴 서버, 클라.. 공감수 0 댓글수 0 2022. 5. 19.
[React] 함수형 컴포넌트 함수형 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다.기존에 우리가 사용했던 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있다.아래에서 나오는 Hooks가 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 같은 기능을 사용할 수 있게 되었다. Hooks 란? 리액트 v16.8 로 업데이트되면서 추가된 기능으로서,함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. useState 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.함수형 컴포넌트 안에서 상태를 관리해야 하는 일이 생기면 이 Hooks를 이용하면 된다. js 파일 내에서 import React, .. 공감수 0 댓글수 0 2022. 4. 14.
[React] Signin form validation check 적용 내가 이해가는 선에서 가장 직관적인 방법을 찾아 유효성 검증을 적용해보았다. 구현하면서 Vue와 React의 데이터 바인딩 방식의 차이를 체감할 수 있었다. React는 데이터 흐름이 단방향이기 때문에 값이 변경될 때마다 state값을 다시 set을 하는 코드가 들어갔다. Vue같은 경우 2-way binding이었기 때문에 이런 부분을 신경쓸 필요가 없었다. React의 State를 사용하여 Form의 Error 정보 관리 UserId Form에 change가 있을 때마다, 정규식을 통해 validation check를 한 후 결과를 userIdError State에 저장한다. const [userId, setUserId] = useState(""); const [userIdError, setUserI.. 공감수 0 댓글수 0 2022. 4. 14.
[React] Login / Password password button 불 들어오기 완성 코드 mport styles from './Login.module.scss'; import { Link, useNavigate } from 'react-router-dom'; import { useState } from 'react'; function Login() { const navigate = useNavigate(); const [idValue, setIdValue] = useState(''); const [password, setPassword] = useState(''); const [disable, setDisable] = useState(true); const [opacity, setOpacity] = useState(0.5); const go.. 공감수 0 댓글수 0 2022. 4. 14.
[React] Webhook 위키피디아의 설명에 따르면 웹훅은 웹페이지 또는 웹앱애서 발생하는 특정 행동(이벤트)들을 커스텀 Callback으로 변환해주는 방법이다. 조금 더 풀어서 설명하자면, 일반적인 API(Polling)는 클라이언트가 서버를 호출하는 방식이다. 하지만 웹훅의 경우 서버에서 특정 이벤트가 발생했을 때 클라이언트를 호출하는 방식이며 "역방향 API"라고도 부른다. callback URL은 서버측에서 이벤트가 발생했을 때 클라이언트의 어느 URL로 데이터를 보낼지 정해놓은 주소라고 생각하면 된다. Webhook을 사용하는 이유 메일을 수신할 수 있는 웹앱의 클라이언트와 서버가 있다. 구현할 것은 서버측에서 메일을 수신하였을 경우 클라이언트 측으로 알림 메시지를 전달하는 것이다. 일반적인 API로 구현(Polling.. 공감수 0 댓글수 0 2022. 4. 12.
[React] event system 1. 이벤트 이름은 카멜 표기법으로 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 (컴포넌트에는 이벤트를 붙일 수 없음) 이벤트 핸들러의 this 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // rendering render() { return ( event button ) } // method constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange() { ... } h.. 공감수 0 댓글수 0 2022. 4. 8.
[leetcode] 64. Minimum Path Sum class Solution: def minPathSum(self, grid: List[List[int]]) -> int: m = len(grid) n = len(grid[0]) dx = [0, 1] dy = [1, 0] flag = [[False] * n for _ in range(m)] q = [] heapq.heappush(q, (grid[0][0], 0, 0)) flag[0][0] = True while True: cost, x, y = heapq.heappop(q) if x == m-1 and y == n-1: return cost for i in range(2): nx = x + dx[i] ny = y + dy[i] if nx >= m or ny >= n or flag[nx][ny]: conti.. 공감수 0 댓글수 0 2022. 4. 6.
[React] Checkbox 종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. 체크박스가 하나라도 선택되지 않은 상태: 확인 버튼 비활성 체크박스 전부 선택시 안내문구 사라짐 및 버튼 활성화 const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크); }.. 공감수 0 댓글수 0 2022. 4. 6.
[leetcode] 62. Unique Paths Solution 1 :최단거리 경우의수 class Solution: def uniquePaths(self, m: int, n: int) -> int: paths = [[0]*m for _ in range(n)] paths[0][0] = 1 for i in range(n): for j in range(m): if i==0 and j ==0 : continue paths[i][j] += paths[i-1][j] if i>0 else 0 paths[i][j] += paths[i][j-1] if j>0 else 0 return paths[i][j] Solution 2: 순열을 이용한 방법 같은 것 p개 q개 r개 있는 n개의 것을 순서를 생각하며 나열하는 경우의 수는 n! /(p! * q! * n!) (이렇게는.. 공감수 0 댓글수 0 2022. 4. 4.
[leetcode] 94. Binary Tree Inorder Traversal def inorderTraversal(self, root: TreeNode) -> List[int]: stack = [root] res = [] while stack: node = stack.pop() if node: stack.append(node.right) stack.append(node) stack.append(node.left) else: if stack: node = stack.pop() res.append(node.val) 공감수 0 댓글수 0 2022. 4. 4.
[leetcode] 83. Remove Duplicates from Sorted List class Solution: def deleteDuplicates(self, head: Optional[ListNode]) -> Optional[ListNode]: dta = ListNode(0) dta.next = head dataset = set() while head and head.next: dataset.add(head.val) while head.next and head.next.val in dataset : head.next = head.next.next head = head.next return dta.next 공감수 0 댓글수 0 2022. 4. 3.
[leetcode] 88. Merge Sorted Array class Solution: def merge(self, nums1: List[int], m: int, nums2: List[int], n: int) -> None: """ Do not return anything, modify nums1 in-place instead. """ del nums1[m:] nums1 += nums2[0:n] nums1.sort() 공감수 0 댓글수 0 2022. 4. 3.
[leetcode] 70. Climbing Stairs class Solution: def climbStairs(self, n: int) -> int: if n < 3: return n else : return self.climbStairs(n-1) + self._climbStairs(n-2) def _climStairs(self, n: int): if n not in self.cache.keys() : self.cache[n] = self.climbStairs(n) return self.cache[n] 공감수 0 댓글수 0 2022. 4. 2.
[leetcode] 39. Combination Sum class Solution: def combinationSum(self, candidates: List[int], target: int) -> List[List[int]]: result = [] def dfs(cansum,index,path): if cansum < 0 : return if cansum == 0 : result.append(path) return for i in range(index,len(candidates)): dfs(cansum - candidates[i],i, path + [candidates[i]]) dfs(target, 0, []) return result 공감수 0 댓글수 0 2022. 4. 1.
[leetcode]77. Combinations class Solution: def combine(self, n: int, k: int) -> List[List[int]]: rnglst = list(range(1,n+1)) cmblst = list(combinations(rnglst, k)) return cmblst 공감수 0 댓글수 0 2022. 3. 31.
[leetcode]78. Subsets class Solution: def subsets(self, nums: List[int]) -> List[List[int]]: result = [] def dfs(index,path) : result.append(path) for i in range(index, len(nums)): dfs(i + 1,path + [nums[i]]) dfs(0,[]) return result 공감수 0 댓글수 0 2022. 3. 30.
[leetcode] 22. Generate Parentheses class Solution: def generateParenthesis(self, n: int) -> List[str]: ''' type n = int ''' self.res = [] self.helper("",n,n) return self.res def helper(self, current,left, right) : if right == 0: self.res.append(current) else : if left > 0: self.helper(current + "(", left-1, right) if left < right : self.helper(current + ")", left, right-1) 공감수 0 댓글수 0 2022. 3. 29.
[leetcode] 69. Sqrt(x) class Solution: def mySqrt(self, x: int) -> int: return int(x**(1/2)) 공감수 0 댓글수 0 2022. 3. 28.
[leetcode] 67. Add Binary class Solution: def addBinary(self, a: str, b: str) -> str: return format(int(a,2) + int(b,2),'b') 공감수 0 댓글수 0 2022. 3. 27.
[leetcode] 53. Maximum Subarray class Solution: def maxSubArray(self, nums: List[int]) -> int: bstsum = -sys.maxsize crsum = 0 for num in nums : crsum = max(num, num + crsum) bstsum = max(crsum, bstsum) return bstsum 공감수 0 댓글수 0 2022. 3. 26.
[leetcode] 2. Add Two Numbers 공감수 0 댓글수 1 2022. 3. 24.
[leetcode] 28. Implement strStr() class Solution: def strStr(self, haystack: str, needle: str) -> int: if len(needle) =="" : return 0 else : return haystack.find(needle) 공감수 0 댓글수 0 2022. 3. 24.
[leetcode] 26. Remove Duplicates from Sorted Array class Solution: def removeDuplicates(self, nums: List[int]) -> int: nums_len = len(nums) cnt = 0 for i in range(1, nums_len): if nums[cnt] != nums[i]: cnt = cnt + 1 nums[cnt] = nums[i] return cnt + 1 공감수 0 댓글수 0 2022. 3. 23.
[leetcode] 27. Remove Element class Solution: def removeElement(self, nums: List[int], val: int) -> int: lennum = len(nums) while val in nums : nums.remove(val) return len(nums) 공감수 0 댓글수 0 2022. 3. 21.
[SQL/sqlite3] cmd 창에서 sqlite3 table 구조 출력해보기 os : Linux/Ubuntu(16.04) 간혹 서버에서 DB를 확인해야 하는데 database를 sqlite3을 사용하는 경우 자주 사용하는 명령어를 모아놨다. line 데이터베이스 행의 각 열은 그 자체로 한 행에 표시되며, 각 행은 열 이름, 등호 및 열 데이터로 구성 연속 레코드는 공백 행으로 구분 .mode line 다음은 라인 모드 출력의 예를 보여줌 . select * from sqlite_master; sqlite_master 테이블을 조회하여 테이블이 어떻게 생성이 되었는지를 확인 할 수 있다. .schema 테이블의 스키마에 대한 정보정보만 조회하고자 한다면 SQLite 명령 .schema로도 확인가능 .headers on|off 명령을 사용하면 SELECT 문에서 데이터를 조회하여 .. 공감수 0 댓글수 0 2021. 12. 15.
IMAP POP3 SMTP 정의 차이점 장단점 SMTP Simple Mail Transfer Protocol (SMTP)는 인터넷에서 이메일을 보내기 위해 이용되는 프로토콜로 사용하는 포트번호는 25번이다. 클라이언트-서버 간 통신, 서버-서버 간 통신을 모두 담당한다. SMTP는 메일을 발신하는 역할을 한다. SMTP는 텍스트 기반의 프로토콜로서 요구/응답 메시지뿐 아니라 모든 문자가 7bit ASCII로 되어있어야 한다. 따라서 8bit 이상의 코드를 사용하는 언어나 청부파일, 바이너리는 MIME(마임)이라고 불리는 방식을 통해 7bit로 변환되어 전달된다. 메시지가 생성되면 호출된 SMTP가 메시지를 받고 TCP를 이용하여 다른 호스트의 SMTP에게 전달한다. SMTP의 정의 SMTP (Simple Mail Transfer Protocol) 는.. 공감수 0 댓글수 0 2021. 12. 9.
[Golang] python to golang 파이썬에서 고랭 코드 변경 (1) 파이썬에서 고언어로 변경할 때 사용되는 함수들 python golang 뜻 os.getcwd() os.Getwd() 현재 커서가 위치해 있는 디렉터리 알려줌 for alphabet in alphabetList : for _, alphabet := range alphabetList { alphabetList에서 alphabet 하나씩 꺼내줌 re.sub（원본바꿀단어, 새로운단어 ,원본문자） strings.Replace(문장, 원본단어 , 새 단어 , -1) strings.Replace(문장, 원본단어 , 새 단어 , 1) 문자열 치환 (문자열 변경) -1은 모든 문장 name.strip() strings.Trim(name, " ") 맨 앞 맨 뒤 name공백 제거 ex ) name = " abcde " -.. 공감수 0 댓글수 0 2021. 12. 8.
[golang] Leetcode 66. Plus One 정수 배열로 표시 되는 큰 정수 가 주어집니다. digits여기서 각각 digits[i]은 정수 의 자릿수입니다. 숫자는 왼쪽에서 오른쪽 순서로 최상위에서 최하위 순으로 정렬됩니다. 큰 정수에는 선행 's가 포함되어 있지 않습니다 . 큰 정수를 1씩 증가시키고 결과 배열을 반환 합니다 . 예 1: 입력: 숫자 = [1,2,3] 출력: [1,2,4] 설명: 배열은 정수 123을 나타냅니다. 1씩 증가하면 123 + 1 = 124가 됩니다. 따라서 결과는 [1,2,4]여야 합니다. 예 2: 입력: 숫자 = [4,3,2,1] 출력: [4,3,2,2] 설명: 배열은 정수 4321을 나타냅니다. 1씩 증가하면 4321 + 1 = 4322가 됩니다. 따라서 결과는 [4,3,2,2]여야 합니다. 예 3: 입력: 숫자.. 공감수 0 댓글수 0 2021. 11. 17.
[Go lang] go-imap 깃허브 살펴보기 IMAP4rev1 이동 작성 라이브러리 클라이언트 및/또는 서버를 구축하는 데 사용할 수 있다. client code package main import ( "log" "github.com/emersion/go-imap/client" "github.com/emersion/go-imap" ) func main() { log.Println("Connecting to server...") // Connect to server c, err := client.DialTLS("mail.example.org:993", nil) if err != nil { log.Fatal(err) } log.Println("Connected") // Don't forget to logout defer c.Logout() // Log.. 공감수 0 댓글수 0 2021. 10. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.