글쓰는 개발자

CSS는 다음과 같이 클래스명에 매핑시켜서 사용한다.// .tsximport './style.css'// .css.main { display: flex;} 이는 정석적이고 쉽고 간편한 CSS의 사용법이다.그런데 리액트같이 컴포넌트형 구조를 가지고 있다면 클래스 명의 충돌이 일어날수 있다. button-text 이라는 이름의 컴포넌트가 존재한다고 할때, 다른 페이지에 같은 이름의 button-text라는 클래스명을 가진 엘리먼트가 존재한다면, 여기서 css의 충돌이 일어나게 된다. 재사용을 위해 컴포넌트화 한 클래스의 경우 더이상 그 내부를 신경쓰지 않기 때문에 중복되는 이름이 발생활 확률이 높다.이를 방지하기 위해서 컴포넌트형 클래스 명 앞이나 뒤에 추가적인 이름을 붙여서 이러한 충돌을 피할수 있다.하지..

터미널에 nextjs 프로젝트를 생성하기 위한 명령어를 입력합니다.npx create-next-app@latest 넥스트 js 프로젝트 세팅을 위한 옵션 사용여부를 각각 체크해줍니다.What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to use ..

expo 프로젝트 생성 1. expo-cli를 설치합니다.npm install -g expo-cli 2. expo.dev에 로그인해서 Project 탭에 Create Project 버튼을 클릭해서 새로운 프로젝트를 생성한다. 3. PC에 project를 생성할 위치에 커맨드 창을 열고 expo.dev에 나타나는 명령을 하나씩 입력해서 새로운 프로젝트를 생성하고 expo.dev에 연결할수 있다. android APK 생성 1. apk build 명령을 입력한다.eas build --profile development --platform android 사용할 패키지명을 입력하고 키스토어도 새로 생성한다.What would you like your Android application id to be? … c..

1. 함수swift의 함수는 func로 시작한다func hello() { print("Hello")} 매개변수를 받아 문자열을 리턴하는 함수func printMessage(name: String, count: Int) -> String { return("\(name) is \(count) years old")} 함수가 단일 표현식을 가진다면 return 구문을 생략할 수 있다.func printMessage(name: String, count: Int) -> String { ("\(name) is \(count) years old")} 매개변수 앞에 따로 외부 매개변수명을 지정할수도 있다.func printMessage(userName name: String, age count: Int) -> Strin..

1. for-in 구문 swift의 for in 문은 다음과 같다.var array = [1, 2, 3, 4, 5]for index in array { print(index)} 이는 아래와 같이 범위문으로 변경 가능하다.for index in 1...5 { print(index)} index를 따로 사용할 필요가 없을 때는 밑줄로 생략도 가능하다.var sum = 0for _ in 1...5 { sum += 1}print(sum) 2. repeat while 반복문repeat while은 do while을 대체한다.var i = 0repeat { i += 1} while(i > 10)print(i) 3. switch 구문swift의 case문에는 break 문이 필요치 않다.let value = 1swi..

1. 옵셔널 타입변수를 선언할 때 ?를 사용해 옵셔널 선언이 가능하다.var index: Int? 이제 index는 정수 혹은 아무런 값도 할당되지 않을수 있다. 어떤 값도 할당되지 않을때 옵셔널은 nil 값을 갖는다.var index: Int?if index != nil { // 값이 할당되어 있다.} else { // 값이 할당되어 있지 않다.} 옵셔널 값을 사용하기 위해서는 ! 문구를 사용하여 강제 언래핑 해주어야 한다.var index: Int?index = 12if index != nil { print(index!)} else { print("index is nil")} 강제 언래핑 대신, 옵셔널로 할당된 값은 옵셔널 바인딩을 이용하여 임시 변수나 상수에 할당할 수 있다.var i..

1. 문자열 데이터 타입문자열은 변수, 상수, 표현식, 함수 호출을 조합하여 구성할 수 있다.var userName = "Kim"var count = 25var message = "\(userName) has \(count) apples."print(message) 결과Kim has 25 apples. 여러 줄의 문자는 삼중 따옴표 안에 넣어서 선언할 수 있다.var multiline = """ 안녕하세요 "김철수" 라고 합니다. 반갑습니다. """ print(multiline) 2. 상수와 변수변수는 var 키워드를 사용하여 선언하며, 상수는 let을 사용해서 선언한다.var userName = "Jim"let maxCount = 20 3. 튜플튜플은 여러 값을 하나의 항목으로 그루핑하는 ..

VS 코드에서 하나의 윈도우를 사용할때 comman + click 혹은 control + click으로 해당 라인이 정의된 파일을 열어주는 기능을 사용할수 있다. 해당 기능을 사용해 정의된 파일로 이동할때 이미 해당 파일이 열려있으면 내가 열어둔 파일창으로 이동한다. 하지만 만약 분할창(split window)를 사용하고 있다면 분할창에 열려있는 파일을 무시하고 내 현재 창에 새로운 창이 열린다. 왼쪽에는 react 컴포넌트창, 오른쪽에는 스타일창을 열어두고 작업하는 입장에서 불편하지 않을 수 없다. 그럴때 VS code에서 File - Properties - Settings에 들어가서 아래 옵션을 true로 바꾸어주면 split 윈도우에 열린 창까지 검사해서 이미 해당 파일이 열려있으면 해당 파일로 ..