전체 글

export default function Index() { const [count, setCount] = useState(0); const PrevCountRef = useRef(); useEffect(() => { console.log("work"); PrevCountRef.current = count; }); const PrevCount = PrevCountRef.current; console.log(count, PrevCount); return ( Now :{count} Before : {PrevCount} setCount(count + 1)}> up ); } 프로젝트를 진행하면서 이전 state값을 알아야 하는 경우가 발생했다. 공식 문서에서는 위의 예제와 같이 알려주고 있었다. function..

풀이 bfs로 구현 box = []를 하나의 판(?)이라고 생각하자. 이후 for문을 통해 box 안에 토마토의 가로 세로 배열이 들어간다. 만약 box[j][k] == 1 배열 안에 익은 토마토가 있다면 queue에 (i,j,k)값을 저장해준다. 이후, graph.append(box)를 통해 박스가 graph에 append되어 3차원 배열이 만들어진다. dx, dy, dz로 3차원 방향벡터를 만들어준다. bfs()에서 반복문으로 방향벡터를 통해 방문하여 방문한 값(xx,yy,zz)이 graph 안에 있고, 해당 값이 0(익지 않은 토마토)라면 해당 값에 이전값+1(날짜)를 해준 뒤 queue에 append해준다. 이후 반복문을 통해 graph의 값을 꺼내보자. if k == 0:만약 k 값이 0, 즉 ..

Non-null assertion operator 변수의 내부 값에 접근할때 TS 컴파일러는 항상 null, undefined 체크를 해준다. 이때, Non-null assertion operator(!)는 TypeScript에게 해당 속성이 null 일 수 있는 것처럼 보이지만 해당 값은 null이 들어오지 않는다고 확신해준다. optional chaining operator optional chaining operator (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. optional chaining 과 non-null assertion의 차이점 non-null assertion -> null, undefined 일 경..

오늘 처음으로 받은 업무에 코드를 짜고 첫 pull Request(PR)을 해봤다.🥳 그래서 공부한 branch 관리에 대해 정리해보려고 한다. git add . git commit -m"커밋 메시지" 먼저 작성 한 코드를 staging area에 올려놓기 그리고 git checkout -b sally 내 이름의 새로운 git branch를 만들고 git push origin sally sally branch에 push한다. 이후 github 페이지에서 pull Request요청을 한뒤 Merge pull request를 하면 main or dev에 내가 작성한 코드가 합쳐지게 된다.

마지막 4학년 2학기 학점연계 인턴십에 합격하게 되었다. 0. 지원동기 지원동기는 정말 명확하게 '현업경험'이 필요해서였다. 학생 개발자와 현업 개발자들의 차이는 유저가 들어가 있는 서비스에서 개발하는 게 아닐까 싶다. 대학생들 사이에서 조금이라도 유리하게 경험할 만한게 뭐가 있을까 하고 고민하던 중 추천받았던 게 ICT 인턴십이었다. (ICT 인턴십이 끝난 지금도, 대학생들에게 꼭 추천하고 싶은 인턴십이다 :)) 1. 서류 ict 인턴의 서류 지원은 딱 3군데만 지원할 수 있다. 일단 react를 공부했기에 직무스택에서 front-end, react로 필터링하여 회사를 골랐고, 회사와 내가 이 회사에 들어가 어떤 능력을 펼칠 수 있을지, 얼마나 성장시켜줄 수 있는 회사인지 등을 판단해 3군데를 확정하여..

Iamport는 PC/모바일 웹에서 PG사의 결제 연동을 도와주는 라이브러리다. (PG(사) : 이니시스, 나이스 페이먼츠 등과 같이 중간에서 온라인 지불과 결제대행을 하는 전자결제 대행사) Iamport를 활용해 몇 줄의 코드만으로 결제 서비스를 구현할 수 있어 개발자는 비지니스 로직과 서비스 자체에 집중할 수 있게 된다. const { IMP } = window; IMP.init('imp00000000'); // impAccount 관리자 페이지에서 가져온 가맹점 번호를 통해 IMP 객체를 init 해준다. IMP.request_pay(param, callback) IMP.request_pay는 param, callback 2개의 argument를 받는 함수다. IMP.request_pay( { pg..

Formik은 동기 및 비동기 양식 수준 및 필드 수준 유효성 검사를 지원하며, Yup을 통해 스키마 기반 양식 수준 유효성 검사를 수행할 수 있다. 즉 많은 input값을 작성할 때, 우리는 일일이 해당 input값에 대한 useState와 handleChange를 작성해야 될 것이다. 이렇게 되면 코드의 양은 증가할 것이고 더러워 질 것이다. 이런 귀찮은 작업을 Formik 라이브러리로 해결할 수 있다. 다음 코드를 통해 Formik & Yup에 대해 알아보자 // src/components/signup.js import React from "react"; import "./Signup.css"; import { useFormik } from "formik"; import * as Yup from "..

DFS는 깊이 우선 탐색이라고도 부르며 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘이다. DFS는 스택 자료구조(혹은 재귀 함수)를 이용하며, 구체적인 동작 과정은 다음과 같다. 탐색 시작 노드를 스택에 삽입하고 방문처리를 한다. 스택의 최상단 노드에 방문하지 않은 인접한 노드가 하나라도 있으면 그 노드를 스택에 넣고 방문 처리한다. 방문하지 않은 인접 노드가 없으면 스택에서 최상단 노드를 꺼낸다. 더 이상 2번의 과정을 수행할 수 없을 때까지 반복한다. def dfs(graph, v, visited): # 현재 노드를 방문 처리 visited[v] = True print(v, end=' ') # 현재 노드와 연결된 다른 노드를 재귀적으로 방문 for i in graph[v]: if not vis..

이진 탐색(binary search)이란, 정렬된 자료를 반으로 나누어 탐색하는 방법을 말한다. 자료는 오름차 순으로 정렬되어있어야 하는 전재가 깔려야 한다. 시간 복잡도는 O(logN)으로 순차 탐색과 비교했을때 퍼포먼스가 좋다. (순차탐색(linear search): 순서대로 찾는 방법. 순차탐색의 시간복잡도는 O(N))

정렬 (sorting)이란 , 데이터를 특정한 기준에 따라 순서대로 나열하는 것을 말한다. 데이터의 개수가 적을 때, 많을 때, 데이터의 범위가 특정 범위로 한정되어 있을때, 거의 정렬되어 있을 때,,, 등 과 같은 문제 상황에 따라 적절한 정렬 알고리즘이 공식처럼 사용된다. 1-1. 선택 정렬(Selection Sort) 처리되지 않은 데이터 중에서 가장 작은 데이터를 선택해 맨 앞에 있는 데이터와 바꾸는 것을 반복한다. 선택 정렬은 N번 만큼 가장 작은 수를 찾아서 맨 앞으로 보내야 한다. 1-2. 선택 정렬 시간복잡도 구현 방식에 따라 사소한 오차는 있지만, 전체 연산 횟수는 다음과 같다. N +(N-1)+(N-2)+...+2 이는 (N^2+ N-2)/2로 표현 할 수 있는데, 빅오 표기법에 따라서..