본문 바로가기

반응형

전체 글

프로그래머스 입양 시각 구하기(1) (HOUR) 이 문제는 데이트 형식의 데이터를 비교하려 하는데 기존 시, 분 단위가 나와있는 기존 데이터 형식 그대로 비교하는건 아닌거 같아서 MYSQL 문법을 찾아보니 역시나 연, 월, 일, 시, 분 등 원하는 형식의 데이터만 뽑을 수 있는 문법이 존재했다. https://extbrain.tistory.com/60 위의 링크에 자세히 나와있으니 참고하기 바란다. SELECT HOUR(DATETIME) AS HOUR, COUNT(DATETIME) AS COUNT FROM ANIMAL_OUTS WHERE HOUR(DATETIME) >= 9 AND HOUR(DATETIME) 더보기
프로그래머스 중성화 여부 파악하기 (IF) 이번 문제를 풀면서 하나의 칼럼 데이터 값이 A냐 B냐 에 따라 바뀌어야 되는데 IF 같은게 MYSQL 문법에 있을까 했는데 검색해보니 있었다. IF( 조건1 or 조건2, 조건 1 일때 내보낼 값, 조건 2일때 내보낼 값 ) 이라 생각하고 사용하면 되겠다. SELECT ANIMAL_ID, NAME, IF(SEX_UPON_INTAKE LIKE '%NEUTERED%' OR SEX_UPON_INTAKE LIKE '%SPAYED%','O','X') AS '중성화' from ANIMAL_INS order by ANIMAL_ID 더보기
프로그래머스 NULL 처리하기 (COALESCE) 회사에서 여유 시간이 남아 서버쪽 코드와 sql 쿼리 날리고 있는 부분을 봤는데 3년전 개발학원에서 잠시 봤던 SQL 지식으로는 뭐가 뭔지 모르겠어서 프로그래머스에 있는 SQL 문제들을 풀면서 감을 익히려고 보다가 내 기준 신선하거나 처음 보는 문법, 방법 등을 만날 때 마다 정리하려고 작성한다. --> 헷갈리거나 기억 안 나면 바로 내 글 보러 오기위해 ㅋㅋ 포인트는 "NAME" 칼럼의 값이 NULL 이면 "No name" 으로 바꾸어 주어라 이다. 그럼 필요한 것이 쿼리에 요런 저런 조건을 걸면서 뽑아온 값 중에 NULL인지 아닌지를 체크하는 과정만 추가하면 되는 것이다. SELECT ANIMAL_TYPE, COALESCE(NAME, 'No name'), SEX_UPON_INTAKE FROM ANIM.. 더보기
Tailwindcss 세팅 및 글로벌 스타일링 Tailwindcss는 css 프레임워크로 이미 많은 수의 사용자들이 사용하고 있다. 이전에는 이미 bootstrap 으로 베이스가 짜여져 있는 프로젝트들을 봐왔는데 앞으로 맡게 될 새로운 프로젝트들이 대부분 Tailwindcss를 기반으로 작성되어 있기 때문에 직접 한 번 사용해보고 있다. 우선 Tailwindcss 공식사이트에 가보면 Docs에 설치부터 사용법까지 아주 잘 나와있다. 리액트 프로젝트를 만들어 준 뒤에 npm install -D tailwindcss npx tailwindcss init tailwind.config.js 라는 파일이 생성될 것이다. 그 뒤 content에 css를 적용시킬 파일들이 있는 경로를 적어주면 되겠다. (이것도 docs)에 나와있다. @tailwind base;.. 더보기
Eslint 설정 비활성화 하는 방법 새로운 프로젝트를 살펴보고 적응할 겸 작업을 해보고 있는데 eslint 규칙들이 시도 때도 없이 에러를 뱉어대길래 물론 룰대로 지켜서 작업하는게 맞지만 몇몇 에러는 구글링해도 고치는 법을 몰라서 아예 eslint를 무시, 비활성화 하는 방법을 찾다가 매우 쉬운 방법이 있어서 정리한다. 아래와 같이 '.eslintignore' 파일을 만들어준 뒤에 본인이 eslint 규칙을 적용시키지 않을 파일이 들어있는 경로를 입력해주면 된다. eslint 비활성화에는 다른 방법들도 많은데 파일 상단에 특정문구를 적고 또 다른 방법들이 있지만 적용이 되는것도 있고 없는것도 있었는데 위 방법이 가장 편하고 직설적이어서 좋다. 더보기
Node.js 버전관리 변경 및 설치 (n) 이번에 새로운 회사로 이직을 하게 되면서 새로운 환경에서 새롭게 다시 회사에 맞는 세팅 및 환경설정을 진행하고 있다. 현재 날짜 기준 node.js의 lts 버전은 16.대 버전인데 14.대 버전으로 바꾸어줄 필요가 있어 검색해보다 쉬운 방법이 있어 정리해본다. 'n'패키지를 활용하면 되겠다. https://www.npmjs.com/package/n 바로 설치를 해주고 난 뒤에 sudo npm install -g n 잘 설치가 되었는지 확인해준 뒤에 n --help 를 통해 많은 명령어들을 볼 수 있겠지만 아래 정도의 명령어만 알고 있어도 충분히 원하는대로 버전을 바꿀 수 있을 것이다. n latest : 최신 버전 n lts : lts 노드 버전 n x.x.x : 특정 x 버전 n ls : 설치된 버전.. 더보기
React Typescript Redux (Reducer 세팅하기) 리덕스를 리액트 환경에서 타입스크립트를 곁들여서 세팅하는 걸 처음부터 한번 해보자 우선 필요한 패키지들을 설치한다. npm install --save @types/react-redux axios react-redux redux redux-thunk 기존에 react-redux, redux, redux-thunk, axios 까지 같다면 @types/react-redux 가 새로 추가되었다고 보면 된다. npm 패키지 api를 이용해서 데이터를 가져와볼 건데 https://registry.npmjs.org/-/v1/search?text=react 위의 주소로 text 파라미터 뒤에 우리가 입력한 값이 들어간 패키지가 있으면 배열로서 그 데이터를 가져올 것이고 그 패키지 데이터들을 repository라고 프.. 더보기
React TypeScript 2가지 Component Type Annotation 리액트와 타입스크립트를 합쳐서 같이 개발할 때 컴포넌트들을 수도 없이 많이 만들 테니 컴포넌트를 정의할 때의 Annotation 방법 2가지에 대해 간단히 알아보자. interface ChildProps { color?: string; onClick: () => void; } // 1. export const Child = ({color, onClick}: ChildProps) => { return {color} Click Me } // 2. export const ChildAsFC : React.FC = ({color, onClick} ) => { return {color} Click Me } 보게 되면 ChildProps 가 붙는 방식이나 props에서 비구조화로 꺼내와 줄 때 차이들이 보인다. 단순.. 더보기

반응형